@nolwenture/formik-jsonschema-form 1.0.4 → 1.0.5

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

@@ -42,6 +42,8 @@ exports.FieldWrapper = styled_components_1.styled.div `
   flex-direction: column;
   margin: ${(props) => `${props.theme.spacing.s} 0`};
   color: ${(props) => props.theme.color.text.default};
+  opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
+  pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
 `;
 exports.FieldTitle = styled_components_1.styled.label `
   font-size: ${(props) => props.theme.typography.size.base};

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

@@ -11,7 +11,8 @@ exports.BooleanFieldWrapper = (0, styled_components_1.styled)(common_1.CommonChe
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.s};
 
-  & > input[readonly], & > input[readonly] ~ span {
+  &:has(input[readonly]) {
     pointer-events: none;
+    cursor: pointer;
   }
 `;

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

@@ -49,6 +49,11 @@ exports.RadioFieldContainer = (0, styled_components_1.styled)(common_1.CommonChe
         transform: scale(1);
       }
     }
+
+    &[readonly] {
+      background-color: transparent;
+      border: none;
+    }
   }
 `;
 exports.RadioFieldElement = styled_components_1.styled.label `

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

@@ -9,12 +9,12 @@ const FormRegistry_1 = require("../../FormRegistry");
 const SearchableMultiTagSelectField = (props) => {
     const { templates, components: { SearchableMultiTagSelectFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
-    const { name, uiSchema } = props;
+    const { name, uiSchema, schema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const enums = (0, react_1.useMemo)(() => (0, utils_1.getEnums)(props), [props]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums, readOnly: schema.readOnly }) }));
 };
 exports.SearchableMultiTagSelectField = SearchableMultiTagSelectField;

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

@@ -4,7 +4,7 @@ exports.SearchableMultiTagSelectFieldInput = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const FormRegistry_1 = require("../../FormRegistry");
-const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
+const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, disabled, readOnly, }) => {
     const { components: { FieldInput, SearchableMultiTagSelectFieldBadge, SearchableMultiTagSelectFieldBadgeCloseElement, SearchableMultiTagSelectFieldBadgeContainer, SearchableMultiTagSelectFieldContainer, SearchableMultiTagSelectFieldInputElement, SearchableMultiTagSelectFieldOptionList, SearchableMultiTagSelectFieldOptionListItem, SearchableMultiTagSelectFieldOptionListWithoutItem, SearchableMultiTagSelectFieldSearchContainer, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     const [search, setSearch] = (0, react_1.useState)("");
     const searchIncludedInEnum = () => {
@@ -13,7 +13,7 @@ const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySea
     };
     return ((0, jsx_runtime_1.jsx)(FieldInput, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => ((0, jsx_runtime_1.jsxs)(SearchableMultiTagSelectFieldContainer, { className: className, children: [(0, jsx_runtime_1.jsx)(FieldInput, { id: className, type: "hidden", ...field }), (0, jsx_runtime_1.jsxs)(SearchableMultiTagSelectFieldSearchContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldInputElement, { id: className + "_id", className: className, type: "text", onChange: (e) => {
                                 setSearch(e.currentTarget.value);
-                            }, placeholder: placeholder, value: search }), search.length > 0 && ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionList, { children: searchIncludedInEnum() ? (enums?.values
+                            }, placeholder: placeholder, value: search, readOnly: readOnly, disabled: disabled }), search.length > 0 && !disabled && !readOnly && ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionList, { children: searchIncludedInEnum() ? (enums?.values
                                 .filter((item) => !(field.value ?? []).includes(item.const))
                                 .filter((value) => value.title.toLowerCase().includes(search.toLowerCase()))
                                 .map((option, index) => ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionListItem, { value: option.const, onClick: () => {
@@ -22,6 +22,6 @@ const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySea
                                     ]);
                                     setSearch("");
                                 }, children: option.title }, index)))) : ((0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldOptionListWithoutItem, { children: emptySearchMessage ?? "No match found" })) }))] }), (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldBadgeContainer, { children: (field.value ?? []).map((value) => ((0, jsx_runtime_1.jsxs)(SearchableMultiTagSelectFieldBadge, { children: [enums?.values.find((option) => option.const === value)
-                                ?.title, (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement ?? "✕" })] }, value))) }), meta.touched && meta.error && ((0, jsx_runtime_1.jsx)("div", { className: "error", children: meta.error }))] })) }));
+                                ?.title, (0, jsx_runtime_1.jsx)(SearchableMultiTagSelectFieldBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), disabled: disabled || readOnly, children: closeElement ?? "✕" })] }, value))) }), meta.touched && meta.error && ((0, jsx_runtime_1.jsx)("div", { className: "error", children: meta.error }))] })) }));
 };
 exports.SearchableMultiTagSelectFieldInput = SearchableMultiTagSelectFieldInput;

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

@@ -22,17 +22,22 @@ exports.SearchableMultiTagSelectFieldBadgeContainer = styled_components_1.styled
   display: inline-flex;
   gap: ${(props) => props.theme.strokeWidth.thin};
 `;
-exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.span `
+exports.SearchableMultiTagSelectFieldBadge = styled_components_1.styled.div `
   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}`};
+  padding: ${(props) => `0 ${props.theme.spacing.s}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: flex;
   margin-right: ${(props) => props.theme.spacing.xs};
+  gap: ${(props) => props.theme.spacing.s};
 `;
-exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.styled.span `
+exports.SearchableMultiTagSelectFieldBadgeCloseElement = styled_components_1.styled.button `
+  background: transparent;
+  color: ${(props) => props.theme.color.background.input};
+  border: none;
   cursor: pointer;
-  margin-left: ${(props) => props.theme.spacing.s};
+  margin: 0;
+  padding: 0;
   font-size: ${(props) => props.theme.typography.size.small};
   align-self: center;
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -88,6 +88,8 @@ const SearchableSelectField = (props) => {
         };
     }, [handleKeyPress]);
     const handleSearchChange = (event) => {
+        if (schema.readOnly)
+            return;
         setSearchTerm(event.target.value);
         setItemsToShow(dropdownOptions.perPage);
         setShowOptions(true);
@@ -101,6 +103,8 @@ const SearchableSelectField = (props) => {
         onSelect?.(item.const);
     };
     const handleFocus = () => {
+        if (schema.readOnly)
+            return;
         setShowOptions(true);
     };
     const handleBlur = (event) => {
@@ -110,6 +114,8 @@ const SearchableSelectField = (props) => {
         }
     };
     const handleClear = () => {
+        if (schema.readOnly)
+            return;
         setSearchTerm("");
         setValue(undefined);
     };
@@ -122,7 +128,7 @@ const SearchableSelectField = (props) => {
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: (0, jsx_runtime_1.jsxs)(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [(0, jsx_runtime_1.jsxs)(SearchableSelectFieldInputContainer, { children: [(0, jsx_runtime_1.jsx)(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus, readOnly: schema.readOnly }), searchTerm && !hideClearButton && ((0, jsx_runtime_1.jsx)(SearchableSelectFieldClearButton, { onClick: handleClear, disabled: schema.readOnly, children: clearButtonText ?? "✕" }))] }), showOptions && !schema.readOnly && ((0, jsx_runtime_1.jsxs)(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
                     //ref={moreRef} //TODO
                     style: {
                         maxHeight: dropdownOptions.height,

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

@@ -32,7 +32,7 @@ exports.SearchableSelectFieldInputElement = (0, styled_components_1.styled)(Fiel
   padding-right: ${(props) => props.theme.spacing.xxl};
   text-overflow: ellipsis;
 `;
-exports.SearchableSelectFieldClearButton = styled_components_1.styled.span `
+exports.SearchableSelectFieldClearButton = styled_components_1.styled.button `
   background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   bottom: 0;

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

@@ -10,10 +10,12 @@ const TextAreaField = (props) => {
     const { templates, components: { TextAreaFieldInput }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     (0, hooks_1.useSetDefault)(props);
     const { name, uiSchema } = props;
-    const { props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const { placeholder, props: inputProps } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
+    return ((0, jsx_runtime_1.jsx)(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: (0, jsx_runtime_1.jsx)(TextAreaFieldInput, { placeholder,
+            readOnly: props.schema.readOnly,
+            ...inputProps, name: name, formikAs: "textarea" }) }));
 };
 exports.TextAreaField = TextAreaField;

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

@@ -10,6 +10,7 @@ exports.ToggleFieldToggle = styled_components_1.styled.span `
   left: 0;
   right: 0;
   bottom: 0;
+  height: 1rem;
   background: ${(props) => props.theme.color.intent.default.none};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   -webkit-transition: 0.4s;

package/dist/cjs/Form/styles/common.js

@@ -23,6 +23,24 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
     }
 
     &:read-only {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.default};
+      }
+    }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+      padding: ${(props) => props.theme.spacing.s};
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.muted};
+      }
     }
 
     &:focus {
@@ -59,13 +77,24 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
     background-repeat: no-repeat;
     background-size: ${(props) => props.theme.spacing.l}; auto;
 
-    &:read-only {
-     
+    &[readonly] {
+      background-image: none;
+      border: none;
+      background-color: transparent;
+      padding: 0;
     }
 
     &:focus {
         ${(props) => props.theme.focus.default};
     }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      background-image: ${(props) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(props.theme.color.text.default)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`};
+      border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+      padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xxxxl} ${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    }
   } 
 
   select[multiple] {
@@ -73,6 +102,40 @@ exports.CommonFieldWrapper = styled_components_1.styled.div `
     background-image: none;
     overflow: auto;
   }
+
+  textarea {
+
+    background-color: ${(props) => props.theme.color.background.input};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+    padding: ${(props) => props.theme.spacing.s};
+
+    &:read-only {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+      min-height: unset;
+      resize: none;
+      field-sizing: content;
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.default};
+      }
+    }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+      min-height: 5rem;
+      padding: ${(props) => props.theme.spacing.s};
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.muted};
+      }
+    }
+
+  }
 `;
 exports.CommonCheckboxStyles = styled_components_1.styled.div `
   input[type="checkbox"] {
@@ -178,8 +241,15 @@ exports.CommonCheckboxStyles = styled_components_1.styled.div `
       }
     }
 
-    &:read-only {
-  
+    &[readonly] {
+      background: transparent;
+      border: none;
+    }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      border: ${(props) => props.theme.strokeWidth.thin} solid
+      ${(props) => props.theme.color.border.default};
     }
   }
 `;

package/dist/cjs/Form/templates/FieldTemplate/FieldTemplate.js

@@ -10,7 +10,8 @@ const FieldTemplate = (props) => {
     const { name, uiSchema, children, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
-    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const { help, info, disabled, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, disabled: isDisabled, } = {}, } = (0, react_1.useMemo)(() => (0, utils_1.extractUiSchema)(uiSchema), [uiSchema]);
+    const isReadOnly = props.schema?.readOnly;
     const dataAttributes = Object.keys(otherProps)
         .filter((key) => key.startsWith("data-"))
         .reduce((acc, key) => {
@@ -22,6 +23,6 @@ const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(FieldInfo, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help }), (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(FieldWrapper, { ...mergedWrapperProps, "$isDisabled": isDisabled, children: [title && ((0, jsx_runtime_1.jsxs)(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(FieldInfo, { ...info }), description && ((0, jsx_runtime_1.jsx)(FieldDescription, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(FieldHelp, { ...helpProps, children: help }), (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
 };
 exports.FieldTemplate = FieldTemplate;

package/dist/cjs/Form/templates/ObjectFieldTemplate/styledComponents.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ObjectFieldTemplateErrorMessage = exports.ObjectFieldTemplateRequiredIndicator = exports.ObjectFieldTemplateInfo = exports.ObjectFieldTemplateHelp = exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
 exports.getComponents = getComponents;
+const polished_1 = require("polished");
 const styled_components_1 = require("styled-components");
 exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
   color: ${(props) => props.theme.color.text.default};
@@ -9,6 +10,18 @@ exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
   margin-inline: 0;
   margin-bottom: ${(props) => props.theme.spacing.xs};
 
+  &:has(input[disabled]), &:has(option[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
+    border-color: ${(props) => (0, polished_1.lighten)(0.4, props.theme.color.border.default)};
+
+    legend {
+      color: ${(props) => (0, polished_1.lighten)(0.4, props.theme.color.text.default)};
+
+      & + p {
+        color: ${(props) => (0, polished_1.lighten)(0.4, props.theme.color.text.default)};
+      }
+    }
+  }
+
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
   color: ${(props) => props.theme.color.text.default};

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

@@ -14,7 +14,7 @@ const MultipleChoiceField = (props) => {
     const { values } = (0, formik_1.useFormikContext)();
     const value = (0, formik_1.getIn)(values, name);
     const selected = (0, utils_1.getSelectedEnum)(value, enums);
-    const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
+    const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v.const));
     const hideNotSelected = onlyShowSelected === true || selected === undefined;
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??

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

@@ -6,6 +6,8 @@ export const FieldWrapper = styled.div `
   flex-direction: column;
   margin: ${(props) => `${props.theme.spacing.s} 0`};
   color: ${(props) => props.theme.color.text.default};
+  opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
+  pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
 `;
 export const FieldTitle = styled.label `
   font-size: ${(props) => props.theme.typography.size.base};

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

@@ -8,7 +8,8 @@ export const BooleanFieldWrapper = styled(CommonCheckboxStyles) `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.s};
 
-  & > input[readonly], & > input[readonly] ~ span {
+  &:has(input[readonly]) {
     pointer-events: none;
+    cursor: pointer;
   }
 `;

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

@@ -46,6 +46,11 @@ export const RadioFieldContainer = styled(CommonCheckboxStyles) `
         transform: scale(1);
       }
     }
+
+    &[readonly] {
+      background-color: transparent;
+      border: none;
+    }
   }
 `;
 export const RadioFieldElement = styled.label `

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

@@ -6,11 +6,11 @@ import { FormRegistry } from "../../FormRegistry";
 export const SearchableMultiTagSelectField = (props) => {
     const { templates, components: { SearchableMultiTagSelectFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
-    const { name, uiSchema } = props;
+    const { name, uiSchema, schema } = props;
     const { placeholder, emptySearchMessage, props: inputProps, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const enums = useMemo(() => getEnums(props), [props]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-array": name, children: _jsx(SearchableMultiTagSelectFieldInput, { ...inputProps, name: name, placeholder: placeholder, emptySearchMessage: emptySearchMessage, enums: enums, readOnly: schema.readOnly }) }));
 };

package/dist/esm/Form/fields/SearchableMultiTagSelectField/SearchableMultiTagSelectFieldInput.js

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useContext, useState } from "react";
 import { FormRegistry } from "../../FormRegistry";
-export const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }) => {
+export const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, emptySearchMessage, closeElement, className, disabled, readOnly, }) => {
     const { components: { FieldInput, SearchableMultiTagSelectFieldBadge, SearchableMultiTagSelectFieldBadgeCloseElement, SearchableMultiTagSelectFieldBadgeContainer, SearchableMultiTagSelectFieldContainer, SearchableMultiTagSelectFieldInputElement, SearchableMultiTagSelectFieldOptionList, SearchableMultiTagSelectFieldOptionListItem, SearchableMultiTagSelectFieldOptionListWithoutItem, SearchableMultiTagSelectFieldSearchContainer, }, } = useContext(FormRegistry);
     const [search, setSearch] = useState("");
     const searchIncludedInEnum = () => {
@@ -10,7 +10,7 @@ export const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, e
     };
     return (_jsx(FieldInput, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => (_jsxs(SearchableMultiTagSelectFieldContainer, { className: className, children: [_jsx(FieldInput, { id: className, type: "hidden", ...field }), _jsxs(SearchableMultiTagSelectFieldSearchContainer, { children: [_jsx(SearchableMultiTagSelectFieldInputElement, { id: className + "_id", className: className, type: "text", onChange: (e) => {
                                 setSearch(e.currentTarget.value);
-                            }, placeholder: placeholder, value: search }), search.length > 0 && (_jsx(SearchableMultiTagSelectFieldOptionList, { children: searchIncludedInEnum() ? (enums?.values
+                            }, placeholder: placeholder, value: search, readOnly: readOnly, disabled: disabled }), search.length > 0 && !disabled && !readOnly && (_jsx(SearchableMultiTagSelectFieldOptionList, { children: searchIncludedInEnum() ? (enums?.values
                                 .filter((item) => !(field.value ?? []).includes(item.const))
                                 .filter((value) => value.title.toLowerCase().includes(search.toLowerCase()))
                                 .map((option, index) => (_jsx(SearchableMultiTagSelectFieldOptionListItem, { value: option.const, onClick: () => {
@@ -19,5 +19,5 @@ export const SearchableMultiTagSelectFieldInput = ({ name, placeholder, enums, e
                                     ]);
                                     setSearch("");
                                 }, children: option.title }, index)))) : (_jsx(SearchableMultiTagSelectFieldOptionListWithoutItem, { children: emptySearchMessage ?? "No match found" })) }))] }), _jsx(SearchableMultiTagSelectFieldBadgeContainer, { children: (field.value ?? []).map((value) => (_jsxs(SearchableMultiTagSelectFieldBadge, { children: [enums?.values.find((option) => option.const === value)
-                                ?.title, _jsx(SearchableMultiTagSelectFieldBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement ?? "✕" })] }, value))) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] })) }));
+                                ?.title, _jsx(SearchableMultiTagSelectFieldBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), disabled: disabled || readOnly, children: closeElement ?? "✕" })] }, value))) }), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] })) }));
 };

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

@@ -19,17 +19,22 @@ export const SearchableMultiTagSelectFieldBadgeContainer = styled.div `
   display: inline-flex;
   gap: ${(props) => props.theme.strokeWidth.thin};
 `;
-export const SearchableMultiTagSelectFieldBadge = styled.span `
+export const SearchableMultiTagSelectFieldBadge = styled.div `
   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}`};
+  padding: ${(props) => `0 ${props.theme.spacing.s}`};
   border-radius: ${(props) => props.theme.borderRadius.none};
   display: flex;
   margin-right: ${(props) => props.theme.spacing.xs};
+  gap: ${(props) => props.theme.spacing.s};
 `;
-export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.span `
+export const SearchableMultiTagSelectFieldBadgeCloseElement = styled.button `
+  background: transparent;
+  color: ${(props) => props.theme.color.background.input};
+  border: none;
   cursor: pointer;
-  margin-left: ${(props) => props.theme.spacing.s};
+  margin: 0;
+  padding: 0;
   font-size: ${(props) => props.theme.typography.size.small};
   align-self: center;
   font-family: ${(props) => props.theme.typography.fontFamily.base};

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

@@ -85,6 +85,8 @@ export const SearchableSelectField = (props) => {
         };
     }, [handleKeyPress]);
     const handleSearchChange = (event) => {
+        if (schema.readOnly)
+            return;
         setSearchTerm(event.target.value);
         setItemsToShow(dropdownOptions.perPage);
         setShowOptions(true);
@@ -98,6 +100,8 @@ export const SearchableSelectField = (props) => {
         onSelect?.(item.const);
     };
     const handleFocus = () => {
+        if (schema.readOnly)
+            return;
         setShowOptions(true);
     };
     const handleBlur = (event) => {
@@ -107,6 +111,8 @@ export const SearchableSelectField = (props) => {
         }
     };
     const handleClear = () => {
+        if (schema.readOnly)
+            return;
         setSearchTerm("");
         setValue(undefined);
     };
@@ -119,7 +125,7 @@ export const SearchableSelectField = (props) => {
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchableSelectFieldInputContainer, { children: [_jsx(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus }), searchTerm && !hideClearButton && (_jsx(SearchableSelectFieldClearButton, { onClick: handleClear, children: clearButtonText ?? "✕" }))] }), showOptions && (_jsxs(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
+    return (_jsx(SelectedFieldTemplate, { ...props, ...fieldDataAttribute, children: _jsxs(SearchableSelectFieldContainer, { ref: containerRef, onBlur: handleBlur, children: [_jsxs(SearchableSelectFieldInputContainer, { children: [_jsx(SearchableSelectFieldInputElement, { ...inputProps, name: name, type: "text", placeholder: placeholder, value: searchTerm, onChange: handleSearchChange, onFocus: handleFocus, readOnly: schema.readOnly }), searchTerm && !hideClearButton && (_jsx(SearchableSelectFieldClearButton, { onClick: handleClear, disabled: schema.readOnly, children: clearButtonText ?? "✕" }))] }), showOptions && !schema.readOnly && (_jsxs(SearchableSelectFieldDropdownContainer, { role: "dropdown-list", 
                     //ref={moreRef} //TODO
                     style: {
                         maxHeight: dropdownOptions.height,

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

@@ -29,7 +29,7 @@ export const SearchableSelectFieldInputElement = styled(FieldInput) `
   padding-right: ${(props) => props.theme.spacing.xxl};
   text-overflow: ellipsis;
 `;
-export const SearchableSelectFieldClearButton = styled.span `
+export const SearchableSelectFieldClearButton = styled.button `
   background-color: ${(props) => props.theme.color.palette.neutral[500]};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   bottom: 0;

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

@@ -7,9 +7,11 @@ export const TextAreaField = (props) => {
     const { templates, components: { TextAreaFieldInput }, } = useContext(FormRegistry);
     useSetDefault(props);
     const { name, uiSchema } = props;
-    const { props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const { placeholder, props: inputProps } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??
         templates.FieldTemplate;
-    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(TextAreaFieldInput, { readOnly: props.schema.readOnly, ...inputProps, name: name, formikAs: "textarea" }) }));
+    return (_jsx(SelectedFieldTemplate, { ...props, "data-fjsf-string": name, children: _jsx(TextAreaFieldInput, { placeholder,
+            readOnly: props.schema.readOnly,
+            ...inputProps, name: name, formikAs: "textarea" }) }));
 };

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

@@ -7,6 +7,7 @@ export const ToggleFieldToggle = styled.span `
   left: 0;
   right: 0;
   bottom: 0;
+  height: 1rem;
   background: ${(props) => props.theme.color.intent.default.none};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   -webkit-transition: 0.4s;

package/dist/esm/Form/styles/common.js

@@ -20,6 +20,24 @@ export const CommonFieldWrapper = styled.div `
     }
 
     &:read-only {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.default};
+      }
+    }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+      padding: ${(props) => props.theme.spacing.s};
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.muted};
+      }
     }
 
     &:focus {
@@ -56,13 +74,24 @@ export const CommonFieldWrapper = styled.div `
     background-repeat: no-repeat;
     background-size: ${(props) => props.theme.spacing.l}; auto;
 
-    &:read-only {
-     
+    &[readonly] {
+      background-image: none;
+      border: none;
+      background-color: transparent;
+      padding: 0;
     }
 
     &:focus {
         ${(props) => props.theme.focus.default};
     }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      background-image: ${(props) => `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 320 512'%3E%3Cpath fill='${encodeURIComponent(props.theme.color.text.default)}' d='M31 192h258c17 0 26 21 14 33l-129 129c-8 8-21 8-29 0L17 225c-12-12-3-33 14-33z'/%3E%3C/svg%3E")`};
+      border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+      padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.xxxxl} ${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    }
   } 
 
   select[multiple] {
@@ -70,6 +99,40 @@ export const CommonFieldWrapper = styled.div `
     background-image: none;
     overflow: auto;
   }
+
+  textarea {
+
+    background-color: ${(props) => props.theme.color.background.input};
+    border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+    padding: ${(props) => props.theme.spacing.s};
+
+    &:read-only {
+      border: none;
+      background-color: transparent;
+      padding: 0;
+      min-height: unset;
+      resize: none;
+      field-sizing: content;
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.default};
+      }
+    }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      border: ${(props) => `${props.theme.strokeWidth.thin} solid
+        ${props.theme.color.border.default}`};
+      min-height: 5rem;
+      padding: ${(props) => props.theme.spacing.s};
+
+      &::placeholder {
+        color: ${(props) => props.theme.color.text.muted};
+      }
+    }
+
+  }
 `;
 export const CommonCheckboxStyles = styled.div `
   input[type="checkbox"] {
@@ -175,8 +238,15 @@ export const CommonCheckboxStyles = styled.div `
       }
     }
 
-    &:read-only {
-  
+    &[readonly] {
+      background: transparent;
+      border: none;
+    }
+
+    &:disabled {
+      background-color: ${(props) => props.theme.color.background.input};
+      border: ${(props) => props.theme.strokeWidth.thin} solid
+      ${(props) => props.theme.color.border.default};
     }
   }
 `;

package/dist/esm/Form/templates/FieldTemplate/FieldTemplate.js

@@ -7,7 +7,8 @@ export const FieldTemplate = (props) => {
     const { name, uiSchema, children, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
-    const { help, info, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const { help, info, disabled, props: { wrapper: wrapperProps = {}, title: titleProps, description: descriptionProps, help: helpProps, error: errorProps, disabled: isDisabled, } = {}, } = useMemo(() => extractUiSchema(uiSchema), [uiSchema]);
+    const isReadOnly = props.schema?.readOnly;
     const dataAttributes = Object.keys(otherProps)
         .filter((key) => key.startsWith("data-"))
         .reduce((acc, key) => {
@@ -19,5 +20,5 @@ export const FieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes, // This will only include data-* attributes
     };
-    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, {})] })), info && _jsx(FieldInfo, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+    return (_jsxs(FieldWrapper, { ...mergedWrapperProps, "$isDisabled": isDisabled, children: [title && (_jsxs(FieldTitle, { ...titleProps, htmlFor: name, children: [title, props.required && _jsx(RequiredIndicator, {})] })), info && _jsx(FieldInfo, { ...info }), description && (_jsx(FieldDescription, { ...descriptionProps, children: description })), children, help && _jsx(FieldHelp, { ...helpProps, children: help }), _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

package/dist/esm/Form/templates/ObjectFieldTemplate/styledComponents.js

@@ -1,3 +1,4 @@
+import { lighten } from "polished";
 import { styled } from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.fieldset `
   color: ${(props) => props.theme.color.text.default};
@@ -5,6 +6,18 @@ export const ObjectFieldTemplateWrapper = styled.fieldset `
   margin-inline: 0;
   margin-bottom: ${(props) => props.theme.spacing.xs};
 
+  &:has(input[disabled]), &:has(option[disabled]), &:has(select[disabled]), &:has(textarea[disabled]) {
+    border-color: ${(props) => lighten(0.4, props.theme.color.border.default)};
+
+    legend {
+      color: ${(props) => lighten(0.4, props.theme.color.text.default)};
+
+      & + p {
+        color: ${(props) => lighten(0.4, props.theme.color.text.default)};
+      }
+    }
+  }
+
 `;
 export const ObjectFieldTemplateTitle = styled.legend `
   color: ${(props) => props.theme.color.text.default};

package/dist/esm/FormView/fields/MultipleChoiceField.js

@@ -11,7 +11,7 @@ export const MultipleChoiceField = (props) => {
     const { values } = useFormikContext();
     const value = getIn(values, name);
     const selected = getSelectedEnum(value, enums);
-    const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v));
+    const notSelected = enums?.values?.filter((v) => Array.isArray(value) && !value.includes(v.const));
     const hideNotSelected = onlyShowSelected === true || selected === undefined;
     const SelectedFieldTemplate = (props.uiSchema?.["ui:template"] &&
         templates[props.uiSchema?.["ui:template"]]) ??

package/dist/types/Form/components/FieldInput.d.ts

@@ -1,6 +1,8 @@
 import React from "react";
 import * as formik from "formik";
-export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+    $isDisabled?: boolean;
+}>> & string;
 export declare const FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
 export declare const FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
 export declare const FieldHelp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;

package/dist/types/Form/components/index.d.ts

@@ -12,7 +12,9 @@ export declare const components: {
     }, never>> & string & Omit<import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & import("react").RefAttributes<HTMLFormElement>>, keyof import("react").Component<any, {}, any>>;
     FormButtonWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     FormButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Readonly<import("@nolwenture/component-library").ButtonProps>, never>> & string & Omit<typeof import("@nolwenture/component-library").Button, keyof import("react").Component<any, {}, any>>;
-    FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    FieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
+        $isDisabled?: boolean;
+    }>> & string;
     FieldTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>> & string;
     FieldDescription: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
     FieldHelp: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, never>> & string;
@@ -110,9 +112,9 @@ export declare const components: {
     }, never>, "ref"> & {
         ref?: unknown;
     }, never>> & string;
-    SearchableSelectFieldClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    SearchableSelectFieldClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
     SearchableSelectFieldInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: import("../fields/SearchableMultiTagSelectField").SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, disabled, readOnly, }: import("../fields/SearchableMultiTagSelectField").SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
     SearchableMultiTagSelectFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string;
@@ -123,8 +125,8 @@ export declare const components: {
         ref?: unknown;
     }, never>> & string;
     SearchableMultiTagSelectFieldBadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionListWithoutItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/types/Form/fields/SearchableMultiTagSelectField/SearchableMultiTagSelectFieldInput.d.ts

@@ -5,5 +5,7 @@ export type SearchableMultiTagSelectFieldInputProps = {
     emptySearchMessage?: string;
     closeElement?: string;
     className?: string;
+    disabled?: boolean;
+    readOnly?: boolean;
 };
-export declare const SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, disabled, readOnly, }: SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/Form/fields/SearchableMultiTagSelectField/index.d.ts

@@ -1,6 +1,6 @@
 export * as fields from "./SearchableMultiTagSelectField";
 declare const components: {
-    SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: import("./SearchableMultiTagSelectFieldInput").SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, disabled, readOnly, }: import("./SearchableMultiTagSelectFieldInput").SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
     SearchableMultiTagSelectFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string;
@@ -11,8 +11,8 @@ declare const components: {
         ref?: unknown;
     }, never>> & string;
     SearchableMultiTagSelectFieldBadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionListWithoutItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/types/Form/fields/SearchableMultiTagSelectField/styledComponents.d.ts

@@ -8,8 +8,8 @@ export declare const SearchableMultiTagSelectFieldInputElement: import("styled-c
     ref?: unknown;
 }, never>> & string;
 export declare const SearchableMultiTagSelectFieldBadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-export declare const SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-export declare const SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const SearchableMultiTagSelectFieldOptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
 export declare const SearchableMultiTagSelectFieldOptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
 export declare const SearchableMultiTagSelectFieldOptionListWithoutItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/dist/types/Form/fields/SearchableSelectField/styledComponents.d.ts

@@ -18,5 +18,5 @@ export declare const SearchableSelectFieldInputElement: import("styled-component
 }, never>, "ref"> & {
     ref?: unknown;
 }, never>> & string;
-export declare const SearchableSelectFieldClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const SearchableSelectFieldClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
 export declare const SearchableSelectFieldInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types/Form/fields/index.d.ts

@@ -40,9 +40,9 @@ export declare const fieldComponents: {
     }, never>, "ref"> & {
         ref?: unknown;
     }, never>> & string;
-    SearchableSelectFieldClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    SearchableSelectFieldClearButton: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
     SearchableSelectFieldInputContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, }: SearchableMultiTagSelectField.SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
+    SearchableMultiTagSelectFieldInput: ({ name, placeholder, enums, emptySearchMessage, closeElement, className, disabled, readOnly, }: SearchableMultiTagSelectField.SearchableMultiTagSelectFieldInputProps) => import("react/jsx-runtime").JSX.Element;
     SearchableMultiTagSelectFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
         ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
     }, never>> & string;
@@ -53,8 +53,8 @@ export declare const fieldComponents: {
         ref?: unknown;
     }, never>> & string;
     SearchableMultiTagSelectFieldBadgeContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
-    SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
-    SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+    SearchableMultiTagSelectFieldBadge: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    SearchableMultiTagSelectFieldBadgeCloseElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionList: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionListItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;
     SearchableMultiTagSelectFieldOptionListWithoutItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, never>> & string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -83,6 +83,7 @@
     "formik": "^2.4.5",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "polished": "^4.3.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-redux": "^9.2.0",