@nolwenture/formik-jsonschema-form 1.2.9 → 1.3.0

package/dist/cjs/Form/templates/CollapsibleObjectFieldTemplate/CollapsibleObjectFieldTemplate.js

@@ -36,6 +36,6 @@ const CollapsibleObjectFieldTemplate = (props) => {
     const hide = collapsed;
     return ((0, jsx_runtime_1.jsxs)(Wrapper, { ...mergedWrapperProps, children: [(0, jsx_runtime_1.jsxs)(TitleInfoWrapper, { children: [title && ((0, jsx_runtime_1.jsx)(Toggle, { onClick: () => setCollapsed(!collapsed), 
                         //ariaExpanded={!hide}
-                        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 })), (0, jsx_runtime_1.jsx)(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: children }), help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] }));
+                        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 })] }), (0, jsx_runtime_1.jsxs)(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: [description && ((0, jsx_runtime_1.jsx)(Description, { ...descriptionProps, children: description })), children, help && (0, jsx_runtime_1.jsx)(Help, { ...helpProps, children: help })] })] }));
 };
 exports.CollapsibleObjectFieldTemplate = CollapsibleObjectFieldTemplate;

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

@@ -85,18 +85,14 @@ const SelectedBox = styled_components_1.default.div `
   justify-content: center;
   align-items: start;
 `;
-const NotSelectedCircle = styled_components_1.default.div `
-  color: ${(props) => props.theme.color.text.default};
+const NotSelectedBox = styled_components_1.default.div `
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
     ${(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};
+  border-radius: ${(props) => props.theme.borderRadius.none};
   display: inline-flex;
-  justify-content: center;
-  align-items: start;
-  padding: 0 0.1rem;
+  width: 0.85rem;
+  height: 0.85rem;
 `;
 exports.SelectedIcon = (0, styled_components_1.default)(fa_1.FaCheck) `
   color: ${(props) => props.theme.color.text.default};
@@ -125,7 +121,7 @@ exports.MultipleChoiceFieldWrapper = styled_components_1.default.div `
   break-inside: avoid;
 `;
 const BooleanFieldValue = ({ name, className, value, label, }) => {
-    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((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: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: (0, jsx_runtime_1.jsx)(exports.NotSelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
+    return ((0, jsx_runtime_1.jsx)("div", { className: className, children: value === true ? ((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: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)(Selected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: label !== undefined ? label : "Not selected" })] })) }));
 };
 exports.BooleanFieldValue = BooleanFieldValue;
 const MultipleChoiceFieldValue = ({ inputProps, name, className, style, selected, notSelected }) => {
@@ -133,6 +129,6 @@ const MultipleChoiceFieldValue = ({ inputProps, name, className, style, 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 &&
-                    notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedCircle, { children: (0, jsx_runtime_1.jsx)(exports.NotSelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+                    notSelected.map((n) => ((0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldElement, { children: (0, jsx_runtime_1.jsxs)(NotSelected, { children: [(0, jsx_runtime_1.jsx)(NotSelectedBox, {}), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
 };
 exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

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

@@ -9,7 +9,7 @@ const styled_components_1 = __importDefault(require("styled-components"));
 exports.ObjectFieldTemplateWrapper = styled_components_1.default.div `
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing.s};
+  gap: ${(props) => props.theme.spacing.l};
 `;
 exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
   color: ${(props) => props.theme.color.text.default};
@@ -28,11 +28,12 @@ exports.ObjectFieldTemplateTitle = styled_components_1.default.div `
     font-weight: ${(props) => props.theme.typography.weight.bold};
   }
   ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
-    font-size: ${(props) => props.theme.typography.size.h4};
+    font-size: ${(props) => props.theme.typography.size.h3};
     font-weight: ${(props) => props.theme.typography.weight.medium};
+    margin-top: ${(props) => props.theme.spacing.m};
   }
   ${exports.ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
-    font-size: ${(props) => props.theme.typography.size.large};
+    font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.medium};
   }
 `;

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

@@ -33,5 +33,5 @@ export const CollapsibleObjectFieldTemplate = (props) => {
     const hide = collapsed;
     return (_jsxs(Wrapper, { ...mergedWrapperProps, children: [_jsxs(TitleInfoWrapper, { children: [title && (_jsx(Toggle, { onClick: () => setCollapsed(!collapsed), 
                         //ariaExpanded={!hide}
-                        ariaLabel: ariaLabel ?? name, children: _jsxs(Title, { ...titleProps, htmlFor: name, children: [title, props?.required && _jsx(RequiredIndicator, {}), _jsx(Icon, { children: hide ? collapsedIcon ?? "▸" : openIcon ?? "▾" })] }) })), info && _jsx(Info, { ...info })] }), description && (_jsx(Description, { ...descriptionProps, children: description })), _jsx(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: children }), help && _jsx(Help, { ...helpProps, children: help })] }));
+                        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 })] }), _jsxs(ChildrenWrapper, { style: hide ? { display: "none" } : undefined, children: [description && (_jsx(Description, { ...descriptionProps, children: description })), children, help && _jsx(Help, { ...helpProps, children: help })] })] }));
 };

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

@@ -79,18 +79,14 @@ const SelectedBox = styled.div `
   justify-content: center;
   align-items: start;
 `;
-const NotSelectedCircle = styled.div `
-  color: ${(props) => props.theme.color.text.default};
+const NotSelectedBox = styled.div `
   background: ${(props) => props.theme.color.background.default};
   border: ${(props) => props.theme.strokeWidth.thin} solid
     ${(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};
+  border-radius: ${(props) => props.theme.borderRadius.none};
   display: inline-flex;
-  justify-content: center;
-  align-items: start;
-  padding: 0 0.1rem;
+  width: 0.85rem;
+  height: 0.85rem;
 `;
 export const SelectedIcon = styled(FaCheck) `
   color: ${(props) => props.theme.color.text.default};
@@ -119,12 +115,12 @@ export const MultipleChoiceFieldWrapper = styled.div `
   break-inside: avoid;
 `;
 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" })] })) }));
+    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(NotSelectedBox, {}), _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, {}), 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 &&
-                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: _jsx(NotSelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedBox, {}), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
 };

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

@@ -2,7 +2,7 @@ import styled from "styled-components";
 export const ObjectFieldTemplateWrapper = styled.div `
   display: flex;
   flex-direction: column;
-  gap: ${(props) => props.theme.spacing.s};
+  gap: ${(props) => props.theme.spacing.l};
 `;
 export const ObjectFieldTemplateTitle = styled.div `
   color: ${(props) => props.theme.color.text.default};
@@ -21,11 +21,12 @@ export const ObjectFieldTemplateTitle = styled.div `
     font-weight: ${(props) => props.theme.typography.weight.bold};
   }
   ${ObjectFieldTemplateWrapper}[data-fjsf-level="1"] > & {
-    font-size: ${(props) => props.theme.typography.size.h4};
+    font-size: ${(props) => props.theme.typography.size.h3};
     font-weight: ${(props) => props.theme.typography.weight.medium};
+    margin-top: ${(props) => props.theme.spacing.m};
   }
   ${ObjectFieldTemplateWrapper}[data-fjsf-level="2"] > & {
-    font-size: ${(props) => props.theme.typography.size.large};
+    font-size: ${(props) => props.theme.typography.size.h4};
     font-weight: ${(props) => props.theme.typography.weight.medium};
   }
 `;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nolwenture/formik-jsonschema-form",
-  "version": "1.2.9",
+  "version": "1.3.0",
   "description": "Formik form generation from json schema",
   "author": "anttivikman <antti.vikman@nolwenture.com>",
   "contributors": [