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

package/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { MultiAutoCompletePrimitive } from \"./MultiAutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\n\nconst meta: Meta<typeof MultiAutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Multi Autocomplete\",\n    component: MultiAutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: {\n                type: \"boolean\"\n            }\n        }\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MultiAutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ],\n        values: [\"est\", \"ist\", \"brt\"]\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithAllowFreeInput: Story = {\n    args: {\n        ...Default.args,\n        allowFreeInput: true\n    }\n};\n\nexport const WithUniqueValues: Story = {\n    args: {\n        ...Default.args,\n        uniqueValues: true,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n        ]\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\",\n                    value: \"est\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\",\n                    value: \"cst\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\",\n                    value: \"pst\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\",\n                    value: \"gmt\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\",\n                    value: \"cet\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\",\n                    value: \"cat\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\",\n                    value: \"ist\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\",\n                    value: \"cst_china\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\",\n                    value: \"jst\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\",\n                    value: \"awst\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\",\n                    value: \"nzst\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\",\n                    value: \"fjt\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\",\n                    value: \"art\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\",\n                    value: \"bot\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\",\n                    value: \"brt\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithCustomSelectedOptionRenderer: Story = {\n    args: {\n        ...WithCustomOptionRenderer.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const selectedOptionRenderer = (item: any) => {\n            return (\n                <Tag\n                    variant={\"neutral-base\"}\n                    content={\n                        <>\n                            {item.flag} {item.name}\n                        </>\n                    }\n                    onDismiss={() => setValues(values.filter(value => value !== item.value))}\n                />\n            );\n        };\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive\n                    {...args}\n                    values={values}\n                    onValuesChange={setValues}\n                    selectedOptionRenderer={selectedOptionRenderer}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(args.values)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","MultiAutoCompletePrimitive","args","values","setValues","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithAllowFreeInput","WithUniqueValues","WithFormattedOptions","WithCustomOptionRenderer","item","WithCustomSelectedOptionRenderer","selectedOptionRenderer","Tag","value","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}
+{"version":3,"file":"MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.js","sources":["../../../src/MultiAutoComplete/primitives/MultiAutoCompletePrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { ReactComponent as SearchIcon } from \"@webiny/icons/search.svg\";\nimport { MultiAutoCompletePrimitive } from \"./MultiAutoCompletePrimitive.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { Icon } from \"~/Icon/index.js\";\nimport { Tag } from \"~/Tag/index.js\";\n\nconst meta: Meta<typeof MultiAutoCompletePrimitive> = {\n    title: \"Components/Form Primitives/Multi Autocomplete\",\n    component: MultiAutoCompletePrimitive,\n    parameters: {\n        layout: \"padded\"\n    },\n    argTypes: {\n        onValuesChange: { action: \"onValuesChange\" },\n        onOpenChange: { action: \"onOpenChange\" },\n        disabled: {\n            control: {\n                type: \"boolean\"\n            }\n        }\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport default meta;\n\ntype Story = StoryObj<typeof MultiAutoCompletePrimitive>;\n\nexport const Default: Story = {\n    args: {\n        options: [\n            \"Eastern Standard Time (EST)\",\n            \"Central Standard Time (CST)\",\n            \"Pacific Standard Time (PST)\",\n            \"Greenwich Mean Time (GMT)\",\n            \"Central European Time (CET)\",\n            \"Central Africa Time (CAT)\",\n            \"India Standard Time (IST)\",\n            \"China Standard Time (CST)\",\n            \"Japan Standard Time (JST)\",\n            \"Australian Western Standard Time (AWST)\",\n            \"New Zealand Standard Time (NZST)\",\n            \"Fiji Time (FJT)\",\n            \"Argentina Time (ART)\",\n            \"Bolivia Time (BOT)\",\n            \"Brasilia Time (BRT)\"\n        ]\n    }\n};\n\nexport const MediumSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"md\"\n    }\n};\n\nexport const LargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"lg\"\n    }\n};\n\nexport const ExtraLargeSize: Story = {\n    args: {\n        ...Default.args,\n        size: \"xl\"\n    }\n};\n\nexport const WithStartIcon: Story = {\n    args: {\n        ...Default.args,\n        startIcon: <Icon label={\"Search\"} icon={<SearchIcon />} />\n    }\n};\n\nexport const WithLoading: Story = {\n    args: {\n        ...Default.args,\n        loading: true\n    }\n};\n\nexport const WithoutResetAction: Story = {\n    args: {\n        ...Default.args,\n        displayResetAction: false\n    }\n};\n\nexport const PrimaryVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"primary\"\n    }\n};\n\nexport const PrimaryVariantDisabled: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const PrimaryVariantInvalid: Story = {\n    args: {\n        ...PrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const SecondaryVariant: Story = {\n    args: {\n        variant: \"secondary\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const SecondaryVariantDisabled: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const SecondaryVariantInvalid: Story = {\n    args: {\n        ...SecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostVariant: Story = {\n    args: {\n        variant: \"ghost\",\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const GhostVariantDisabled: Story = {\n    args: {\n        ...GhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const GhostVariantInvalid: Story = {\n    args: {\n        ...GhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const GhostNegativeVariant: Story = {\n    args: {\n        ...Default.args,\n        variant: \"ghost-negative\",\n        placeholder: \"Custom placeholder\"\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantDisabled: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        disabled: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const GhostNegativeVariantInvalid: Story = {\n    args: {\n        ...GhostNegativeVariant.args,\n        invalid: true\n    },\n    decorators: [\n        Story => (\n            <div className=\"bg-neutral-dark text-neutral-light p-xl\">\n                <Story />\n            </div>\n        )\n    ]\n};\n\nexport const WithPredefinedValue: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ],\n        values: [\"est\", \"ist\", \"brt\"]\n    }\n};\n\nexport const WithCustomPlaceholder: Story = {\n    args: {\n        ...Default.args,\n        placeholder: \"Custom placeholder\"\n    }\n};\n\nexport const WithCustomEmptyMessage: Story = {\n    args: {\n        ...Default.args,\n        emptyMessage: \"Custom empty message\"\n    }\n};\n\nexport const WithCustomInitialMessage: Story = {\n    args: {\n        ...Default.args,\n        initialMessage: \"Custom initial message.\",\n        options: []\n    }\n};\n\nexport const WithAllowFreeInput: Story = {\n    args: {\n        ...Default.args,\n        allowFreeInput: true\n    }\n};\n\nexport const WithUniqueValues: Story = {\n    args: {\n        ...Default.args,\n        uniqueValues: true,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" }\n        ]\n    }\n};\n\nexport const WithFormattedOptions: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithCustomOptionRenderer: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            {\n                label: \"Eastern Standard Time (EST)\",\n                value: \"est\",\n                item: {\n                    name: \"Eastern Standard Time (EST)\",\n                    time_difference: \"-5:00\",\n                    flag: \"🇺🇸\",\n                    value: \"est\"\n                }\n            },\n            {\n                label: \"Central Standard Time (CST)\",\n                value: \"cst\",\n                item: {\n                    name: \"Central Standard Time (CST)\",\n                    time_difference: \"-6:00\",\n                    flag: \"🇺🇸\",\n                    value: \"cst\"\n                }\n            },\n            {\n                label: \"Pacific Standard Time (PST)\",\n                value: \"pst\",\n                item: {\n                    name: \"Pacific Standard Time (PST)\",\n                    time_difference: \"-8:00\",\n                    flag: \"🇺🇸\",\n                    value: \"pst\"\n                }\n            },\n            {\n                label: \"Greenwich Mean Time (GMT)\",\n                value: \"gmt\",\n                item: {\n                    name: \"Greenwich Mean Time (GMT)\",\n                    time_difference: \"±0:00\",\n                    flag: \"🇬🇧\",\n                    value: \"gmt\"\n                }\n            },\n            {\n                label: \"Central European Time (CET)\",\n                value: \"cet\",\n                item: {\n                    name: \"Central European Time (CET)\",\n                    time_difference: \"+1:00\",\n                    flag: \"🇪🇺\",\n                    value: \"cet\"\n                }\n            },\n            {\n                label: \"Central Africa Time (CAT)\",\n                value: \"cat\",\n                item: {\n                    name: \"Central Africa Time (CAT)\",\n                    time_difference: \"+2:00\",\n                    flag: \"🇿🇦\",\n                    value: \"cat\"\n                }\n            },\n            {\n                label: \"India Standard Time (IST)\",\n                value: \"ist\",\n                item: {\n                    name: \"India Standard Time (IST)\",\n                    time_difference: \"+5:30\",\n                    flag: \"🇮🇳\",\n                    value: \"ist\"\n                }\n            },\n            {\n                label: \"China Standard Time (CST)\",\n                value: \"cst_china\",\n                item: {\n                    name: \"China Standard Time (CST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇨🇳\",\n                    value: \"cst_china\"\n                }\n            },\n            {\n                label: \"Japan Standard Time (JST)\",\n                value: \"jst\",\n                item: {\n                    name: \"Japan Standard Time (JST)\",\n                    time_difference: \"+9:00\",\n                    flag: \"🇯🇵\",\n                    value: \"jst\"\n                }\n            },\n            {\n                label: \"Australian Western Standard Time (AWST)\",\n                value: \"awst\",\n                item: {\n                    name: \"Australian Western Standard Time (AWST)\",\n                    time_difference: \"+8:00\",\n                    flag: \"🇦🇺\",\n                    value: \"awst\"\n                }\n            },\n            {\n                label: \"New Zealand Standard Time (NZST)\",\n                value: \"nzst\",\n                item: {\n                    name: \"New Zealand Standard Time (NZST)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇳🇿\",\n                    value: \"nzst\"\n                }\n            },\n            {\n                label: \"Fiji Time (FJT)\",\n                value: \"fjt\",\n                item: {\n                    name: \"Fiji Time (FJT)\",\n                    time_difference: \"+12:00\",\n                    flag: \"🇫🇯\",\n                    value: \"fjt\"\n                }\n            },\n            {\n                label: \"Argentina Time (ART)\",\n                value: \"art\",\n                item: {\n                    name: \"Argentina Time (ART)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇦🇷\",\n                    value: \"art\"\n                }\n            },\n            {\n                label: \"Bolivia Time (BOT)\",\n                value: \"bot\",\n                item: {\n                    name: \"Bolivia Time (BOT)\",\n                    time_difference: \"-4:00\",\n                    flag: \"🇧🇴\",\n                    value: \"bot\"\n                }\n            },\n            {\n                label: \"Brasilia Time (BRT)\",\n                value: \"brt\",\n                item: {\n                    name: \"Brasilia Time (BRT)\",\n                    time_difference: \"-3:00\",\n                    flag: \"🇧🇷\",\n                    value: \"brt\"\n                }\n            }\n        ],\n        optionRenderer: item => {\n            return (\n                <div className={\"w-full flex justify-between align-middle\"}>\n                    <div>\n                        <span className={\"mr-sm\"}>{item.flag}</span>\n                        {item.name}\n                    </div>\n                    <div className={\"text-sm\"}>{item.time_difference}</div>\n                </div>\n            );\n        }\n    }\n};\n\nexport const WithCustomSelectedOptionRenderer: Story = {\n    args: {\n        ...WithCustomOptionRenderer.args\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values || []);\n        const selectedOptionRenderer = (item: any) => {\n            return (\n                <Tag\n                    variant={\"neutral-base\"}\n                    content={\n                        <>\n                            {item.flag} {item.name}\n                        </>\n                    }\n                    onDismiss={() => setValues(values.filter(value => value !== item.value))}\n                />\n            );\n        };\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive\n                    {...args}\n                    values={values}\n                    onValuesChange={setValues}\n                    selectedOptionRenderer={selectedOptionRenderer}\n                />\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n\nexport const WithSeparators: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", separator: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\", separator: true },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\", separator: true },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\", separator: true },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithDisabledOptions: Story = {\n    args: {\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\", disabled: true },\n            { label: \"Central Standard Time (CST)\", value: \"cst\", disabled: true },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\", disabled: true },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    }\n};\n\nexport const WithExternalValueControl: Story = {\n    args: {\n        ...Default.args,\n        options: [\n            { label: \"Eastern Standard Time (EST)\", value: \"est\" },\n            { label: \"Central Standard Time (CST)\", value: \"cst\" },\n            { label: \"Pacific Standard Time (PST)\", value: \"pst\" },\n            { label: \"Greenwich Mean Time (GMT)\", value: \"gmt\" },\n            { label: \"Central European Time (CET)\", value: \"cet\" },\n            { label: \"Central Africa Time (CAT)\", value: \"cat\" },\n            { label: \"India Standard Time (IST)\", value: \"ist\" },\n            { label: \"China Standard Time (CST)\", value: \"cst_china\" },\n            { label: \"Japan Standard Time (JST)\", value: \"jst\" },\n            { label: \"Australian Western Standard Time (AWST)\", value: \"awst\" },\n            { label: \"New Zealand Standard Time (NZST)\", value: \"nzst\" },\n            { label: \"Fiji Time (FJT)\", value: \"fjt\" },\n            { label: \"Argentina Time (ART)\", value: \"art\" },\n            { label: \"Bolivia Time (BOT)\", value: \"bot\" },\n            { label: \"Brasilia Time (BRT)\", value: \"brt\" }\n        ]\n    },\n    render: args => {\n        const [values, setValues] = useState(args.values);\n        return (\n            <div className={\"w-full\"}>\n                <MultiAutoCompletePrimitive {...args} values={values} onValuesChange={setValues} />\n                <div className={\"mt-4 text-center\"}>\n                    <Button text={\"Reset\"} onClick={() => setValues(args.values)} />\n                </div>\n                <div className={\"mt-4 text-center\"}>\n                    Current selected values: {values?.join(\",\")}\n                </div>\n            </div>\n        );\n    }\n};\n"],"names":["meta","MultiAutoCompletePrimitive","args","values","setValues","useState","Default","MediumSize","LargeSize","ExtraLargeSize","WithStartIcon","Icon","SearchIcon","WithLoading","WithoutResetAction","PrimaryVariant","PrimaryVariantDisabled","PrimaryVariantInvalid","SecondaryVariant","SecondaryVariantDisabled","SecondaryVariantInvalid","GhostVariant","GhostVariantDisabled","GhostVariantInvalid","GhostNegativeVariant","Story","GhostNegativeVariantDisabled","GhostNegativeVariantInvalid","WithPredefinedValue","WithCustomPlaceholder","WithCustomEmptyMessage","WithCustomInitialMessage","WithAllowFreeInput","WithUniqueValues","WithFormattedOptions","WithCustomOptionRenderer","item","WithCustomSelectedOptionRenderer","selectedOptionRenderer","Tag","value","WithSeparators","WithDisabledOptions","WithExternalValueControl","Button"],"mappings":"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"}

package/MultiAutoComplete/primitives/presenters/MultiAutoCompletePresenterWithFreeInput.d.ts

@@ -6,12 +6,12 @@ declare class MultiAutoCompletePresenterWithFreeInput implements IMultiAutoCompl
     constructor(temporaryOptionPresenter: IMultiAutoCompleteTemporaryOptionPresenter, multiAutoCompletePresenter: IMultiAutoCompletePresenter);
     init(params: MultiAutoCompletePresenterParams): void;
     get vm(): {
-        temporaryOptionVm: {
-            option?: import("../../../Command/index.js").CommandOptionFormatted;
-        };
         inputVm: import("./MultiAutoCompleteInputPresenter.js").IMultiAutoCompleteInputPresenter["vm"];
         selectedOptionsVm: import("./MultiAutoCompleteSelectedOptionsPresenter.js").IMultiAutoCompleteSelectedOptionsPresenter["vm"];
         optionsListVm: import("./MultiAutoCompleteListOptionsPresenter.js").IMultiAutoCompleteListOptionsPresenter["vm"];
+        temporaryOptionVm: {
+            option?: import("../../../Command/index.js").CommandOptionFormatted;
+        };
     };
     setListOpenState: (open: boolean) => void;
     searchOption: (value: string) => void;

package/MultiAutoComplete/primitives/useMultiAutoComplete.d.ts

@@ -21,12 +21,12 @@ export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitivePro
             option: undefined;
         };
     } | {
-        temporaryOptionVm: {
-            option?: import("../../Command/index.js").CommandOptionFormatted;
-        };
         inputVm: import("./presenters/MultiAutoCompleteInputPresenter.js").IMultiAutoCompleteInputPresenter["vm"];
         selectedOptionsVm: import("./presenters/MultiAutoCompleteSelectedOptionsPresenter.js").IMultiAutoCompleteSelectedOptionsPresenter["vm"];
         optionsListVm: import("./presenters/MultiAutoCompleteListOptionsPresenter.js").IMultiAutoCompleteListOptionsPresenter["vm"];
+        temporaryOptionVm: {
+            option?: import("../../Command/index.js").CommandOptionFormatted;
+        };
     };
     setSelectedOption: ((value: string) => void) | ((value: string) => void);
     removeSelectedOption: ((value: string) => void) | ((value: string) => void);

package/MultiFilePicker/MultiFilePicker.d.ts

@@ -2,60 +2,61 @@ import React from "react";
 import { type MultiFilePickerPrimitiveProps } from "./primitives/index.js";
 import { type FormComponentProps } from "../FormComponent/index.js";
 type MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;
-declare const MultiFilePicker: (({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
-    original: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+declare const BaseMultiFilePicker: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+declare const MultiFilePicker: typeof BaseMultiFilePicker & {
+    original: typeof BaseMultiFilePicker;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+    original: typeof BaseMultiFilePicker & {
+        original: typeof BaseMultiFilePicker;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof BaseMultiFilePicker & {
+        original: typeof BaseMultiFilePicker;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/MultiFilePicker/MultiFilePicker.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { MultiFilePicker } from "../MultiFilePicker/index.js";
 declare const meta: Meta<typeof MultiFilePicker>;
 export default meta;

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFilePicker/MultiFilePicker.stories.js","sources":["../../src/MultiFilePicker/MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={handleSelect}\n                onReplaceItem={handleReplace}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePicker","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","formattedValues","handleSelect","handleReplace","handleEdit","file","console","handleRemove"],"mappings":";;AAIA,MAAMA,kBAAkB,CAACC,KAAaC,MAClCC,KAAK,KAAK,CAACA,KAAK,MAAM,KAAMD,CAAAA,MAAMD,MAAM,MAAMA;AAElD,MAAMG,iBAAiB,CAACC,OAAe,EAAE,GAC9BC,MAAM,IAAI,CAAC;QAAE,QAAQD;IAAK,GAAG,CAACE,GAAGC;QACpC,MAAMC,QAAQT,gBAAgB,KAAK;QACnC,MAAMU,SAASV,gBAAgB,KAAK;QACpC,MAAMW,WAAWX,gBAAgB,QAAQ;QAEzC,OAAO;YACH,MAAM,CAAC,KAAK,EAAEQ,QAAQ,EAAE,IAAI,CAAC;YAC7B,UAAU;YACV,MAAMG;YACN,KAAK,CAAC,sBAAsB,EAAEF,MAAM,CAAC,EAAEC,QAAQ;QACnD;IACJ;AAGJ,MAAME,OAAqC;IACvC,OAAO;IACP,WAAWC;IACX,UAAU;QACN,cAAc;YAAE,QAAQ;QAAe;QACvC,YAAY;YAAE,QAAQ;QAAa;QACnC,cAAc;YAAE,QAAQ;QAAe;QACvC,UAAU;YACN,SAAS;YACT,cAAc;QAClB;IACJ;IACA,YAAY;QACR,QAAQ;IACZ;IACA,QAAQC,CAAAA;QACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAwB,EAAE;QACpE,OAAO,WAAP,GACI,oBAACJ,iBAAeA;YACX,GAAGC,IAAI;YACR,QAAQC;YACR,cAAc,IAAMC,iBAAiBZ;YACrC,eAAe,CAACG,GAAGC,QACfQ,iBAAiBE,CAAAA;oBACb,IAAI,CAACA,WACD,OAAO,EAAE;oBAGb,OAAO;2BACAA,UAAU,KAAK,CAAC,GAAGV;2BACnBJ,eAAe;2BACfc,UAAU,KAAK,CAACV,QAAQ;qBAC9B;gBACL;YAEJ,cAAcW,CAAAA,OACVH,iBAAiBE,CAAAA,YACbA,WAAW,OAAOE,CAAAA,QAASA,MAAM,IAAI,KAAKD,MAAM;YAGxD,YAAY,CAACA,MAAME,IAAMC,MAAM,CAAC,QAAQ,EAAEH,MAAM,KAAK,aAAa,EAAEE,GAAG;;IAGnF;AACJ;AAEA,gCAAeT;AAGR,MAAMW,UAAiB,CAAC;AAExB,MAAMC,WAAkB;IAC3B,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAME,gBAAuB;IAChC,MAAM;QACF,GAAGD,SAAS,IAAI;QAChB,OAAO;IACX;AACJ;AAEO,MAAME,wBAA+B;IACxC,MAAM;QACF,GAAGF,SAAS,IAAI;QAChB,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,sBAA6B;IACtC,MAAM;QACF,GAAGH,SAAS,IAAI;QAChB,aAAa;IACjB;AACJ;AAEO,MAAMI,gBAAuB;IAChC,MAAM;QACF,GAAGJ,SAAS,IAAI;QAChB,MAAM;IACV;AACJ;AAEO,MAAMK,iBAAwB;IACjC,MAAM;QACF,GAAGL,SAAS,IAAI;QAChB,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,eAAsB;IAC/B,MAAM;QACF,GAAGN,SAAS,IAAI;QAChB,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,2BAAkC;IAC3C,MAAM;QACF,GAAGP,SAAS,IAAI;IACpB;IACA,QAAQV,CAAAA;QACJ,MAAM,CAACkB,YAAYC,cAAc,GAAGhB,SAAc;YAAE,SAAS;YAAM,SAASiB;QAAU;QAEtF,MAAMC,WAAW;YACbF,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAA4B;QACzE;QAEA,OAAO,WAAP,GAAO,oBAACpB,iBAAeA;YAAE,GAAGC,IAAI;YAAE,UAAUqB;YAAU,YAAYH;;IACtE;AACJ;AAEO,MAAMI,kBAAyB;IAClC,MAAM;QACF,GAAGZ,SAAS,IAAI;QAChB,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMa,UAAiB;IAC1B,MAAM;QACF,GAAGd,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMe,mBAA0B;IACnC,MAAM;QACF,GAAGD,QAAQ,IAAI;QACf,OAAO;IACX;AACJ;AAEO,MAAME,2BAAkC;IAC3C,MAAM;QACF,GAAGF,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMG,yBAAgC;IACzC,MAAM;QACF,GAAGH,QAAQ,IAAI;QACf,aAAa;IACjB;AACJ;AAEO,MAAMI,mBAA0B;IACnC,MAAM;QACF,GAAGJ,QAAQ,IAAI;QACf,MAAM;IACV;AACJ;AAEO,MAAMK,oBAA2B;IACpC,MAAM;QACF,GAAGL,QAAQ,IAAI;QACf,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMM,kBAAyB;IAClC,MAAM;QACF,GAAGN,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;IACd;AACJ;AAEO,MAAMO,8BAAqC;IAC9C,MAAM;QACF,GAAGP,QAAQ,IAAI;IACnB;IACA,QAAQvB,CAAAA;QACJ,MAAM,CAACkB,YAAYC,cAAc,GAAGhB,SAAc;YAAE,SAAS;YAAM,SAASiB;QAAU;QAEtF,MAAMC,WAAW;YACbF,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAA4B;QACzE;QAEA,OAAO,WAAP,GAAO,oBAACpB,iBAAeA;YAAE,GAAGC,IAAI;YAAE,UAAUqB;YAAU,YAAYH;;IACtE;AACJ;AAEO,MAAMa,qBAA4B;IACrC,MAAM;QACF,GAAGR,QAAQ,IAAI;QACf,OAAO;QACP,UAAU;QACV,aAAa;QACb,MAAM;QACN,YAAY;YACR,SAAS;YACT,SAAS;QACb;IACJ;AACJ;AAEO,MAAMS,gBAAuB;IAChC,QAAQhC,CAAAA;QACJ,MAAM,CAACC,eAAeC,iBAAiB,GAAGC,SAAwB,EAAE;QACpE,MAAM,CAACe,YAAYC,cAAc,GAAGhB,SAAS;YAAE,SAAS;YAAM,SAAS;QAAG;QAG1E8B,UAAU;YACN,IAAKjC,KAAK,MAAM,EAET;gBAAA,IAAIR,MAAM,OAAO,CAACQ,KAAK,MAAM,GAAG;oBAEnC,MAAMkC,kBAAkBlC,KAAK,MAAM,CAAC,GAAG,CAACM,CAAAA;wBACpC,IAAI,AAAiB,YAAjB,OAAOA,OACP,OAAO;4BACH,MAAMA,MAAM,KAAK,CAAC,KAAK,GAAG,MAAM;4BAChC,UAAU;4BACV,MAAM;4BACN,KAAKA;wBACT;wBAEJ,OAAOA;oBACX;oBACAJ,iBAAiBgC;gBACrB;YAAA,OAfIhC,iBAAiB,EAAE;QAgB3B,GAAG;YAACF,KAAK,MAAM;SAAC;QAEhB,MAAMmC,eAAe;YACjBjC,iBAAiBZ,eAAe;YAChC6B,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAC/C;QAEA,MAAMiB,gBAAgB,CAAC3C,GAAQC;YAC3BQ,iBAAiBE,CAAAA;gBACb,IAAI,CAACA,WACD,OAAO,EAAE;gBAGb,OAAO;uBACAA,UAAU,KAAK,CAAC,GAAGV;uBACnBJ,eAAe;uBACfc,UAAU,KAAK,CAACV,QAAQ;iBAC9B;YACL;YACAyB,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAC/C;QAEA,MAAMkB,aAAa,CAACC,MAAW5C;YAC3B,IAAI4C,MAAM;gBACNC,QAAQ,GAAG,CAAC,iBAAiBD,MAAM,aAAa5C;gBAChDc,MAAM,CAAC,cAAc,EAAE8B,KAAK,IAAI,CAAC,aAAa,EAAE5C,OAAO;YAC3D;QACJ;QAEA,MAAM8C,eAAe,CAACF,MAAW5C;YAC7BQ,iBAAiBE,CAAAA,YAAaA,WAAW,OAAO,CAACX,GAAGc,IAAMA,MAAMb;YAEhE,IAAIM,KAAK,QAAQ,IAAK,EAACC,iBAAiBA,cAAc,MAAM,IAAI,IAC5DkB,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAkC;QAEnF;QAGAc,UAAU;YACFjC,KAAK,QAAQ,IAAK,EAACC,iBAAiBA,AAAyB,MAAzBA,cAAc,MAAM,AAAK,IAC7DkB,cAAc;gBAAE,SAAS;gBAAO,SAAS;YAAkC,KAE3EA,cAAc;gBAAE,SAAS;gBAAM,SAAS;YAAG;QAEnD,GAAG;YAACnB,KAAK,QAAQ;YAAEC;SAAc;QAEjC,OAAO,WAAP,GACI,oBAACF,iBAAeA;YACX,GAAGC,IAAI;YACR,QAAQC;YACR,cAAckC;YACd,eAAeC;YACf,cAAcI;YACd,YAAYH;YACZ,YAAYnB;;IAGxB;IACA,MAAM;QACF,OAAO;QACP,UAAU;QACV,UAAU;QACV,aAAa;QACb,MAAM;QACN,MAAM;QACN,QAAQ,EAAE;QACV,YAAYE;QACZ,cAAcA;QACd,eAAeA;QACf,YAAYA;QACZ,cAAcA;IAClB;IACA,UAAU;QACN,OAAO;YACH,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,MAAM;YACF,aAAa;YACb,SAAS;YACT,SAAS;gBAAC;gBAAQ;aAAU;YAC5B,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,UAAU;YACN,aAAa;YACb,SAAS;YACT,cAAc;QAClB;QACA,aAAa;YACT,aAAa;YACb,SAAS;QACb;QACA,MAAM;YACF,aAAa;YACb,SAAS;QACb;QACA,QAAQ;YACJ,aAAa;YACb,SAAS;QACb;QACA,YAAY;YACR,aACI;QACR;QACA,cAAc;YACV,aACI;YACJ,QAAQ;QACZ;QACA,eAAe;YACX,aACI;YACJ,QAAQ;QACZ;QACA,YAAY;YACR,aACI;YACJ,QAAQ;QACZ;QACA,cAAc;YACV,aACI;YACJ,QAAQ;QACZ;IACJ;AACJ"}
+{"version":3,"file":"MultiFilePicker/MultiFilePicker.stories.js","sources":["../../src/MultiFilePicker/MultiFilePicker.stories.tsx"],"sourcesContent":["import React, { useState, useEffect } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker/index.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePicker> = {\n    title: \"Components/Form/Multi FilePicker\",\n    component: MultiFilePicker,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePicker>;\n\nexport const Default: Story = {};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaWithLabel: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const AreaWithLabelRequired: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const AreaWithDescription: Story = {\n    args: {\n        ...AreaType.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const AreaWithNotes: Story = {\n    args: {\n        ...AreaType.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const AreaWithErrors: Story = {\n    args: {\n        ...AreaType.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const AreaDisabled: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const AreaWithValidateFunction: Story = {\n    args: {\n        ...AreaType.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const AreaFullExample: Story = {\n    args: {\n        ...AreaType.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Compact: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactWithLabel: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\"\n    }\n};\n\nexport const CompactWithLabelRequired: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true\n    }\n};\n\nexport const CompactWithDescription: Story = {\n    args: {\n        ...Compact.args,\n        description: \"Provide the required information for processing your request.\"\n    }\n};\n\nexport const CompactWithNotes: Story = {\n    args: {\n        ...Compact.args,\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n    }\n};\n\nexport const CompactWithErrors: Story = {\n    args: {\n        ...Compact.args,\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const CompactDisabled: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        disabled: true\n    }\n};\n\nexport const CompactWithValidateFunction: Story = {\n    args: {\n        ...Compact.args\n    },\n    render: args => {\n        const [validation, setValidation] = useState<any>({ isValid: true, message: undefined });\n\n        const validate = async () => {\n            setValidation({ isValid: false, message: \"Any custom error message.\" });\n        };\n\n        return <MultiFilePicker {...args} validate={validate} validation={validation} />;\n    }\n};\n\nexport const CompactFullExample: Story = {\n    args: {\n        ...Compact.args,\n        label: \"Any field label\",\n        required: true,\n        description: \"Provide the required information for processing your request.\",\n        note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n        validation: {\n            isValid: false,\n            message: \"This field is required.\"\n        }\n    }\n};\n\nexport const Documentation: Story = {\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n        // Update value when args.values changes\n        useEffect(() => {\n            if (!args.values) {\n                setSelectedFiles([]);\n            } else if (Array.isArray(args.values)) {\n                // Convert any string values to FileItemDto format\n                const formattedValues = args.values.map(value => {\n                    if (typeof value === \"string\") {\n                        return {\n                            name: value.split(\"/\").pop() || \"file\",\n                            mimeType: \"image/jpeg\", // Default mime type\n                            size: 0,\n                            url: value\n                        };\n                    }\n                    return value as FileItemDto;\n                });\n                setSelectedFiles(formattedValues);\n            }\n        }, [args.values]);\n\n        const handleSelect = () => {\n            setSelectedFiles(createFileList(3));\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleReplace = (_: any, index: number) => {\n            setSelectedFiles(prevState => {\n                if (!prevState) {\n                    return [];\n                }\n\n                return [\n                    ...prevState.slice(0, index),\n                    ...createFileList(1),\n                    ...prevState.slice(index + 1)\n                ];\n            });\n            setValidation({ isValid: true, message: \"\" });\n        };\n\n        const handleEdit = (file: any, index: number) => {\n            if (file) {\n                console.log(\"Editing file:\", file, \"at index:\", index);\n                alert(`Editing File: ${file.name} at position ${index}`);\n            }\n        };\n\n        const handleRemove = (file: any, index: number) => {\n            setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));\n\n            if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            }\n        };\n\n        // Validate on required change or value change\n        useEffect(() => {\n            if (args.required && (!selectedFiles || selectedFiles.length === 0)) {\n                setValidation({ isValid: false, message: \"Please select at least one file\" });\n            } else {\n                setValidation({ isValid: true, message: \"\" });\n            }\n        }, [args.required, selectedFiles]);\n\n        return (\n            <MultiFilePicker\n                {...args}\n                values={selectedFiles}\n                onSelectItem={handleSelect}\n                onReplaceItem={handleReplace}\n                onRemoveItem={handleRemove}\n                onEditItem={handleEdit}\n                validation={validation}\n            />\n        );\n    },\n    args: {\n        label: \"Upload Images\",\n        required: true,\n        disabled: false,\n        description: \"Select files to upload (JPG, PNG, PDF)\",\n        note: \"Note: Maximum file size is 5MB per file\",\n        type: \"area\",\n        values: [],\n        validation: undefined,\n        onSelectItem: undefined,\n        onReplaceItem: undefined,\n        onEditItem: undefined,\n        onRemoveItem: undefined\n    },\n    argTypes: {\n        label: {\n            description: \"Label text for the file picker\",\n            control: \"text\",\n            defaultValue: \"Upload Images\"\n        },\n        type: {\n            description: \"The type of file picker to display\",\n            control: \"select\",\n            options: [\"area\", \"compact\"],\n            defaultValue: \"area\"\n        },\n        required: {\n            description: \"Makes the field required when set to true\",\n            control: \"boolean\",\n            defaultValue: true\n        },\n        disabled: {\n            description: \"Disables the field when set to true\",\n            control: \"boolean\",\n            defaultValue: false\n        },\n        description: {\n            description: \"Additional description text below the field\",\n            control: \"text\"\n        },\n        note: {\n            description: \"Additional note text below the field\",\n            control: \"text\"\n        },\n        values: {\n            description: \"Array of selected files\",\n            control: \"object\"\n        },\n        validation: {\n            description:\n                \"Validation state and message. Please refer to the example code for details on usage.\"\n        },\n        onSelectItem: {\n            description:\n                \"Callback when user selects files - Please refer to the example code for details on usage.\",\n            action: \"onSelectItem\"\n        },\n        onReplaceItem: {\n            description:\n                \"Callback when user replaces a file - Please refer to the example code for details on usage.\",\n            action: \"onReplaceItem\"\n        },\n        onEditItem: {\n            description:\n                \"Callback when user edits a file - Please refer to the example code for details on usage.\",\n            action: \"onEditItem\"\n        },\n        onRemoveItem: {\n            description:\n                \"Callback when user removes a file - Please refer to the example code for details on usage.\",\n            action: \"onRemoveItem\"\n        }\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePicker","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaWithLabel","AreaWithLabelRequired","AreaWithDescription","AreaWithNotes","AreaWithErrors","AreaDisabled","AreaWithValidateFunction","validation","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","useEffect","formattedValues","handleSelect","handleReplace","handleEdit","file","console","handleRemove"],"mappings":"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"}

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.d.ts

@@ -22,60 +22,61 @@ interface MultiFilePickerPrimitiveProps extends Omit<FilePickerPrimitiveProps, "
      */
     onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;
 }
-declare const MultiFilePickerPrimitive: (({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
-    original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+declare const BaseMultiFilePickerPrimitive: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+declare const MultiFilePickerPrimitive: typeof BaseMultiFilePickerPrimitive & {
+    original: typeof BaseMultiFilePickerPrimitive;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+    original: typeof BaseMultiFilePickerPrimitive & {
+        original: typeof BaseMultiFilePickerPrimitive;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
-        original: ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<typeof BaseMultiFilePickerPrimitive & {
+        original: typeof BaseMultiFilePickerPrimitive;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;
 } & {
     Preview: {
-        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
-            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
-                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem, renderImage }: import("~/FilePicker/index.js").ImagePreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;
         };
-        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
             originalName: string;
             displayName: string;
         } & {
-            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             };
             originalName: string;
             displayName: string;
         } & {
-            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
-                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
+            createDecorator: (decorator: import("@webiny/react-composition/types").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, renderImage, ...props }: import("~/FilePicker/index.js").RichItemPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.d.ts

@@ -1,4 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react-webpack5";
+import type { Meta, StoryObj } from "@storybook/react";
 import { MultiFilePickerPrimitive } from "./MultiFilePickerPrimitive.js";
 declare const meta: Meta<typeof MultiFilePickerPrimitive>;
 export default meta;

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js.map

@@ -1 +1 @@
-{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { MultiFilePickerPrimitive, type FileItemDto } from \"./MultiFilePickerPrimitive.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePickerPrimitive> = {\n    title: \"Components/Form Primitives/Multi FilePicker\",\n    component: MultiFilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onReplaceItem: { action: \"onReplaceItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePickerPrimitive\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Add gallery files\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        values: [\n            {\n                name: \"export.csv\",\n                url: \"export.csv\",\n                mimeType: \"text/csv\",\n                size: 100000\n            }\n        ],\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        values: createFileList(50),\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n        )\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePickerPrimitive","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}
+{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { MultiFilePickerPrimitive, type FileItemDto } from \"./MultiFilePickerPrimitive.js\";\n\nconst getRandomNumber = (min: number, max: number): number =>\n    Math.floor(Math.random() * (max - min + 1)) + min;\n\nconst createFileList = (size: number = 10): FileItemDto[] => {\n    return Array.from({ length: size }, (_, index) => {\n        const width = getRandomNumber(500, 2000); // Random width between 500 and 2000\n        const height = getRandomNumber(500, 2000); // Random height between 500 and 2000\n        const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB\n\n        return {\n            name: `file-${index + 1}.jpg`,\n            mimeType: \"image/jpeg\",\n            size: fileSize,\n            url: `https://picsum.photos/${width}/${height}`\n        };\n    });\n};\n\nconst meta: Meta<typeof MultiFilePickerPrimitive> = {\n    title: \"Components/Form Primitives/Multi FilePicker\",\n    component: MultiFilePickerPrimitive,\n    argTypes: {\n        onSelectItem: { action: \"onSelectItem\" },\n        onReplaceItem: { action: \"onReplaceItem\" },\n        onEditItem: { action: \"onEditItem\" },\n        onRemoveItem: { action: \"onRemoveItem\" },\n        disabled: {\n            control: \"boolean\",\n            defaultValue: false\n        }\n    },\n    parameters: {\n        layout: \"padded\"\n    },\n    render: args => {\n        const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);\n        return (\n            <MultiFilePickerPrimitive\n                {...args}\n                values={selectedFiles}\n                onSelectItem={() => setSelectedFiles(createFileList())}\n                onReplaceItem={(_, index) =>\n                    setSelectedFiles(prevState => {\n                        if (!prevState) {\n                            return [];\n                        }\n\n                        return [\n                            ...prevState.slice(0, index),\n                            ...createFileList(1),\n                            ...prevState.slice(index + 1)\n                        ];\n                    })\n                }\n                onRemoveItem={item =>\n                    setSelectedFiles(prevState =>\n                        prevState?.filter(value => value.name !== item?.name)\n                    )\n                }\n                onEditItem={(item, i) => alert(`Editing ${item?.name} at position ${i}`)}\n            />\n        );\n    }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof MultiFilePickerPrimitive>;\n\nexport const Default: Story = {\n    args: {\n        label: \"Add gallery files\"\n    }\n};\n\nexport const AreaType: Story = {\n    args: {\n        ...Default.args,\n        type: \"area\"\n    }\n};\n\nexport const AreaPrimaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const AreaPrimaryVariantDisabled: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaPrimaryVariantInvalid: Story = {\n    args: {\n        ...AreaPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaSecondaryVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const AreaSecondaryVariantDisabled: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaSecondaryVariantInvalid: Story = {\n    args: {\n        ...AreaSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaGhostVariant: Story = {\n    args: {\n        ...AreaType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const AreaGhostVariantDisabled: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const AreaGhostVariantInvalid: Story = {\n    args: {\n        ...AreaGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const AreaWithImagePreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.Image {...props} />\n    }\n};\n\nexport const AreaWithImagePreviewLight: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewBase: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithImagePreviewTransparent: Story = {\n    args: {\n        ...AreaWithImagePreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.Image variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.RichItem {...props} />\n    }\n};\n\nexport const AreaWithRichItemPreviewLight: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewBase: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemPreviewTransparent: Story = {\n    args: {\n        ...AreaWithRichItemPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemThumbnailPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"thumbnail\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePreview: Story = {\n    args: {\n        ...AreaType.args,\n        values: [\n            {\n                name: \"export.csv\",\n                url: \"export.csv\",\n                mimeType: \"text/csv\",\n                size: 100000\n            }\n        ],\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"file-type\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithRichItemFileTypePlaceholder: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.RichItem preview={\"placeholder\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreview: Story = {\n    args: {\n        ...AreaType.args,\n        renderFilePreview: props => <MultiFilePickerPrimitive.Preview.TextOnly {...props} />\n    }\n};\n\nexport const AreaWithTextOnlyPreviewLight: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"light\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewBase: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"base\"} {...props} />\n        )\n    }\n};\n\nexport const AreaWithTextOnlyPreviewTransparent: Story = {\n    args: {\n        ...AreaWithTextOnlyPreview.args,\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly variant={\"transparent\"} {...props} />\n        )\n    }\n};\n\nexport const CompactType: Story = {\n    args: {\n        ...Default.args,\n        type: \"compact\"\n    }\n};\n\nexport const CompactPrimaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"primary\"\n    }\n};\n\nexport const CompactPrimaryVariantDisabled: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactPrimaryVariantInvalid: Story = {\n    args: {\n        ...CompactPrimaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactSecondaryVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"secondary\"\n    }\n};\n\nexport const CompactSecondaryVariantDisabled: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactSecondaryVariantInvalid: Story = {\n    args: {\n        ...CompactSecondaryVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactGhostVariant: Story = {\n    args: {\n        ...CompactType.args,\n        variant: \"ghost\"\n    }\n};\n\nexport const CompactGhostVariantDisabled: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        disabled: true\n    }\n};\n\nexport const CompactGhostVariantInvalid: Story = {\n    args: {\n        ...CompactGhostVariant.args,\n        invalid: true\n    }\n};\n\nexport const CompactWithTextOnlyPreviewSmall: Story = {\n    args: {\n        ...CompactType.args,\n        values: createFileList(50),\n        renderFilePreview: props => (\n            <MultiFilePickerPrimitive.Preview.TextOnly {...props} small={true} />\n        )\n    }\n};\n"],"names":["getRandomNumber","min","max","Math","createFileList","size","Array","_","index","width","height","fileSize","meta","MultiFilePickerPrimitive","args","selectedFiles","setSelectedFiles","useState","prevState","item","value","i","alert","Default","AreaType","AreaPrimaryVariant","AreaPrimaryVariantDisabled","AreaPrimaryVariantInvalid","AreaSecondaryVariant","AreaSecondaryVariantDisabled","AreaSecondaryVariantInvalid","AreaGhostVariant","AreaGhostVariantDisabled","AreaGhostVariantInvalid","AreaWithImagePreview","props","AreaWithImagePreviewLight","AreaWithImagePreviewBase","AreaWithImagePreviewTransparent","AreaWithRichItemPreview","AreaWithRichItemPreviewLight","AreaWithRichItemPreviewBase","AreaWithRichItemPreviewTransparent","AreaWithRichItemThumbnailPreview","AreaWithRichItemFileTypePreview","AreaWithRichItemFileTypePlaceholder","AreaWithTextOnlyPreview","AreaWithTextOnlyPreviewLight","AreaWithTextOnlyPreviewBase","AreaWithTextOnlyPreviewTransparent","CompactType","CompactPrimaryVariant","CompactPrimaryVariantDisabled","CompactPrimaryVariantInvalid","CompactSecondaryVariant","CompactSecondaryVariantDisabled","CompactSecondaryVariantInvalid","CompactGhostVariant","CompactGhostVariantDisabled","CompactGhostVariantInvalid","CompactWithTextOnlyPreviewSmall"],"mappings":"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"}

package/MultiSelect/MultiSelect.d.ts

@@ -2,21 +2,22 @@ import React from "react";
 import type { MultiSelectPrimitiveProps } from "./primitives/index.js";
 import type { FormComponentProps } from "../FormComponent/index.js";
 type MultiSelectProps = MultiSelectPrimitiveProps & FormComponentProps;
-declare const MultiSelect: (({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element) & {
-    original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+declare const DecoratableMultiSelect: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+declare const MultiSelect: typeof DecoratableMultiSelect & {
+    original: typeof DecoratableMultiSelect;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+    original: typeof DecoratableMultiSelect & {
+        original: typeof DecoratableMultiSelect;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element) & {
-        original: ({ label, description, note, hint, required, disabled, validation, ...props }: MultiSelectProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<typeof DecoratableMultiSelect & {
+        original: typeof DecoratableMultiSelect;
         originalName: string;
         displayName: string;
     }>) => (props: unknown) => React.JSX.Element;