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

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useState","useEffect","MultiFilePicker","getRandomNumber","min","max","Math","floor","random","createFileList","size","Array","from","length","_","index","width","height","fileSize","name","mimeType","url","meta","title","component","argTypes","onSelectItem","action","onEditItem","onRemoveItem","disabled","control","defaultValue","parameters","layout","render","args","selectedFiles","setSelectedFiles","createElement","Object","assign","values","onReplaceItem","prevState","slice","item","filter","value","i","alert","Default","AreaType","type","AreaWithLabel","label","AreaWithLabelRequired","required","AreaWithDescription","description","AreaWithNotes","note","AreaWithErrors","validation","isValid","message","AreaDisabled","AreaWithValidateFunction","setValidation","undefined","validate","AreaFullExample","Compact","CompactWithLabel","CompactWithLabelRequired","CompactWithDescription","CompactWithNotes","CompactWithErrors","CompactDisabled","CompactWithValidateFunction","CompactFullExample","Documentation","isArray","formattedValues","map","split","pop","handleSelect","handleReplace","handleEdit","file","console","log","handleRemove","options"],"sources":["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"],"mappings":"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","ignoreList":[]}
+{"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/index.js

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

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.js

@@ -1,90 +1,70 @@
-import React from "react";
-import { FilePickerDescription, FilePickerLabel, filePickerVariants, FilePreview, ImagePreview, RichItemPreview, TextOnlyPreview, Trigger } from "../../FilePicker/index.js";
+import react from "react";
+import { FilePickerDescription, FilePickerLabel, FilePreview, ImagePreview, RichItemPreview, TextOnlyPreview, Trigger, filePickerVariants } from "../../FilePicker/index.js";
 import { cn, makeDecoratable, withStaticProps } from "../../utils.js";
 import { Button } from "../../Button/index.js";
 import { inputVariants } from "../../Input/index.js";
 import { useMultiFilePicker } from "./useMultiFilePicker.js";
-const BaseMultiFilePickerPrimitive = ({
-  className,
-  buttonPlaceholder,
-  containerStyle,
-  description,
-  disabled,
-  invalid,
-  label,
-  onEditItem,
-  onRemoveItem,
-  onReplaceItem,
-  onSelectItem,
-  placeholder,
-  renderFilePreview,
-  renderTrigger,
-  type = "area",
-  values = [],
-  variant
-}) => {
-  const {
-    vm
-  } = useMultiFilePicker({
-    values
-  });
-  return /*#__PURE__*/React.createElement("div", {
-    "data-disabled": disabled,
-    className: cn(inputVariants({
-      variant,
-      invalid
-    }), filePickerVariants({
-      type,
-      variant
-    }), "max-h-[280px]", className),
-    style: containerStyle
-  }, (label || description) && /*#__PURE__*/React.createElement("div", {
-    className: "w-full flex justify-between"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "w-full"
-  }, label && /*#__PURE__*/React.createElement("div", {
-    className: "mb-xs"
-  }, typeof label === "string" ? /*#__PURE__*/React.createElement(FilePickerLabel, {
-    label: label,
-    className: "m-0",
-    disabled: disabled
-  }) : label), description && /*#__PURE__*/React.createElement(FilePickerDescription, {
-    description: description,
-    disabled: disabled,
-    className: "m-0"
-  })), vm.hasFiles ? /*#__PURE__*/React.createElement(Button, {
-    text: buttonPlaceholder ?? "Select a file",
-    variant: "ghost",
-    onClick: onSelectItem,
-    size: "sm",
-    disabled: disabled
-  }) : null), vm.hasFiles ? /*#__PURE__*/React.createElement("div", {
-    className: "w-full overflow-y-scroll flex flex-col gap-xs"
-  }, vm.files.map((file, i) => /*#__PURE__*/React.createElement(FilePreview, {
-    key: `file-preview-${i}`,
-    disabled: disabled,
-    onEditItem: onEditItem ? () => onEditItem(file, i) : undefined,
-    onRemoveItem: onRemoveItem ? () => onRemoveItem(file, i) : undefined,
-    onReplaceItem: onReplaceItem ? () => onReplaceItem(file, i) : undefined,
-    renderFilePreview: renderFilePreview,
-    type: type,
-    value: file
-  }))) : /*#__PURE__*/React.createElement(Trigger, {
-    disabled: disabled,
-    onSelectItem: onSelectItem,
-    renderTrigger: renderTrigger,
-    text: placeholder,
-    type: type,
-    variant: variant
-  }));
+const BaseMultiFilePickerPrimitive = ({ className, buttonPlaceholder, containerStyle, description, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type = "area", values = [], variant })=>{
+    const { vm } = useMultiFilePicker({
+        values
+    });
+    return /*#__PURE__*/ react.createElement("div", {
+        "data-disabled": disabled,
+        className: cn(inputVariants({
+            variant,
+            invalid
+        }), filePickerVariants({
+            type,
+            variant
+        }), "max-h-[280px]", className),
+        style: containerStyle
+    }, (label || description) && /*#__PURE__*/ react.createElement("div", {
+        className: "w-full flex justify-between"
+    }, /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, label && /*#__PURE__*/ react.createElement("div", {
+        className: "mb-xs"
+    }, "string" == typeof label ? /*#__PURE__*/ react.createElement(FilePickerLabel, {
+        label: label,
+        className: "m-0",
+        disabled: disabled
+    }) : label), description && /*#__PURE__*/ react.createElement(FilePickerDescription, {
+        description: description,
+        disabled: disabled,
+        className: "m-0"
+    })), vm.hasFiles ? /*#__PURE__*/ react.createElement(Button, {
+        text: buttonPlaceholder ?? "Select a file",
+        variant: "ghost",
+        onClick: onSelectItem,
+        size: "sm",
+        disabled: disabled
+    }) : null), vm.hasFiles ? /*#__PURE__*/ react.createElement("div", {
+        className: "w-full overflow-y-scroll flex flex-col gap-xs"
+    }, vm.files.map((file, i)=>/*#__PURE__*/ react.createElement(FilePreview, {
+            key: `file-preview-${i}`,
+            disabled: disabled,
+            onEditItem: onEditItem ? ()=>onEditItem(file, i) : void 0,
+            onRemoveItem: onRemoveItem ? ()=>onRemoveItem(file, i) : void 0,
+            onReplaceItem: onReplaceItem ? ()=>onReplaceItem(file, i) : void 0,
+            renderFilePreview: renderFilePreview,
+            type: type,
+            value: file
+        }))) : /*#__PURE__*/ react.createElement(Trigger, {
+        disabled: disabled,
+        onSelectItem: onSelectItem,
+        renderTrigger: renderTrigger,
+        text: placeholder,
+        type: type,
+        variant: variant
+    }));
 };
 const DecoratableMultiFilePickerPrimitive = makeDecoratable("MultiFilePickerPrimitive", BaseMultiFilePickerPrimitive);
 const MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {
-  Preview: {
-    Image: ImagePreview,
-    RichItem: RichItemPreview,
-    TextOnly: TextOnlyPreview
-  }
+    Preview: {
+        Image: ImagePreview,
+        RichItem: RichItemPreview,
+        TextOnly: TextOnlyPreview
+    }
 });
 export { MultiFilePickerPrimitive };
 

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","FilePickerDescription","FilePickerLabel","filePickerVariants","FilePreview","ImagePreview","RichItemPreview","TextOnlyPreview","Trigger","cn","makeDecoratable","withStaticProps","Button","inputVariants","useMultiFilePicker","BaseMultiFilePickerPrimitive","className","buttonPlaceholder","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onReplaceItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","type","values","variant","vm","createElement","style","hasFiles","text","onClick","size","files","map","file","i","key","undefined","value","DecoratableMultiFilePickerPrimitive","MultiFilePickerPrimitive","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type FileItemDto,\n    type FileItemFormatted,\n    FilePickerDescription,\n    FilePickerLabel,\n    type FilePickerPrimitiveProps,\n    filePickerVariants,\n    FilePreview,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    Trigger\n} from \"~/FilePicker/index.js\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { useMultiFilePicker } from \"~/MultiFilePicker/primitives/useMultiFilePicker.js\";\n\ninterface MultiFilePickerPrimitiveProps extends Omit<\n    FilePickerPrimitiveProps,\n    \"value\" | \"onEditItem\" | \"onRemoveItem\"\n> {\n    /**\n     * The list of file items or file paths.\n     */\n    values?: FileItemDto[] | string[] | null;\n    /**\n     * Placeholder text for the button that allows users to select a file.\n     */\n    buttonPlaceholder?: string;\n    /**\n     * Callback function to replace an item.\n     */\n    onReplaceItem: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to edit an item.\n     */\n    onEditItem?: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to remove an item.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;\n}\n\nconst BaseMultiFilePickerPrimitive = ({\n    className,\n    buttonPlaceholder,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    values = [],\n    variant\n}: MultiFilePickerPrimitiveProps) => {\n    const { vm } = useMultiFilePicker({ values });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                \"max-h-[280px]\",\n                className\n            )}\n            style={containerStyle}\n        >\n            {(label || description) && (\n                <div className={\"w-full flex justify-between\"}>\n                    <div className={\"w-full\"}>\n                        {label && (\n                            <div className={\"mb-xs\"}>\n                                {typeof label === \"string\" ? (\n                                    <FilePickerLabel\n                                        label={label}\n                                        className={\"m-0\"}\n                                        disabled={disabled}\n                                    />\n                                ) : (\n                                    label\n                                )}\n                            </div>\n                        )}\n                        {description && (\n                            <FilePickerDescription\n                                description={description}\n                                disabled={disabled}\n                                className={\"m-0\"}\n                            />\n                        )}\n                    </div>\n                    {vm.hasFiles ? (\n                        <Button\n                            text={buttonPlaceholder ?? \"Select a file\"}\n                            variant={\"ghost\"}\n                            onClick={onSelectItem}\n                            size={\"sm\"}\n                            disabled={disabled}\n                        />\n                    ) : null}\n                </div>\n            )}\n            {vm.hasFiles ? (\n                <div className=\"w-full overflow-y-scroll flex flex-col gap-xs\">\n                    {vm.files.map((file, i) => (\n                        <FilePreview\n                            key={`file-preview-${i}`}\n                            disabled={disabled}\n                            onEditItem={onEditItem ? () => onEditItem(file, i) : undefined}\n                            onRemoveItem={onRemoveItem ? () => onRemoveItem(file, i) : undefined}\n                            onReplaceItem={onReplaceItem ? () => onReplaceItem(file, i) : undefined}\n                            renderFilePreview={renderFilePreview}\n                            type={type}\n                            value={file}\n                        />\n                    ))}\n                </div>\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePickerPrimitive = makeDecoratable(\n    \"MultiFilePickerPrimitive\",\n    BaseMultiFilePickerPrimitive\n);\n\nconst MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport {\n    MultiFilePickerPrimitive,\n    type FileItemFormatted,\n    type FileItemDto,\n    type MultiFilePickerPrimitiveProps\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"file":"MultiFilePicker/primitives/MultiFilePickerPrimitive.js","sources":["../../../src/MultiFilePicker/primitives/MultiFilePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    type FileItemDto,\n    type FileItemFormatted,\n    FilePickerDescription,\n    FilePickerLabel,\n    type FilePickerPrimitiveProps,\n    filePickerVariants,\n    FilePreview,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    Trigger\n} from \"~/FilePicker/index.js\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport { Button } from \"~/Button/index.js\";\nimport { inputVariants } from \"~/Input/index.js\";\nimport { useMultiFilePicker } from \"~/MultiFilePicker/primitives/useMultiFilePicker.js\";\n\ninterface MultiFilePickerPrimitiveProps extends Omit<\n    FilePickerPrimitiveProps,\n    \"value\" | \"onEditItem\" | \"onRemoveItem\"\n> {\n    /**\n     * The list of file items or file paths.\n     */\n    values?: FileItemDto[] | string[] | null;\n    /**\n     * Placeholder text for the button that allows users to select a file.\n     */\n    buttonPlaceholder?: string;\n    /**\n     * Callback function to replace an item.\n     */\n    onReplaceItem: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to edit an item.\n     */\n    onEditItem?: (item: FileItemFormatted | null, index: number) => void;\n    /**\n     * Optional callback function to remove an item.\n     */\n    onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;\n}\n\nconst BaseMultiFilePickerPrimitive = ({\n    className,\n    buttonPlaceholder,\n    containerStyle,\n    description,\n    disabled,\n    invalid,\n    label,\n    onEditItem,\n    onRemoveItem,\n    onReplaceItem,\n    onSelectItem,\n    placeholder,\n    renderFilePreview,\n    renderTrigger,\n    type = \"area\",\n    values = [],\n    variant\n}: MultiFilePickerPrimitiveProps) => {\n    const { vm } = useMultiFilePicker({ values });\n\n    return (\n        <div\n            data-disabled={disabled}\n            className={cn(\n                inputVariants({ variant, invalid }),\n                filePickerVariants({ type, variant }),\n                \"max-h-[280px]\",\n                className\n            )}\n            style={containerStyle}\n        >\n            {(label || description) && (\n                <div className={\"w-full flex justify-between\"}>\n                    <div className={\"w-full\"}>\n                        {label && (\n                            <div className={\"mb-xs\"}>\n                                {typeof label === \"string\" ? (\n                                    <FilePickerLabel\n                                        label={label}\n                                        className={\"m-0\"}\n                                        disabled={disabled}\n                                    />\n                                ) : (\n                                    label\n                                )}\n                            </div>\n                        )}\n                        {description && (\n                            <FilePickerDescription\n                                description={description}\n                                disabled={disabled}\n                                className={\"m-0\"}\n                            />\n                        )}\n                    </div>\n                    {vm.hasFiles ? (\n                        <Button\n                            text={buttonPlaceholder ?? \"Select a file\"}\n                            variant={\"ghost\"}\n                            onClick={onSelectItem}\n                            size={\"sm\"}\n                            disabled={disabled}\n                        />\n                    ) : null}\n                </div>\n            )}\n            {vm.hasFiles ? (\n                <div className=\"w-full overflow-y-scroll flex flex-col gap-xs\">\n                    {vm.files.map((file, i) => (\n                        <FilePreview\n                            key={`file-preview-${i}`}\n                            disabled={disabled}\n                            onEditItem={onEditItem ? () => onEditItem(file, i) : undefined}\n                            onRemoveItem={onRemoveItem ? () => onRemoveItem(file, i) : undefined}\n                            onReplaceItem={onReplaceItem ? () => onReplaceItem(file, i) : undefined}\n                            renderFilePreview={renderFilePreview}\n                            type={type}\n                            value={file}\n                        />\n                    ))}\n                </div>\n            ) : (\n                <Trigger\n                    disabled={disabled}\n                    onSelectItem={onSelectItem}\n                    renderTrigger={renderTrigger}\n                    text={placeholder}\n                    type={type}\n                    variant={variant}\n                />\n            )}\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePickerPrimitive = makeDecoratable(\n    \"MultiFilePickerPrimitive\",\n    BaseMultiFilePickerPrimitive\n);\n\nconst MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\n\nexport {\n    MultiFilePickerPrimitive,\n    type FileItemFormatted,\n    type FileItemDto,\n    type MultiFilePickerPrimitiveProps\n};\n"],"names":["BaseMultiFilePickerPrimitive","className","buttonPlaceholder","containerStyle","description","disabled","invalid","label","onEditItem","onRemoveItem","onReplaceItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","type","values","variant","vm","useMultiFilePicker","cn","inputVariants","filePickerVariants","FilePickerLabel","FilePickerDescription","Button","file","i","FilePreview","undefined","Trigger","DecoratableMultiFilePickerPrimitive","makeDecoratable","MultiFilePickerPrimitive","withStaticProps","ImagePreview","RichItemPreview","TextOnlyPreview"],"mappings":";;;;;;AA6CA,MAAMA,+BAA+B,CAAC,EAClCC,SAAS,EACTC,iBAAiB,EACjBC,cAAc,EACdC,WAAW,EACXC,QAAQ,EACRC,OAAO,EACPC,KAAK,EACLC,UAAU,EACVC,YAAY,EACZC,aAAa,EACbC,YAAY,EACZC,WAAW,EACXC,iBAAiB,EACjBC,aAAa,EACbC,OAAO,MAAM,EACbC,SAAS,EAAE,EACXC,OAAO,EACqB;IAC5B,MAAM,EAAEC,EAAE,EAAE,GAAGC,mBAAmB;QAAEH;IAAO;IAE3C,OAAO,WAAP,GACI,oBAAC;QACG,iBAAeX;QACf,WAAWe,GACPC,cAAc;YAAEJ;YAASX;QAAQ,IACjCgB,mBAAmB;YAAEP;YAAME;QAAQ,IACnC,iBACAhB;QAEJ,OAAOE;OAELI,AAAAA,CAAAA,SAASH,WAAU,mBACjB,oBAAC;QAAI,WAAW;qBACZ,oBAAC;QAAI,WAAW;OACXG,SAAS,WAATA,GACG,oBAAC;QAAI,WAAW;OACX,AAAiB,YAAjB,OAAOA,QAAqB,WAAX,GACd,oBAACgB,iBAAeA;QACZ,OAAOhB;QACP,WAAW;QACX,UAAUF;SAGdE,QAIXH,eAAe,WAAfA,GACG,oBAACoB,uBAAqBA;QAClB,aAAapB;QACb,UAAUC;QACV,WAAW;SAItBa,GAAG,QAAQ,GAAG,WAAH,GACR,oBAACO,QAAMA;QACH,MAAMvB,qBAAqB;QAC3B,SAAS;QACT,SAASS;QACT,MAAM;QACN,UAAUN;SAEd,OAGXa,GAAG,QAAQ,GAAG,WAAH,GACR,oBAAC;QAAI,WAAU;OACVA,GAAG,KAAK,CAAC,GAAG,CAAC,CAACQ,MAAMC,IAAAA,WAAAA,GACjB,oBAACC,aAAWA;YACR,KAAK,CAAC,aAAa,EAAED,GAAG;YACxB,UAAUtB;YACV,YAAYG,aAAa,IAAMA,WAAWkB,MAAMC,KAAKE;YACrD,cAAcpB,eAAe,IAAMA,aAAaiB,MAAMC,KAAKE;YAC3D,eAAenB,gBAAgB,IAAMA,cAAcgB,MAAMC,KAAKE;YAC9D,mBAAmBhB;YACnB,MAAME;YACN,OAAOW;6BAKnB,oBAACI,SAAOA;QACJ,UAAUzB;QACV,cAAcM;QACd,eAAeG;QACf,MAAMF;QACN,MAAMG;QACN,SAASE;;AAK7B;AAEA,MAAMc,sCAAsCC,gBACxC,4BACAhC;AAGJ,MAAMiC,2BAA2BC,gBAAgBH,qCAAqC;IAClF,SAAS;QACL,OAAOI;QACP,UAAUC;QACV,UAAUC;IACd;AACJ"}

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;