@nolwenture/formik-jsonschema-form 1.2.5 → 1.2.7

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,15 @@ 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;
 
-    &: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/FormView/components/Field.js

@@ -36,6 +36,7 @@ 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};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
@@ -44,6 +45,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};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
@@ -52,6 +54,7 @@ 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}`};
@@ -61,6 +64,7 @@ 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 +80,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 +92,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 +132,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/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

@@ -2,15 +2,24 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.solveReferences = solveReferences;
 const mergeSchemas_1 = require("./mergeSchemas");
+const formik_1 = require("formik");
 function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
     let solvedSchema = schema;
     let solvedUiSchema = uiSchema;
     if (typeof schema === "object" && schema["$ref"] && definitions) {
-        const schemaKey = schema["$ref"]?.substring(14) ?? "";
+        const pathParts = schema["$ref"].split("/");
+        if (pathParts[0] !== "#" || pathParts[1] !== "definitions") {
+            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)(definitions[schemaKey] ?? {}, schema ?? {});
+        solvedSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(definitions, path) ?? {}, schema ?? {});
         delete solvedSchema.$ref;
-        solvedUiSchema = (0, mergeSchemas_1.mergeSchemas)(uiSchemaDefinitions?.[schemaKey] ?? {}, uiSchema ?? {});
+        solvedUiSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(uiSchemaDefinitions, uiPath) ?? {}, uiSchema ?? {});
     }
     return { schema: solvedSchema, uiSchema: solvedUiSchema };
 }

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,15 @@
 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;
 
-    &: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/FormView/components/Field.js

@@ -30,6 +30,7 @@ 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};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
@@ -38,6 +39,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};
+  font-weight: ${(props) => props.theme.typography.weight.normal};
   margin-bottom: ${(props) => props.theme.spacing.l};
   padding-left: ${(props) => props.theme.spacing.l};
   white-space: pre-line;
@@ -46,6 +48,7 @@ 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}`};
@@ -55,6 +58,7 @@ 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 +74,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 +86,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 +125,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/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

@@ -1,13 +1,22 @@
 import { mergeSchemas } from "./mergeSchemas";
+import { getIn } from "formik";
 export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
     let solvedSchema = schema;
     let solvedUiSchema = uiSchema;
     if (typeof schema === "object" && schema["$ref"] && definitions) {
-        const schemaKey = schema["$ref"]?.substring(14) ?? "";
+        const pathParts = schema["$ref"].split("/");
+        if (pathParts[0] !== "#" || pathParts[1] !== "definitions") {
+            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(definitions[schemaKey] ?? {}, schema ?? {});
+        solvedSchema = mergeSchemas(getIn(definitions, path) ?? {}, schema ?? {});
         delete solvedSchema.$ref;
-        solvedUiSchema = mergeSchemas(uiSchemaDefinitions?.[schemaKey] ?? {}, 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.5",
+  "version": "1.2.7",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [
@@ -125,4 +125,4 @@
       "last 1 safari version"
     ]
   }
-}
+}