@nolwenture/formik-jsonschema-form 1.2.6 → 1.2.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -10,19 +10,21 @@ const fa_1 = require("react-icons/fa");
10
10
  const component_library_1 = require("@nolwenture/component-library");
11
11
  exports.FileUploadFieldContainer = styled_components_1.default.div `
12
12
  align-items: center;
13
- background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
14
- border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
13
+ background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.input};
14
+ border: ${(props) => props.$readOnly
15
+ ? "none"
16
+ : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
15
17
  display: flex;
16
18
  flex-direction: column;
17
19
  gap: ${(props) => props.theme.spacing.m};
18
20
  justify-content: center;
19
- padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
20
- margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
21
+ padding: ${(props) => (props.$readOnly ? "0" : props.theme.spacing.xxl)};
22
+ margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
21
23
  position: relative;
22
24
  transition: 0.3s filter ease;
23
25
 
24
26
  &:hover {
25
- filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
27
+ filter: ${(props) => (props.$readOnly ? "none" : "brightness(110%)")};
26
28
  }
27
29
  `;
28
30
  exports.HiddenFileInput = styled_components_1.default.input `
@@ -44,7 +46,12 @@ exports.InfoText = styled_components_1.default.p `
44
46
  margin: 0;
45
47
  `;
46
48
  exports.Divider = styled_components_1.default.div `
47
- background: linear-gradient(180deg, transparent calc(50% - 2px), ${(props) => props.theme.color.palette.neutral[500]} calc(50%), transparent 50%);
49
+ background: linear-gradient(
50
+ 180deg,
51
+ transparent calc(50% - 2px),
52
+ ${(props) => props.theme.color.palette.neutral[500]} calc(50%),
53
+ transparent 50%
54
+ );
48
55
  color: ${(props) => props.theme.color.palette.neutral[500]};
49
56
  display: flex;
50
57
  flex-direction: row;
@@ -99,15 +106,19 @@ exports.FileItemContainer = styled_components_1.default.div `
99
106
  `;
100
107
  exports.UploadedFileItemContainer = styled_components_1.default.div `
101
108
  align-items: center;
102
- background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
103
- border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
109
+ background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.default};
110
+ border: ${(props) => props.$readOnly
111
+ ? "none"
112
+ : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
104
113
  display: flex;
105
114
  flex-direction: row;
106
115
  font-family: ${(props) => props.theme.typography.fontFamily.base};
107
116
  gap: ${(props) => props.theme.spacing.m};
108
117
  justify-content: space-between;
109
118
  margin: 0;
110
- padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
119
+ padding: ${(props) => props.$readOnly
120
+ ? "0"
121
+ : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
111
122
  width: 100%;
112
123
  `;
113
124
  exports.UploadedFileInfoContainer = styled_components_1.default.div `
@@ -190,9 +201,9 @@ exports.DragOverlay = styled_components_1.default.div `
190
201
  font-weight: ${(props) => props.theme.typography.weight.bold};
191
202
  justify-content: center;
192
203
  left: 0;
193
- pointer-events: none;
204
+ pointer-events: none;
194
205
  position: absolute;
195
206
  right: 0;
196
207
  top: 0;
197
- z-index: 3;
208
+ z-index: 3;
198
209
  `;
@@ -7,14 +7,15 @@ exports.MultipleChoiceFieldLabel = exports.MultipleChoiceFieldInputElement = exp
7
7
  const styled_components_1 = __importDefault(require("styled-components"));
8
8
  const styledComponents_1 = require("../RadioField/styledComponents");
9
9
  exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledComponents_1.RadioFieldContainer) `
10
- font-family: ${(props) => props.theme.typography.fontFamily.base};
11
- flex-wrap: wrap;
12
- justify-content: start;
10
+ font-family: ${(props) => props.theme.typography.fontFamily.base};
11
+ flex-wrap: wrap;
12
+ justify-content: start;
13
+ flex-direction: column;
13
14
 
14
- &:has(input[readonly]) {
15
- flex-direction: column;
16
- gap: ${(props) => props.theme.spacing.s};
17
- }
15
+ &:has(input[readonly]) {
16
+ flex-direction: column;
17
+ gap: ${(props) => props.theme.spacing.s};
18
+ }
18
19
  `;
19
20
  exports.MultipleChoiceFieldElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldElement) ``;
20
21
  exports.MultipleChoiceFieldInputElement = (0, styled_components_1.default)(styledComponents_1.RadioFieldInputElement) ``;
@@ -36,6 +36,7 @@ exports.StringFieldValue = styled_components_1.default.div `
36
36
  color: ${(props) => props.theme.color.text.default};
37
37
  font-family: ${(props) => props.theme.typography.fontFamily.base};
38
38
  font-size: ${(props) => props.theme.typography.size.small};
39
+ font-weight: ${(props) => props.theme.typography.weight.normal};
39
40
  margin-bottom: ${(props) => props.theme.spacing.l};
40
41
  padding-left: ${(props) => props.theme.spacing.l};
41
42
  white-space: pre-line;
@@ -44,6 +45,7 @@ exports.TextAreaValue = styled_components_1.default.div `
44
45
  color: ${(props) => props.theme.color.text.default};
45
46
  font-family: ${(props) => props.theme.typography.fontFamily.base};
46
47
  font-size: ${(props) => props.theme.typography.size.small};
48
+ font-weight: ${(props) => props.theme.typography.weight.normal};
47
49
  margin-bottom: ${(props) => props.theme.spacing.l};
48
50
  padding-left: ${(props) => props.theme.spacing.l};
49
51
  white-space: pre-line;
@@ -52,6 +54,7 @@ exports.ArrayFieldItem = styled_components_1.default.div `
52
54
  color: ${(props) => props.theme.color.text.default};
53
55
  font-family: ${(props) => props.theme.typography.fontFamily.base};
54
56
  font-size: ${(props) => props.theme.typography.size.small};
57
+ font-weight: ${(props) => props.theme.typography.weight.normal};
55
58
  background-color: ${(props) => props.theme.color.background.default};
56
59
  padding: ${(props) => props.theme.spacing.l};
57
60
  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
@@ -61,6 +64,7 @@ exports.EJSFieldValue = styled_components_1.default.div `
61
64
  color: ${(props) => props.theme.color.text.default};
62
65
  font-family: ${(props) => props.theme.typography.fontFamily.base};
63
66
  font-size: ${(props) => props.theme.typography.size.small};
67
+ font-weight: ${(props) => props.theme.typography.weight.normal};
64
68
  padding-left: ${(props) => props.theme.spacing.l};
65
69
  width: 100%;
66
70
  `;
@@ -76,8 +80,8 @@ const SelectedBox = styled_components_1.default.div `
76
80
  color: ${(props) => props.theme.color.text.default};
77
81
  background: ${(props) => props.theme.color.background.default};
78
82
  border: ${(props) => props.theme.strokeWidth.thin} solid
79
- ${(props) => props.theme.color.border.default};
80
- padding: 0 .05rem;
83
+ ${(props) => props.theme.color.border.default};
84
+ padding: 0 0.05rem;
81
85
  font-family: ${(props) => props.theme.typography.fontFamily.base};
82
86
  font-size: ${(props) => props.theme.typography.size.small};
83
87
  display: flex;
@@ -88,22 +92,22 @@ const NotSelectedCircle = styled_components_1.default.div `
88
92
  color: ${(props) => props.theme.color.text.default};
89
93
  background: ${(props) => props.theme.color.background.default};
90
94
  border: ${(props) => props.theme.strokeWidth.thin} solid
91
- ${(props) => props.theme.color.border.default};
95
+ ${(props) => props.theme.color.border.default};
92
96
  border-radius: ${(props) => props.theme.borderRadius.circle};
93
97
  font-family: ${(props) => props.theme.typography.fontFamily.base};
94
98
  font-size: ${(props) => props.theme.typography.size.small};
95
99
  display: inline-flex;
96
100
  justify-content: center;
97
101
  align-items: start;
98
- padding: 0 .1rem;
102
+ padding: 0 0.1rem;
99
103
  `;
100
104
  exports.SelectedIcon = (0, styled_components_1.default)(fa_1.FaCheck) `
101
105
  color: ${(props) => props.theme.color.text.default};
102
- width: .75rem;
106
+ width: 0.75rem;
103
107
  `;
104
108
  exports.NotSelectedIcon = (0, styled_components_1.default)(fa_1.FaTimes) `
105
109
  color: ${(props) => props.theme.color.text.default};
106
- width: .75rem;
110
+ width: 0.75rem;
107
111
  `;
108
112
  exports.BooleanFieldWrapper = styled_components_1.default.div `
109
113
  font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -128,7 +132,7 @@ const BooleanFieldValue = ({ name, className, value, label, }) => {
128
132
  };
129
133
  exports.BooleanFieldValue = BooleanFieldValue;
130
134
  const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
131
- 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 &&
135
+ 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 &&
132
136
  selected.length > 0 &&
133
137
  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 &&
134
138
  notSelected?.length > 0 &&
@@ -4,12 +4,12 @@ exports.setTitleValues = void 0;
4
4
  const formik_1 = require("formik");
5
5
  // Replaces template string variables with form data for CollapsibleObjectFieldTemplate titles
6
6
  const setTitleValues = (name, title, defaultTitle, values) => {
7
- const match = name.match(/^([a-zA-Z_$][\w$]*)\[(\d+)\]$/);
7
+ const match = name.match(/^([a-zA-Z_$][\w\[\]\.$]*)\[(\d+)\]$/);
8
8
  if (match) {
9
9
  name = match[1];
10
10
  }
11
11
  const index = match ? parseInt(match[2]) : -1;
12
- const itemValues = match ? values[name][index] : values[name];
12
+ const itemValues = match ? (0, formik_1.getIn)(values, name)[index] : (0, formik_1.getIn)(values, name);
13
13
  return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
14
14
  const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
15
15
  const key = keyMatch ? keyMatch[1] : "";
@@ -12,10 +12,14 @@ function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitions) {
12
12
  throw new Error("Only references to definitions are supported");
13
13
  }
14
14
  const path = pathParts.slice(2).join(".");
15
+ const uiPath = pathParts
16
+ .slice(2)
17
+ .filter((part) => part !== "properties")
18
+ .join(".");
15
19
  // TODO: Should we overwrite rather than merge? Maybe add a flag for choosing the behavior?
16
20
  solvedSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(definitions, path) ?? {}, schema ?? {});
17
21
  delete solvedSchema.$ref;
18
- solvedUiSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(uiSchemaDefinitions, path) ?? {}, uiSchema ?? {});
22
+ solvedUiSchema = (0, mergeSchemas_1.mergeSchemas)((0, formik_1.getIn)(uiSchemaDefinitions, uiPath) ?? {}, uiSchema ?? {});
19
23
  }
20
24
  return { schema: solvedSchema, uiSchema: solvedUiSchema };
21
25
  }
@@ -4,19 +4,21 @@ import { FaCloudUploadAlt, FaTrash } from "react-icons/fa";
4
4
  import { Button } from "@nolwenture/component-library";
5
5
  export const FileUploadFieldContainer = styled.div `
6
6
  align-items: center;
7
- background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.input};
8
- border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
7
+ background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.input};
8
+ border: ${(props) => props.$readOnly
9
+ ? "none"
10
+ : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
9
11
  display: flex;
10
12
  flex-direction: column;
11
13
  gap: ${(props) => props.theme.spacing.m};
12
14
  justify-content: center;
13
- padding: ${(props) => props.$readOnly ? '0' : props.theme.spacing.xxl};
14
- margin-top: ${(props) => props.$readOnly ? props.theme.spacing.l : '0'};
15
+ padding: ${(props) => (props.$readOnly ? "0" : props.theme.spacing.xxl)};
16
+ margin: ${(props) => `${props.theme.spacing.s} 0 ${props.theme.spacing.l} 0`};
15
17
  position: relative;
16
18
  transition: 0.3s filter ease;
17
19
 
18
20
  &:hover {
19
- filter: ${(props) => props.$readOnly ? 'none' : 'brightness(110%)'};
21
+ filter: ${(props) => (props.$readOnly ? "none" : "brightness(110%)")};
20
22
  }
21
23
  `;
22
24
  export const HiddenFileInput = styled.input `
@@ -38,7 +40,12 @@ export const InfoText = styled.p `
38
40
  margin: 0;
39
41
  `;
40
42
  export const Divider = styled.div `
41
- background: linear-gradient(180deg, transparent calc(50% - 2px), ${(props) => props.theme.color.palette.neutral[500]} calc(50%), transparent 50%);
43
+ background: linear-gradient(
44
+ 180deg,
45
+ transparent calc(50% - 2px),
46
+ ${(props) => props.theme.color.palette.neutral[500]} calc(50%),
47
+ transparent 50%
48
+ );
42
49
  color: ${(props) => props.theme.color.palette.neutral[500]};
43
50
  display: flex;
44
51
  flex-direction: row;
@@ -93,15 +100,19 @@ export const FileItemContainer = styled.div `
93
100
  `;
94
101
  export const UploadedFileItemContainer = styled.div `
95
102
  align-items: center;
96
- background-color: ${(props) => props.$readOnly ? 'transparent' : props.theme.color.background.default};
97
- border: ${(props) => props.$readOnly ? 'none' : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
103
+ background-color: ${(props) => props.$readOnly ? "transparent" : props.theme.color.background.default};
104
+ border: ${(props) => props.$readOnly
105
+ ? "none"
106
+ : `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
98
107
  display: flex;
99
108
  flex-direction: row;
100
109
  font-family: ${(props) => props.theme.typography.fontFamily.base};
101
110
  gap: ${(props) => props.theme.spacing.m};
102
111
  justify-content: space-between;
103
112
  margin: 0;
104
- padding: ${(props) => props.$readOnly ? '0' : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
113
+ padding: ${(props) => props.$readOnly
114
+ ? "0"
115
+ : `${props.theme.spacing.m} ${props.theme.spacing.l}`};
105
116
  width: 100%;
106
117
  `;
107
118
  export const UploadedFileInfoContainer = styled.div `
@@ -184,9 +195,9 @@ export const DragOverlay = styled.div `
184
195
  font-weight: ${(props) => props.theme.typography.weight.bold};
185
196
  justify-content: center;
186
197
  left: 0;
187
- pointer-events: none;
198
+ pointer-events: none;
188
199
  position: absolute;
189
200
  right: 0;
190
201
  top: 0;
191
- z-index: 3;
202
+ z-index: 3;
192
203
  `;
@@ -1,14 +1,15 @@
1
1
  import styled from "styled-components";
2
2
  import { RadioFieldContainer, RadioFieldElement, RadioFieldInputElement, RadioFieldLabel, } from "../RadioField/styledComponents";
3
3
  export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
4
- font-family: ${(props) => props.theme.typography.fontFamily.base};
5
- flex-wrap: wrap;
6
- justify-content: start;
4
+ font-family: ${(props) => props.theme.typography.fontFamily.base};
5
+ flex-wrap: wrap;
6
+ justify-content: start;
7
+ flex-direction: column;
7
8
 
8
- &:has(input[readonly]) {
9
- flex-direction: column;
10
- gap: ${(props) => props.theme.spacing.s};
11
- }
9
+ &:has(input[readonly]) {
10
+ flex-direction: column;
11
+ gap: ${(props) => props.theme.spacing.s};
12
+ }
12
13
  `;
13
14
  export const MultipleChoiceFieldElement = styled(RadioFieldElement) ``;
14
15
  export const MultipleChoiceFieldInputElement = styled(RadioFieldInputElement) ``;
@@ -30,6 +30,7 @@ export const StringFieldValue = styled.div `
30
30
  color: ${(props) => props.theme.color.text.default};
31
31
  font-family: ${(props) => props.theme.typography.fontFamily.base};
32
32
  font-size: ${(props) => props.theme.typography.size.small};
33
+ font-weight: ${(props) => props.theme.typography.weight.normal};
33
34
  margin-bottom: ${(props) => props.theme.spacing.l};
34
35
  padding-left: ${(props) => props.theme.spacing.l};
35
36
  white-space: pre-line;
@@ -38,6 +39,7 @@ export const TextAreaValue = styled.div `
38
39
  color: ${(props) => props.theme.color.text.default};
39
40
  font-family: ${(props) => props.theme.typography.fontFamily.base};
40
41
  font-size: ${(props) => props.theme.typography.size.small};
42
+ font-weight: ${(props) => props.theme.typography.weight.normal};
41
43
  margin-bottom: ${(props) => props.theme.spacing.l};
42
44
  padding-left: ${(props) => props.theme.spacing.l};
43
45
  white-space: pre-line;
@@ -46,6 +48,7 @@ export const ArrayFieldItem = styled.div `
46
48
  color: ${(props) => props.theme.color.text.default};
47
49
  font-family: ${(props) => props.theme.typography.fontFamily.base};
48
50
  font-size: ${(props) => props.theme.typography.size.small};
51
+ font-weight: ${(props) => props.theme.typography.weight.normal};
49
52
  background-color: ${(props) => props.theme.color.background.default};
50
53
  padding: ${(props) => props.theme.spacing.l};
51
54
  border: ${(props) => `${props.theme.strokeWidth.thin} solid ${props.theme.color.border.default}`};
@@ -55,6 +58,7 @@ export const EJSFieldValue = styled.div `
55
58
  color: ${(props) => props.theme.color.text.default};
56
59
  font-family: ${(props) => props.theme.typography.fontFamily.base};
57
60
  font-size: ${(props) => props.theme.typography.size.small};
61
+ font-weight: ${(props) => props.theme.typography.weight.normal};
58
62
  padding-left: ${(props) => props.theme.spacing.l};
59
63
  width: 100%;
60
64
  `;
@@ -70,8 +74,8 @@ const SelectedBox = styled.div `
70
74
  color: ${(props) => props.theme.color.text.default};
71
75
  background: ${(props) => props.theme.color.background.default};
72
76
  border: ${(props) => props.theme.strokeWidth.thin} solid
73
- ${(props) => props.theme.color.border.default};
74
- padding: 0 .05rem;
77
+ ${(props) => props.theme.color.border.default};
78
+ padding: 0 0.05rem;
75
79
  font-family: ${(props) => props.theme.typography.fontFamily.base};
76
80
  font-size: ${(props) => props.theme.typography.size.small};
77
81
  display: flex;
@@ -82,22 +86,22 @@ const NotSelectedCircle = styled.div `
82
86
  color: ${(props) => props.theme.color.text.default};
83
87
  background: ${(props) => props.theme.color.background.default};
84
88
  border: ${(props) => props.theme.strokeWidth.thin} solid
85
- ${(props) => props.theme.color.border.default};
89
+ ${(props) => props.theme.color.border.default};
86
90
  border-radius: ${(props) => props.theme.borderRadius.circle};
87
91
  font-family: ${(props) => props.theme.typography.fontFamily.base};
88
92
  font-size: ${(props) => props.theme.typography.size.small};
89
93
  display: inline-flex;
90
94
  justify-content: center;
91
95
  align-items: start;
92
- padding: 0 .1rem;
96
+ padding: 0 0.1rem;
93
97
  `;
94
98
  export const SelectedIcon = styled(FaCheck) `
95
99
  color: ${(props) => props.theme.color.text.default};
96
- width: .75rem;
100
+ width: 0.75rem;
97
101
  `;
98
102
  export const NotSelectedIcon = styled(FaTimes) `
99
103
  color: ${(props) => props.theme.color.text.default};
100
- width: .75rem;
104
+ width: 0.75rem;
101
105
  `;
102
106
  export const BooleanFieldWrapper = styled.div `
103
107
  font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -121,7 +125,7 @@ export const BooleanFieldValue = ({ name, className, value, label, }) => {
121
125
  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" })] })) }));
122
126
  };
123
127
  export const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
124
- return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, { children: "Nothing was selected" }), selected &&
128
+ return (_jsx(MultipleChoiceFieldWrapper, { children: _jsxs(MultipleChoiceFieldContainer, { className: className, style: getStyle(style ?? ""), children: [!selected && !notSelected && _jsx(_Fragment, {}), selected &&
125
129
  selected.length > 0 &&
126
130
  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 &&
127
131
  notSelected?.length > 0 &&
@@ -1,12 +1,12 @@
1
1
  import { getIn } from "formik";
2
2
  // Replaces template string variables with form data for CollapsibleObjectFieldTemplate titles
3
3
  export const setTitleValues = (name, title, defaultTitle, values) => {
4
- const match = name.match(/^([a-zA-Z_$][\w$]*)\[(\d+)\]$/);
4
+ const match = name.match(/^([a-zA-Z_$][\w\[\]\.$]*)\[(\d+)\]$/);
5
5
  if (match) {
6
6
  name = match[1];
7
7
  }
8
8
  const index = match ? parseInt(match[2]) : -1;
9
- const itemValues = match ? values[name][index] : values[name];
9
+ const itemValues = match ? getIn(values, name)[index] : getIn(values, name);
10
10
  return title.replace(/\$\{([\w$.]+)\}/g, (match) => {
11
11
  const keyMatch = match.match(/^\$\{([\w$.]+)\}$/);
12
12
  const key = keyMatch ? keyMatch[1] : "";
@@ -9,10 +9,14 @@ export function solveReferences(schema, definitions, uiSchema, uiSchemaDefinitio
9
9
  throw new Error("Only references to definitions are supported");
10
10
  }
11
11
  const path = pathParts.slice(2).join(".");
12
+ const uiPath = pathParts
13
+ .slice(2)
14
+ .filter((part) => part !== "properties")
15
+ .join(".");
12
16
  // TODO: Should we overwrite rather than merge? Maybe add a flag for choosing the behavior?
13
17
  solvedSchema = mergeSchemas(getIn(definitions, path) ?? {}, schema ?? {});
14
18
  delete solvedSchema.$ref;
15
- solvedUiSchema = mergeSchemas(getIn(uiSchemaDefinitions, path) ?? {}, uiSchema ?? {});
19
+ solvedUiSchema = mergeSchemas(getIn(uiSchemaDefinitions, uiPath) ?? {}, uiSchema ?? {});
16
20
  }
17
21
  return { schema: solvedSchema, uiSchema: solvedUiSchema };
18
22
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.2.6",
3
+ "version": "1.2.7",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [
@@ -125,4 +125,4 @@
125
125
  "last 1 safari version"
126
126
  ]
127
127
  }
128
- }
128
+ }