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

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

@@ -7,8 +7,8 @@ exports.FileUploadFieldContainer = exports.FileUploadFieldFileInfoText = exports
 const styled_components_1 = __importDefault(require("styled-components"));
 const polished_1 = require("polished");
 exports.FileUploadFieldFileUploadButton = styled_components_1.default.button `
-  background-color: ${(props) => props.theme.intent.none};
-  color: ${(props) => (0, polished_1.readableColor)(props.theme.intent.none)};
+  background-color: ${(props) => props.theme.color.intent.default.none};
+  color: ${(props) => (0, polished_1.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};
@@ -23,14 +23,14 @@ exports.FileUploadFieldProgressBarContainer = styled_components_1.default.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};
 `;
 exports.FileUploadFieldProgressBar = styled_components_1.default.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;
 `;
@@ -39,7 +39,7 @@ exports.FileUploadFieldProgressText = styled_components_1.default.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};
 `;
@@ -58,6 +58,6 @@ exports.FileUploadFieldFileInfoText = styled_components_1.default.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};
 `;
 exports.FileUploadFieldContainer = styled_components_1.default.div ``;

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/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 = exports.fields = void 0;
 const MultipleChoiceFieldInput_1 = require("./MultipleChoiceFieldInput");

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/NullField/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 = void 0;
 exports.fields = __importStar(require("./NullField"));

package/dist/cjs/Form/fields/NumberField/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/ObjectField/ObjectField.js

@@ -35,10 +35,12 @@ const ObjectField = (props) => {
     }, [valuesToRemove]);
     const propertyKeys = (0, react_1.useMemo)(() => Object.keys(properties || {}), [properties]);
     const additionalValues = (0, react_1.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 = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(properties || {}));
+    const orderedAddProperties = (0, utils_1.orderByUiSchema)(uiSchema?.["ui:order"], Object.keys(additionalValues || {}));
+    const additionalPropertiesInOrder = (0, utils_1.orderAdditionalProperties)(orderedAddProperties, Object.keys(additionalValues || {}));
     const getObjectFieldButton = ({ purpose, onClick, uiSchema, }) => {
         switch (purpose) {
             case types_1.ObjectFieldButtonPurpose.ADD:
@@ -59,7 +61,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,21 +69,29 @@ 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({
-                                purpose: types_1.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 ((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: correctUiSchema }, childName), (0, jsx_runtime_1.jsx)(ObjectFieldItemButtons, { children: getObjectFieldButton({
+                                    purpose: types_1.ObjectFieldButtonPurpose.REMOVE,
+                                    onClick: () => {
+                                        const { [childName]: _removedProperty, ...newValue } = value;
+                                        setValue(newValue);
+                                    },
+                                    uiSchema: uiSchema,
+                                }) })] }, childName));
+                }), additionalProperties &&
                 getObjectFieldButton({
                     purpose: types_1.ObjectFieldButtonPurpose.ADD,
                     onClick: () => {
@@ -94,3 +104,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/ObjectField/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 = exports.fields = void 0;
 const ObjectFieldSection_1 = require("./ObjectFieldSection");

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

@@ -3,12 +3,12 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectFieldSectionTitle = exports.ObjectFieldSectionWrapper = exports.ObjectFieldAddButton = exports.ObjectFieldRemoveButton = exports.ObjectFieldDownButton = exports.ObjectFieldUpButton = exports.ObjectFieldLineButton = exports.ObjectFieldButton = exports.ObjectFieldItemButtons = exports.ObjectFieldItem = exports.ObjectFieldList = void 0;
 const styled_components_1 = require("styled-components");
 exports.ObjectFieldList = styled_components_1.styled.ul `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   list-style-type: none;
   padding: 0;
 `;
 exports.ObjectFieldItem = styled_components_1.styled.li `
-  color: ${(props) => props.theme.text.default};
+  color: ${(props) => props.theme.color.text.default};
   display: flex;
 `;
 exports.ObjectFieldItemButtons = styled_components_1.styled.div `
@@ -16,9 +16,9 @@ exports.ObjectFieldItemButtons = styled_components_1.styled.div `
   margin: ${(props) => props.theme.spacing.s};
 `;
 exports.ObjectFieldButton = styled_components_1.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/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/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 = exports.fields = void 0;
 const RadioFieldInput_1 = require("./RadioFieldInput");

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

@@ -5,7 +5,7 @@ const styled_components_1 = require("styled-components");
 const FieldInput_1 = require("../../components/FieldInput");
 const common_1 = require("../../styles/common");
 exports.RadioFieldContainer = styled_components_1.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};
@@ -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/SchemaField/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 = void 0;
 exports.fields = __importStar(require("./SchemaField"));

package/dist/cjs/Form/fields/SearchableMultiTagSelectField/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 = exports.fields = void 0;
 const SearchableMultiTagSelectFieldInput_1 = require("./SearchableMultiTagSelectFieldInput");

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

@@ -25,8 +25,8 @@ exports.SearchableMultiTagSelectFieldBadgeContainer = styled_components_1.styled
   gap: ${(props) => props.theme.strokeWidth.thin};
 `;
 exports.SearchableMultiTagSelectFieldBadge = styled_components_1.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;
@@ -35,18 +35,18 @@ exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.span `
 exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.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};
 `;
 exports.SearchableMultiTagSelectFieldOptionList = styled_components_1.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;
 `;
@@ -56,12 +56,12 @@ exports.SearchableMultiTagSelectFieldOptionListItem = styled_components_1.styled
   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};
   }
 `;
 exports.SearchableMultiTagSelectFieldOptionListWithoutItem = styled_components_1.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/cjs/Form/fields/SearchableSelectField/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/SearchableSelectField/styledComponents.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.SearchableSelectFieldInputContainer = exports.SearchableSelectFieldClearButton = exports.SearchableSelectFieldInputElement = exports.SearchableSelectFieldNotFound = exports.SearchableSelectFieldListExpand = exports.SearchableSelectFieldListOption = exports.SearchableSelectFieldDropdownContainer = exports.SearchableSelectFieldContainer = void 0;
+const polished_1 = require("polished");
 const styled_components_1 = require("styled-components");
 const FieldInput_1 = require("../../components/FieldInput");
 const styledComponents_1 = require("../SearchableMultiTagSelectField/styledComponents");
@@ -32,18 +33,20 @@ exports.SearchableSelectFieldInputElement = (0, styled_components_1.styled)(Fiel
   text-overflow: ellipsis;
 `;
 exports.SearchableSelectFieldClearButton = styled_components_1.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) => (0, polished_1.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;
 `;
 exports.SearchableSelectFieldInputContainer = styled_components_1.styled.div `
   display: flex;

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/StringField/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 = void 0;
 exports.fields = __importStar(require("./StringField"));

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;