@nolwenture/formik-jsonschema-form 1.2.3 → 1.2.5

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

@@ -10,6 +10,11 @@ exports.MultipleChoiceFieldContainer = (0, styled_components_1.default)(styledCo
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     flex-wrap: wrap;
     justify-content: start;
+
+    &: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/fields/RadioField/styledComponents.js

@@ -10,6 +10,11 @@ exports.RadioFieldContainer = (0, styled_components_1.styled)(common_1.CommonChe
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.l};
+
+  &:has(input[readonly]) {
+    flex-direction: column;
+    gap: ${(props) => props.theme.spacing.xxs};
+  }
   
   input[type="radio"] {
     -webkit-appearance: none;
@@ -52,7 +57,6 @@ exports.RadioFieldContainer = (0, styled_components_1.styled)(common_1.CommonChe
 
     &[readonly] {
       background-color: transparent;
-      border: none;
     }
   }
 `;

package/dist/cjs/Form/styles/common.js

@@ -248,7 +248,6 @@ exports.CommonCheckboxStyles = styled_components_1.styled.div `
 
     &[readonly] {
       background: transparent;
-      border: none;
     }
 
     &:disabled {

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

@@ -3,19 +3,17 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MultipleChoiceFieldValue = exports.BooleanFieldValue = exports.MultipleChoiceFieldWrapper = exports.BooleanFieldWrapper = exports.EJSFieldValue = exports.ArrayFieldItem = exports.TextAreaValue = exports.StringFieldValue = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
+exports.MultipleChoiceFieldValue = exports.BooleanFieldValue = exports.MultipleChoiceFieldWrapper = exports.BooleanFieldWrapper = exports.NotSelectedIcon = exports.SelectedIcon = exports.EJSFieldValue = exports.ArrayFieldItem = exports.TextAreaValue = exports.StringFieldValue = exports.FieldDescription = exports.FieldTitle = exports.FieldWrapper = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const styled_components_1 = __importDefault(require("styled-components"));
 const styledComponents_1 = require("../../Form/fields/MultipleChoiceField/styledComponents");
 const getStyle_1 = require("../../utils/getStyle");
+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 `};
   width: min(100%, 70rem);
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-  break-inside: avoid;
 `;
 exports.FieldTitle = styled_components_1.default.label `
   color: ${(props) => props.theme.color.text.default};
@@ -67,7 +65,6 @@ exports.EJSFieldValue = styled_components_1.default.div `
   width: 100%;
 `;
 const NotSelected = styled_components_1.default.div `
-  opacity: 0.3;
   display: flex;
   align-items: start;
 `;
@@ -75,28 +72,38 @@ const Selected = styled_components_1.default.div `
   display: flex;
   align-items: start;
 `;
-const SelectedBox = styled_components_1.default.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
+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;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  display: inline-flex;
+  display: flex;
   justify-content: center;
   align-items: start;
 `;
-const NotSelectedCircle = styled_components_1.default.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => props.theme.spacing.xxs};
+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};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  line-height: 1.1;
   display: inline-flex;
   justify-content: center;
   align-items: start;
-  flex: 0 0 1rem;
+  padding: 0 .1rem;
+`;
+exports.SelectedIcon = (0, styled_components_1.default)(fa_1.FaCheck) `
+  color: ${(props) => props.theme.color.text.default};
+  width: .75rem;
+`;
+exports.NotSelectedIcon = (0, styled_components_1.default)(fa_1.FaTimes) `
+  color: ${(props) => props.theme.color.text.default};
+  width: .75rem;
 `;
 exports.BooleanFieldWrapper = styled_components_1.default.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -117,14 +124,14 @@ 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)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2713" }), (0, jsx_runtime_1.jsx)("span", { children: label !== undefined ? label : "Selected" })] })) : ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("span", { children: "\u2716" }), (0, jsx_runtime_1.jsx)("span", { 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)(NotSelectedCircle, { children: (0, jsx_runtime_1.jsx)(exports.NotSelectedIcon, {}) }), (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 }) => {
     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 &&
                     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: "\u2713" }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                    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: "\u2715" }), (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)(NotSelectedCircle, { children: (0, jsx_runtime_1.jsx)(exports.NotSelectedIcon, {}) }), (0, jsx_runtime_1.jsx)(styledComponents_1.MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
 };
 exports.MultipleChoiceFieldValue = MultipleChoiceFieldValue;

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

@@ -4,6 +4,11 @@ export const MultipleChoiceFieldContainer = styled(RadioFieldContainer) `
     font-family: ${(props) => props.theme.typography.fontFamily.base};
     flex-wrap: wrap;
     justify-content: start;
+
+    &: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/fields/RadioField/styledComponents.js

@@ -7,6 +7,11 @@ export const RadioFieldContainer = styled(CommonCheckboxStyles) `
   display: flex;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   gap: ${(props) => props.theme.spacing.l};
+
+  &:has(input[readonly]) {
+    flex-direction: column;
+    gap: ${(props) => props.theme.spacing.xxs};
+  }
   
   input[type="radio"] {
     -webkit-appearance: none;
@@ -49,7 +54,6 @@ export const RadioFieldContainer = styled(CommonCheckboxStyles) `
 
     &[readonly] {
       background-color: transparent;
-      border: none;
     }
   }
 `;

package/dist/esm/Form/styles/common.js

@@ -245,7 +245,6 @@ export const CommonCheckboxStyles = styled.div `
 
     &[readonly] {
       background: transparent;
-      border: none;
     }
 
     &:disabled {

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

@@ -2,14 +2,12 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import styled from "styled-components";
 import { MultipleChoiceFieldContainer, MultipleChoiceFieldElement, MultipleChoiceFieldLabel, } from "../../Form/fields/MultipleChoiceField/styledComponents";
 import { getStyle } from "../../utils/getStyle";
+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 `};
   width: min(100%, 70rem);
-  -webkit-column-break-inside: avoid;
-  page-break-inside: avoid;
-  break-inside: avoid;
 `;
 export const FieldTitle = styled.label `
   color: ${(props) => props.theme.color.text.default};
@@ -61,7 +59,6 @@ export const EJSFieldValue = styled.div `
   width: 100%;
 `;
 const NotSelected = styled.div `
-  opacity: 0.3;
   display: flex;
   align-items: start;
 `;
@@ -69,28 +66,38 @@ const Selected = styled.div `
   display: flex;
   align-items: start;
 `;
-const SelectedBox = styled.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => `0 ${props.theme.spacing.xs}`};
+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;
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  display: inline-flex;
+  display: flex;
   justify-content: center;
   align-items: start;
 `;
-const NotSelectedCircle = styled.span `
-  color: ${(props) => props.theme.color.background.default};
-  background: ${(props) => props.theme.color.text.default};
-  padding: ${(props) => props.theme.spacing.xxs};
+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};
   border-radius: ${(props) => props.theme.borderRadius.circle};
   font-family: ${(props) => props.theme.typography.fontFamily.base};
   font-size: ${(props) => props.theme.typography.size.small};
-  line-height: 1.1;
   display: inline-flex;
   justify-content: center;
   align-items: start;
-  flex: 0 0 1rem;
+  padding: 0 .1rem;
+`;
+export const SelectedIcon = styled(FaCheck) `
+  color: ${(props) => props.theme.color.text.default};
+  width: .75rem;
+`;
+export const NotSelectedIcon = styled(FaTimes) `
+  color: ${(props) => props.theme.color.text.default};
+  width: .75rem;
 `;
 export const BooleanFieldWrapper = styled.div `
   font-family: ${(props) => props.theme.typography.fontFamily.base};
@@ -111,12 +118,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("div", { children: [_jsx("span", { children: "\u2713" }), _jsx("span", { children: label !== undefined ? label : "Selected" })] })) : (_jsxs("div", { children: [_jsx("span", { children: "\u2716" }), _jsx("span", { 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(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 &&
                     selected.length > 0 &&
-                    selected.map((s) => (_jsx(MultipleChoiceFieldElement, { "data-fjsf-enum-value-view": s.const, children: _jsxs(Selected, { children: [_jsx(SelectedBox, { children: "\u2713" }), _jsx(MultipleChoiceFieldLabel, { children: s.title ?? "Hello" })] }) }, s.title ?? s))), notSelected &&
+                    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: "\u2715" }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
+                    notSelected.map((n) => (_jsx(MultipleChoiceFieldElement, { children: _jsxs(NotSelected, { children: [_jsx(NotSelectedCircle, { children: _jsx(NotSelectedIcon, {}) }), _jsx(MultipleChoiceFieldLabel, { children: n.title })] }) }, n.title ?? n)))] }) }));
 };

package/dist/types/FormView/components/Field.d.ts

@@ -7,6 +7,8 @@ export declare const StringFieldValue: import("styled-components/dist/types").IS
 export declare const TextAreaValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const EJSFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+export declare const SelectedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof React.Component<any, {}, any>>;
+export declare const NotSelectedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof React.Component<any, {}, any>>;
 export declare const BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MultipleChoiceFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 type BooleanValueFieldProps = {

package/dist/types/FormView/components/index.d.ts

@@ -12,6 +12,8 @@ export declare const components: {
     TextAreaValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     ArrayFieldItem: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     EJSFieldValue: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
+    SelectedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
+    NotSelectedIcon: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react-icons").IconBaseProps, never>> & string & Omit<import("react-icons").IconType, keyof import("react").Component<any, {}, any>>;
     BooleanFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     MultipleChoiceFieldWrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
     BooleanFieldValue: React.FC<{

package/package.json

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