@nolwenture/formik-jsonschema-form 1.0.0-beta.3 → 1.0.0-beta.30

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/components/Clickable.js

@@ -4,13 +4,6 @@ exports.Clickable = 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;
 `;
 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 }));

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,30 +55,34 @@ 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.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;
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   background: none;
   outline: none;
   cursor: pointer;
   border: ${(props) => `${props.theme.strokeWidth.thin} solid
-      ${props.theme.border.default}`};
+      ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   line-height: 1em;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -89,8 +93,8 @@ exports.FieldInfoContainer = styled_components_1.styled.a `
 
   &:active,
   &:focus {
-    color: ${(props) => (0, polished_1.readableColor)(props.theme.text.default)};
-    background: ${(props) => props.theme.text.default};
+    color: ${(props) => (0, polished_1.readableColor)(props.theme.color.text.default)};
+    background: ${(props) => props.theme.color.text.default};
     ${exports.FieldInfoBoxElement} {
       opacity: 1;
       visibility: visible;

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

@@ -15,40 +15,50 @@ 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.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+exports.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
 const formik = __importStar(require("formik"));
 exports.FieldWrapper = styled_components_1.styled.div `
-    margin: ${(props) => `${props.theme.spacing.s} 0`};
-    color: ${(props) => props.theme.text.default};
+  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  color: ${(props) => props.theme.color.text.default};
 `;
 exports.FieldTitle = styled_components_1.styled.label `
-    font-size: ${(props) => props.theme.typography.size.base};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-weight: ${(props) => props.theme.typography.weight.medium};
-    margin-right: ${(props) => props.theme.spacing.s};
-    color: ${(props) => props.theme.text.default};
+  font-size: ${(props) => props.theme.typography.size.base};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-weight: ${(props) => props.theme.typography.weight.medium};
+  margin-right: ${(props) => props.theme.spacing.s};
+  color: ${(props) => props.theme.color.text.default};
 `;
 exports.FieldDescription = styled_components_1.styled.p `
-    color: ${(props) => props.theme.text.default};
-    margin: 0;
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.base};
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.base};
 `;
 exports.FieldHelp = styled_components_1.styled.p `
-    color: ${(props) => props.theme.text.default};
-    margin: 0;
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    font-size: ${(props) => props.theme.typography.size.small};
+  color: ${(props) => props.theme.color.text.default};
+  margin: 0;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
 `;
 /*
  * Works like Formik field, but "as" props needs to be given with "formikAs", since styled components uses as.
@@ -57,3 +67,8 @@ exports.FieldHelp = styled_components_1.styled.p `
 exports.FieldInput = (0, styled_components_1.styled)(({ formikAs, ...props }) => {
     return (0, jsx_runtime_1.jsx)(formik.Field, { ...props, as: formikAs });
 }) ``;
+exports.SelectFieldInput = (0, styled_components_1.styled)(exports.FieldInput) `
+  &[readonly] {
+    pointer-events: none;
+  }
+`;

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 };
 };
@@ -31,22 +41,22 @@ const styled_components_1 = __importDefault(require("styled-components"));
 const formik = __importStar(require("formik"));
 const common_1 = require("../styles/common");
 exports.Form = (0, styled_components_1.default)(formik.Form) `
-    ${common_1.commonCheckboxStyles}
+  ${common_1.commonCheckboxStyles}
 
-    ${common_1.commonRadioStyles}
+  ${common_1.commonRadioStyles}
 
-    color: ${(props) => props.theme.text.default};
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    color: ${(props) => props.theme.color.text.default};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
 
-    ${common_1.commonButtonStyles}
+  ${common_1.commonButtonStyles}
 
-    ${common_1.commonInputStyles}
+  ${common_1.commonInputStyles}
 
     ${common_1.commonSelectStyles}
 
     :focus {
-        ${(props) => props.theme.focus.default};
-    }
+    ${(props) => props.theme.focus.default};
+  }
 `;
 exports.FormButtonWrapper = styled_components_1.default.div ``;
 exports.FormButton = styled_components_1.default.button `

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/ArrayField/ArrayField.js

@@ -7,8 +7,9 @@ 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 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 +33,12 @@ const moveInArray = (values, index, direction) => {
     }
 };
 const ArrayField = (props) => {
-    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, components: { FieldInput, 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];
@@ -98,16 +99,32 @@ const ArrayField = (props) => {
     // Backwards compatibility ends
     const { disabled } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return schema.anyOf !== undefined ? ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
-            ...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: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items, 
+    const preventManipulation = disabled || schema.readOnly;
+    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)(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: additionalItems && typeof additionalItems !== "boolean"
-                                    ? additionalItems
-                                    : {}, uiSchema: {
-                                    disabled,
-                                    ...(uiSchema?.[index + items.length] || uiSchema?.items),
-                                } }), (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 && ((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, schemas.additionalItems)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
 };
 exports.ArrayField = ArrayField;
+function prepareChildSchema(childSchema, parentSchema) {
+    if (!childSchema || typeof childSchema === "boolean") {
+        return {};
+    }
+    if (parentSchema.readOnly) {
+        return { ...childSchema, readOnly: parentSchema.readOnly };
+    }
+    return childSchema;
+}

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,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

@@ -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, { ...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

@@ -5,11 +5,15 @@ const styled_components_1 = require("styled-components");
 const common_1 = require("../../styles/common");
 exports.BooleanFieldWrapper = styled_components_1.styled.div `
   align-items: center;
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   cursor: pointer;
   display: flex;
   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

@@ -8,10 +8,13 @@ const hooks_1 = require("../../hooks");
 const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 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, { ...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)(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/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"));