@nolwenture/formik-jsonschema-form 0.7.0 → 0.8.0

package/dist/fields/stories/SchemaField.stories.js

@@ -0,0 +1,39 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { Formik, Form } from "formik";
+import { SchemaField } from "./../SchemaField";
+export default {
+    title: "Fields/SchemaField",
+    component: SchemaField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: {}, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+const Template = {
+    args: {
+        name: "myField",
+        schema: {
+            type: "string",
+        },
+        uiSchema: {},
+    },
+};
+export const StringField = Object.assign(Object.assign({}, Template), { args: Object.assign(Object.assign({}, Template.args), { schema: { type: "string", title: "My String Field" }, uiSchema: { "ui:help": "Enter a string" } }), play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('input[name="myField"]');
+        yield userEvent.type(input, "Hello World");
+        expect(input).toHaveValue("Hello World");
+    }) });
+export const NumberField = Object.assign(Object.assign({}, Template), { args: Object.assign(Object.assign({}, Template.args), { schema: { type: "number", title: "My Number Field" }, uiSchema: { "ui:help": "Enter a number" } }), play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('input[name="myField"]');
+        yield userEvent.type(input, "123");
+        expect(input).toHaveValue(123);
+    }) });

package/dist/fields/stories/SearchMultiTagSelectField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { SearchMultiTagSelectField } from "./../SearchMultiTagSelectField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof SearchMultiTagSelectField>;

package/dist/fields/stories/SearchMultiTagSelectField.stories.js

@@ -0,0 +1,58 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { within, userEvent, expect } from "@storybook/test";
+import { SearchMultiTagSelectField } from "./../SearchMultiTagSelectField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Components/SearchMultiTagSelectField",
+    component: SearchMultiTagSelectField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { tags: [] }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "tags",
+        schema: {
+            type: "string",
+            title: "Enum searchable tag select anyOf",
+            anyOf: [
+                { const: "1", title: "First tag" },
+                { const: "2", title: "Second tag" },
+                { const: "3", title: "Third tag" },
+            ],
+        },
+        uiSchema: {
+            "ui:placeholder": "Search tags...",
+            "ui:emptySearchMessage": "No tags found",
+        },
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const canvas = within(canvasElement);
+        const input = canvas.getByPlaceholderText("Search tags...");
+        yield userEvent.type(input, "First tag");
+        const option = yield canvas.findByText("First tag");
+        yield userEvent.click(option);
+        yield userEvent.type(input, "Third tag");
+        const option2 = yield canvas.findByText("Third tag");
+        yield userEvent.click(option2);
+        const firstTag = canvas.queryByText("First tag");
+        const secondTag = canvas.queryByText("Second tag");
+        const thirdTag = canvas.queryByText("Third tag");
+        expect(firstTag).toBeInTheDocument();
+        expect(secondTag).not.toBeInTheDocument();
+        expect(thirdTag).toBeInTheDocument();
+        // await userEvent.click(firstTag.nextElementSibling as Element);
+        // await userEvent.click(thirdTag.nextSibling as Element);
+        // expect(firstTag).not.toBeInTheDocument();
+        // expect(thirdTag).not.toBeInTheDocument();
+    }),
+};

package/dist/fields/stories/StringField.stories.d.ts

@@ -0,0 +1,7 @@
+import { StoryObj } from "@storybook/react";
+import { StringField } from "./../StringField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const TextInput: StoryObj<typeof StringField>;
+export declare const SelectInput: StoryObj<typeof StringField>;
+export declare const MultiSelect: StoryObj<typeof StringField>;

package/dist/fields/stories/StringField.stories.js

@@ -0,0 +1,75 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { StringField } from "./../StringField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Components/StringField",
+    component: StringField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { name: "" }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+// Story for a regular text input
+export const TextInput = {
+    args: {
+        name: "name",
+        schema: { type: "string" },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const input = canvasElement.querySelector('input[name="name"]');
+        yield userEvent.type(input, "John Doe");
+        yield expect(input).toHaveValue("John Doe");
+    }),
+};
+export const SelectInput = {
+    args: {
+        name: "select",
+        schema: {
+            type: "string",
+            oneOf: [
+                { const: "1", title: "Option 1" },
+                { const: "2", title: "Option 2" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: (_b) => __awaiter(void 0, [_b], void 0, function* ({ canvasElement }) {
+        const select = canvasElement.querySelector('select[name="select"]');
+        yield userEvent.selectOptions(select, "1");
+        yield expect(select).toHaveValue("1");
+        yield expect(select).toHaveDisplayValue("Option 1");
+        yield userEvent.selectOptions(select, "2");
+        yield expect(select).toHaveValue("2");
+        yield expect(select).toHaveDisplayValue("Option 2");
+    }),
+};
+export const MultiSelect = {
+    args: {
+        name: "multiSelect",
+        schema: {
+            type: "array",
+            anyOf: [
+                { const: "1", title: "Option 1" },
+                { const: "2", title: "Option 2" },
+                { const: "3", title: "Option 3" },
+            ],
+        },
+        uiSchema: {},
+    },
+    play: (_c) => __awaiter(void 0, [_c], void 0, function* ({ canvasElement }) {
+        const multiSelect = canvasElement.querySelector('select[name="multiSelect"]');
+        yield userEvent.selectOptions(multiSelect, ["1", "3"]);
+        yield expect(multiSelect).toHaveValue(["1", "3"]);
+        yield expect(multiSelect).not.toHaveValue(["2"]);
+    }),
+};

package/dist/fields/stories/ToggleField.stories.d.ts

@@ -0,0 +1,5 @@
+import { StoryObj } from "@storybook/react";
+import { ToggleField } from "../ToggleField";
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("../../types").FieldProps>;
+export default _default;
+export declare const Default: StoryObj<typeof ToggleField>;

package/dist/fields/stories/ToggleField.stories.js

@@ -0,0 +1,34 @@
+var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
+    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
+    return new (P || (P = Promise))(function (resolve, reject) {
+        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
+        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
+        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
+        step((generator = generator.apply(thisArg, _arguments || [])).next());
+    });
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import { userEvent, expect } from "@storybook/test";
+import { ToggleField } from "../ToggleField";
+import { Formik, Form } from "formik";
+export default {
+    title: "Components/ToggleField",
+    component: ToggleField,
+    decorators: [
+        (Story) => (_jsx(Formik, { initialValues: { toggle: false }, onSubmit: () => { }, children: _jsx(Form, { children: Story() }) })),
+    ],
+};
+export const Default = {
+    args: {
+        name: "toggle",
+        schema: { type: "boolean", default: false },
+        uiSchema: {},
+    },
+    play: (_a) => __awaiter(void 0, [_a], void 0, function* ({ canvasElement }) {
+        const toggleSwitch = canvasElement.querySelector('input[type="checkbox"][name="toggle"]');
+        yield userEvent.click(toggleSwitch);
+        yield expect(toggleSwitch).toBeChecked();
+        yield userEvent.click(toggleSwitch);
+        yield expect(toggleSwitch).not.toBeChecked();
+    }),
+};

package/dist/hooks/__tests__/useExtractUiSchema.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/useExtractUiSchema.test.js

@@ -0,0 +1,45 @@
+import { renderHook } from "@testing-library/react";
+import { useExtractUiSchema } from "../useExtractUiSchema"; // Adjust the import path as needed
+describe("useExtractUiSchema", () => {
+    it("should return an empty object when provided with an empty object", () => {
+        const { result } = renderHook(() => useExtractUiSchema({}));
+        expect(result.current).toEqual({});
+    });
+    it("should correctly extract ui:field and ui:props", () => {
+        const uiSchema = {
+            "ui:field": "TextField",
+            "ui:props": { className: "test-class" },
+        };
+        const { result } = renderHook(() => useExtractUiSchema(uiSchema));
+        expect(result.current.field).toBe("TextField");
+        expect(result.current.props).toEqual({ className: "test-class" });
+    });
+    it("should handle ui:options and merge them into the result", () => {
+        const uiSchema = {
+            "ui:options": {
+                anotherProp: "value",
+            },
+        };
+        const { result } = renderHook(() => useExtractUiSchema(uiSchema));
+        expect(result.current.anotherProp).toBe("value");
+    });
+    it("should remove 'ui:' prefix from keys", () => {
+        const uiSchema = {
+            "ui:title": "Test Title",
+            "ui:description": "Test Description",
+        };
+        const { result } = renderHook(() => useExtractUiSchema(uiSchema));
+        expect(result.current.title).toBe("Test Title");
+        expect(result.current.description).toBe("Test Description");
+    });
+    it("does not crash if schema is frozen by React", () => {
+        const uiSchema = { props: { not: { freezed: true } } };
+        const frozen = Object.freeze(uiSchema);
+        const { result } = renderHook(() => useExtractUiSchema(frozen));
+        expect(result.current.props).toEqual({ not: { freezed: true } });
+        const uiSchema2 = { props: { is: { extendable: true } } };
+        const notExtendable = Object.preventExtensions(uiSchema2);
+        const { result: result2 } = renderHook(() => useExtractUiSchema(notExtendable));
+        expect(result2.current.props).toEqual({ is: { extendable: true } });
+    });
+});

package/dist/hooks/__tests__/useSetDefault.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/hooks/__tests__/useSetDefault.test.js

@@ -0,0 +1,65 @@
+import { renderHook } from "@testing-library/react";
+import { useField } from "formik";
+import { useSetDefault } from "../useSetDefault";
+import { getDefaultValueForType } from "../../utils/getTypes";
+jest.mock("formik", () => ({
+    useField: jest.fn(),
+}));
+jest.mock("../../utils/getTypes", () => ({
+    getDefaultValueForType: jest.fn(),
+}));
+describe("useSetDefault", () => {
+    beforeEach(() => {
+        jest.clearAllMocks();
+    });
+    test("sets default value from schema if present", () => {
+        const mockSetValue = jest.fn();
+        useField.mockReturnValue([
+            { value: "" },
+            {},
+            { setValue: mockSetValue },
+        ]);
+        const fieldProps = {
+            name: "testField",
+            schema: { default: "defaultValue" },
+            uiSchema: {},
+            forceDefaultValue: false,
+        };
+        renderHook(() => useSetDefault(fieldProps));
+        expect(mockSetValue).toHaveBeenCalledWith("defaultValue");
+    });
+    test("sets default value using getDefaultValueForType if forceDefaultValue is true and no default is provided in schema", () => {
+        const mockSetValue = jest.fn();
+        useField.mockReturnValue([
+            { value: "" },
+            {},
+            { setValue: mockSetValue },
+        ]);
+        getDefaultValueForType.mockReturnValue("generatedDefaultValue");
+        const fieldProps = {
+            name: "testField",
+            schema: { type: [] },
+            uiSchema: {},
+            forceDefaultValue: true,
+        };
+        renderHook(() => useSetDefault(fieldProps));
+        expect(mockSetValue).toHaveBeenCalledWith("generatedDefaultValue");
+        expect(getDefaultValueForType).toHaveBeenCalledWith([]);
+    });
+    test("does not set default value if value is already set", () => {
+        const mockSetValue = jest.fn();
+        useField.mockReturnValue([
+            { value: "existingValue" },
+            {},
+            { setValue: mockSetValue },
+        ]);
+        const fieldProps = {
+            name: "testField",
+            schema: { default: "defaultValue" },
+            uiSchema: {},
+            forceDefaultValue: true,
+        };
+        renderHook(() => useSetDefault(fieldProps));
+        expect(mockSetValue).not.toHaveBeenCalled();
+    });
+});

package/dist/hooks/useExtractUiSchema.js

@@ -12,11 +12,15 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { useMemo } from "react";
 export const useExtractUiSchema = (props = {}) => {
     var _a, _b;
-    if (props.props !== undefined) {
-        props["ui:props"] = Object.assign(Object.assign({}, ((_a = props["ui:props"]) !== null && _a !== void 0 ? _a : {})), ((_b = props.props) !== null && _b !== void 0 ? _b : {}));
+    // props is frozen by React, so it needs to be copied
+    const schema = Object.assign({}, props);
+    if (schema.props !== undefined) {
+        schema["ui:props"] = Object.assign(Object.assign({}, ((_a = schema["ui:props"]) !== null && _a !== void 0 ? _a : {})), ((_b = schema.props) !== null && _b !== void 0 ? _b : {}));
     }
     return useMemo(() => {
-        const { "ui:options": options = {} } = props, uiSchema = __rest(props, ["ui:options"]);
+        const { "ui:options": options = {} } = schema, uiSchema = __rest(schema, ["ui:options"]);
         return Object.assign(Object.assign({}, Object.keys(uiSchema || {}).reduce((result, key) => (Object.assign(Object.assign({}, result), { [key.replace("ui:", "")]: uiSchema[key] })), {})), options);
+        // Input props needs to be relied, not schema. Otherwise, it will be recomputed on every render.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props]);
 };

package/dist/sampleData/multipleChoiceSchema.d.ts

@@ -0,0 +1,3 @@
+import type { Schema, UiSchema } from "../types";
+export declare const multipleChoiceSchema: Schema;
+export declare const multipleChoiceUiSchema: UiSchema;

package/dist/sampleData/multipleChoiceSchema.js

@@ -0,0 +1,112 @@
+export const multipleChoiceSchema = {
+    title: "TITLE",
+    required: ["lastName", "requiredNestedObject", "requiredArray"],
+    properties: {
+        weather: {
+            type: "string",
+            title: "What is the weather like today? (no style given)",
+            oneOf: [
+                { const: "sunny", title: "Sunny" },
+                { const: "cloudy", title: "Cloudy" },
+                { const: "rainy", title: "Rainy" },
+                { const: "windy", title: "Windy" },
+            ],
+        },
+        feeling: {
+            type: "string",
+            title: "How are you feeling today? (style: inline)",
+            oneOf: [
+                { const: "happy", title: "Happy" },
+                { const: "creative", title: "Creative" },
+                { const: "tired", title: "Tired" },
+                { const: "nope", title: "Please don't even ask..." },
+            ],
+        },
+        food: {
+            type: "string",
+            title: "What would you like to eat today? (style: oneColumn)",
+            anyOf: [
+                { const: "breakfast", title: "Breakfast" },
+                { const: "secondBreakfast", title: "What about second breakfast?" },
+                { const: "elevenses", title: "Elevenses" },
+                { const: "luncheon", title: "Luncheon" },
+                { const: "afternoonTea", title: "Afternoon tea" },
+                { const: "dinner", title: "Dinner" },
+                { const: "supper", title: "Supper" },
+            ],
+        },
+        drinks: {
+            type: "string",
+            title: "What would you like to drink today? (style: twoColumns)",
+            anyOf: [
+                { const: "water", title: "Water" },
+                { const: "coffee", title: "Coffee" },
+                { const: "tea", title: "Tea" },
+                { const: "milk", title: "Milk" },
+                { const: "nonMilk", title: "Non-dairy milk" },
+                { const: "juice", title: "Juice" },
+                { const: "beer", title: "Beer" },
+                { const: "wine", title: "Wine" },
+                { const: "cocktail", title: "Cocktail" },
+                { const: "mocktail", title: "Mocktail" },
+                { const: "somethingElse", title: "Something else" },
+            ],
+        },
+        flowers: {
+            type: "string",
+            title: "Pick some flowers (style: threeColumns)",
+            anyOf: [
+                { const: "lily", title: "Lily" },
+                { const: "rose", title: "Rose" },
+                { const: "iris", title: "Iris" },
+                { const: "tulip", title: "Tulip" },
+                { const: "dahlia", title: "Dahlia" },
+                { const: "daisy", title: "Daisy" },
+                { const: "sunflower", title: "Sunflower" },
+                { const: "orchid", title: "Orchid" },
+                { const: "carnation", title: "Carnation" },
+                { const: "poppy", title: "Poppy" },
+                { const: "gerbera", title: "Gerbera" },
+                { const: "camellia", title: "Camellia" },
+                { const: "aster", title: "Aster" },
+                { const: "marigold", title: "Marigold" },
+                { const: "calendula", title: "Calendula" },
+                { const: "lilac", title: "Lilac" },
+                { const: "primrose", title: "Primrose" },
+                { const: "daffodil", title: "Daffodil" },
+                { const: "oleander", title: "Oleander" },
+                { const: "buttercups", title: "Buttercups" },
+                { const: "lotus", title: "Lotus" },
+            ],
+        },
+    },
+};
+export const multipleChoiceUiSchema = {
+    weather: {
+        "ui:field": "MultipleChoiceField",
+    },
+    feeling: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "inline",
+        },
+    },
+    food: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "oneColumn",
+        },
+    },
+    drinks: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "twoColumns",
+        },
+    },
+    flowers: {
+        "ui:field": "MultipleChoiceField",
+        "ui:option": {
+            style: "threeColumns",
+        },
+    },
+};

package/dist/sampleData/requiredInputSchema.js

@@ -4,7 +4,6 @@ export const requiredInputSchema = {
     properties: {
         firstName: { type: "string", title: "First name" },
         lastName: { type: "string", title: "Last name" },
-        feeling: { type: "boolean", title: "Feeling happy today?" },
         vibes: { type: "boolean", title: "Turn on the good vibes" },
         arrayOfObject: {
             type: "array",
@@ -62,10 +61,6 @@ export const requiredInputSchema = {
     },
 };
 export const requiredInputUiSchema = {
-    feeling: {
-        "ui:field": "RadioField",
-        "ui:label": { true: "yes", false: "no" },
-    },
     vibes: {
         "ui:field": "ToggleField",
     },

package/dist/styledComponents.d.ts

@@ -1,5 +1,5 @@
 /// <reference types="hoist-non-react-statics" />
-import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps } from "./types";
+import type { ArrayFieldButtonProps, InfoFieldButtonProps, ObjectFieldButtonProps, RadioButtonFieldProps, ToggleSwitchFieldProps, SelectFieldProps, MultipleChoiceFieldProps } from "./types";
 import React from "react";
 import * as formik from "formik";
 export declare const Form: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<Omit<React.DetailedHTMLProps<React.FormHTMLAttributes<HTMLFormElement>, HTMLFormElement>, "ref"> & React.RefAttributes<HTMLFormElement>, "ref"> & {
@@ -166,6 +166,7 @@ export declare const RadioButtonField: {
         }, never>> & Omit<import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, never>>, keyof React.Component<any, {}, any>>;
     };
 };
+export declare const MultipleChoiceField: ({ inputProps, name, className, enums, style, }: MultipleChoiceFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const MultiSelectContainer: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>;
 export declare const MultiSelectInput: import("styled-components").IStyledComponent<"web", import("styled-components/dist/types").FastOmit<Omit<import("styled-components/dist/types").FastOmit<Omit<Omit<any, "as">, "ref"> & {
     ref?: unknown;

package/dist/styledComponents.js

@@ -15,6 +15,7 @@ import styled from "styled-components";
 import * as formik from "formik";
 import { FormRegistry } from "./Form";
 import { ArrayFieldButtonPurpose, ObjectFieldButtonPurpose } from "./types";
+import { getStyle } from "./utils/getStyle";
 export const Form = styled(formik.Form) ``;
 export const FormButtonWrapper = styled.div ``;
 export const FormButton = styled.button ``;
@@ -289,6 +290,15 @@ 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, }) => {
+    console.log("style", style);
+    console.log("function", getStyle(style !== null && style !== void 0 ? 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,
@@ -352,22 +362,18 @@ export const SearchableMultiTagSelectField = ({ name, placeholder, enums, emptyS
         const hasValue = enums === null || enums === void 0 ? void 0 : enums.values.map((value) => value.title.toLowerCase().includes(search.toLowerCase()));
         return hasValue === null || hasValue === void 0 ? void 0 : hasValue.includes(true);
     };
-    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setValues }, meta, }) => {
+    return (_jsx(formik.Field, { className: className, name: name, multiple: true, children: ({ field, form: { setFieldValue }, meta, }) => {
             var _a;
             return (_jsxs(MultiSelectContainer, { className: className, children: [_jsx(FieldInput, Object.assign({ type: "hidden" }, field)), _jsx(MultiSelectInput, { className: className, type: "text", onChange: (e) => {
                             setSearch(e.currentTarget.value);
                         }, placeholder: placeholder, value: search }), _jsx(MultiSelectBadgeContainer, { children: ((_a = field.value) !== null && _a !== void 0 ? _a : []).map((value) => {
                             var _a;
-                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setValues({
-                                            [name]: field.value.filter((v) => v !== value),
-                                        }), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
+                            return (_jsxs(MultiSelectBadge, { children: [(_a = enums === null || enums === void 0 ? void 0 : enums.values.find((option) => option.const === value)) === null || _a === void 0 ? void 0 : _a.title, _jsx(MultiSelectBadgeCloseElement, { onClick: () => setFieldValue(name, field.value.filter((v) => v !== value)), children: closeElement !== null && closeElement !== void 0 ? closeElement : "x" })] }, value));
                         }) }), search.length > 0 && (_jsx(MultiSelectOptionList, { children: searchIncludedInEnum() ? (enums === null || enums === void 0 ? void 0 : enums.values.filter((item) => { var _a; return !((_a = field.value) !== null && _a !== void 0 ? _a : []).includes(item.const); }).filter((value) => value.title.toLowerCase().includes(search.toLowerCase())).map((option, index) => (_jsx(MultiSelectOptionListItem, { value: option.const, onClick: () => {
                                 var _a;
-                                setValues({
-                                    [name]: [
-                                        ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
-                                    ],
-                                });
+                                setFieldValue(name, [
+                                    ...new Set([...((_a = field.value) !== null && _a !== void 0 ? _a : []), option.const]),
+                                ]);
                                 setSearch("");
                             }, children: option.title }, index)))) : (_jsx(MultiSelectOptionListWithoutItem, { children: emptySearchMessage !== null && emptySearchMessage !== void 0 ? emptySearchMessage : "No match found" })) })), meta.touched && meta.error && (_jsx("div", { className: "error", children: meta.error }))] }));
         } }));

package/dist/types.d.ts

@@ -127,6 +127,7 @@ export type ComponentsType = {
     FieldInput: React.FunctionComponent<any>;
     RequiredIndicator: React.FunctionComponent<any>;
     RadioButtonField: React.FunctionComponent<any>;
+    MultipleChoiceField: React.FunctionComponent<any>;
     ToggleSwitchField: React.FunctionComponent<any>;
     SearchableMultiTagSelectField: React.FunctionComponent<any>;
 };
@@ -169,6 +170,20 @@ export type RadioButtonFieldProps = {
     name?: React.ReactNode;
     className?: string;
 };
+type Enum = {
+    type: string;
+    values: {
+        const: number | string;
+        title: string;
+    }[] | number[] | string[];
+};
+export type MultipleChoiceFieldProps = {
+    inputProps?: any;
+    name?: React.ReactNode;
+    className?: string;
+    enums: Enum;
+    style?: string;
+};
 export type ToggleSwitchFieldProps = {
     inputProps: any;
     name: React.ReactNode;

package/dist/utils/__tests/createInitialValues.test.d.ts

@@ -0,0 +1 @@
+export {};