@nolwenture/formik-jsonschema-form 1.2.6 → 1.2.8

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

@@ -40,10 +40,10 @@ const formik = __importStar(require("formik"));
 exports.FieldWrapper = styled_components_1.styled.div `
   display: flex;
   flex-direction: column;
-  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  gap: ${(props) => props.theme.spacing.xs};
   color: ${(props) => props.theme.color.text.default};
   opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
-  pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
+  pointer-events: ${(props) => (props.$isDisabled ? "none" : "auto")};
 `;
 exports.FieldTitleInfoWrapper = styled_components_1.styled.div `
   display: flex;
@@ -62,7 +62,9 @@ exports.FieldDescription = styled_components_1.styled.p `
   margin: 0;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  font-weight: ${(props) => (props.$isReadOnly ? props.theme.typography.weight.bold : props.theme.typography.weight.normal)};
+  font-weight: ${(props) => props.$isReadOnly
+    ? props.theme.typography.weight.bold
+    : props.theme.typography.weight.normal};
 `;
 exports.FieldHelp = styled_components_1.styled.p `
   color: ${(props) => props.theme.color.text.default};

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

@@ -10,19 +10,21 @@ const fa_1 = require("react-icons/fa");
 const component_library_1 = require("@nolwenture/component-library");
 exports.FileUploadFieldContainer = styled_components_1.default.div `
   align-items: center;
-  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
-  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.input};
+  border: ${(props) => props.$readOnly
+    ? "none"
+    : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.m};
   justify-content: center;
-  padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
-  margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
+  padding: ${(props) => (props.$readOnly ? "0" : props.theme.spacing.xxl)};
+  margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
   position: relative;
   transition: 0.3s filter ease;
 
   &:hover {
-    filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
+    filter: ${(props) => (props.$readOnly ? "none" : "brightness(110%)")};
   }
 `;
 exports.HiddenFileInput = styled_components_1.default.input `
@@ -44,7 +46,12 @@ exports.InfoText = styled_components_1.default.p `
   margin: 0;
 `;
 exports.Divider = styled_components_1.default.div `
-  background: linear-gradient(180deg, transparent calc(50% - 2px), ${(props) => props.theme.color.palette.neutral[500]} calc(50%), transparent 50%);
+  background: linear-gradient(
+    180deg,
+    transparent calc(50% - 2px),
+    ${(props) => props.theme.color.palette.neutral[500]} calc(50%),
+    transparent 50%
+  );
   color: ${(props) => props.theme.color.palette.neutral[500]};
   display: flex;
   flex-direction: row;
@@ -99,15 +106,19 @@ exports.FileItemContainer = styled_components_1.default.div `
 `;
 exports.UploadedFileItemContainer = styled_components_1.default.div `
   align-items: center;
-  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
-  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.default};
+  border: ${(props) => props.$readOnly
+    ? "none"
+    : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: row;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.m};
   justify-content: space-between;
   margin: 0;
-  padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+  padding: ${(props) => props.$readOnly
+    ? "0"
+    : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
   width: 100%;
 `;
 exports.UploadedFileInfoContainer = styled_components_1.default.div `
@@ -190,9 +201,9 @@ exports.DragOverlay = styled_components_1.default.div `
   font-weight: ${(props) => props.theme.typography.weight.bold};
   justify-content: center;
   left: 0;
-  pointer-events: none; 
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 3; 
+  z-index: 3;
 `;

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

@@ -7,14 +7,16 @@ exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInputElement = exp
 const styled_components_1 = __importDefault(require("styled-components"));
 const styledComponents_1 = require("../RadioField/styledComponents");
 exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledComponents_1.RadioFieldContainer) `
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    flex-wrap: wrap;
-    justify-content: start;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  flex-wrap: wrap;
+  justify-content: start;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.l};
 
-    &:has(input[readonly]) {
-      flex-direction: column;
-      gap: ${(props) => props.theme.spacing.s};
-    }
+  &:has(input[readonly]) {
+    flex-direction: column;
+    gap: ${(props) => props.theme.spacing.s};
+  }
 `;
 exports.MultipleChoiceFieldElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldElement) ``;
 exports.MultipleChoiceFieldInputElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldInputElement) ``;

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

@@ -7,12 +7,16 @@ const styled_components_1 = require("styled-components");
 exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
   display: flex;
   flex-direction: column;
+  gap: ${(props) => props.theme.spacing.m};
   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]) {
+  &: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 {
@@ -23,7 +27,6 @@ exports.ObjectFieldTemplateWrapper = styled_components_1.styled.fieldset `
       }
     }
   }
-
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.styled.legend `
   color: ${(props) => props.theme.color.text.default};

package/dist/cjs/FormView/components/Field.js

@@ -12,7 +12,8 @@ const fa_1 = require("react-icons/fa");
 exports.FieldWrapper = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
+  gap: ${(props) => props.theme.spacing.s};
+  margin-bottom: ${(props) => props.theme.spacing.s};
   width: min(100%, 70rem);
 `;
 exports.FieldTitle = styled_components_1.default.label `
@@ -21,7 +22,6 @@ exports.FieldTitle = styled_components_1.default.label `
   font-family: ${(props) => props.theme.typography.fontFamily.heading};
   font-size: ${(props) => props.theme.typography.size.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
-  margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.s} 0`};
   width: 100%;
 `;
 exports.FieldDescription = styled_components_1.default.div `
@@ -30,13 +30,12 @@ exports.FieldDescription = styled_components_1.default.div `
   font-weight: ${(props) => props.theme.typography.weight.normal};
   font-style: italic;
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 exports.StringFieldValue = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.l};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -44,7 +43,7 @@ exports.TextAreaValue = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.l};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -52,15 +51,16 @@ exports.ArrayFieldItem = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   background-color: ${(props) => props.theme.color.background.default};
   padding: ${(props) => props.theme.spacing.l};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 exports.EJSFieldValue = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   padding-left: ${(props) => props.theme.spacing.l};
   width: 100%;
 `;
@@ -76,8 +76,8 @@ const SelectedBox = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.color.border.default};
-  padding: 0 .05rem;
+    ${(props) => props.theme.color.border.default};
+  padding: 0 0.05rem;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   display: flex;
@@ -88,22 +88,22 @@ const NotSelectedCircle = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.color.border.default};
+    ${(props) => props.theme.color.border.default};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   display: inline-flex;
   justify-content: center;
   align-items: start;
-  padding: 0 .1rem;
+  padding: 0 0.1rem;
 `;
 exports.SelectedIcon = (0, styled_components_1.default)(fa_1.FaCheck) `
   color: ${(props) => props.theme.color.text.default};
-  width: .75rem;
+  width: 0.75rem;
 `;
 exports.NotSelectedIcon = (0, styled_components_1.default)(fa_1.FaTimes) `
   color: ${(props) => props.theme.color.text.default};
-  width: .75rem;
+  width: 0.75rem;
 `;
 exports.BooleanFieldWrapper = styled_components_1.default.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -128,7 +128,7 @@ const BooleanFieldValue = ({ name, className, value, label, }) => {
 };
 exports.BooleanFieldValue = BooleanFieldValue;
 const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
-    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: "Nothing was selected" }), selected &&
+    return ((0, jsx_runtime_1.jsx)(exports.MultipleChoiceFieldWrapper, { children: (0, jsx_runtime_1.jsxs)(styledComponents_1.MultipleChoiceFieldContainer, { className: className, style: (0, getStyle_1.getStyle)(style ?? ""), children: [!selected && !notSelected && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {}), selected &&
                     selected.length > 0 &&
                     selected.map((s) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: (0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(SelectedBox, { children: (0, jsx_runtime_1.jsx)(exports.SelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
                     notSelected?.length > 0 &&

package/dist/cjs/utils/getStyle.js

@@ -4,7 +4,7 @@ exports.getStyle = getStyle;
 function getStyle(key) {
     const style = {};
     if (key === "inline") {
-        style.display = "inline-grid";
+        style.flexDirection = "row";
     }
     if (key === "oneColumn") {
         style.display = "grid";

package/dist/cjs/utils/setTitleValues.js

@@ -4,12 +4,12 @@ exports.setTitleValues = void 0;
 const formik_1 = require("formik");
 // Replaces template string variables with form data for CollapsibleObjectFieldTemplate titles
 const setTitleValues = (name, title, defaultTitle, values) => {
-    const match = name.match(/^([a-zA-Z_$][\w$]*)\[(\d+)\]$/);
+    const match = name.match(/^([a-zA-Z_$][\w\[\]\.$]*)\[(\d+)\]$/);
     if (match) {
         name = match[1];
     }
     const index = match ? parseInt(match[2]) : -1;
-    const itemValues = match ? values[name][index] : values[name];
+    const itemValues = match ? (0, formik_1.getIn)(values, name)[index] : (0, formik_1.getIn)(values, name);
     return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
         const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
         const key = keyMatch ? keyMatch[1] : "";

package/dist/cjs/utils/solveReferences.js

@@ -12,10 +12,14 @@ function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
             throw new Error("Only references to definitions are supported");
         }
         const path = pathParts.slice(2).join(".");
+        const uiPath = pathParts
+            .slice(2)
+            .filter((part) => part !== "properties")
+            .join(".");
         // TODO: Should we overwrite rather than merge? Maybe add a flag for choosing the behavior?
         solvedSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(definitions, path) ?? {}, schema ?? {});
         delete solvedSchema.$ref;
-        solvedUiSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(uiSchemaDefinitions, path) ?? {}, uiSchema ?? {});
+        solvedUiSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(uiSchemaDefinitions, uiPath) ?? {}, uiSchema ?? {});
     }
     return { schema: solvedSchema, uiSchema: solvedUiSchema };
 }

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

@@ -4,10 +4,10 @@ import * as formik from "formik";
 export const FieldWrapper = styled.div `
   display: flex;
   flex-direction: column;
-  margin: ${(props) => `${props.theme.spacing.s} 0`};
+  gap: ${(props) => props.theme.spacing.xs};
   color: ${(props) => props.theme.color.text.default};
   opacity: ${(props) => (props.$isDisabled ? 0.6 : 1)};
-  pointer-events: ${(props) => (props.$isDisabled ? 'none' : 'auto')};
+  pointer-events: ${(props) => (props.$isDisabled ? "none" : "auto")};
 `;
 export const FieldTitleInfoWrapper = styled.div `
   display: flex;
@@ -26,7 +26,9 @@ export const FieldDescription = styled.p `
   margin: 0;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.base};
-  font-weight: ${(props) => (props.$isReadOnly ? props.theme.typography.weight.bold : props.theme.typography.weight.normal)};
+  font-weight: ${(props) => props.$isReadOnly
+    ? props.theme.typography.weight.bold
+    : props.theme.typography.weight.normal};
 `;
 export const FieldHelp = styled.p `
   color: ${(props) => props.theme.color.text.default};

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

@@ -4,19 +4,21 @@ import { FaCloudUploadAlt, FaTrash } from "react-icons/fa";
 import { Button } from "@nolwenture/component-library";
 export const FileUploadFieldContainer = styled.div `
   align-items: center;
-  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
-  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.input};
+  border: ${(props) => props.$readOnly
+    ? "none"
+    : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: column;
   gap: ${(props) => props.theme.spacing.m};
   justify-content: center;
-  padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
-  margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
+  padding: ${(props) => (props.$readOnly ? "0" : props.theme.spacing.xxl)};
+  margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
   position: relative;
   transition: 0.3s filter ease;
 
   &:hover {
-    filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
+    filter: ${(props) => (props.$readOnly ? "none" : "brightness(110%)")};
   }
 `;
 export const HiddenFileInput = styled.input `
@@ -38,7 +40,12 @@ export const InfoText = styled.p `
   margin: 0;
 `;
 export const Divider = styled.div `
-  background: linear-gradient(180deg, transparent calc(50% - 2px), ${(props) => props.theme.color.palette.neutral[500]} calc(50%), transparent 50%);
+  background: linear-gradient(
+    180deg,
+    transparent calc(50% - 2px),
+    ${(props) => props.theme.color.palette.neutral[500]} calc(50%),
+    transparent 50%
+  );
   color: ${(props) => props.theme.color.palette.neutral[500]};
   display: flex;
   flex-direction: row;
@@ -93,15 +100,19 @@ export const FileItemContainer = styled.div `
 `;
 export const UploadedFileItemContainer = styled.div `
   align-items: center;
-  background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
-  border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
+  background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.default};
+  border: ${(props) => props.$readOnly
+    ? "none"
+    : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
   display: flex;
   flex-direction: row;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.m};
   justify-content: space-between;
   margin: 0;
-  padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
+  padding: ${(props) => props.$readOnly
+    ? "0"
+    : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
   width: 100%;
 `;
 export const UploadedFileInfoContainer = styled.div `
@@ -184,9 +195,9 @@ export const DragOverlay = styled.div `
   font-weight: ${(props) => props.theme.typography.weight.bold};
   justify-content: center;
   left: 0;
-  pointer-events: none; 
+  pointer-events: none;
   position: absolute;
   right: 0;
   top: 0;
-  z-index: 3; 
+  z-index: 3;
 `;

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

@@ -1,14 +1,16 @@
 import styled from "styled-components";
 import { RadioFieldContainer, RadioFieldElement, RadioFieldInputElement, RadioFieldLabel, } from "../RadioField/styledComponents";
 export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
-    font-family: ${(props) => props.theme.typography.fontFamily.base};
-    flex-wrap: wrap;
-    justify-content: start;
+  font-family: ${(props) => props.theme.typography.fontFamily.base};
+  flex-wrap: wrap;
+  justify-content: start;
+  flex-direction: column;
+  gap: ${(props) => props.theme.spacing.l};
 
-    &:has(input[readonly]) {
-      flex-direction: column;
-      gap: ${(props) => props.theme.spacing.s};
-    }
+  &:has(input[readonly]) {
+    flex-direction: column;
+    gap: ${(props) => props.theme.spacing.s};
+  }
 `;
 export const MultipleChoiceFieldElement = styled(RadioFieldElement) ``;
 export const MultipleChoiceFieldInputElement = styled(RadioFieldInputElement) ``;

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

@@ -3,12 +3,16 @@ import { styled } from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.fieldset `
   display: flex;
   flex-direction: column;
+  gap: ${(props) => props.theme.spacing.m};
   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]) {
+  &:has(input[disabled]),
+  &:has(option[disabled]),
+  &:has(select[disabled]),
+  &:has(textarea[disabled]) {
     border-color: ${(props) => lighten(0.4, props.theme.color.border.default)};
 
     legend {
@@ -19,7 +23,6 @@ export const ObjectFieldTemplateWrapper = styled.fieldset `
       }
     }
   }
-
 `;
 export const ObjectFieldTemplateTitle = styled.legend `
   color: ${(props) => props.theme.color.text.default};

package/dist/esm/FormView/components/Field.js

@@ -6,7 +6,8 @@ import { FaCheck, FaTimes } from "react-icons/fa";
 export const FieldWrapper = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
-  margin: ${(props) => `0 0 ${props.theme.spacing.s} 0 `};
+  gap: ${(props) => props.theme.spacing.s};
+  margin-bottom: ${(props) => props.theme.spacing.s};
   width: min(100%, 70rem);
 `;
 export const FieldTitle = styled.label `
@@ -15,7 +16,6 @@ export const FieldTitle = styled.label `
   font-family: ${(props) => props.theme.typography.fontFamily.heading};
   font-size: ${(props) => props.theme.typography.size.base};
   font-weight: ${(props) => props.theme.typography.weight.bold};
-  margin: ${(props) => `${props.theme.spacing.xs} 0 ${props.theme.spacing.s} 0`};
   width: 100%;
 `;
 export const FieldDescription = styled.div `
@@ -24,13 +24,12 @@ export const FieldDescription = styled.div `
   font-weight: ${(props) => props.theme.typography.weight.normal};
   font-style: italic;
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 export const StringFieldValue = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.l};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -38,7 +37,7 @@ export const TextAreaValue = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  margin-bottom: ${(props) => props.theme.spacing.l};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
 `;
@@ -46,15 +45,16 @@ export const ArrayFieldItem = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   background-color: ${(props) => props.theme.color.background.default};
   padding: ${(props) => props.theme.spacing.l};
   border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
-  margin-bottom: ${(props) => props.theme.spacing.s};
 `;
 export const EJSFieldValue = styled.div `
   color: ${(props) => props.theme.color.text.default};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   padding-left: ${(props) => props.theme.spacing.l};
   width: 100%;
 `;
@@ -70,8 +70,8 @@ const SelectedBox = styled.div `
   color: ${(props) => props.theme.color.text.default};
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.color.border.default};
-  padding: 0 .05rem;
+    ${(props) => props.theme.color.border.default};
+  padding: 0 0.05rem;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   display: flex;
@@ -82,22 +82,22 @@ const NotSelectedCircle = styled.div `
   color: ${(props) => props.theme.color.text.default};
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
-      ${(props) => props.theme.color.border.default};
+    ${(props) => props.theme.color.border.default};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
   display: inline-flex;
   justify-content: center;
   align-items: start;
-  padding: 0 .1rem;
+  padding: 0 0.1rem;
 `;
 export const SelectedIcon = styled(FaCheck) `
   color: ${(props) => props.theme.color.text.default};
-  width: .75rem;
+  width: 0.75rem;
 `;
 export const NotSelectedIcon = styled(FaTimes) `
   color: ${(props) => props.theme.color.text.default};
-  width: .75rem;
+  width: 0.75rem;
 `;
 export const BooleanFieldWrapper = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -121,7 +121,7 @@ export const BooleanFieldValue = ({ name, className, value, label, }) => {
     return (_jsx("div", { className: className, children: value === true ? (_jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Selected" })] })) : (_jsxs(Selected, { children: [_jsx(NotSelectedCircle, { children: _jsx(NotSelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
 };
 export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
-    return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
+    return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, {}), selected &&
                     selected.length > 0 &&
                     selected.map((s) => (_jsx(MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: _jsx(SelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
                     notSelected?.length > 0 &&

package/dist/esm/utils/getStyle.js

@@ -1,7 +1,7 @@
 export function getStyle(key) {
     const style = {};
     if (key === "inline") {
-        style.display = "inline-grid";
+        style.flexDirection = "row";
     }
     if (key === "oneColumn") {
         style.display = "grid";

package/dist/esm/utils/setTitleValues.js

@@ -1,12 +1,12 @@
 import { getIn } from "formik";
 // Replaces template string variables with form data for CollapsibleObjectFieldTemplate titles
 export const setTitleValues = (name, title, defaultTitle, values) => {
-    const match = name.match(/^([a-zA-Z_$][\w$]*)\[(\d+)\]$/);
+    const match = name.match(/^([a-zA-Z_$][\w\[\]\.$]*)\[(\d+)\]$/);
     if (match) {
         name = match[1];
     }
     const index = match ? parseInt(match[2]) : -1;
-    const itemValues = match ? values[name][index] : values[name];
+    const itemValues = match ? getIn(values, name)[index] : getIn(values, name);
     return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
         const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
         const key = keyMatch ? keyMatch[1] : "";

package/dist/esm/utils/solveReferences.js

@@ -9,10 +9,14 @@ export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitio
             throw new Error("Only references to definitions are supported");
         }
         const path = pathParts.slice(2).join(".");
+        const uiPath = pathParts
+            .slice(2)
+            .filter((part) => part !== "properties")
+            .join(".");
         // TODO: Should we overwrite rather than merge? Maybe add a flag for choosing the behavior?
         solvedSchema = mergeSchemas(getIn(definitions, path) ?? {}, schema ?? {});
         delete solvedSchema.$ref;
-        solvedUiSchema = mergeSchemas(getIn(uiSchemaDefinitions, path) ?? {}, uiSchema ?? {});
+        solvedUiSchema = mergeSchemas(getIn(uiSchemaDefinitions, uiPath) ?? {}, uiSchema ?? {});
     }
     return { schema: solvedSchema, uiSchema: solvedUiSchema };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.2.6",
+  "version": "1.2.8",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -125,4 +125,4 @@
       "last 1 safari version"
     ]
   }
-}
+}