@nolwenture/formik-jsonschema-form 1.0.0-beta.9 → 1.0.1

package/README.md

@@ -630,7 +630,7 @@ const collapsibleSchema: Schema = {
 };
 
 const collapsibleUiSchema: UiSchema = {
-  colObject: { props: { isCollapsible: true } },
+  colObject: { "ui:options": { isCollapsible: true } },
 };
 ```
 
@@ -989,6 +989,10 @@ const uiSchema = {
 };
 ```
 
+In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
+
+Wildcard `"*"` and `hidden fields` cannot be combined.
+
 Order can be used to group items inside object to sections.
 
 ```tsx
@@ -1008,9 +1012,27 @@ const uiSchema = {
 };
 ```
 
-In this example, the resulting order would be ["secondField", "firstField", "thirdField"].
+In `recursive fields` order can be given to the items themselves as well as to the fields the item is holding.
+
+```tsx
+const uiSchema: UiSchema = {
+  definitions: {
+    Field: {
+      "ui:order": ["jelly", "*", "bean"], // gives order to the additional items
+      properties: {
+        "ui:order": ["ui:title", "additionalProperties", "_fieldType", "type"], // gives order to the fields inside the additional item
+      },
+      jelly: {
+        "ui:help": "I should be first!",
+        "ui:order": ["additionalProperties", "_fieldType", "ui:title", "type"], // gives order to the fields inside "jelly" items
+      },
+      bean: { "ui:help": "I should be last!" },
+    },
+  },
+};
+```
+
 
-Wildcard `"*"` and `hidden fields` cannot be combined.
 
 ## Props
 

package/dist/cjs/Form/Form.js

@@ -3,25 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Form = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const formik_1 = require("formik");
-const utils_1 = require("../utils");
 const FormRegistry_1 = require("./FormRegistry");
 const components_1 = require("./components");
 const fields_1 = require("./fields");
 const templates_1 = require("./templates");
 const Form = (props) => {
-    (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
-        "schema",
-        "onSubmit",
-        "uiSchema",
-        "className",
-        "formData",
-        "className",
-        "children",
-        "fields",
-        "formContext",
-        "components",
-        "hideUnmarkedAdditionalProperties",
-    ]);
     const { isSubmitting } = (0, formik_1.useFormikContext)();
     const { schema, uiSchema = {}, className, children, fields = {}, templates = {}, components = {}, formContext = {}, useItemsAsAdditionalItems = false, hideUnmarkedAdditionalProperties = false, hideSubmit = false, } = props;
     const schemaDefinitions = schema.definitions;

package/dist/cjs/Form/FormRegistry.js

@@ -12,6 +12,7 @@ exports.FormRegistry = react_1.default.createContext({
     definitions: {},
     uiSchemaDefinitions: {},
     formContext: {},
+    formLocalization: {},
     useItemsAsAdditionalItems: false,
     hideUnmarkedAdditionalProperties: false,
 });

package/dist/cjs/Form/components/Clickable.js

@@ -1,18 +1,11 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Clickable = void 0;
+exports.Clickable = exports.ClickableEl = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
-const ClickableEl = styled_components_1.styled.button `
-  background: none;
-  color: inherit;
-  border: none;
-  padding: 0;
-  font: inherit;
-  outline: inherit;
-  cursor: pointer;
+exports.ClickableEl = styled_components_1.styled.button `
 `;
 const Clickable = ({ children, onClick, onMouseUp = () => { }, onMouseDown = () => { }, innerRef = () => { }, className, ariaLabel, ariaExpanded = false, ariaControls, id, }) => {
-    return ((0, jsx_runtime_1.jsx)(ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
+    return ((0, jsx_runtime_1.jsx)(exports.ClickableEl, { type: "button", onClick: onClick, onMouseUp: onMouseUp, onMouseDown: onMouseDown, ref: (r) => innerRef(r), className: className, "aria-expanded": ariaExpanded, "aria-label": ariaLabel, "aria-controls": ariaControls, id: id, children: children }));
 };
 exports.Clickable = Clickable;

package/dist/cjs/Form/components/ErrorMessage.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };

package/dist/cjs/Form/components/FieldInfo.js

@@ -5,16 +5,16 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
 exports.FieldInfoBoxElement = styled_components_1.styled.div `
-  transition: opacity 0.5s;
-  position: absolute;
-  z-index: 1080;
-  opacity: 0;
-  visibility: hidden;
-  margin: 0;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  word-wrap: break-word;
+  margin: 0;
   min-width: max-content;
+  opacity: 0;
+  position: absolute;
+  transition: opacity 0.5s;
+  visibility: hidden;
+  word-wrap: break-word;
+  z-index: 1080;
 
   top: ${({ position }) => position === "bottom" ? "140%" : position === "top" ? "auto" : "50%"};
   bottom: ${({ position }) => position === "top"
@@ -55,21 +55,25 @@ exports.FieldInfoBoxArrowElement = styled_components_1.styled.div `
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-top-color: ${({ position, theme }) => position === "top" ? theme.intent.none : "transparent"};
-  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.intent.none : "transparent"};
-  border-right-color: ${({ position, theme }) => position === "right" ? theme.intent.none : "transparent"};
-  border-left-color: ${({ position, theme }) => position === "left" ? theme.intent.none : "transparent"};
+  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.none : "transparent"};
+  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.none : "transparent"};
+  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.none : "transparent"};
+  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.none : "transparent"};
   border-width: 5px;
   margin-left: -5px;
 `;
 exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
-  background: ${(props) => props.theme.color.intent.default.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
-  border-radius: ${(props) => props.theme.borderRadius.none};
-  color: ${(props) => (0, polished_1.readableColor)(props.theme.color.text.default)};
-  cursor: default;
-  padding: ${(props) => `${props.theme.spacing.xs} ${props.theme.spacing.s}`};
-  text-align: center;
+    background: ${(props) => props.theme.color.background.default};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+    color: ${(props) => props.theme.color.text.default};
+    cursor: default;
+    font-size: ${(props) => props.theme.typography.size.small};
+    line-height: ${(props) => props.theme.typography.lineHeight.small};
+    max-width: 30ch;
+    padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    text-align: left;
+    white-space: pre-wrap;
 `;
 exports.FieldInfoContainer = styled_components_1.styled.a `
   position: relative;
@@ -86,6 +90,7 @@ exports.FieldInfoContainer = styled_components_1.styled.a `
   padding: ${(props) => `0 ${props.theme.spacing.s}`};
   text-decoration: unset;
   margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
+  width: fit-content;
 
   &:active,
   &:focus {

package/dist/cjs/Form/components/FieldInput.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");

package/dist/cjs/Form/components/Form.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -29,26 +39,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FormButton = exports.FormButtonWrapper = exports.Form = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const formik = __importStar(require("formik"));
-const common_1 = require("../styles/common");
+const component_library_1 = require("@nolwenture/component-library");
 exports.Form = (0, styled_components_1.default)(formik.Form) `
-  ${common_1.commonCheckboxStyles}
-
-  ${common_1.commonRadioStyles}
-
-    color: ${(props) => props.theme.color.text.default};
+  color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-
-  ${common_1.commonButtonStyles}
-
-  ${common_1.commonInputStyles}
-
-    ${common_1.commonSelectStyles}
-
-    :focus {
+  
+  :focus {
     ${(props) => props.theme.focus.default};
   }
 `;
 exports.FormButtonWrapper = styled_components_1.default.div ``;
-exports.FormButton = styled_components_1.default.button `
-  font-family: ${(props) => props.theme.typography.fontFamily.base};
-`;
+exports.FormButton = (0, styled_components_1.default)(component_library_1.Button) ``;

package/dist/cjs/Form/components/Icon.js

@@ -2,6 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Icon = void 0;
 const styled_components_1 = require("styled-components");
-exports.Icon = styled_components_1.styled.div `
-  padding: ${(props) => `0 ${props.theme.spacing.s}`};
-`;
+exports.Icon = styled_components_1.styled.div ``;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.components = void 0;
 const fields_1 = require("../fields");

package/dist/cjs/Form/fields/AnyField/index.js

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -3,7 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.AnyFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
-exports.AnyFieldWrapper = styled_components_1.styled.div `
-    ${common_1.commonInputStyles}
-    ${common_1.commonSelectStyles}
-`;
+exports.AnyFieldWrapper = (0, styled_components_1.styled)(common_1.CommonFieldWrapper) ``;

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

@@ -7,8 +7,10 @@ const formik_1 = require("formik");
 const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
-const appendArray = (values) => {
-    return values ? [...values, ""] : [""];
+const styledComponents_1 = require("./styledComponents");
+const appendArray = (values, schema) => {
+    const newItem = (0, utils_1.getDefaultValueForType)(schema?.type);
+    return values ? [...values, newItem] : [newItem];
 };
 const removeFromArray = (values, index) => {
     return [...values.slice(0, index), ...values.slice(index + 1)];
@@ -32,12 +34,12 @@ const moveInArray = (values, index, direction) => {
     }
 };
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, 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,19 +101,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;
-    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...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)(ArrayFieldTemplate, { ...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: {
+    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)(styledComponents_1.SelectFieldInputWrapper, { 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)(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, { id: value?.[index + schemas.items.length]?.name, ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + schemas.items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && ((0, jsx_runtime_1.jsx)(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
+                                    index < value?.slice(schemas.items.length).length - 1 && ((0, jsx_runtime_1.jsx)(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + schemas.items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)) }), schemas.additionalItems && !preventManipulation && ((0, jsx_runtime_1.jsx)(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value, schemas.additionalItems)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
 };
 exports.ArrayField = ArrayField;
 function prepareChildSchema(childSchema, parentSchema) {

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -3,10 +3,11 @@ 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 = exports.SelectFieldInputWrapper = void 0;
 const styled_components_1 = __importDefault(require("styled-components"));
 const styledComponents_1 = require("../ObjectField/styledComponents");
-exports.ArrayFieldList = styledComponents_1.ObjectFieldList;
+const common_1 = require("../../styles/common");
+exports.SelectFieldInputWrapper = (0, styled_components_1.default)(common_1.CommonFieldWrapper) ``;
 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

@@ -8,12 +8,15 @@ const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const utils_1 = require("../../../utils");
 const BooleanField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { FieldInput, BooleanFieldWrapper }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(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)();
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...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: () => {
+    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,
                             [name]: !values?.[name],

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));

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

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.BooleanFieldWrapper = void 0;
 const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
-exports.BooleanFieldWrapper = styled_components_1.styled.div `
+exports.BooleanFieldWrapper = (0, styled_components_1.styled)(common_1.CommonCheckboxStyles) `
   align-items: center;
   color: ${(props) => props.theme.color.text.default};
   cursor: pointer;
@@ -11,8 +11,6 @@ exports.BooleanFieldWrapper = styled_components_1.styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.s};
 
-  ${common_1.commonCheckboxStyles}
-
   & > input[readonly], & > input[readonly] ~ span {
     pointer-events: none;
   }

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

@@ -6,12 +6,15 @@ const react_1 = require("react");
 const utils_1 = require("../../../utils");
 const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
-const styledComponents_1 = require("./styledComponents");
+const common_1 = require("../../styles/common");
 const DateField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...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" }) }) }));
+    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)(common_1.CommonFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, type: "date" }) }) }));
 };
 exports.DateField = DateField;

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

@@ -15,13 +15,23 @@ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (
 }) : function(o, v) {
     o["default"] = v;
 });
-var __importStar = (this && this.__importStar) || function (mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
-    __setModuleDefault(result, mod);
-    return result;
-};
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.fields = exports.components = void 0;
 exports.components = __importStar(require("./styledComponents"));