@webiny/admin-ui 0.0.0-unstable.6f45466a1d → 0.0.0-unstable.7be00a75a9

package/CheckboxGroup/CheckboxGroup.stories.js

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

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.d.ts

@@ -13,28 +13,33 @@ interface CheckboxGroupPrimitiveProps<TValue = any> {
      * Array of selected checkbox values.
      */
     value?: TValue[];
+    /**
+     * Is checkbox group disabled?
+     */
+    disabled?: boolean;
 }
 interface CheckboxGroupPrimitiveVm {
     items: CheckboxItemFormatted[];
 }
 type CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {
     changeChecked: (value: TValue) => void;
+    disabled?: boolean;
 };
-declare const CheckboxGroupPrimitiveRenderer: (({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-    original: ({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+declare const CheckboxGroupPrimitiveRenderer: (({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
+    original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+    original: (({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
+        original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
-        original: ({ items, changeChecked }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element) & {
+        original: ({ items, changeChecked, disabled }: CheckboxGroupPrimitiveRendererProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;

package/CheckboxGroup/primitives/CheckboxGroupPrimitive.js

@@ -1,35 +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
-}) => {
-  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, {
-    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
-  }));
+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","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\ninterface CheckboxGroupPrimitiveVm {\n    items: CheckboxItemFormatted[];\n}\n\ntype CheckboxGroupPrimitiveRendererProps<TValue = any> = CheckboxGroupPrimitiveVm & {\n    changeChecked: (value: TValue) => void;\n};\n\n/**\n * Checkbox Group Renderer\n */\nconst DecoratableCheckboxGroupPrimitiveRenderer = ({\n    items,\n    changeChecked\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                    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 <CheckboxGroupPrimitiveRenderer {...vm} changeChecked={changeChecked} />;\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;AAyBzB;AACA;AACA;AACA,MAAMC,yCAAyC,GAAGA,CAAC;EAC/CC,KAAK;EACLC;AACiC,CAAC,KAAK;EACvC,oBACIP,KAAA,CAAAQ,aAAA;IAAKC,SAAS,EAAER,EAAE,CAAC,8BAA8B;EAAE,GAC9CK,KAAK,CAACI,GAAG,CAACC,IAAI,iBACXX,KAAA,CAAAQ,aAAA,CAACL,yBAAyB,EAAAS,MAAA,CAAAC,MAAA;IACtBC,GAAG,EAAEH,IAAI,CAACI;EAAG,GACTJ,IAAI;IACRJ,aAAa,EAAEA,CAAA,KAAMA,aAAa,CAACI,IAAI,CAACK,KAAK;EAAE,EAClD,CACJ,CACA,CAAC;AAEd,CAAC;AACD,MAAMC,8BAA8B,GAAGf,eAAe,CAClD,gCAAgC,EAChCG,yCACJ,CAAC;;AAED;AACA;AACA;AACA,MAAMa,iCAAiC,GAAIC,KAAkC,IAAK;EAC9E,MAAM;IAAEC,EAAE;IAAEb;EAAc,CAAC,GAAGH,gBAAgB,CAACe,KAAK,CAAC;EACrD,oBAAOnB,KAAA,CAAAQ,aAAA,CAACS,8BAA8B,EAAAL,MAAA,CAAAC,MAAA,KAAKO,EAAE;IAAEb,aAAa,EAAEA;EAAc,EAAE,CAAC;AACnF,CAAC;AACD,MAAMc,sBAAsB,GAAGnB,eAAe,CAC1C,wBAAwB,EACxBgB,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"}