@webiny/admin-ui 6.0.0-alpha.0

package/MultiFilePicker/MultiFilePicker.stories.js

@@ -0,0 +1,384 @@
+import React, { useState, useEffect } from "react";
+import { MultiFilePicker } from "./";
+import { Providers } from "../Providers";
+const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
+const createFileList = (size = 10) => {
+  return Array.from({
+    length: size
+  }, (_, index) => {
+    const width = getRandomNumber(500, 2000); // Random width between 500 and 2000
+    const height = getRandomNumber(500, 2000); // Random height between 500 and 2000
+    const fileSize = getRandomNumber(500000, 5000000); // Random file size between 500KB and 5MB
+
+    return {
+      name: `file-${index + 1}.jpg`,
+      mimeType: "image/jpeg",
+      size: fileSize,
+      url: `https://picsum.photos/${width}/${height}`
+    };
+  });
+};
+const meta = {
+  title: "Components/Form/Multi FilePicker",
+  component: MultiFilePicker,
+  argTypes: {
+    onSelectItem: {
+      action: "onSelectItem"
+    },
+    onEditItem: {
+      action: "onEditItem"
+    },
+    onRemoveItem: {
+      action: "onRemoveItem"
+    },
+    disabled: {
+      control: "boolean",
+      defaultValue: false
+    }
+  },
+  parameters: {
+    layout: "padded"
+  },
+  render: args => {
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+      values: selectedFiles,
+      onSelectItem: () => setSelectedFiles(createFileList()),
+      onReplaceItem: (_, index) => setSelectedFiles(prevState => {
+        if (!prevState) {
+          return [];
+        }
+        return [...prevState.slice(0, index), ...createFileList(1), ...prevState.slice(index + 1)];
+      }),
+      onRemoveItem: item => setSelectedFiles(prevState => prevState?.filter(value => value.name !== item?.name)),
+      onEditItem: (item, i) => alert(`Editing ${item?.name} at position ${i}`)
+    })));
+  }
+};
+export default meta;
+export const Default = {};
+export const AreaType = {
+  args: {
+    ...Default.args,
+    type: "area"
+  }
+};
+export const AreaWithLabel = {
+  args: {
+    ...AreaType.args,
+    label: "Any field label"
+  }
+};
+export const AreaWithLabelRequired = {
+  args: {
+    ...AreaType.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const AreaWithDescription = {
+  args: {
+    ...AreaType.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const AreaWithNotes = {
+  args: {
+    ...AreaType.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const AreaWithErrors = {
+  args: {
+    ...AreaType.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const AreaDisabled = {
+  args: {
+    ...AreaType.args,
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const AreaWithValidateFunction = {
+  args: {
+    ...AreaType.args
+  },
+  render: args => {
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: undefined
+    });
+    const validate = async () => {
+      setValidation({
+        isValid: false,
+        message: "Any custom error message."
+      });
+    };
+    return /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+      validate: validate,
+      validation: validation
+    }));
+  }
+};
+export const AreaFullExample = {
+  args: {
+    ...AreaType.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Compact = {
+  args: {
+    ...Default.args,
+    type: "compact"
+  }
+};
+export const CompactWithLabel = {
+  args: {
+    ...Compact.args,
+    label: "Any field label"
+  }
+};
+export const CompactWithLabelRequired = {
+  args: {
+    ...Compact.args,
+    label: "Any field label",
+    required: true
+  }
+};
+export const CompactWithDescription = {
+  args: {
+    ...Compact.args,
+    description: "Provide the required information for processing your request."
+  }
+};
+export const CompactWithNotes = {
+  args: {
+    ...Compact.args,
+    note: "Note: Ensure your selection or input is accurate before proceeding."
+  }
+};
+export const CompactWithErrors = {
+  args: {
+    ...Compact.args,
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const CompactDisabled = {
+  args: {
+    ...Compact.args,
+    label: "Any field label",
+    disabled: true
+  }
+};
+export const CompactWithValidateFunction = {
+  args: {
+    ...Compact.args
+  },
+  render: args => {
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: undefined
+    });
+    const validate = async () => {
+      setValidation({
+        isValid: false,
+        message: "Any custom error message."
+      });
+    };
+    return /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+      validate: validate,
+      validation: validation
+    }));
+  }
+};
+export const CompactFullExample = {
+  args: {
+    ...Compact.args,
+    label: "Any field label",
+    required: true,
+    description: "Provide the required information for processing your request.",
+    note: "Note: Ensure your selection or input is accurate before proceeding.",
+    validation: {
+      isValid: false,
+      message: "This field is required."
+    }
+  }
+};
+export const Documentation = {
+  render: args => {
+    const [selectedFiles, setSelectedFiles] = useState([]);
+    const [validation, setValidation] = useState({
+      isValid: true,
+      message: ""
+    });
+
+    // Update value when args.values changes
+    useEffect(() => {
+      if (!args.values) {
+        setSelectedFiles([]);
+      } else if (Array.isArray(args.values)) {
+        // Convert any string values to FileItemDto format
+        const formattedValues = args.values.map(value => {
+          if (typeof value === "string") {
+            return {
+              name: value.split("/").pop() || "file",
+              mimeType: "image/jpeg",
+              // Default mime type
+              size: 0,
+              url: value
+            };
+          }
+          return value;
+        });
+        setSelectedFiles(formattedValues);
+      }
+    }, [args.values]);
+    const handleSelect = () => {
+      setSelectedFiles(createFileList(3));
+      setValidation({
+        isValid: true,
+        message: ""
+      });
+    };
+    const handleReplace = (_, index) => {
+      setSelectedFiles(prevState => {
+        if (!prevState) {
+          return [];
+        }
+        return [...prevState.slice(0, index), ...createFileList(1), ...prevState.slice(index + 1)];
+      });
+      setValidation({
+        isValid: true,
+        message: ""
+      });
+    };
+    const handleEdit = (file, index) => {
+      if (file) {
+        console.log("Editing file:", file, "at index:", index);
+        alert(`Editing File: ${file.name} at position ${index}`);
+      }
+    };
+    const handleRemove = (file, index) => {
+      setSelectedFiles(prevState => prevState?.filter((_, i) => i !== index));
+      if (args.required && (!selectedFiles || selectedFiles.length <= 1)) {
+        setValidation({
+          isValid: false,
+          message: "Please select at least one file"
+        });
+      }
+    };
+
+    // Validate on required change or value change
+    useEffect(() => {
+      if (args.required && (!selectedFiles || selectedFiles.length === 0)) {
+        setValidation({
+          isValid: false,
+          message: "Please select at least one file"
+        });
+      } else {
+        setValidation({
+          isValid: true,
+          message: ""
+        });
+      }
+    }, [args.required, selectedFiles]);
+    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+      values: selectedFiles,
+      onSelectItem: handleSelect,
+      onReplaceItem: handleReplace,
+      onRemoveItem: handleRemove,
+      onEditItem: handleEdit,
+      validation: validation
+    })));
+  },
+  args: {
+    label: "Upload Images",
+    required: true,
+    disabled: false,
+    description: "Select files to upload (JPG, PNG, PDF)",
+    note: "Note: Maximum file size is 5MB per file",
+    type: "area",
+    values: [],
+    validation: undefined,
+    onSelectItem: undefined,
+    onReplaceItem: undefined,
+    onEditItem: undefined,
+    onRemoveItem: undefined
+  },
+  argTypes: {
+    label: {
+      description: "Label text for the file picker",
+      control: "text",
+      defaultValue: "Upload Images"
+    },
+    type: {
+      description: "The type of file picker to display",
+      control: "select",
+      options: ["area", "compact"],
+      defaultValue: "area"
+    },
+    required: {
+      description: "Makes the field required when set to true",
+      control: "boolean",
+      defaultValue: true
+    },
+    disabled: {
+      description: "Disables the field when set to true",
+      control: "boolean",
+      defaultValue: false
+    },
+    description: {
+      description: "Additional description text below the field",
+      control: "text"
+    },
+    note: {
+      description: "Additional note text below the field",
+      control: "text"
+    },
+    values: {
+      description: "Array of selected files",
+      control: "object"
+    },
+    validation: {
+      description: "Validation state and message. Please refer to the example code for details on usage.",
+      control: "none"
+    },
+    onSelectItem: {
+      description: "Callback when user selects files - Please refer to the example code for details on usage.",
+      action: "onSelectItem",
+      control: "none"
+    },
+    onReplaceItem: {
+      description: "Callback when user replaces a file - Please refer to the example code for details on usage.",
+      action: "onReplaceItem",
+      control: "none"
+    },
+    onEditItem: {
+      description: "Callback when user edits a file - Please refer to the example code for details on usage.",
+      action: "onEditItem",
+      control: "none"
+    },
+    onRemoveItem: {
+      description: "Callback when user removes a file - Please refer to the example code for details on usage.",
+      action: "onRemoveItem",
+      control: "none"
+    }
+  }
+};
+
+//# sourceMappingURL=MultiFilePicker.stories.js.map

package/MultiFilePicker/MultiFilePicker.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","useEffect","MultiFilePicker","Providers","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\";\nimport { type FileItemDto, MultiFilePicker } from \"~/MultiFilePicker\";\nimport { Providers } from \"~/Providers\";\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            <Providers>\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            </Providers>\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            <Providers>\n                <MultiFilePicker\n                    {...args}\n                    values={selectedFiles}\n                    onSelectItem={handleSelect}\n                    onReplaceItem={handleReplace}\n                    onRemoveItem={handleRemove}\n                    onEditItem={handleEdit}\n                    validation={validation}\n                />\n            </Providers>\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            control: \"none\"\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            control: \"none\"\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            control: \"none\"\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            control: \"none\"\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            control: \"none\"\n        }\n    }\n};\n"],"mappings":"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","ignoreList":[]}

package/MultiFilePicker/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./MultiFilePicker";
+export * from "./primitives";

package/MultiFilePicker/index.js

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

package/MultiFilePicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./MultiFilePicker\";\nexport * from \"./primitives\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.d.ts

@@ -0,0 +1,104 @@
+import React from "react";
+import { type FileItemDto, type FileItemFormatted, type FilePickerPrimitiveProps } from "../../FilePicker";
+interface MultiFilePickerPrimitiveProps extends Omit<FilePickerPrimitiveProps, "value" | "onEditItem" | "onRemoveItem"> {
+    /**
+     * The list of file items or file paths.
+     */
+    values?: FileItemDto[] | string[] | null;
+    /**
+     * Placeholder text for the button that allows users to select a file.
+     */
+    buttonPlaceholder?: string;
+    /**
+     * Callback function to replace an item.
+     */
+    onReplaceItem: (item: FileItemFormatted | null, index: number) => void;
+    /**
+     * Optional callback function to edit an item.
+     */
+    onEditItem?: (item: FileItemFormatted | null, index: number) => void;
+    /**
+     * Optional callback function to remove an item.
+     */
+    onRemoveItem?: (item: FileItemFormatted | null, index: number) => void;
+}
+declare const MultiFilePickerPrimitive: (({ className, buttonPlaceholder, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
+    original: ({ className, buttonPlaceholder, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+    originalName: string;
+    displayName: string;
+} & {
+    original: (({ className, buttonPlaceholder, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
+        original: ({ className, buttonPlaceholder, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    };
+    originalName: string;
+    displayName: string;
+} & {
+    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, buttonPlaceholder, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element) & {
+        original: ({ className, buttonPlaceholder, containerStyle, disabled, invalid, label, onEditItem, onRemoveItem, onReplaceItem, onSelectItem, placeholder, renderFilePreview, renderTrigger, type, values, variant }: MultiFilePickerPrimitiveProps) => React.JSX.Element;
+        originalName: string;
+        displayName: string;
+    }>) => (props: unknown) => React.JSX.Element;
+} & {
+    Preview: {
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("../../FilePicker/primitives/components/types").FilePreviewDefaultProps) => 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/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("../../FilePicker/primitives/components/previews/RichItemPreview/RichItemPreview").RichItemPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+            originalName: string;
+            displayName: string;
+        } & {
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            };
+            originalName: string;
+            displayName: string;
+        } & {
+            createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("../../FilePicker/primitives/components/previews/TextOnlyPreview/TextOnlyPreview").TextOnlyPreviewProps) => React.JSX.Element;
+                originalName: string;
+                displayName: string;
+            }>) => (props: unknown) => React.JSX.Element;
+        };
+    };
+};
+export { MultiFilePickerPrimitive, type FileItemFormatted, type FileItemDto, type MultiFilePickerPrimitiveProps };

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.js

@@ -0,0 +1,81 @@
+import React from "react";
+import { filePickerVariants, FilePreview, FormPickerLabel, ImagePreview, RichItemPreview, TextOnlyPreview, Trigger } from "../../FilePicker";
+import { cn, makeDecoratable, withStaticProps } from "../../utils";
+import { Button } from "../../Button";
+import { inputVariants } from "../../Input";
+import { useMultiFilePicker } from "./useMultiFilePicker";
+const BaseMultiFilePickerPrimitive = ({
+  className,
+  buttonPlaceholder,
+  containerStyle,
+  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
+    }), "wby-max-h-[280px]", className),
+    style: containerStyle
+  }, label && type === "area" && /*#__PURE__*/React.createElement("div", {
+    className: "wby-flex wby-justify-between"
+  }, typeof label === "string" ? /*#__PURE__*/React.createElement(FormPickerLabel, {
+    label: label,
+    className: "wby-m-0"
+  }) : label, /*#__PURE__*/React.createElement(Button, {
+    text: buttonPlaceholder ?? "Select a file",
+    variant: "ghost",
+    onClick: onSelectItem,
+    size: "sm",
+    disabled: disabled
+  })), vm.hasFiles ? /*#__PURE__*/React.createElement("div", {
+    className: "wby-overflow-y-scroll wby-flex wby-flex-col wby-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 DecoratableMultiFilePickerPrimitive = makeDecoratable("MultiFilePickerPrimitive", BaseMultiFilePickerPrimitive);
+const MultiFilePickerPrimitive = withStaticProps(DecoratableMultiFilePickerPrimitive, {
+  Preview: {
+    Image: ImagePreview,
+    RichItem: RichItemPreview,
+    TextOnly: TextOnlyPreview
+  }
+});
+export { MultiFilePickerPrimitive };
+
+//# sourceMappingURL=MultiFilePickerPrimitive.js.map

package/MultiFilePicker/primitives/MultiFilePickerPrimitive.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","filePickerVariants","FilePreview","FormPickerLabel","ImagePreview","RichItemPreview","TextOnlyPreview","Trigger","cn","makeDecoratable","withStaticProps","Button","inputVariants","useMultiFilePicker","BaseMultiFilePickerPrimitive","className","buttonPlaceholder","containerStyle","disabled","invalid","label","onEditItem","onRemoveItem","onReplaceItem","onSelectItem","placeholder","renderFilePreview","renderTrigger","type","values","variant","vm","createElement","style","text","onClick","size","hasFiles","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    type FilePickerPrimitiveProps,\n    filePickerVariants,\n    FilePreview,\n    FormPickerLabel,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview,\n    Trigger\n} from \"~/FilePicker\";\nimport { cn, makeDecoratable, withStaticProps } from \"~/utils\";\nimport { Button } from \"~/Button\";\nimport { inputVariants } from \"~/Input\";\nimport { useMultiFilePicker } from \"~/MultiFilePicker/primitives/useMultiFilePicker\";\n\ninterface MultiFilePickerPrimitiveProps\n    extends Omit<FilePickerPrimitiveProps, \"value\" | \"onEditItem\" | \"onRemoveItem\"> {\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    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                \"wby-max-h-[280px]\",\n                className\n            )}\n            style={containerStyle}\n        >\n            {label && type === \"area\" && (\n                <div className={\"wby-flex wby-justify-between\"}>\n                    {typeof label === \"string\" ? (\n                        <FormPickerLabel label={label} className={\"wby-m-0\"} />\n                    ) : (\n                        label\n                    )}\n                    <Button\n                        text={buttonPlaceholder ?? \"Select a file\"}\n                        variant={\"ghost\"}\n                        onClick={onSelectItem}\n                        size={\"sm\"}\n                        disabled={disabled}\n                    />\n                </div>\n            )}\n            {vm.hasFiles ? (\n                <div className=\"wby-overflow-y-scroll wby-flex wby-flex-col wby-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":[]}