@nolwenture/formik-jsonschema-form 1.0.0-beta.4 → 1.0.0-beta.7

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

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (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"));
@@ -57,3 +57,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/fields/ArrayField/ArrayField.js

@@ -32,7 +32,7 @@ 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: { ArrayFieldTemplate, FieldTemplate }, components: { SelectFieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, 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]);
@@ -98,16 +98,28 @@ 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;
+    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: {
+                                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: {
+                            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),
-                                } }), (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 ?? "+" }))] }));
+                                } }), !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 ?? "+" }))] }));
 };
 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/BooleanField/BooleanField.js

@@ -13,7 +13,7 @@ const BooleanField = (props) => {
     const { name, uiSchema } = props;
     const { label, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const { values, setValues } = (0, formik_1.useFormikContext)();
-    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: () => {
+    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: () => {
                         setValues({
                             ...values,
                             [name]: !values?.[name],

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

@@ -12,4 +12,8 @@ exports.BooleanFieldWrapper = styled_components_1.styled.div `
   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

@@ -12,6 +12,6 @@ const DateField = (props) => {
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
     const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
-    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" }) }) }));
+    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" }) }) }));
 };
 exports.DateField = DateField;

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

@@ -27,6 +27,6 @@ const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
+    return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(MultipleChoiceFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name, enums: enums, style: style, value: value, form: form }) }));
 };
 exports.MultipleChoiceField = MultipleChoiceField;

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

@@ -11,6 +11,8 @@ exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledCo
     ${common_1.commonCheckboxStyles}
     ${common_1.commonRadioStyles}
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    flex-wrap: wrap;
+    justify-content: start;
 `;
 exports.MultipleChoiceFieldElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldElement) ``;
 exports.MultipleChoiceFieldInputElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldInputElement) ``;

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

@@ -59,7 +59,7 @@ const ObjectField = (props) => {
                     const childSchema = properties?.[child];
                     if (!childSchema)
                         return undefined;
-                    return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+                    return ((0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child] }, child));
                 }
                 else {
                     const { title, fields, collapsible } = child;
@@ -67,14 +67,12 @@ const ObjectField = (props) => {
                             const childSchema = properties?.[child2];
                             if (!childSchema)
                                 return undefined;
-                            return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                            return ((0, jsx_runtime_1.jsx)(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child2] }, child2));
                         }) }, fields.join("_")));
                 }
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                Object.entries(additionalValues || {}).map(([childName]) => ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
-                                ? schema.additionalProperties
-                                : {}, uiSchema: uiSchema?.[childName] }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                Object.entries(additionalValues || {}).map(([childName]) => ((0, jsx_runtime_1.jsxs)(ObjectFieldItem, { children: [(0, jsx_runtime_1.jsx)(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: uiSchema?.[childName] }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
                                 onClick: () => {
                                     const { [childName]: _removedProperty, ...newValue } = value;
@@ -94,3 +92,12 @@ const ObjectField = (props) => {
                 })] }));
 };
 exports.ObjectField = ObjectField;
+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/RadioField/RadioField.js

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

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

@@ -14,6 +14,10 @@ exports.RadioFieldContainer = styled_components_1.styled.div `
 exports.RadioFieldElement = styled_components_1.styled.label `
   display: inline-flex;
   align-items: center;
+
+  &:has(input[readonly]) {
+    pointer-events: none;
+  }
 `;
 exports.RadioFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
   margin: unset;

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

@@ -9,7 +9,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const hooks_1 = require("../../hooks");
 const styledComponents_1 = require("./styledComponents");
 const StringField = (props) => {
-    const { templates: { FieldTemplate }, components: { FieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { templates: { FieldTemplate }, components: { FieldInput, SelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema = {}, schema } = props;
     const { type, placeholder, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
@@ -20,7 +20,8 @@ const StringField = (props) => {
         : { "data-fjsf-number": name };
     switch (enums?.type) {
         case "select":
-            return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(FieldInput, { type,
+            return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.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);
                             const selectedValue = selectedOption
@@ -33,6 +34,7 @@ const StringField = (props) => {
         default:
             return ((0, jsx_runtime_1.jsx)(FieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsx)(styledComponents_1.StringFieldWrapper, { children: (0, jsx_runtime_1.jsx)(FieldInput, { type,
                         placeholder,
+                        readOnly: props.schema.readOnly,
                         ...inputProps, name: name }) }) }));
     }
 };

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

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

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

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

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

@@ -33,6 +33,10 @@ exports.ToggleFieldLabel = styled_components_1.styled.label `
   position: relative;
   display: inline-block;
   width: 2rem;
+
+  &:has(input[readonly]) {
+    pointer-events: none;
+  }
 `;
 exports.ToggleFieldInputElement = (0, styled_components_1.styled)(FieldInput_1.FieldInput) `
   opacity: 0;

package/dist/cjs/FormView/FormView.js

@@ -1,12 +1,20 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FormView = void 0;
+exports.FormView = exports.FormWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
 const utils_1 = require("../utils");
 const fields_1 = require("./fields");
 const components_1 = require("./components");
 const templates_1 = require("./templates");
 const FormViewRegistry_1 = require("./FormViewRegistry");
+exports.FormWrapper = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    padding: ${(props) => props.theme.spacing.xxxxxl};
+`;
 const FormView = (props) => {
     (0, utils_1.warnFromUnsupportedKeys)("Form", props, [
         "schema",
@@ -37,6 +45,6 @@ const FormView = (props) => {
     };
     const { Form: FormEl } = registry.components;
     const SchemaField = registry.fields.SchemaField;
-    return ((0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.FormWrapper, { children: (0, jsx_runtime_1.jsx)(FormViewRegistry_1.FormViewRegistry.Provider, { value: registry, children: (0, jsx_runtime_1.jsx)(FormEl, { className: className, children: (0, jsx_runtime_1.jsx)(SchemaField, { name: "", schema: schema, uiSchema: uiSchema, values: values }) }) }) }));
 };
 exports.FormView = FormView;

package/dist/cjs/FormView/components/Field.js

@@ -1,13 +1,105 @@
 "use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
-const styled_components_1 = require("styled-components");
-exports.FieldWrapper = styled_components_1.styled.div ``;
-exports.FieldTitle = styled_components_1.styled.label `
-  font-size: ${(props) => props.theme.typography.size.base};
+exports.MultipleChoiceFieldValue = exports.BooleanFieldValue = exports.MultipleChoiceFieldWrapper = exports.BooleanFieldWrapper = exports.EJSFieldValue = exports.ArrayFieldItem = exports.TextAreaValue = exports.StringFieldValue = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const styled_components_1 = __importDefault(require("styled-components"));
+const styledComponents_1 = require("../../Form/fields/MultipleChoiceField/styledComponents");
+const getStyle_1 = require("../../utils/getStyle");
+exports.FieldWrapper = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: clamp(20rem, 100%, 70rem);
+    margin: ${(props) => `${props.theme.spacing.l} 0`};
+`;
+exports.FieldTitle = styled_components_1.default.label `
+    color: ${(props) => props.theme.color.text.default};
+    display: inline-block;
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-size: ${(props) => props.theme.typography.size.h3};
+    font-weight: ${(props) => props.theme.typography.weight.bold};
+    margin: ${(props) => `${props.theme.spacing.xs} 0 0 0`};
+    border-top: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.text.default}`};
+    padding-top: ${(props) => props.theme.spacing.s};
+    width: 100%;
+`;
+exports.FieldDescription = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    font-weight: ${(props) => props.theme.typography.weight.normal};
+    font-style: italic;
+    font-size: ${(props) => props.theme.typography.size.large};
+    margin-bottom: ${(props) => props.theme.spacing.xs};
+    max-width: 66ch;
+`;
+exports.StringFieldValue = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    margin-bottom: ${(props) => props.theme.spacing.m};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+exports.TextAreaValue = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    margin-bottom: ${(props) => props.theme.spacing.m};
+    max-width: 66ch;
+    white-space: pre-line;
+`;
+exports.ArrayFieldItem = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.EJSFieldValue = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+    width: 100%;
+`;
+const NotSelected = styled_components_1.default.div `
+  opacity: 0.3;
+  display: flex;
+  align-items: start;
+`;
+const Selected = styled_components_1.default.div `
+  display: flex;
+  align-items: start;
+`;
+const SelectedBox = styled_components_1.default.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  font-size: ${(props) => props.theme.typography.size.small};
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+`;
+const NotSelectedCircle = styled_components_1.default.span `
+  color: ${(props) => props.theme.color.background.default};
+  background: ${(props) => props.theme.color.text.default};
+  padding: ${(props) => props.theme.spacing.xxs};
+  border-radius: ${(props) => props.theme.borderRadius.circle};
   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};
+  font-size: ${(props) => props.theme.typography.size.small};
+  line-height: 1.1;
+  display: inline-flex;
+  justify-content: center;
+  align-items: start;
+  flex: 0 0 1rem;
+`;
+exports.BooleanFieldWrapper = styled_components_1.default.div `
+    font-family: ${(props) => props.theme.typography.fontFamily.base};
+`;
+exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
+    label {
+        align-items: start;
+    }
 `;
-exports.FieldDescription = styled_components_1.styled.div ``;
+const BooleanFieldValue = ({ name, className, value, label, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Not selected" })] })) }));
+};
+exports.BooleanFieldValue = BooleanFieldValue;
+const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
+    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
+                    selected.length > 0 &&
+                    selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                    notSelected?.length > 0 &&
+                    notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: "\u2715" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+};
+exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

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

@@ -36,9 +36,7 @@ const templates_1 = require("../templates");
 const Field = __importStar(require("./Field"));
 const Form = __importStar(require("./Form"));
 const Icon = __importStar(require("./Icon"));
-const oldComponents = __importStar(require("./old_styledComponents"));
 exports.components = {
-    ...oldComponents,
     ...fields_1.fieldComponents,
     ...templates_1.templateComponents,
     //Please keep this in alphabetical order

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

@@ -31,3 +31,8 @@ export const FieldHelp = styled.p `
 export const FieldInput = styled(({ formikAs, ...props }) => {
     return _jsx(formik.Field, { ...props, as: formikAs });
 }) ``;
+export const SelectFieldInput = styled(FieldInput) `
+  &[readonly] {
+    pointer-events: none;
+  }
+`;

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: { FieldInput, ArrayFieldItem, ArrayFieldItemButtons, ArrayFieldList, ArrayFieldAddButton, ArrayFieldRemoveButton, ArrayFieldUpButton, ArrayFieldDownButton, }, useItemsAsAdditionalItems, } = useContext(FormRegistry);
+    const { fields: { SchemaField }, templates: { ArrayFieldTemplate, FieldTemplate }, 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]);
@@ -95,15 +95,27 @@ export const ArrayField = (props) => {
     // Backwards compatibility ends
     const { disabled } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const valueArray = Array.isArray(value) ? value : undefined;
-    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(FieldInput, { type,
-            ...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: typeof itemSchema !== "boolean" ? itemSchema : {}, uiSchema: uiSchema?.[index] || uiSchema?.items, 
+    const preventManipulation = disabled || schema.readOnly;
+    return schema.anyOf !== undefined ? (_jsx(FieldTemplate, { ...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: {
+                                disabled,
+                                ...(uiSchema?.[index] || uiSchema?.items),
+                            }, 
                             // "true" will prevent validation for required array fields
                             // since a value always exists in the array
-                            forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: additionalItems && typeof additionalItems !== "boolean"
-                                    ? additionalItems
-                                    : {}, uiSchema: {
+                            forceDefaultValue: false }) }, index))), (valueArray?.slice(items.length) || []).map((_, index) => (_jsxs(ArrayFieldItem, { children: [_jsx(SchemaField, { name: `${name}[${index + items.length}]`, schema: prepareChildSchema(additionalItems, schema), uiSchema: {
                                     disabled,
                                     ...(uiSchema?.[index + items.length] || uiSchema?.items),
-                                } }), _jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
-                                        index < value?.slice(items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] })] }, index)))] }), additionalItems && (_jsx(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
+                                } }), !preventManipulation && (_jsxs(ArrayFieldItemButtons, { children: [_jsx(ArrayFieldRemoveButton, { ...(uiSchema?.["ui:removeButtonOptions"]?.props ?? {}), onClick: () => setValue(removeFromArray(value, index + items.length)), children: uiSchema?.["ui:removeButtonOptions"]?.content ?? "-" }), value.length > 1 && index > 0 && (_jsx(ArrayFieldUpButton, { ...(uiSchema?.["ui:upButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, -1)), children: uiSchema?.["ui:upButtonOptions"]?.content ?? "↑" })), value.length > 1 &&
+                                        index < value?.slice(items.length).length - 1 && (_jsx(ArrayFieldDownButton, { ...(uiSchema?.["ui:downButtonOptions"]?.props ?? {}), onClick: () => setValue(moveInArray(value, index + items.length, 1)), children: uiSchema?.["ui:downButtonOptions"]?.content ?? "↓" }))] }))] }, index)))] }), additionalItems && !preventManipulation && (_jsx(ArrayFieldAddButton, { ...(uiSchema?.["ui:addButtonOptions"]?.props ?? {}), onClick: () => setValue(appendArray(value)), children: uiSchema?.["ui:addButtonOptions"]?.content ?? "+" }))] }));
 };
+function prepareChildSchema(childSchema, parentSchema) {
+    if (!childSchema || typeof childSchema === "boolean") {
+        return {};
+    }
+    if (parentSchema.readOnly) {
+        return { ...childSchema, readOnly: parentSchema.readOnly };
+    }
+    return childSchema;
+}

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

@@ -10,7 +10,7 @@ export const BooleanField = (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, { ...inputProps, name: name, type: "checkbox" }), _jsx("span", { onClick: () => {
+    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: () => {
                         setValues({
                             ...values,
                             [name]: !values?.[name],

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

@@ -9,4 +9,8 @@ export const BooleanFieldWrapper = styled.div `
   gap: ${(props) => props.theme.spacing.s};
 
   ${commonCheckboxStyles}
+
+  & > input[readonly], & > input[readonly] ~ span {
+    pointer-events: none;
+  }
 `;

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

@@ -9,5 +9,5 @@ export const DateField = (props) => {
     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, { ...inputProps, name: name, type: "date" }) }) }));
+    return (_jsx(FieldTemplate, { ...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/MultipleChoiceField/MultipleChoiceField.js

@@ -24,5 +24,5 @@ export const MultipleChoiceField = (props) => {
                 return { "data-fjsf-string": name };
         }
     })();
-    return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(MultipleChoiceFieldInput, { inputProps: inputProps, name: name, enums: enums, style: style, value: value, form: form }) }));
+    return (_jsx(FieldTemplate, { ...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/MultipleChoiceField/styledComponents.js

@@ -5,6 +5,8 @@ export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
     ${commonCheckboxStyles}
     ${commonRadioStyles}
     font-family: ${(props) => props.theme.typography.fontFamily.base};
+    flex-wrap: wrap;
+    justify-content: start;
 `;
 export const MultipleChoiceFieldElement = styled(RadioFieldElement) ``;
 export const MultipleChoiceFieldInputElement = styled(RadioFieldInputElement) ``;

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

@@ -56,7 +56,7 @@ export const ObjectField = (props) => {
                     const childSchema = properties?.[child];
                     if (!childSchema)
                         return undefined;
-                    return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child] }, child));
+                    return (_jsx(SchemaField, { required: required?.includes(child), name: name ? [name, child].join(".") : child, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child] }, child));
                 }
                 else {
                     const { title, fields, collapsible } = child;
@@ -64,14 +64,12 @@ export const ObjectField = (props) => {
                             const childSchema = properties?.[child2];
                             if (!childSchema)
                                 return undefined;
-                            return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema?.[child2] }, child2));
+                            return (_jsx(SchemaField, { name: name ? [name, child2].join(".") : child2, schema: prepareChildSchema(childSchema, schema), uiSchema: uiSchema?.[child2] }, child2));
                         }) }, fields.join("_")));
                 }
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
-                                ? schema.additionalProperties
-                                : {}, uiSchema: uiSchema?.[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: uiSchema?.[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: ObjectFieldButtonPurpose.REMOVE,
                                 onClick: () => {
                                     const { [childName]: _removedProperty, ...newValue } = value;
@@ -90,3 +88,12 @@ export const ObjectField = (props) => {
                     uiSchema: uiSchema,
                 })] }));
 };
+function prepareChildSchema(childSchema, parentSchema) {
+    if (!childSchema || typeof childSchema === "boolean") {
+        return {};
+    }
+    if (parentSchema.readOnly) {
+        return { ...childSchema, readOnly: parentSchema.readOnly };
+    }
+    return childSchema;
+}

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

@@ -8,5 +8,5 @@ export const RadioField = (props) => {
     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: inputProps, label: label, name: name }) }));
+    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(RadioFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, label: label, name: name }) }));
 };

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

@@ -11,6 +11,10 @@ export const RadioFieldContainer = styled.div `
 export const RadioFieldElement = styled.label `
   display: inline-flex;
   align-items: center;
+
+  &:has(input[readonly]) {
+    pointer-events: none;
+  }
 `;
 export const RadioFieldInputElement = styled(FieldInput) `
   margin: unset;

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 }, } = useContext(FormRegistry);
+    const { templates: { FieldTemplate }, components: { FieldInput, SelectFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema = {}, schema } = props;
     const { type, placeholder, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
@@ -17,7 +17,8 @@ export const StringField = (props) => {
         : { "data-fjsf-number": name };
     switch (enums?.type) {
         case "select":
-            return (_jsx(FieldTemplate, { ...props, ...fieldDataAttribute, children: _jsx(StringFieldWrapper, { children: _jsxs(FieldInput, { type,
+            return (_jsx(FieldTemplate, { ...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);
                             const selectedValue = selectedOption
@@ -30,6 +31,7 @@ export const StringField = (props) => {
         default:
             return (_jsx(FieldTemplate, { ...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

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

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

@@ -8,5 +8,5 @@ export const ToggleField = (props) => {
     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: inputProps, name: name }) }));
+    return (_jsx(FieldTemplate, { ...props, "data-fjsf-boolean": name, children: _jsx(ToggleFieldInput, { inputProps: { readOnly: props.schema.readOnly, ...inputProps }, name: name }) }));
 };