@nolwenture/formik-jsonschema-form 0.22.2 → 0.22.4

package/dist/Form.stories.js

@@ -200,10 +200,24 @@ export const WithRefAndDefinitions = {
         uiSchema: refDefUiSchema,
     },
 };
+// Test to add style to MultipleChoiceField
+// const MyMultipleChoiceField = styled(MultipleChoiceField)`
+//   background: lavender;
+//   ${MultipleChoiceField.styles.MultipleChoiceFieldLabelStyle} {
+//     color: purple;
+//   }
+//   ${MultipleChoiceField.styles.MultipleChoiceFieldElementStyle} {
+//     background: lightblue;
+//   }
+//   ${MultipleChoiceField.styles.MultipleChoiceFieldInputStyle}:checked {
+//     accent-color: yellow;
+//   }
+// `;
 export const MultipleChoice = {
     args: {
         schema: multipleChoiceSchema,
         uiSchema: multipleChoiceUiSchema,
+        //components: { MultipleChoiceField: MyMultipleChoiceField },
     },
 };
 export const Collapsible = {

package/dist/fields/ObjectField.js

@@ -55,10 +55,10 @@ export const ObjectField = (props) => {
                 const childSchema = properties === null || properties === void 0 ? void 0 : properties[childName];
                 if (!childSchema)
                     return undefined;
-                return (_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
+                return (_jsx(SchemaField, { "data-fjsf-field": childName, required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof childSchema !== "boolean" ? childSchema : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName));
             })
                 .filter((x) => x), (!hideUnmarkedAdditionalProperties || additionalProperties) &&
-                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
+                Object.entries(additionalValues || {}).map(([childName]) => (_jsxs(ObjectFieldItem, { children: [_jsx(SchemaField, { "data-fjsf-field": childName, required: required === null || required === void 0 ? void 0 : required.includes(childName), name: name ? [name, childName].join(".") : childName, schema: typeof schema.additionalProperties !== "boolean"
                                 ? schema.additionalProperties
                                 : {}, uiSchema: uiSchema === null || uiSchema === void 0 ? void 0 : uiSchema[childName] }, childName), _jsx(ObjectFieldItemButtons, { children: getObjectFieldButton({
                                 purpose: ObjectFieldButtonPurpose.REMOVE,

package/dist/styledComponents.d.ts

@@ -134,7 +134,40 @@ export declare const RadioButtonField: {
         }, never>> & string;
     };
 };
-export declare const MultipleChoiceField: ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const MultipleChoiceFieldContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLDivElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLDivElement> | null | undefined;
+}, never>> & string;
+export declare const MultipleChoiceFieldElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
+}, never>> & string;
+export declare const MultipleChoiceFieldInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+    ref?: unknown;
+}, never>, "ref"> & {
+    ref?: unknown;
+}, never>, "ref"> & {
+    ref?: unknown;
+}, never>> & string;
+export declare const MultipleChoiceFieldLabel: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, "ref"> & {
+    ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
+}, never>> & string;
+export declare const MultipleChoiceField: {
+    ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps): import("react/jsx-runtime").JSX.Element;
+    styles: {
+        MultipleChoiceFieldElementStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.LabelHTMLAttributes<HTMLLabelElement>, HTMLLabelElement>, never>, "ref"> & {
+            ref?: ((instance: HTMLLabelElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLLabelElement> | null | undefined;
+        }, never>> & string;
+        MultipleChoiceFieldInputStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {
+            ref?: unknown;
+        }, never>, "ref"> & {
+            ref?: unknown;
+        }, never>, "ref"> & {
+            ref?: unknown;
+        }, never>> & string;
+        MultipleChoiceFieldLabelStyle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>, "ref"> & {
+            ref?: ((instance: HTMLSpanElement | null) => void | React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof React.DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | React.RefObject<HTMLSpanElement> | null | undefined;
+        }, never>> & string;
+    };
+};
 export declare const MultiSelectContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MultiSelectSearchContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const MultiSelectInput: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<Omit<Omit<any, "as">, "ref"> & {

package/dist/styledComponents.js

@@ -273,13 +273,6 @@ export const RadioButtonField = ({ label, inputProps, name, className, }) => {
     var _a, _b;
     return (_jsxs(RadioButtonFieldContainer, { className: className, children: [_jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "true" })), _jsx(ButtonLabelTrue, { children: (_a = label === null || label === void 0 ? void 0 : label.true) !== null && _a !== void 0 ? _a : "true" })] }), _jsxs(RadioButtonFieldElement, { children: [_jsx(RadioButtonFieldInput, Object.assign({}, inputProps, { name: name, type: "radio", value: "false" })), _jsx(ButtonLabelFalse, { children: (_b = label === null || label === void 0 ? void 0 : label.false) !== null && _b !== void 0 ? _b : "false" })] })] }));
 };
-const MultipleChoiceFieldContainer = styled(RadioButtonFieldContainer) ``;
-const MultipleChoiceFieldElement = styled(RadioButtonFieldElement) ``;
-const MultipleChoiceFieldInput = styled(RadioButtonFieldInput) ``;
-const MultipleChoiceFieldLabel = styled(ButtonLabel) ``;
-export const MultipleChoiceField = ({ inputProps, name, className, enums, style, }) => {
-    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => (_jsxs(MultipleChoiceFieldElement, { children: [_jsx(MultipleChoiceFieldInput, Object.assign({}, inputProps, { name: name, type: enums.type === "multiSelect" ? "checkbox" : "radio", value: typeof v === "string" || typeof v === "number" ? v : v.const })), _jsx(MultipleChoiceFieldLabel, { children: typeof v === "string" || typeof v === "number" ? v : v.title })] }, typeof v === "string" || typeof v === "number" ? v : v.const))) }));
-};
 RadioButtonField.styles = {
     RadioButtonFieldContainerStyle: RadioButtonFieldContainer,
     RadioButtonFieldElementStyle: RadioButtonFieldElement,
@@ -288,6 +281,18 @@ RadioButtonField.styles = {
     ButtonLabelTrueStyle: ButtonLabelTrue,
     ButtonLabelFalseStyle: ButtonLabelFalse,
 };
+export const MultipleChoiceFieldContainer = styled(RadioButtonFieldContainer) ``;
+export const MultipleChoiceFieldElement = styled(RadioButtonFieldElement) ``;
+export const MultipleChoiceFieldInput = styled(RadioButtonFieldInput) ``;
+export const MultipleChoiceFieldLabel = styled(ButtonLabel) ``;
+export const MultipleChoiceField = ({ inputProps, name, className, enums, style, }) => {
+    return (_jsx(MultipleChoiceFieldContainer, { className: className, style: getStyle(style !== null && style !== void 0 ? style : ""), children: enums.values.map((v) => (_jsxs(MultipleChoiceFieldElement, { children: [_jsx(MultipleChoiceFieldInput, Object.assign({}, inputProps, { name: name, type: enums.type === "multiSelect" ? "checkbox" : "radio", value: typeof v === "string" || typeof v === "number" ? v : v.const })), _jsx(MultipleChoiceFieldLabel, { "data-fjsf-enum-value": typeof v === "string" || typeof v === "number" ? v : v.const, children: typeof v === "string" || typeof v === "number" ? v : v.title })] }, typeof v === "string" || typeof v === "number" ? v : v.const))) }));
+};
+MultipleChoiceField.styles = {
+    MultipleChoiceFieldElementStyle: MultipleChoiceFieldElement,
+    MultipleChoiceFieldInputStyle: MultipleChoiceFieldInput,
+    MultipleChoiceFieldLabelStyle: MultipleChoiceFieldLabel,
+};
 // ---> SearchableMultiTagSelectField
 export const MultiSelectContainer = styled.div `
   display: flex;

package/dist/utils/getStyle.js

@@ -8,11 +8,11 @@ export function getStyle(key) {
     }
     if (key === "twoColumns") {
         style.display = "grid";
-        style["grid-template-columns"] = "1fr 1fr";
+        style["gridTemplateColumns"] = "1fr 1fr";
     }
     if (key === "threeColumns") {
         style.display = "grid";
-        style["grid-template-columns"] = "1fr 1fr 1fr";
+        style["gridTemplateColumns"] = "1fr 1fr 1fr";
     }
     return style;
 }

package/package.json

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