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

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

@@ -2,16 +2,16 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import { readableColor } from "polished";
 export const FieldInfoBoxElement = 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"
@@ -52,30 +52,34 @@ export const FieldInfoBoxArrowElement = 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;
 `;
 export const FieldInfoBoxInnerElement = styled.div `
-  background: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.intent.none}`};
-  border-radius: ${(props) => props.theme.borderRadius.none};
-  color: ${(props) => 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;
 `;
 export const FieldInfoContainer = 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};
@@ -86,8 +90,8 @@ export const FieldInfoContainer = styled.a `
 
   &:active,
   &:focus {
-    color: ${(props) => readableColor(props.theme.text.default)};
-    background: ${(props) => props.theme.text.default};
+    color: ${(props) => readableColor(props.theme.color.text.default)};
+    background: ${(props) => props.theme.color.text.default};
     ${FieldInfoBoxElement} {
       opacity: 1;
       visibility: visible;

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

@@ -2,27 +2,27 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { styled } from "styled-components";
 import * as formik from "formik";
 export const FieldWrapper = 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};
 `;
 export const FieldTitle = 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};
 `;
 export const FieldDescription = 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};
 `;
 export const FieldHelp = 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.
@@ -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/components/Form.js

@@ -2,22 +2,22 @@ import styled from "styled-components";
 import * as formik from "formik";
 import { commonCheckboxStyles, commonRadioStyles, commonButtonStyles, commonInputStyles, commonSelectStyles, } from "../styles/common";
 export const Form = styled(formik.Form) `
-    ${commonCheckboxStyles}
+  ${commonCheckboxStyles}
 
-    ${commonRadioStyles}
+  ${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};
 
-    ${commonButtonStyles}
+  ${commonButtonStyles}
 
-    ${commonInputStyles}
+  ${commonInputStyles}
 
     ${commonSelectStyles}
 
     :focus {
-        ${(props) => props.theme.focus.default};
-    }
+    ${(props) => props.theme.focus.default};
+  }
 `;
 export const FormButtonWrapper = styled.div ``;
 export const FormButton = styled.button `

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

@@ -2,11 +2,15 @@ import { styled } from "styled-components";
 import { commonCheckboxStyles } from "../../styles/common";
 export const BooleanFieldWrapper = 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};
 
   ${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/FileUploadField/styledComponents.js

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 import { readableColor } from "polished";
 export const FileUploadFieldFileUploadButton = styled.button `
-  background-color: ${(props) => props.theme.intent.none};
-  color: ${(props) => readableColor(props.theme.intent.none)};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  color: ${(props) => readableColor(props.theme.color.intent.default.none)};
   padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xl}`};
   border: none;
   border-radius: ${(props) => props.theme.borderRadius.none};
@@ -17,14 +17,14 @@ export const FileUploadFieldProgressBarContainer = styled.div `
   width: 7.5rem;
   height: ${(props) => props.theme.spacing.xl};
   border-radius: ${(props) => props.theme.strokeWidth.thick};
-  background-color: ${(props) => props.theme.background.input};
+  background-color: ${(props) => props.theme.color.background.input};
   position: relative;
   margin-left: ${(props) => props.theme.spacing.s};
 `;
 export const FileUploadFieldProgressBar = styled.div `
   width: ${(props) => props.$progress}%;
   height: 100%;
-  background-color: ${(props) => props.theme.neutral[500]};
+  background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.strokeWidth.thick};
   transition: width 0.2s ease;
 `;
@@ -33,7 +33,7 @@ export const FileUploadFieldProgressText = styled.span `
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
-  color: ${(props) => props.theme.neutral[200]};
+  color: ${(props) => props.theme.color.palette.neutral[200]};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
 `;
@@ -52,6 +52,6 @@ export const FileUploadFieldFileInfoText = styled.span `
   margin-left: ${(props) => props.theme.spacing.s};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
 `;
 export const FileUploadFieldContainer = styled.div ``;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useField, useFormikContext } from "formik";
 import { useContext, useEffect, useMemo } from "react";
-import { orderByUiSchema, resolveSchema } from "../../../utils";
+import { orderAdditionalProperties, orderByUiSchema, resolveSchema, } from "../../../utils";
 import { useSetDefault } from "../../hooks";
 import { FormRegistry } from "../../FormRegistry";
 import { ObjectFieldButtonPurpose } from "./types";
@@ -32,10 +32,12 @@ export const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = useMemo(() => Object.keys(properties || {}), [properties]);
     const additionalValues = useMemo(() => Object.fromEntries(Object.entries(value || {}).filter(([key, value]) => !propertyKeys.includes(key))), [value, propertyKeys]);
-    const FieldTemplateComponent = props.uiSchema?.props?.isCollapsible
+    const FieldTemplateComponent = props.uiSchema?.["ui:options"]?.isCollapsible
         ? CollapsibleObjectFieldTemplate
         : ObjectFieldTemplate;
     const orderedProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(properties || {}));
+    const orderedAddProperties = orderByUiSchema(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
+    const additionalPropertiesInOrder = orderAdditionalProperties(orderedAddProperties, Object.keys(additionalValues || {}));
     const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
         switch (purpose) {
             case ObjectFieldButtonPurpose.ADD:
@@ -56,7 +58,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,21 +66,29 @@ 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({
-                                purpose: ObjectFieldButtonPurpose.REMOVE,
-                                onClick: () => {
-                                    const { [childName]: _removedProperty, ...newValue } = value;
-                                    setValue(newValue);
-                                },
-                                uiSchema: uiSchema,
-                            }) })] }, childName))), additionalProperties &&
+                additionalPropertiesInOrder.map((childName) => {
+                    let correctUiSchema = uiSchema?.[childName];
+                    if (uiSchema.properties?.["ui:order"] !== undefined &&
+                        uiSchema?.[childName]?.["ui:order"] === undefined) {
+                        correctUiSchema = {
+                            ...correctUiSchema,
+                            "ui:order": uiSchema.properties?.["ui:order"],
+                        };
+                    }
+                    return (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required?.includes(childName), name: name ? [name, childName].join(".") : childName, schema: prepareChildSchema(schema.additionalProperties, schema), uiSchema: correctUiSchema }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                                    purpose: ObjectFieldButtonPurpose.REMOVE,
+                                    onClick: () => {
+                                        const { [childName]: _removedProperty, ...newValue } = value;
+                                        setValue(newValue);
+                                    },
+                                    uiSchema: uiSchema,
+                                }) })] }, childName));
+                }), additionalProperties &&
                 getObjectFieldButton({
                     purpose: ObjectFieldButtonPurpose.ADD,
                     onClick: () => {
@@ -90,3 +100,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/ObjectField/styledComponents.js

@@ -1,11 +1,11 @@
 import { styled } from "styled-components";
 export const ObjectFieldList = styled.ul `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   list-style-type: none;
   padding: 0;
 `;
 export const ObjectFieldItem = styled.li `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
 `;
 export const ObjectFieldItemButtons = styled.div `
@@ -13,9 +13,9 @@ export const ObjectFieldItemButtons = styled.div `
   margin: ${(props) => props.theme.spacing.s};
 `;
 export const ObjectFieldButton = styled.a `
-  background-color: ${(props) => props.theme.intent.none};
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
-  color: ${(props) => props.theme.neutral[900]};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  color: ${(props) => props.theme.color.palette.neutral[900]};
   cursor: pointer;
   display: inline-block;
   font-weight: ${(props) => props.theme.typography.weight.bold};

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

@@ -2,7 +2,7 @@ import { styled } from "styled-components";
 import { FieldInput } from "../../components/FieldInput";
 import { commonRadioStyles } from "../../styles/common";
 export const RadioFieldContainer = styled.div `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.l};
@@ -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/SearchableMultiTagSelectField/styledComponents.js

@@ -22,8 +22,8 @@ export const SearchableMultiTagSelectFieldBadgeContainer = styled.div `
   gap: ${(props) => props.theme.strokeWidth.thin};
 `;
 export const SearchableMultiTagSelectFieldBadge = styled.span `
-  color: ${(props) => props.theme.background.input};
-  background: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.background.input};
+  background: ${(props) => props.theme.color.text.default};
   padding: ${(props) => `0 ${props.theme.spacing.xs} 0 ${props.theme.spacing.s}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: flex;
@@ -32,18 +32,18 @@ export const SearchableMultiTagSelectFieldBadge = styled.span `
 export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.span `
   cursor: pointer;
   margin-left: ${(props) => props.theme.spacing.s};
-  font-size: ${(props) => props.theme.typography.size.s};
-  align-self: baseline;
+  font-size: ${(props) => props.theme.typography.size.small};
+  align-self: center;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
 export const SearchableMultiTagSelectFieldOptionList = styled.ul `
   width: 100%;
   padding: unset;
   margin: unset;
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.border.default}`};
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.s};
   position: absolute;
-  background: ${(props) => props.theme.background.default};
+  background: ${(props) => props.theme.color.background.default};
   top: 100%;
   z-index: 1000;
 `;
@@ -53,12 +53,12 @@ export const SearchableMultiTagSelectFieldOptionListItem = styled.li `
   padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
   height: ${(props) => props.theme.spacing.xl};
   &:hover {
-    background: ${(props) => props.theme.background.input};
+    background: ${(props) => props.theme.color.background.input};
   }
 `;
 export const SearchableMultiTagSelectFieldOptionListWithoutItem = styled.li `
   cursor: default;
-  color: ${(props) => props.theme.background.default};
+  color: ${(props) => props.theme.color.background.default};
   list-style-type: none;
   padding: ${(props) => `${props.theme.spacing.xxs} ${props.theme.spacing.xs}`};
   height: ${(props) => props.theme.spacing.xl};

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

@@ -1,3 +1,4 @@
+import { readableColor } from "polished";
 import { styled } from "styled-components";
 import { FieldInput } from "../../components/FieldInput";
 import { SearchableMultiTagSelectFieldSearchContainer, SearchableMultiTagSelectFieldOptionList, SearchableMultiTagSelectFieldOptionListItem, } from "../SearchableMultiTagSelectField/styledComponents";
@@ -29,18 +30,20 @@ export const SearchableSelectFieldInputElement = styled(FieldInput) `
   text-overflow: ellipsis;
 `;
 export const SearchableSelectFieldClearButton = styled.span `
-  cursor: pointer;
-  position: absolute;
-  right: ${(props) => props.theme.spacing.xs};
-  bottom: 0;
-  top: 0;
-  margin: auto;
-  background-color: ${(props) => props.theme.neutral[500]};
+  background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.borderRadius.circle};
+  bottom: 0;
+  color: ${(props) => readableColor(props.theme.color.palette.neutral[500])};
+  cursor: pointer;
+  font-size: ${(props) => props.theme.typography.size.small};
+  height: 1rem;
   line-height: 1rem;
+  margin: auto;
   min-width: 1rem;
-  height: 1rem;
+  position: absolute;
+  right: ${(props) => props.theme.spacing.xs};
   text-align: center;
+  top: 0;
 `;
 export const SearchableSelectFieldInputContainer = styled.div `
   display: flex;

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/TextAreaField/styledComponents.js

@@ -1,11 +1,12 @@
 import styled from "styled-components";
 import { FieldInput } from "../../components/FieldInput";
 export const TextAreaFieldInput = styled(FieldInput) `
-  background-color: ${(props) => props.theme.background.input};
-  width: 100%;
-  min-height: 5rem;
-  color: ${(props) => props.theme.text.default};
+  background-color: ${(props) => props.theme.color.background.input};
+  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.base};
+  min-height: 5rem;
   padding: ${(props) => props.theme.spacing.s};
+  width: 95%;
 `;

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 }) }));
 };