@nolwenture/formik-jsonschema-form 1.0.4 → 1.0.6

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.FieldInfo = exports.FieldInfoLabel = exports.FieldInfoContainer = exports.FieldInfoBoxInnerElement = exports.FieldInfoBoxArrowElement = exports.FieldInfoBoxElement = void 0;
+exports.FieldInfo = exports.InlineFieldInfoWrapper = exports.FieldInfoLabel = exports.FieldInfoContainer = exports.InlineFieldInfoBoxInnerElement = exports.FieldInfoBoxInnerElement = exports.FieldInfoBoxArrowElement = exports.FieldInfoBoxElement = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const styled_components_1 = require("styled-components");
 const polished_1 = require("polished");
 exports.FieldInfoBoxElement = styled_components_1.styled.div `
@@ -55,17 +56,17 @@ exports.FieldInfoBoxArrowElement = styled_components_1.styled.div `
   width: 0;
   position: absolute;
   pointer-events: none;
-  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.none : "transparent"};
-  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.none : "transparent"};
-  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.none : "transparent"};
-  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.none : "transparent"};
+  border-top-color: ${({ position, theme }) => position === "top" ? theme.color.intent.default.warning : "transparent"};
+  border-bottom-color: ${({ position, theme }) => position === "bottom" ? theme.color.intent.default.warning : "transparent"};
+  border-right-color: ${({ position, theme }) => position === "right" ? theme.color.intent.default.warning : "transparent"};
+  border-left-color: ${({ position, theme }) => position === "left" ? theme.color.intent.default.warning : "transparent"};
   border-width: 5px;
   margin-left: -5px;
 `;
 exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
-    background: ${(props) => props.theme.color.background.default};
+    background: ${(props) => props.theme.color.intent.default.warning};
     border-radius: ${(props) => props.theme.borderRadius.none};
-    border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.intent.default.none}`};
+    border: none;
     color: ${(props) => props.theme.color.text.default};
     cursor: default;
     font-size: ${(props) => props.theme.typography.size.small};
@@ -75,21 +76,31 @@ exports.FieldInfoBoxInnerElement = styled_components_1.styled.div `
     text-align: left;
     white-space: pre-wrap;
 `;
+exports.InlineFieldInfoBoxInnerElement = styled_components_1.styled.div `
+    background: ${(props) => props.theme.color.intent.default.warning};
+    border-radius: ${(props) => props.theme.borderRadius.none};
+    border: none;
+    color: ${(props) => props.theme.color.text.default};
+    cursor: default;
+    font-size: ${(props) => props.theme.typography.size.small};
+    line-height: ${(props) => props.theme.typography.lineHeight.small};
+    padding: ${(props) => `${props.theme.spacing.s} ${props.theme.spacing.m}`};
+    text-align: left;
+    white-space: pre-wrap;
+`;
 exports.FieldInfoContainer = styled_components_1.styled.a `
-  position: relative;
-  color: ${(props) => props.theme.color.text.default};
   background: none;
-  outline: none;
-  cursor: pointer;
-  border: ${(props) => `${props.theme.strokeWidth.thin} solid
-      ${props.theme.color.border.default}`};
   border-radius: ${(props) => props.theme.borderRadius.circle};
-  line-height: 1em;
+  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  color: ${(props) => props.theme.color.text.default};
+  cursor: pointer;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
+  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
+  outline: none;
   padding: ${(props) => `0 ${props.theme.spacing.s}`};
+  position: relative;
   text-decoration: unset;
-  margin: ${(props) => `0 ${props.theme.spacing.s} 0 -${props.theme.spacing.xs}`};
   width: fit-content;
 
   &:active,
@@ -103,7 +114,24 @@ exports.FieldInfoContainer = styled_components_1.styled.a `
   }
 `;
 exports.FieldInfoLabel = styled_components_1.styled.span ``;
-const FieldInfo = ({ label, content, position, props, className, }) => {
-    return ((0, jsx_runtime_1.jsxs)(exports.FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }), (0, jsx_runtime_1.jsxs)(exports.FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoBoxArrowElement, { position: position ?? "top" }), (0, jsx_runtime_1.jsx)(exports.FieldInfoBoxInnerElement, { children: content })] })] }));
+exports.InlineFieldInfoWrapper = styled_components_1.styled.div `
+  display: flex;
+  margin: ${(props) => `${props.theme.spacing.m} 0`};
+  width: 100%;
+`;
+const FieldInfo = ({ label, content, position, display = "tooltip", className, }) => {
+    const [isInlineVisible, setIsInlineVisible] = (0, react_1.useState)(false);
+    const handleToggle = (e) => {
+        e.preventDefault();
+        if (display === "inline") {
+            setIsInlineVisible((prev) => !prev);
+        }
+    };
+    if (display === "inline") {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoContainer, { href: "#", onClick: handleToggle, className: className, children: (0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }) }), isInlineVisible && ((0, jsx_runtime_1.jsx)(exports.InlineFieldInfoWrapper, { children: (0, jsx_runtime_1.jsx)(exports.InlineFieldInfoBoxInnerElement, { children: content }) }))] }));
+    }
+    else {
+        return ((0, jsx_runtime_1.jsxs)(exports.FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoLabel, { children: label ?? "i" }), (0, jsx_runtime_1.jsxs)(exports.FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [(0, jsx_runtime_1.jsx)(exports.FieldInfoBoxArrowElement, { position: position ?? "top" }), (0, jsx_runtime_1.jsx)(exports.FieldInfoBoxInnerElement, { children: content })] })] }));
+    }
 };
 exports.FieldInfo = FieldInfo;

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

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+exports.SelectFieldInput = exports.FieldInput = exports.FieldHelp = exports.FieldDescription = exports.FieldTitle = exports.FieldTitleInfoWrapper = exports.FieldWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = require("styled-components");
 const formik = __importStar(require("formik"));
@@ -42,6 +42,13 @@ 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.FieldTitleInfoWrapper = styled_components_1.styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 `;
 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/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -9,7 +9,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const ArrayFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
     const { name, uiSchema, items, renderItem, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
@@ -31,6 +31,6 @@ const ArrayFieldTemplate = (props) => {
     // In case of array of objects, it will give error message as an object value,
     // which is incorrect value for React, causing UI to crash.
     const errorIsString = typeof error === "string";
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info })] }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help }), errorIsString && (0, jsx_runtime_1.jsx)(ErrorMessage, { ...errorProps, name: name })] }));
 };
 exports.ArrayFieldTemplate = ArrayFieldTemplate;

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

@@ -1,7 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ArrayFieldTemplateErrorMessage = exports.ArrayFieldTemplateRequiredIndicator = exports.ArrayFieldTemplateInfo = exports.ArrayFieldTemplateHelp = exports.ArrayFieldTemplateDescription = exports.ArrayFieldTemplateTitle = exports.ArrayFieldTemplateIcon = exports.ArrayFieldTemplateWrapper = void 0;
+exports.ArrayFieldTemplateErrorMessage = exports.ArrayFieldTemplateRequiredIndicator = exports.ArrayFieldTemplateInfo = exports.ArrayFieldTemplateHelp = exports.ArrayFieldTemplateDescription = exports.ArrayFieldTemplateTitle = exports.ArrayFieldTemplateIcon = exports.ArrayFieldTemplateWrapper = exports.ArrayFieldTitleInfoWrapper = void 0;
 exports.getComponents = getComponents;
+exports.ArrayFieldTitleInfoWrapper = undefined;
 exports.ArrayFieldTemplateWrapper = undefined;
 exports.ArrayFieldTemplateIcon = undefined;
 exports.ArrayFieldTemplateTitle = undefined;
@@ -14,6 +15,8 @@ function getComponents(components) {
     return {
         Wrapper: components.ArrayFieldTemplateWrapper ??
             components.ObjectFieldTemplateWrapper,
+        TitleInfoWrapper: components.ArrayFieldTitleInfoWrapper ??
+            components.ObjectFieldTitleInfoWrapper,
         Title: components.ArrayFieldTemplateTitle ?? components.ObjectFieldTemplateTitle,
         Description: components.ArrayFieldTemplateDescription ?? components.FieldDescription,
         Help: components.ArrayFieldTemplateHelp ?? components.FieldHelp,

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

@@ -9,7 +9,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
+    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, TitleInfoWrapper, Wrapper, Help, Info, } = (0, styledComponents_1.getComponents)(components);
     const { children, name, uiSchema, ...otherProps } = props;
     const formikCtx = (0, formik_1.useFormikContext)();
     const values = formikCtx.values
@@ -34,8 +34,8 @@ const CollapsibleObjectFieldTemplate = (props) => {
     };
     const [collapsed, setCollapsed] = (0, react_1.useState)(isCollapsedOnLoad);
     const hide = collapsed;
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), 
-                //ariaExpanded={!hide}
-                ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), 
+                        //ariaExpanded={!hide}
+                        ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info })] }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
 };
 exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

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

@@ -1,11 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CollapsibleObjectFieldTemplateChildWrapper = exports.CollapsibleObjectFieldTemplateToggle = exports.CollapsibleObjectFieldTemplateErrorMessage = exports.CollapsibleObjectFieldTemplateRequiredIndicator = exports.CollapsibleObjectFieldTemplateInfo = exports.CollapsibleObjectFieldTemplateHelp = exports.CollapsibleObjectFieldTemplateDescription = exports.CollapsibleObjectFieldTemplateTitle = exports.CollapsibleObjectFieldTemplateIcon = exports.CollapsibleObjectFieldTemplateWrapper = void 0;
+exports.CollapsibleObjectFieldTemplateChildWrapper = exports.CollapsibleObjectFieldTemplateToggle = exports.CollapsibleObjectFieldTemplateErrorMessage = exports.CollapsibleObjectFieldTemplateRequiredIndicator = exports.CollapsibleObjectFieldTemplateInfo = exports.CollapsibleObjectFieldTemplateHelp = exports.CollapsibleObjectFieldTemplateDescription = exports.CollapsibleObjectFieldTemplateTitle = exports.CollapsibleObjectFieldTemplateIcon = exports.CollapsibleObjectTitleInfoWrapper = exports.CollapsibleObjectFieldTemplateWrapper = void 0;
 exports.getComponents = getComponents;
 const styled_components_1 = require("styled-components");
 const styledComponents_1 = require("../ObjectFieldTemplate/styledComponents");
 const component_library_1 = require("@nolwenture/component-library");
 exports.CollapsibleObjectFieldTemplateWrapper = undefined;
+exports.CollapsibleObjectTitleInfoWrapper = undefined;
 exports.CollapsibleObjectFieldTemplateIcon = undefined;
 exports.CollapsibleObjectFieldTemplateTitle = (0, styled_components_1.styled)(styledComponents_1.ObjectFieldTemplateTitle) `
   display: flex;
@@ -27,6 +28,8 @@ function getComponents(components) {
     return {
         Wrapper: components.CollapsibleObjectFieldTemplateWrapper ??
             components.ObjectFieldTemplateWrapper,
+        TitleInfoWrapper: components.CollapsibleObjectTitleInfoWrapper ??
+            components.ObjectFieldTitleInfoWrapper,
         Icon: components.CollapsibleObjectFieldTemplateIcon ?? components.Icon,
         Title: components.CollapsibleObjectFieldTemplateTitle ??
             components.ObjectFieldTemplateTitle,

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

@@ -6,11 +6,12 @@ const react_1 = require("react");
 const utils_1 = require("../../../utils");
 const FormRegistry_1 = require("../../FormRegistry");
 const FieldTemplate = (props) => {
-    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
+    const { components: { FieldWrapper, FieldTitleInfoWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
     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: [(0, jsx_runtime_1.jsxs)(FieldTitleInfoWrapper, { 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/ObjectFieldTemplate.js

@@ -8,7 +8,7 @@ const FormRegistry_1 = require("../../FormRegistry");
 const styledComponents_1 = require("./styledComponents");
 const ObjectFieldTemplate = (props) => {
     const { components } = (0, react_1.useContext)(FormRegistry_1.FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = (0, styledComponents_1.getComponents)(components);
     const { children, uiSchema, ...otherProps } = props;
     const title = (0, utils_1.getTitle)(props);
     const description = (0, utils_1.getDescription)(props);
@@ -27,6 +27,6 @@ const ObjectFieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes,
     };
-    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+    return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsxs)(Title, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {})] })), info && (0, jsx_runtime_1.jsx)(Info, { ...info })] }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
 };
 exports.ObjectFieldTemplate = ObjectFieldTemplate;

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

@@ -1,19 +1,39 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ObjectFieldTemplateErrorMessage = exports.ObjectFieldTemplateRequiredIndicator = exports.ObjectFieldTemplateInfo = exports.ObjectFieldTemplateHelp = exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
+exports.ObjectFieldTemplateErrorMessage = exports.ObjectFieldTemplateRequiredIndicator = exports.ObjectFieldTemplateInfo = exports.ObjectFieldTemplateHelp = exports.ObjectFieldTemplateDescription = exports.ObjectFieldTitleInfoWrapper = 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 `
+  display: flex;
+  flex-direction: column;
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   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};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
+exports.ObjectFieldTitleInfoWrapper = styled_components_1.styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
 exports.ObjectFieldTemplateDescription = undefined;
 exports.ObjectFieldTemplateHelp = undefined;
 exports.ObjectFieldTemplateInfo = undefined;
@@ -23,6 +43,7 @@ function getComponents(components) {
     return {
         Wrapper: components.ObjectFieldTemplateWrapper,
         Title: components.ObjectFieldTemplateTitle,
+        TitleInfoWrapper: components.ObjectFieldTitleInfoWrapper,
         Description: components.ObjectFieldTemplateDescription ?? components.FieldDescription,
         Help: components.ObjectFieldTemplateHelp ?? components.FieldHelp,
         Info: components.ObjectFieldTemplateInfo ?? components.FieldInfo,

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"]]) ??