@nolwenture/formik-jsonschema-form 1.0.4 → 1.0.6

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

@@ -1,4 +1,5 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
 import { styled } from "styled-components";
 import { readableColor } from "polished";
 export const FieldInfoBoxElement = styled.div `
@@ -52,17 +53,17 @@ export const FieldInfoBoxArrowElement = 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;
 `;
 export const FieldInfoBoxInnerElement = 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};
@@ -72,21 +73,31 @@ export const FieldInfoBoxInnerElement = styled.div `
     text-align: left;
     white-space: pre-wrap;
 `;
+export const InlineFieldInfoBoxInnerElement = 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;
+`;
 export const FieldInfoContainer = 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,
@@ -100,6 +111,23 @@ export const FieldInfoContainer = styled.a `
   }
 `;
 export const FieldInfoLabel = styled.span ``;
-export const FieldInfo = ({ label, content, position, props, className, }) => {
-    return (_jsxs(FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(FieldInfoLabel, { children: label ?? "i" }), _jsxs(FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [_jsx(FieldInfoBoxArrowElement, { position: position ?? "top" }), _jsx(FieldInfoBoxInnerElement, { children: content })] })] }));
+export const InlineFieldInfoWrapper = styled.div `
+  display: flex;
+  margin: ${(props) => `${props.theme.spacing.m} 0`};
+  width: 100%;
+`;
+export const FieldInfo = ({ label, content, position, display = "tooltip", className, }) => {
+    const [isInlineVisible, setIsInlineVisible] = useState(false);
+    const handleToggle = (e) => {
+        e.preventDefault();
+        if (display === "inline") {
+            setIsInlineVisible((prev) => !prev);
+        }
+    };
+    if (display === "inline") {
+        return (_jsxs(_Fragment, { children: [_jsx(FieldInfoContainer, { href: "#", onClick: handleToggle, className: className, children: _jsx(FieldInfoLabel, { children: label ?? "i" }) }), isInlineVisible && (_jsx(InlineFieldInfoWrapper, { children: _jsx(InlineFieldInfoBoxInnerElement, { children: content }) }))] }));
+    }
+    else {
+        return (_jsxs(FieldInfoContainer, { href: "#", onClick: (e) => e.preventDefault(), className: className, children: [_jsx(FieldInfoLabel, { children: label ?? "i" }), _jsxs(FieldInfoBoxElement, { position: position ?? "top", role: "tooltip", children: [_jsx(FieldInfoBoxArrowElement, { position: position ?? "top" }), _jsx(FieldInfoBoxInnerElement, { children: content })] })] }));
+    }
 };

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

@@ -6,6 +6,13 @@ 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 FieldTitleInfoWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
 `;
 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/ArrayFieldTemplate/ArrayFieldTemplate.js

@@ -6,7 +6,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const ArrayFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
     const { name, uiSchema, items, renderItem, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
@@ -28,5 +28,5 @@ export 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 (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), items && items.map((item, index) => renderItem(item, index)), help && _jsx(Help, { ...helpProps, children: help }), errorIsString && _jsx(ErrorMessage, { ...errorProps, name: name })] }));
 };

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

@@ -1,3 +1,4 @@
+export const ArrayFieldTitleInfoWrapper = undefined;
 export const ArrayFieldTemplateWrapper = undefined;
 export const ArrayFieldTemplateIcon = undefined;
 export const ArrayFieldTemplateTitle = undefined;
@@ -10,6 +11,8 @@ export 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/esm/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -6,7 +6,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const CollapsibleObjectFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, Wrapper, Help, Info, } = getComponents(components);
+    const { Toggle, ChildrenWrapper, RequiredIndicator, Icon, Description, Title, TitleInfoWrapper, Wrapper, Help, Info, } = getComponents(components);
     const { children, name, uiSchema, ...otherProps } = props;
     const formikCtx = useFormikContext();
     const values = formikCtx.values
@@ -31,7 +31,7 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     };
     const [collapsed, setCollapsed] = useState(isCollapsedOnLoad);
     const hide = collapsed;
-    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), 
-                //ariaExpanded={!hide}
-                ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(ChildrenWrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), 
+                        //ariaExpanded={!hide}
+                        ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), !hide && _jsx(ChildrenWrapper, { children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
 };

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

@@ -2,6 +2,7 @@ import { styled } from "styled-components";
 import { ObjectFieldTemplateTitle, } from "../ObjectFieldTemplate/styledComponents";
 import { Button } from "@nolwenture/component-library";
 export const CollapsibleObjectFieldTemplateWrapper = undefined;
+export const CollapsibleObjectTitleInfoWrapper = undefined;
 export const CollapsibleObjectFieldTemplateIcon = undefined;
 export const CollapsibleObjectFieldTemplateTitle = styled(ObjectFieldTemplateTitle) `
   display: flex;
@@ -23,6 +24,8 @@ export 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/esm/Form/templates/FieldTemplate/FieldTemplate.js

@@ -3,11 +3,12 @@ import { useContext, useMemo } from "react";
 import { extractUiSchema, getDescription, getTitle } from "../../../utils";
 import { FormRegistry } from "../../FormRegistry";
 export const FieldTemplate = (props) => {
-    const { components: { FieldWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = useContext(FormRegistry);
+    const { components: { FieldWrapper, FieldTitleInfoWrapper, FieldTitle, FieldDescription, ErrorMessage, FieldHelp, RequiredIndicator, FieldInfo, }, } = useContext(FormRegistry);
     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: [_jsxs(FieldTitleInfoWrapper, { 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/ObjectFieldTemplate.js

@@ -5,7 +5,7 @@ import { FormRegistry } from "../../FormRegistry";
 import { getComponents } from "./styledComponents";
 export const ObjectFieldTemplate = (props) => {
     const { components } = useContext(FormRegistry);
-    const { Wrapper, Title, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
+    const { Wrapper, Title, TitleInfoWrapper, Description, Help, Info, RequiredIndicator, ErrorMessage, } = getComponents(components);
     const { children, uiSchema, ...otherProps } = props;
     const title = getTitle(props);
     const description = getDescription(props);
@@ -24,5 +24,5 @@ export const ObjectFieldTemplate = (props) => {
         ...wrapperProps,
         ...dataAttributes,
     };
-    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsxs(Title, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] }));
+    return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsxs(Title, { ...titleProps, children: [title, props?.required && _jsx(RequiredIndicator, {})] })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] }));
 };

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

@@ -1,15 +1,35 @@
+import { lighten } from "polished";
 import { styled } from "styled-components";
 export const ObjectFieldTemplateWrapper = 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) => 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};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
 `;
+export const ObjectFieldTitleInfoWrapper = styled.div `
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+`;
 export const ObjectFieldTemplateDescription = undefined;
 export const ObjectFieldTemplateHelp = undefined;
 export const ObjectFieldTemplateInfo = undefined;
@@ -19,6 +39,7 @@ export 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/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/FieldInfo.d.ts

@@ -3,6 +3,8 @@ import { FieldInfoBoxElementProps, FieldInfoProps } from "../../common/types/Fie
 export declare const FieldInfoBoxElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FieldInfoBoxElementProps>> & string;
 export declare const FieldInfoBoxArrowElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, FieldInfoBoxElementProps>> & string;
 export declare const FieldInfoBoxInnerElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const InlineFieldInfoBoxInnerElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FieldInfoContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.AnchorHTMLAttributes<HTMLAnchorElement>, HTMLAnchorElement>, never>> & string;
 export declare const FieldInfoLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>> & string;
+export declare const InlineFieldInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const FieldInfo: React.FC<FieldInfoProps>;

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

@@ -1,6 +1,9 @@
 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 FieldTitleInfoWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & 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;