@nolwenture/formik-jsonschema-form 1.0.0-beta.41 → 1.0.0-beta.43

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.
Files changed (7) hide show
  1. package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js +1 -1
  2. package/dist/cjs/FormView/components/Field.js +1 -9
  3. package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js +15 -10
  4. package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js +1 -1
  5. package/dist/esm/FormView/components/Field.js +1 -9
  6. package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js +15 -10
  7. package/package.json +1 -1
package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js CHANGED
@@ -36,6 +36,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
36
36
  const hide = collapsed;
37
37
  return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed),
38
38
  //ariaExpanded={!hide}
39
- ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
39
+ ariaLabel: ariaLabel ?? name, children: (0, jsx_runtime_1.jsxs)(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && (0, jsx_runtime_1.jsx)(RequiredIndicator, {}), (0, jsx_runtime_1.jsx)(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && (0, jsx_runtime_1.jsx)(Info, { ...info }), description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), !hide && (0, jsx_runtime_1.jsx)(ChildrenWrapper, { children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
40
40
  };
41
41
  exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;
package/dist/cjs/FormView/components/Field.js CHANGED
@@ -15,17 +15,15 @@ exports.FieldWrapper = styled_components_1.default.div `
15
15
  width: min(100%, 70rem);
16
16
  `;
17
17
  exports.FieldTitle = styled_components_1.default.label `
18
- break-before: avoid;
19
18
  color: ${(props) => props.theme.color.text.default};
20
19
  display: inline-block;
21
20
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
22
- font-size: ${(props) => props.theme.typography.size.base};
21
+ font-size: ${(props) => props.theme.typography.size.small};
23
22
  font-weight: ${(props) => props.theme.typography.weight.bold};
24
23
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
25
24
  width: 100%;
26
25
  `;
27
26
  exports.FieldDescription = styled_components_1.default.div `
28
- break-before: avoid;
29
27
  color: ${(props) => props.theme.color.text.default};
30
28
  font-family: ${(props) => props.theme.typography.fontFamily.base};
31
29
  font-weight: ${(props) => props.theme.typography.weight.normal};
@@ -35,7 +33,6 @@ exports.FieldDescription = styled_components_1.default.div `
35
33
  max-width: 66ch;
36
34
  `;
37
35
  exports.StringFieldValue = styled_components_1.default.div `
38
- break-before: avoid;
39
36
  color: ${(props) => props.theme.color.text.default};
40
37
  font-family: ${(props) => props.theme.typography.fontFamily.base};
41
38
  font-size: ${(props) => props.theme.typography.size.small};
@@ -45,7 +42,6 @@ exports.StringFieldValue = styled_components_1.default.div `
45
42
  white-space: pre-line;
46
43
  `;
47
44
  exports.TextAreaValue = styled_components_1.default.div `
48
- break-before: avoid;
49
45
  color: ${(props) => props.theme.color.text.default};
50
46
  font-family: ${(props) => props.theme.typography.fontFamily.base};
51
47
  font-size: ${(props) => props.theme.typography.size.small};
@@ -55,14 +51,12 @@ exports.TextAreaValue = styled_components_1.default.div `
55
51
  white-space: pre-line;
56
52
  `;
57
53
  exports.ArrayFieldItem = styled_components_1.default.div `
58
- break-before: avoid;
59
54
  color: ${(props) => props.theme.color.text.default};
60
55
  font-family: ${(props) => props.theme.typography.fontFamily.base};
61
56
  font-size: ${(props) => props.theme.typography.size.small};
62
57
  padding-left: ${(props) => props.theme.spacing.l};
63
58
  `;
64
59
  exports.EJSFieldValue = styled_components_1.default.div `
65
- break-before: avoid;
66
60
  color: ${(props) => props.theme.color.text.default};
67
61
  font-family: ${(props) => props.theme.typography.fontFamily.base};
68
62
  font-size: ${(props) => props.theme.typography.size.small};
@@ -102,13 +96,11 @@ const NotSelectedCircle = styled_components_1.default.span `
102
96
  flex: 0 0 1rem;
103
97
  `;
104
98
  exports.BooleanFieldWrapper = styled_components_1.default.div `
105
- break-before: avoid;
106
99
  font-family: ${(props) => props.theme.typography.fontFamily.base};
107
100
  font-size: ${(props) => props.theme.typography.size.small};
108
101
  padding-left: ${(props) => props.theme.spacing.l};
109
102
  `;
110
103
  exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
111
- break-before: avoid;
112
104
  font-size: ${(props) => props.theme.typography.size.small};
113
105
  label {
114
106
  align-items: start;
package/dist/cjs/FormView/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -6,27 +6,32 @@ Object.defineProperty(exports, "__esModule", { value: true });
6
6
  exports.ObjectFieldTemplateDescription = exports.ObjectFieldTemplateTitle = exports.ObjectFieldTemplateWrapper = void 0;
7
7
  exports.getComponents = getComponents;
8
8
  const styled_components_1 = __importDefault(require("styled-components"));
9
- exports.ObjectFieldTemplateWrapper = styled_components_1.default.div ``;
9
+ exports.ObjectFieldTemplateWrapper = styled_components_1.default.div `
10
+ &[data-fjsf-level="1"] {
11
+ margin-bottom: ${(props) => props.theme.spacing.xxl};
12
+ }
13
+ `;
10
14
  exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
11
- break-before: avoid;
12
15
  color: ${(props) => props.theme.color.text.default};
13
16
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
14
17
  font-size: ${(props) => props.theme.typography.size.base};
15
18
  font-weight: ${(props) => props.theme.typography.weight.bold};
16
19
  margin: ${(props) => `${props.theme.spacing.s} 0`};
17
20
 
18
- /* ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
19
- font-size: ${(props) => props.theme.typography.size.h4};
20
- } */
21
- ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
22
- font-size: ${(props) => props.theme.typography.size.h1};
21
+ ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
22
+ font-size: ${(props) => props.theme.typography.size.base};
23
+ font-weight: ${(props) => props.theme.typography.weight.bold};
23
24
  }
24
- /* ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
25
+ ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
25
26
  font-size: ${(props) => props.theme.typography.size.h2};
27
+ margin-bottom: ${(props) => props.theme.spacing.l};
28
+ }
29
+ ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
30
+ font-size: ${(props) => props.theme.typography.size.h4};
26
31
  }
27
32
  ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
28
- font-size: ${(props) => props.theme.typography.size.h3};
29
- } */
33
+ font-size: ${(props) => props.theme.typography.size.large};
34
+ }
30
35
  `;
31
36
  exports.ObjectFieldTemplateDescription = undefined;
32
37
  function getComponents(components) {
package/dist/esm/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js CHANGED
@@ -33,5 +33,5 @@ export const CollapsibleObjectFieldTemplate = (props) => {
33
33
  const hide = collapsed;
34
34
  return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed),
35
35
  //ariaExpanded={!hide}
36
- ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, 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 })] }));
36
+ 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 })] }));
37
37
  };
package/dist/esm/FormView/components/Field.js CHANGED
@@ -9,17 +9,15 @@ export const FieldWrapper = styled.div `
9
9
  width: min(100%, 70rem);
10
10
  `;
11
11
  export const FieldTitle = styled.label `
12
- break-before: avoid;
13
12
  color: ${(props) => props.theme.color.text.default};
14
13
  display: inline-block;
15
14
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
16
- font-size: ${(props) => props.theme.typography.size.base};
15
+ font-size: ${(props) => props.theme.typography.size.small};
17
16
  font-weight: ${(props) => props.theme.typography.weight.bold};
18
17
  margin: ${(props) => `${props.theme.spacing.xs} 0`};
19
18
  width: 100%;
20
19
  `;
21
20
  export const FieldDescription = styled.div `
22
- break-before: avoid;
23
21
  color: ${(props) => props.theme.color.text.default};
24
22
  font-family: ${(props) => props.theme.typography.fontFamily.base};
25
23
  font-weight: ${(props) => props.theme.typography.weight.normal};
@@ -29,7 +27,6 @@ export const FieldDescription = styled.div `
29
27
  max-width: 66ch;
30
28
  `;
31
29
  export const StringFieldValue = styled.div `
32
- break-before: avoid;
33
30
  color: ${(props) => props.theme.color.text.default};
34
31
  font-family: ${(props) => props.theme.typography.fontFamily.base};
35
32
  font-size: ${(props) => props.theme.typography.size.small};
@@ -39,7 +36,6 @@ export const StringFieldValue = styled.div `
39
36
  white-space: pre-line;
40
37
  `;
41
38
  export const TextAreaValue = styled.div `
42
- break-before: avoid;
43
39
  color: ${(props) => props.theme.color.text.default};
44
40
  font-family: ${(props) => props.theme.typography.fontFamily.base};
45
41
  font-size: ${(props) => props.theme.typography.size.small};
@@ -49,14 +45,12 @@ export const TextAreaValue = styled.div `
49
45
  white-space: pre-line;
50
46
  `;
51
47
  export const ArrayFieldItem = styled.div `
52
- break-before: avoid;
53
48
  color: ${(props) => props.theme.color.text.default};
54
49
  font-family: ${(props) => props.theme.typography.fontFamily.base};
55
50
  font-size: ${(props) => props.theme.typography.size.small};
56
51
  padding-left: ${(props) => props.theme.spacing.l};
57
52
  `;
58
53
  export const EJSFieldValue = styled.div `
59
- break-before: avoid;
60
54
  color: ${(props) => props.theme.color.text.default};
61
55
  font-family: ${(props) => props.theme.typography.fontFamily.base};
62
56
  font-size: ${(props) => props.theme.typography.size.small};
@@ -96,13 +90,11 @@ const NotSelectedCircle = styled.span `
96
90
  flex: 0 0 1rem;
97
91
  `;
98
92
  export const BooleanFieldWrapper = styled.div `
99
- break-before: avoid;
100
93
  font-family: ${(props) => props.theme.typography.fontFamily.base};
101
94
  font-size: ${(props) => props.theme.typography.size.small};
102
95
  padding-left: ${(props) => props.theme.spacing.l};
103
96
  `;
104
97
  export const MultipleChoiceFieldWrapper = styled.div `
105
- break-before: avoid;
106
98
  font-size: ${(props) => props.theme.typography.size.small};
107
99
  label {
108
100
  align-items: start;
package/dist/esm/FormView/templates/ObjectFieldTemplate/styledComponents.js CHANGED
@@ -1,25 +1,30 @@
1
1
  import styled from "styled-components";
2
- export const ObjectFieldTemplateWrapper = styled.div ``;
2
+ export const ObjectFieldTemplateWrapper = styled.div `
3
+ &[data-fjsf-level="1"] {
4
+ margin-bottom: ${(props) => props.theme.spacing.xxl};
5
+ }
6
+ `;
3
7
  export const ObjectFieldTemplateTitle = styled.div `
4
- break-before: avoid;
5
8
  color: ${(props) => props.theme.color.text.default};
6
9
  font-family: ${(props) => props.theme.typography.fontFamily.heading};
7
10
  font-size: ${(props) => props.theme.typography.size.base};
8
11
  font-weight: ${(props) => props.theme.typography.weight.bold};
9
12
  margin: ${(props) => `${props.theme.spacing.s} 0`};
10
13
 
11
- /* ${ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
12
- font-size: ${(props) => props.theme.typography.size.h4};
13
- } */
14
- ${ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
15
- font-size: ${(props) => props.theme.typography.size.h1};
14
+ ${ObjectFieldTemplateWrapper}[data-fjsf-level] > & {
15
+ font-size: ${(props) => props.theme.typography.size.base};
16
+ font-weight: ${(props) => props.theme.typography.weight.bold};
16
17
  }
17
- /* ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
18
+ ${ObjectFieldTemplateWrapper}[data-fjsf-level="0"] > & {
18
19
  font-size: ${(props) => props.theme.typography.size.h2};
20
+ margin-bottom: ${(props) => props.theme.spacing.l};
21
+ }
22
+ ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
23
+ font-size: ${(props) => props.theme.typography.size.h4};
19
24
  }
20
25
  ${ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
21
- font-size: ${(props) => props.theme.typography.size.h3};
22
- } */
26
+ font-size: ${(props) => props.theme.typography.size.large};
27
+ }
23
28
  `;
24
29
  export const ObjectFieldTemplateDescription = undefined;
25
30
  export function getComponents(components) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@nolwenture/formik-jsonschema-form",
3
- "version": "1.0.0-beta.41",
3
+ "version": "1.0.0-beta.43",
4
4
  "description": "Formik form generation from json schema",
5
5
  "author": "anttivikman <antti.vikman@nolwenture.com>",
6
6
  "contributors": [