@webiny/admin-ui 0.0.0-unstable.e6f0dc8ca7 → 0.0.0-unstable.eb81deee7e

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\";\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"}