@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/CheckboxGroup/CheckboxGroup.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","CheckboxGroup","meta","title","component","argTypes","disabled","control","defaultValue","parameters","layout","render","args","value","setValue","createElement","Object","assign","onChange","Default","items","label","WithLabel","WithRequiredLabel","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","setValidation","handleChange","newValues","length"],"sources":["CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroup } from \"~/CheckboxGroup/index.js\";\n\nconst meta: Meta<typeof CheckboxGroup> = {\n    title: \"Components/Form/CheckboxGroup\",\n    component: CheckboxGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ],\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one of the items!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.value changes\n        useEffect(() => {\n            setSelectedValues(args.value || []);\n        }, [args.value]);\n\n        const handleChange = (newValues: string[]) => {\n            setSelectedValues(newValues);\n\n            // Simple required validation\n            if (args.required && (!newValues || newValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedValues || selectedValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedValues]);\n\n        return (\n            <CheckboxGroup\n                {...args}\n                value={selectedValues}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select your preferences\",\n        required: true,\n        disabled: false,\n        description: \"Choose one or more options.\",\n        note: \"Note: You can select multiple values.\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [],\n        validation: {\n            isValid: false,\n            message: \"Please select at least one option.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox group\",\n            control: \"text\",\n            defaultValue: \"Select your preferences\"\n        },\n        required: {\n            description: \"Makes the checkbox group required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the checkbox group when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox group\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox group\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        items: {\n            description: \"Array of checkbox items with label and value\",\n            control: \"object\"\n        },\n        value: {\n            description: \"Array of selected values\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when selection changes\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CheckboxGroup/CheckboxGroup.stories.js","sources":["../../src/CheckboxGroup/CheckboxGroup.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroup } from \"~/CheckboxGroup/index.js\";\n\nconst meta: Meta<typeof CheckboxGroup> = {\n    title: \"Components/Form/CheckboxGroup\",\n    component: CheckboxGroup,\n    argTypes: {\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [value, setValue] = useState(args.value);\n        return <CheckboxGroup {...args} value={value} onChange={value => setValue(value)} />;\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroup>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const WithRequiredLabel: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const WithDescription: Story = {\n    args: {\n        ...Default.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const WithNotes: Story = {\n    args: {\n        ...Default.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const WithErrors: Story = {\n    args: {\n        ...Default.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Disabled: Story = {\n    args: {\n        ...Default.args,\n        label: \"Any field label\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\",\n                disabled: true\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\",\n                disabled: true\n            }\n        ],\n        disabled: true\n    }\n};\n\nexport const FullExample: Story = {\n    args: {\n        ...Default.args,\n        label: \"Select which deploy option do you prefer\",\n        required: true,\n        description:\n            \"Deployment option is simply a way of parsing the data based on your database settings.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"You must select at least one of the items!\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedValues, setSelectedValues] = useState<string[]>(args.value || []);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update values when args.value changes\n        useEffect(() => {\n            setSelectedValues(args.value || []);\n        }, [args.value]);\n\n        const handleChange = (newValues: string[]) => {\n            setSelectedValues(newValues);\n\n            // Simple required validation\n            if (args.required && (!newValues || newValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedValues || selectedValues.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one option.\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedValues]);\n\n        return (\n            <CheckboxGroup\n                {...args}\n                value={selectedValues}\n                onChange={handleChange}\n                validation={validation}\n                required={args.required}\n            />\n        );\n    },\n    args: {\n        label: \"Select your preferences\",\n        required: true,\n        disabled: false,\n        description: \"Choose one or more options.\",\n        note: \"Note: You can select multiple values.\",\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [],\n        validation: {\n            isValid: false,\n            message: \"Please select at least one option.\"\n        }\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the checkbox group\",\n            control: \"text\",\n            defaultValue: \"Select your preferences\"\n        },\n        required: {\n            description: \"Makes the checkbox group required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the checkbox group when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the checkbox group\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the checkbox group\",\n            control: \"text\"\n        },\n        validation: {\n            description: \"Validation state and message\",\n            control: \"object\"\n        },\n        items: {\n            description: \"Array of checkbox items with label and value\",\n            control: \"object\"\n        },\n        value: {\n            description: \"Array of selected values\",\n            control: \"object\"\n        },\n        onChange: {\n            description: \"Callback function triggered when selection changes\"\n        }\n    }\n};\n"],"names":["meta","CheckboxGroup","args","value","setValue","useState","Default","WithLabel","WithRequiredLabel","WithDescription","WithNotes","WithErrors","Disabled","FullExample","Documentation","selectedValues","setSelectedValues","validation","setValidation","useEffect","handleChange","newValues"],"mappings":"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"}

package/CheckboxGroup/index.js

@@ -1,4 +1,2 @@
 export * from "./CheckboxGroup.js";
 export * from "./primitives/index.js";
-
-//# sourceMappingURL=index.js.map

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.js

@@ -1,38 +1,23 @@
-import React from "react";
+import react from "react";
 import { cn, makeDecoratable } from "../../utils.js";
 import { CheckboxPrimitiveRenderer } from "../../Checkbox/index.js";
 import { useCheckboxGroup } from "./useCheckboxGroup.js";
-/**
- * Checkbox Group Renderer
- */
-const DecoratableCheckboxGroupPrimitiveRenderer = ({
-  items,
-  changeChecked,
-  disabled
-}) => {
-  return /*#__PURE__*/React.createElement("div", {
-    className: cn("grid gap-sm-extra py-xs-plus")
-  }, items.map(item => /*#__PURE__*/React.createElement(CheckboxPrimitiveRenderer, Object.assign({
-    key: item.id
-  }, item, {
-    disabled: disabled ?? item.disabled,
-    changeChecked: () => changeChecked(item.value)
-  }))));
-};
+const DecoratableCheckboxGroupPrimitiveRenderer = ({ items, changeChecked, disabled })=>/*#__PURE__*/ react.createElement("div", {
+        className: cn("grid gap-sm-extra py-xs-plus")
+    }, items.map((item)=>/*#__PURE__*/ react.createElement(CheckboxPrimitiveRenderer, {
+            key: item.id,
+            ...item,
+            disabled: disabled ?? item.disabled,
+            changeChecked: ()=>changeChecked(item.value)
+        })));
 const CheckboxGroupPrimitiveRenderer = makeDecoratable("CheckboxGroupPrimitiveRenderer", DecoratableCheckboxGroupPrimitiveRenderer);
-
-/**
- * Checkbox Group
- */
-const DecoratableCheckboxGroupPrimitive = props => {
-  const {
-    vm,
-    changeChecked
-  } = useCheckboxGroup(props);
-  return /*#__PURE__*/React.createElement(CheckboxGroupPrimitiveRenderer, Object.assign({}, vm, {
-    changeChecked: changeChecked,
-    disabled: props.disabled
-  }));
+const DecoratableCheckboxGroupPrimitive = (props)=>{
+    const { vm, changeChecked } = useCheckboxGroup(props);
+    return /*#__PURE__*/ react.createElement(CheckboxGroupPrimitiveRenderer, {
+        ...vm,
+        changeChecked: changeChecked,
+        disabled: props.disabled
+    });
 };
 const CheckboxGroupPrimitive = makeDecoratable("CheckboxGroupPrimitive", DecoratableCheckboxGroupPrimitive);
 export { CheckboxGroupPrimitive, CheckboxGroupPrimitiveRenderer };

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","cn","makeDecoratable","CheckboxPrimitiveRenderer","useCheckboxGroup","DecoratableCheckboxGroupPrimitiveRenderer","items","changeChecked","disabled","createElement","className","map","item","Object","assign","key","id","value","CheckboxGroupPrimitiveRenderer","DecoratableCheckboxGroupPrimitive","props","vm","CheckboxGroupPrimitive"],"sources":["CheckboxGroupPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport type { CheckboxItemDto, CheckboxItemFormatted } from \"~/Checkbox/index.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { useCheckboxGroup } from \"./useCheckboxGroup.js\";\n\ninterface CheckboxGroupPrimitiveProps<TValue = any> {\n    /**\n     * Array of checkbox items.\n     */\n    items: CheckboxItemDto[];\n    /**\n     * Callback function called when the checkbox values change.\n     */\n    onChange?: (values: TValue[]) => void;\n    /**\n     * Array of selected checkbox values.\n     */\n    value?: TValue[];\n    /**\n     * Is checkbox group disabled?\n     */\n    disabled?: boolean;\n}\n\ninterface CheckboxGroupPrimitiveVm {\n    items: CheckboxItemFormatted[];\n}\n\ntype CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {\n    changeChecked: (value: TValue) => void;\n    disabled?: boolean;\n};\n\n/**\n * Checkbox Group Renderer\n */\nconst DecoratableCheckboxGroupPrimitiveRenderer = ({\n    items,\n    changeChecked,\n    disabled\n}: CheckboxGroupPrimitiveRendererProps) => {\n    return (\n        <div className={cn(\"grid gap-sm-extra py-xs-plus\")}>\n            {items.map(item => (\n                <CheckboxPrimitiveRenderer\n                    key={item.id}\n                    {...item}\n                    disabled={disabled ?? item.disabled}\n                    changeChecked={() => changeChecked(item.value)}\n                />\n            ))}\n        </div>\n    );\n};\nconst CheckboxGroupPrimitiveRenderer = makeDecoratable(\n    \"CheckboxGroupPrimitiveRenderer\",\n    DecoratableCheckboxGroupPrimitiveRenderer\n);\n\n/**\n * Checkbox Group\n */\nconst DecoratableCheckboxGroupPrimitive = (props: CheckboxGroupPrimitiveProps) => {\n    const { vm, changeChecked } = useCheckboxGroup(props);\n    return (\n        <CheckboxGroupPrimitiveRenderer\n            {...vm}\n            changeChecked={changeChecked}\n            disabled={props.disabled}\n        />\n    );\n};\nconst CheckboxGroupPrimitive = makeDecoratable(\n    \"CheckboxGroupPrimitive\",\n    DecoratableCheckboxGroupPrimitive\n);\n\nexport {\n    CheckboxGroupPrimitive,\n    CheckboxGroupPrimitiveRenderer,\n    type CheckboxGroupPrimitiveProps,\n    type CheckboxGroupPrimitiveRendererProps,\n    type CheckboxGroupPrimitiveVm\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,EAAE,EAAEC,eAAe;AAE5B,SAASC,yBAAyB;AAClC,SAASC,gBAAgB;AA8BzB;AACA;AACA;AACA,MAAMC,yCAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC,aAAa;EACbC;AACiC,CAAC,KAAK;EACvC,oBACIR,KAAA,CAAAS,aAAA;IAAKC,SAAS,EAAET,EAAE,CAAC,8BAA8B;EAAE,GAC9CK,KAAK,CAACK,GAAG,CAACC,IAAI,iBACXZ,KAAA,CAAAS,aAAA,CAACN,yBAAyB,EAAAU,MAAA,CAAAC,MAAA;IACtBC,GAAG,EAAEH,IAAI,CAACI;EAAG,GACTJ,IAAI;IACRJ,QAAQ,EAAEA,QAAQ,IAAII,IAAI,CAACJ,QAAS;IACpCD,aAAa,EAAEA,CAAA,KAAMA,aAAa,CAACK,IAAI,CAACK,KAAK;EAAE,EAClD,CACJ,CACA,CAAC;AAEd,CAAC;AACD,MAAMC,8BAA8B,GAAGhB,eAAe,CAClD,gCAAgC,EAChCG,yCACJ,CAAC;;AAED;AACA;AACA;AACA,MAAMc,iCAAiC,GAAIC,KAAkC,IAAK;EAC9E,MAAM;IAAEC,EAAE;IAAEd;EAAc,CAAC,GAAGH,gBAAgB,CAACgB,KAAK,CAAC;EACrD,oBACIpB,KAAA,CAAAS,aAAA,CAACS,8BAA8B,EAAAL,MAAA,CAAAC,MAAA,KACvBO,EAAE;IACNd,aAAa,EAAEA,aAAc;IAC7BC,QAAQ,EAAEY,KAAK,CAACZ;EAAS,EAC5B,CAAC;AAEV,CAAC;AACD,MAAMc,sBAAsB,GAAGpB,eAAe,CAC1C,wBAAwB,EACxBiB,iCACJ,CAAC;AAED,SACIG,sBAAsB,EACtBJ,8BAA8B","ignoreList":[]}
+{"version":3,"file":"CheckboxGroup/primitives/CheckboxGroupPrimitive.js","sources":["../../../src/CheckboxGroup/primitives/CheckboxGroupPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { cn, makeDecoratable } from \"~/utils.js\";\nimport type { CheckboxItemDto, CheckboxItemFormatted } from \"~/Checkbox/index.js\";\nimport { CheckboxPrimitiveRenderer } from \"~/Checkbox/index.js\";\nimport { useCheckboxGroup } from \"./useCheckboxGroup.js\";\n\ninterface CheckboxGroupPrimitiveProps<TValue = any> {\n    /**\n     * Array of checkbox items.\n     */\n    items: CheckboxItemDto[];\n    /**\n     * Callback function called when the checkbox values change.\n     */\n    onChange?: (values: TValue[]) => void;\n    /**\n     * Array of selected checkbox values.\n     */\n    value?: TValue[];\n    /**\n     * Is checkbox group disabled?\n     */\n    disabled?: boolean;\n}\n\ninterface CheckboxGroupPrimitiveVm {\n    items: CheckboxItemFormatted[];\n}\n\ntype CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {\n    changeChecked: (value: TValue) => void;\n    disabled?: boolean;\n};\n\n/**\n * Checkbox Group Renderer\n */\nconst DecoratableCheckboxGroupPrimitiveRenderer = ({\n    items,\n    changeChecked,\n    disabled\n}: CheckboxGroupPrimitiveRendererProps) => {\n    return (\n        <div className={cn(\"grid gap-sm-extra py-xs-plus\")}>\n            {items.map(item => (\n                <CheckboxPrimitiveRenderer\n                    key={item.id}\n                    {...item}\n                    disabled={disabled ?? item.disabled}\n                    changeChecked={() => changeChecked(item.value)}\n                />\n            ))}\n        </div>\n    );\n};\nconst CheckboxGroupPrimitiveRenderer = makeDecoratable(\n    \"CheckboxGroupPrimitiveRenderer\",\n    DecoratableCheckboxGroupPrimitiveRenderer\n);\n\n/**\n * Checkbox Group\n */\nconst DecoratableCheckboxGroupPrimitive = (props: CheckboxGroupPrimitiveProps) => {\n    const { vm, changeChecked } = useCheckboxGroup(props);\n    return (\n        <CheckboxGroupPrimitiveRenderer\n            {...vm}\n            changeChecked={changeChecked}\n            disabled={props.disabled}\n        />\n    );\n};\nconst CheckboxGroupPrimitive = makeDecoratable(\n    \"CheckboxGroupPrimitive\",\n    DecoratableCheckboxGroupPrimitive\n);\n\nexport {\n    CheckboxGroupPrimitive,\n    CheckboxGroupPrimitiveRenderer,\n    type CheckboxGroupPrimitiveProps,\n    type CheckboxGroupPrimitiveRendererProps,\n    type CheckboxGroupPrimitiveVm\n};\n"],"names":["DecoratableCheckboxGroupPrimitiveRenderer","items","changeChecked","disabled","cn","item","CheckboxPrimitiveRenderer","CheckboxGroupPrimitiveRenderer","makeDecoratable","DecoratableCheckboxGroupPrimitive","props","vm","useCheckboxGroup","CheckboxGroupPrimitive"],"mappings":";;;;AAqCA,MAAMA,4CAA4C,CAAC,EAC/CC,KAAK,EACLC,aAAa,EACbC,QAAQ,EAC0B,GAC3B,WAAP,GACI,oBAAC;QAAI,WAAWC,GAAG;OACdH,MAAM,GAAG,CAACI,CAAAA,OAAAA,WAAAA,GACP,oBAACC,2BAAyBA;YACtB,KAAKD,KAAK,EAAE;YACX,GAAGA,IAAI;YACR,UAAUF,YAAYE,KAAK,QAAQ;YACnC,eAAe,IAAMH,cAAcG,KAAK,KAAK;;AAMjE,MAAME,iCAAiCC,gBACnC,kCACAR;AAMJ,MAAMS,oCAAoC,CAACC;IACvC,MAAM,EAAEC,EAAE,EAAET,aAAa,EAAE,GAAGU,iBAAiBF;IAC/C,OAAO,WAAP,GACI,oBAACH,gCAA8BA;QAC1B,GAAGI,EAAE;QACN,eAAeT;QACf,UAAUQ,MAAM,QAAQ;;AAGpC;AACA,MAAMG,yBAAyBL,gBAC3B,0BACAC"}

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js

@@ -1,128 +1,161 @@
-import React, { useState } from "react";
+import react, { useState } from "react";
 import { CheckboxGroupPrimitive } from "./CheckboxGroupPrimitive.js";
 import { Button } from "../../Button/index.js";
 const meta = {
-  title: "Components/Form Primitives/CheckboxGroup",
-  component: CheckboxGroupPrimitive,
-  parameters: {
-    layout: "padded"
-  },
-  render: args => {
-    const [values, setValues] = useState(args.value);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, Object.assign({}, args, {
-      value: values,
-      onChange: values => setValues(values)
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, values && values.join())));
-  }
+    title: "Components/Form Primitives/CheckboxGroup",
+    component: CheckboxGroupPrimitive,
+    parameters: {
+        layout: "padded"
+    },
+    render: (args)=>{
+        const [values, setValues] = useState(args.value);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement(CheckboxGroupPrimitive, {
+            ...args,
+            value: values,
+            onChange: (values)=>setValues(values)
+        }), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, values && values.join())));
+    }
 };
-export default meta;
-export const Default = {
-  args: {
-    items: [{
-      label: "Value 1",
-      value: "value-1"
-    }, {
-      label: "Value 2",
-      value: "value-2"
-    }, {
-      label: "Value 3",
-      value: "value-3"
-    }],
-    value: []
-  }
+const CheckboxGroupPrimitive_stories = meta;
+const Default = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: []
+    }
 };
-export const WithLongLabels = {
-  args: {
-    items: [{
-      label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.",
-      value: "value-1"
-    }, {
-      label: "Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.",
-      value: "value-2"
-    }, {
-      label: "Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.",
-      value: "value-3"
-    }],
-    value: []
-  }
+const WithLongLabels = {
+    args: {
+        items: [
+            {
+                label: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.",
+                value: "value-1"
+            },
+            {
+                label: "Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.",
+                value: "value-2"
+            },
+            {
+                label: "Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.",
+                value: "value-3"
+            }
+        ],
+        value: []
+    }
 };
-export const WithSelectedValues = {
-  args: {
-    items: [{
-      label: "Value 1",
-      value: "value-1"
-    }, {
-      label: "Value 2",
-      value: "value-2"
-    }, {
-      label: "Value 3",
-      value: "value-3"
-    }],
-    value: ["value-2"]
-  }
+const WithSelectedValues = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2"
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: [
+            "value-2"
+        ]
+    }
 };
-export const WithDisabledValue = {
-  args: {
-    items: [{
-      label: "Value 1",
-      value: "value-1"
-    }, {
-      label: "Value 2",
-      value: "value-2",
-      disabled: true
-    }, {
-      label: "Value 3",
-      value: "value-3"
-    }],
-    value: ["value-2"]
-  }
+const WithDisabledValue = {
+    args: {
+        items: [
+            {
+                label: "Value 1",
+                value: "value-1"
+            },
+            {
+                label: "Value 2",
+                value: "value-2",
+                disabled: true
+            },
+            {
+                label: "Value 3",
+                value: "value-3"
+            }
+        ],
+        value: [
+            "value-2"
+        ]
+    }
 };
-export const WithExternalValueControl = {
-  args: {
-    ...Default.args
-  },
-  render: args => {
-    const [values, setValues] = useState(args.value);
-    return /*#__PURE__*/React.createElement("div", {
-      className: "w-full"
-    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(CheckboxGroupPrimitive, Object.assign({}, args, {
-      value: values,
-      onChange: values => setValues(values)
-    }))), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, /*#__PURE__*/React.createElement(Button, {
-      text: "Reset",
-      onClick: () => setValues([])
-    })), /*#__PURE__*/React.createElement("div", {
-      className: "mt-4 text-center"
-    }, "Current selected value: ", /*#__PURE__*/React.createElement("pre", null, values && values.join())));
-  }
+const WithExternalValueControl = {
+    args: {
+        ...Default.args
+    },
+    render: (args)=>{
+        const [values, setValues] = useState(args.value);
+        return /*#__PURE__*/ react.createElement("div", {
+            className: "w-full"
+        }, /*#__PURE__*/ react.createElement("div", null, /*#__PURE__*/ react.createElement(CheckboxGroupPrimitive, {
+            ...args,
+            value: values,
+            onChange: (values)=>setValues(values)
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, /*#__PURE__*/ react.createElement(Button, {
+            text: "Reset",
+            onClick: ()=>setValues([])
+        })), /*#__PURE__*/ react.createElement("div", {
+            className: "mt-4 text-center"
+        }, "Current selected value: ", /*#__PURE__*/ react.createElement("pre", null, values && values.join())));
+    }
 };
-export const WithNumericValues = {
-  args: {
-    ...Default.args,
-    value: [3, 4],
-    items: [{
-      label: "Number 1",
-      value: 1
-    }, {
-      label: "Number 2",
-      value: 2
-    }, {
-      label: "Number 3",
-      value: 3
-    }, {
-      label: "Number 4",
-      value: 4
-    }, {
-      label: "Number 5",
-      value: 5
-    }]
-  }
+const WithNumericValues = {
+    args: {
+        ...Default.args,
+        value: [
+            3,
+            4
+        ],
+        items: [
+            {
+                label: "Number 1",
+                value: 1
+            },
+            {
+                label: "Number 2",
+                value: 2
+            },
+            {
+                label: "Number 3",
+                value: 3
+            },
+            {
+                label: "Number 4",
+                value: 4
+            },
+            {
+                label: "Number 5",
+                value: 5
+            }
+        ]
+    }
 };
+export default CheckboxGroupPrimitive_stories;
+export { Default, WithDisabledValue, WithExternalValueControl, WithLongLabels, WithNumericValues, WithSelectedValues };
 
 //# sourceMappingURL=CheckboxGroupPrimitive.stories.js.map

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","CheckboxGroupPrimitive","Button","meta","title","component","parameters","layout","render","args","values","setValues","value","createElement","className","Object","assign","onChange","join","Default","items","label","WithLongLabels","WithSelectedValues","WithDisabledValue","disabled","WithExternalValueControl","text","onClick","WithNumericValues"],"sources":["CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.js","sources":["../../../src/CheckboxGroup/primitives/CheckboxGroupPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { CheckboxGroupPrimitive } from \"./CheckboxGroupPrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\n\nconst meta: Meta<typeof CheckboxGroupPrimitive> = {\n    title: \"Components/Form Primitives/CheckboxGroup\",\n    component: CheckboxGroupPrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <CheckboxGroupPrimitive\n                    {...args}\n                    value={values}\n                    onChange={values => setValues(values)}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof CheckboxGroupPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithLongLabels: Story = {\n    args: {\n        items: [\n            {\n                label: \"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent eu aliquam lacus. Morbi eleifend, eros et vestibulum lobortis, mi elit scelerisque neque, sit amet dictum orci sem ac ante. In hac habitasse platea dictumst. Pellentesque molestie nisl tortor, eu dictum velit mollis vitae. Integer consectetur id diam eget iaculis. Praesent egestas ullamcorper libero vel eleifend.\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Ut pretium ex vel auctor bibendum. In hac habitasse platea dictumst. Etiam varius felis mi, eu sagittis erat congue vel. Phasellus dui eros, dignissim quis quam pulvinar, tincidunt venenatis felis.\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Nullam gravida consequat volutpat. Ut faucibus imperdiet lobortis. Nullam tempus accumsan metus, vel fermentum lacus dignissim vitae. Sed vitae nunc ante. Cras sollicitudin id dolor sit amet imperdiet.\",\n                value: \"value-3\"\n            }\n        ],\n        value: []\n    }\n};\n\nexport const WithSelectedValues: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\"\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithDisabledValue: Story = {\n    args: {\n        items: [\n            {\n                label: \"Value 1\",\n                value: \"value-1\"\n            },\n            {\n                label: \"Value 2\",\n                value: \"value-2\",\n                disabled: true\n            },\n            {\n                label: \"Value 3\",\n                value: \"value-3\"\n            }\n        ],\n        value: [\"value-2\"]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.value);\n        return (\n            <div className={\"w-full\"}>\n                <div>\n                    <CheckboxGroupPrimitive\n                        {...args}\n                        value={values}\n                        onChange={values => setValues(values)}\n                    />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues([])} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected value: <pre>{values && values.join()}</pre>\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithNumericValues: Story = {\n    args: {\n        ...Default.args,\n        value: [3, 4],\n        items: [\n            {\n                label: \"Number 1\",\n                value: 1\n            },\n            {\n                label: \"Number 2\",\n                value: 2\n            },\n            {\n                label: \"Number 3\",\n                value: 3\n            },\n            {\n                label: \"Number 4\",\n                value: 4\n            },\n            {\n                label: \"Number 5\",\n                value: 5\n            }\n        ]\n    }\n};\n"],"names":["meta","CheckboxGroupPrimitive","args","values","setValues","useState","Default","WithLongLabels","WithSelectedValues","WithDisabledValue","WithExternalValueControl","Button","WithNumericValues"],"mappings":";;;AAKA,MAAMA,OAA4C;IAC9C,OAAO;IACP,WAAWC;IACX,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;0BAElC,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKA,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEA,uCAAeH;AAGR,MAAMM,UAAiB;IAC1B,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,iBAAwB;IACjC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO,EAAE;IACb;AACJ;AAEO,MAAMC,qBAA4B;IACrC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,oBAA2B;IACpC,MAAM;QACF,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;gBACP,UAAU;YACd;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;QACD,OAAO;YAAC;SAAU;IACtB;AACJ;AAEO,MAAMC,2BAAkC;IAC3C,MAAM;QACF,GAAGJ,QAAQ,IAAI;IACnB;IACA,QAAQJ,CAAAA;QACJ,MAAM,CAACC,QAAQC,UAAU,GAAGC,SAASH,KAAK,KAAK;QAC/C,OAAO,WAAP,GACI,oBAAC;YAAI,WAAW;yBACZ,oBAAC,2BACG,oBAACD,wBAAsBA;YAClB,GAAGC,IAAI;YACR,OAAOC;YACP,UAAUA,CAAAA,SAAUC,UAAUD;2BAGtC,oBAAC;YAAI,WAAW;yBACZ,oBAACQ,QAAMA;YAAC,MAAM;YAAS,SAAS,IAAMP,UAAU,EAAE;2BAEtD,oBAAC;YAAI,WAAW;WAAoB,0CACR,oBAAC,aAAKD,UAAUA,OAAO,IAAI;IAInE;AACJ;AAEO,MAAMS,oBAA2B;IACpC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;YAAC;YAAG;SAAE;QACb,OAAO;YACH;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;YACA;gBACI,OAAO;gBACP,OAAO;YACX;SACH;IACL;AACJ"}

package/CheckboxGroup/primitives/index.js

@@ -1,3 +1 @@
 export * from "./CheckboxGroupPrimitive.js";
-
-//# sourceMappingURL=index.js.map

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js

@@ -2,45 +2,47 @@ import { makeAutoObservable } from "mobx";
 import { CheckboxItem } from "../../../Checkbox/domains/CheckboxItem.js";
 import { CheckboxItemMapper } from "../../../Checkbox/domains/CheckboxItemMapper.js";
 class CheckboxGroupPresenter {
-  params = undefined;
-  items = [];
-  constructor() {
-    makeAutoObservable(this);
-  }
-  init(params) {
-    this.params = params;
-    this.items = this.getItems(params.items, params.values);
-  }
-  get vm() {
-    return {
-      items: this.items.map(item => CheckboxItemMapper.toFormatted(item))
-    };
-  }
-  changeChecked = value => {
-    if (!this.params?.items) {
-      return;
+    constructor(){
+        this.params = void 0;
+        this.items = [];
+        this.changeChecked = (value)=>{
+            if (!this.params?.items) return;
+            const currentValues = [
+                ...this.params.values
+            ];
+            const newValues = this.getUpdatedValues(currentValues, value);
+            this.items = this.getItems(this.params.items, newValues);
+            this.params.onCheckedChange?.(newValues);
+        };
+        makeAutoObservable(this);
     }
-    const currentValues = [...this.params.values];
-    const newValues = this.getUpdatedValues(currentValues, value);
-    this.items = this.getItems(this.params.items, newValues);
-    this.params.onCheckedChange?.(newValues);
-  };
-  getUpdatedValues(currentValues, value) {
-    const index = currentValues.indexOf(value);
-    if (index > -1) {
-      return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];
+    init(params) {
+        this.params = params;
+        this.items = this.getItems(params.items, params.values);
     }
-    return [...currentValues, value];
-  }
-  getItems(items, values) {
-    if (!items.length) {
-      return [];
+    get vm() {
+        return {
+            items: this.items.map((item)=>CheckboxItemMapper.toFormatted(item))
+        };
+    }
+    getUpdatedValues(currentValues, value) {
+        const index = currentValues.indexOf(value);
+        if (index > -1) return [
+            ...currentValues.slice(0, index),
+            ...currentValues.slice(index + 1)
+        ];
+        return [
+            ...currentValues,
+            value
+        ];
+    }
+    getItems(items, values) {
+        if (!items.length) return [];
+        return items.map((item)=>CheckboxItem.create({
+                ...item,
+                checked: values.some((value)=>value === item.value)
+            }));
     }
-    return items.map(item => CheckboxItem.create({
-      ...item,
-      checked: values.some(value => value === item.value)
-    }));
-  }
 }
 export { CheckboxGroupPresenter };
 

package/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js.map

@@ -1 +1 @@
-{"version":3,"names":["makeAutoObservable","CheckboxItem","CheckboxItemMapper","CheckboxGroupPresenter","params","undefined","items","constructor","init","getItems","values","vm","map","item","toFormatted","changeChecked","value","currentValues","newValues","getUpdatedValues","onCheckedChange","index","indexOf","slice","length","create","checked","some"],"sources":["CheckboxGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CheckboxGroupPrimitiveVm } from \"../CheckboxGroupPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\n\ninterface CheckboxGroupPresenterParams<TValue = string | number> {\n    items: CheckboxItemDto[];\n    values: TValue[];\n    onCheckedChange?: (values: TValue[]) => void;\n}\n\ninterface ICheckboxGroupPresenter<TValue = string | number> {\n    vm: CheckboxGroupPrimitiveVm;\n    init: (params: CheckboxGroupPresenterParams<TValue>) => void;\n    changeChecked: (value: TValue) => void;\n}\n\nclass CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {\n    private params?: CheckboxGroupPresenterParams<TValue> = undefined;\n    private items: CheckboxItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init(params: CheckboxGroupPresenterParams<TValue>): void {\n        this.params = params;\n        this.items = this.getItems(params.items, params.values);\n    }\n\n    get vm(): CheckboxGroupPrimitiveVm {\n        return {\n            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))\n        };\n    }\n\n    public changeChecked = (value: TValue) => {\n        if (!this.params?.items) {\n            return;\n        }\n\n        const currentValues = [...this.params.values];\n        const newValues = this.getUpdatedValues(currentValues, value);\n        this.items = this.getItems(this.params.items, newValues);\n        this.params.onCheckedChange?.(newValues);\n    };\n\n    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {\n        const index = currentValues.indexOf(value);\n\n        if (index > -1) {\n            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];\n        }\n\n        return [...currentValues, value];\n    }\n\n    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {\n        if (!items.length) {\n            return [];\n        }\n\n        return items.map(item =>\n            CheckboxItem.create({\n                ...item,\n                checked: values.some(value => value === item.value)\n            })\n        );\n    }\n}\n\nexport { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };\n"],"mappings":"AAAA,SAASA,kBAAkB,QAAQ,MAAM;AAEzC,SAASC,YAAY;AACrB,SAASC,kBAAkB;AAe3B,MAAMC,sBAAsB,CAAsE;EACtFC,MAAM,GAA0CC,SAAS;EACzDC,KAAK,GAAmB,EAAE;EAElCC,WAAWA,CAAA,EAAG;IACVP,kBAAkB,CAAC,IAAI,CAAC;EAC5B;EAEOQ,IAAIA,CAACJ,MAA4C,EAAQ;IAC5D,IAAI,CAACA,MAAM,GAAGA,MAAM;IACpB,IAAI,CAACE,KAAK,GAAG,IAAI,CAACG,QAAQ,CAACL,MAAM,CAACE,KAAK,EAAEF,MAAM,CAACM,MAAM,CAAC;EAC3D;EAEA,IAAIC,EAAEA,CAAA,EAA6B;IAC/B,OAAO;MACHL,KAAK,EAAE,IAAI,CAACA,KAAK,CAACM,GAAG,CAACC,IAAI,IAAIX,kBAAkB,CAACY,WAAW,CAACD,IAAI,CAAC;IACtE,CAAC;EACL;EAEOE,aAAa,GAAIC,KAAa,IAAK;IACtC,IAAI,CAAC,IAAI,CAACZ,MAAM,EAAEE,KAAK,EAAE;MACrB;IACJ;IAEA,MAAMW,aAAa,GAAG,CAAC,GAAG,IAAI,CAACb,MAAM,CAACM,MAAM,CAAC;IAC7C,MAAMQ,SAAS,GAAG,IAAI,CAACC,gBAAgB,CAACF,aAAa,EAAED,KAAK,CAAC;IAC7D,IAAI,CAACV,KAAK,GAAG,IAAI,CAACG,QAAQ,CAAC,IAAI,CAACL,MAAM,CAACE,KAAK,EAAEY,SAAS,CAAC;IACxD,IAAI,CAACd,MAAM,CAACgB,eAAe,GAAGF,SAAS,CAAC;EAC5C,CAAC;EAEOC,gBAAgBA,CAACF,aAAuB,EAAED,KAAa,EAAY;IACvE,MAAMK,KAAK,GAAGJ,aAAa,CAACK,OAAO,CAACN,KAAK,CAAC;IAE1C,IAAIK,KAAK,GAAG,CAAC,CAAC,EAAE;MACZ,OAAO,CAAC,GAAGJ,aAAa,CAACM,KAAK,CAAC,CAAC,EAAEF,KAAK,CAAC,EAAE,GAAGJ,aAAa,CAACM,KAAK,CAACF,KAAK,GAAG,CAAC,CAAC,CAAC;IAChF;IAEA,OAAO,CAAC,GAAGJ,aAAa,EAAED,KAAK,CAAC;EACpC;EAEQP,QAAQA,CAACH,KAAwB,EAAEI,MAAgB,EAAkB;IACzE,IAAI,CAACJ,KAAK,CAACkB,MAAM,EAAE;MACf,OAAO,EAAE;IACb;IAEA,OAAOlB,KAAK,CAACM,GAAG,CAACC,IAAI,IACjBZ,YAAY,CAACwB,MAAM,CAAC;MAChB,GAAGZ,IAAI;MACPa,OAAO,EAAEhB,MAAM,CAACiB,IAAI,CAACX,KAAK,IAAIA,KAAK,KAAKH,IAAI,CAACG,KAAK;IACtD,CAAC,CACL,CAAC;EACL;AACJ;AAEA,SAASb,sBAAsB","ignoreList":[]}
+{"version":3,"file":"CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.js","sources":["../../../../src/CheckboxGroup/primitives/presenters/CheckboxGroupPresenter.ts"],"sourcesContent":["import { makeAutoObservable } from \"mobx\";\nimport type { CheckboxGroupPrimitiveVm } from \"../CheckboxGroupPrimitive.js\";\nimport { CheckboxItem } from \"~/Checkbox/domains/CheckboxItem.js\";\nimport { CheckboxItemMapper } from \"~/Checkbox/domains/CheckboxItemMapper.js\";\nimport type { CheckboxItemDto } from \"~/Checkbox/domains/CheckboxItemDto.js\";\n\ninterface CheckboxGroupPresenterParams<TValue = string | number> {\n    items: CheckboxItemDto[];\n    values: TValue[];\n    onCheckedChange?: (values: TValue[]) => void;\n}\n\ninterface ICheckboxGroupPresenter<TValue = string | number> {\n    vm: CheckboxGroupPrimitiveVm;\n    init: (params: CheckboxGroupPresenterParams<TValue>) => void;\n    changeChecked: (value: TValue) => void;\n}\n\nclass CheckboxGroupPresenter<TValue = string | number> implements ICheckboxGroupPresenter<TValue> {\n    private params?: CheckboxGroupPresenterParams<TValue> = undefined;\n    private items: CheckboxItem[] = [];\n\n    constructor() {\n        makeAutoObservable(this);\n    }\n\n    public init(params: CheckboxGroupPresenterParams<TValue>): void {\n        this.params = params;\n        this.items = this.getItems(params.items, params.values);\n    }\n\n    get vm(): CheckboxGroupPrimitiveVm {\n        return {\n            items: this.items.map(item => CheckboxItemMapper.toFormatted(item))\n        };\n    }\n\n    public changeChecked = (value: TValue) => {\n        if (!this.params?.items) {\n            return;\n        }\n\n        const currentValues = [...this.params.values];\n        const newValues = this.getUpdatedValues(currentValues, value);\n        this.items = this.getItems(this.params.items, newValues);\n        this.params.onCheckedChange?.(newValues);\n    };\n\n    private getUpdatedValues(currentValues: TValue[], value: TValue): TValue[] {\n        const index = currentValues.indexOf(value);\n\n        if (index > -1) {\n            return [...currentValues.slice(0, index), ...currentValues.slice(index + 1)];\n        }\n\n        return [...currentValues, value];\n    }\n\n    private getItems(items: CheckboxItemDto[], values: TValue[]): CheckboxItem[] {\n        if (!items.length) {\n            return [];\n        }\n\n        return items.map(item =>\n            CheckboxItem.create({\n                ...item,\n                checked: values.some(value => value === item.value)\n            })\n        );\n    }\n}\n\nexport { CheckboxGroupPresenter, type ICheckboxGroupPresenter, type CheckboxGroupPresenterParams };\n"],"names":["CheckboxGroupPresenter","undefined","value","currentValues","newValues","makeAutoObservable","params","item","CheckboxItemMapper","index","items","values","CheckboxItem"],"mappings":";;;AAkBA,MAAMA;IAIF,aAAc;aAHN,MAAM,GAA0CC;aAChD,KAAK,GAAmB,EAAE;aAiB3B,aAAa,GAAG,CAACC;YACpB,IAAI,CAAC,IAAI,CAAC,MAAM,EAAE,OACd;YAGJ,MAAMC,gBAAgB;mBAAI,IAAI,CAAC,MAAM,CAAC,MAAM;aAAC;YAC7C,MAAMC,YAAY,IAAI,CAAC,gBAAgB,CAACD,eAAeD;YACvD,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,EAAEE;YAC9C,IAAI,CAAC,MAAM,CAAC,eAAe,GAAGA;QAClC;QAvBIC,mBAAmB,IAAI;IAC3B;IAEO,KAAKC,MAA4C,EAAQ;QAC5D,IAAI,CAAC,MAAM,GAAGA;QACd,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,QAAQ,CAACA,OAAO,KAAK,EAAEA,OAAO,MAAM;IAC1D;IAEA,IAAI,KAA+B;QAC/B,OAAO;YACH,OAAO,IAAI,CAAC,KAAK,CAAC,GAAG,CAACC,CAAAA,OAAQC,mBAAmB,WAAW,CAACD;QACjE;IACJ;IAaQ,iBAAiBJ,aAAuB,EAAED,KAAa,EAAY;QACvE,MAAMO,QAAQN,cAAc,OAAO,CAACD;QAEpC,IAAIO,QAAQ,IACR,OAAO;eAAIN,cAAc,KAAK,CAAC,GAAGM;eAAWN,cAAc,KAAK,CAACM,QAAQ;SAAG;QAGhF,OAAO;eAAIN;YAAeD;SAAM;IACpC;IAEQ,SAASQ,KAAwB,EAAEC,MAAgB,EAAkB;QACzE,IAAI,CAACD,MAAM,MAAM,EACb,OAAO,EAAE;QAGb,OAAOA,MAAM,GAAG,CAACH,CAAAA,OACbK,aAAa,MAAM,CAAC;gBAChB,GAAGL,IAAI;gBACP,SAASI,OAAO,IAAI,CAACT,CAAAA,QAASA,UAAUK,KAAK,KAAK;YACtD;IAER;AACJ"}