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

package/MultiAutoComplete/primitives/useMultiAutoComplete.d.ts

@@ -1,4 +1,4 @@
-import type { MultiAutoCompletePrimitiveProps } from "./MultiAutoCompletePrimitive";
+import type { MultiAutoCompletePrimitiveProps } from "./MultiAutoCompletePrimitive.js";
 export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitiveProps) => {
     vm: {
         inputVm: {
@@ -7,11 +7,11 @@ export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitivePro
             displayResetAction: boolean;
         };
         selectedOptionsVm: {
-            options: import("../../Command").CommandOptionFormatted[];
+            options: import("../../Command/index.js").CommandOptionFormatted[];
             empty: boolean;
         };
         optionsListVm: {
-            options: import("../../Command").CommandOptionFormatted[];
+            options: import("../../Command/index.js").CommandOptionFormatted[];
             emptyMessage: any;
             loadingMessage: any;
             open: boolean;
@@ -22,24 +22,11 @@ export declare const useMultiAutoComplete: (props: MultiAutoCompletePrimitivePro
         };
     } | {
         temporaryOptionVm: {
-            option?: import("../../Command").CommandOptionFormatted | undefined;
-        };
-        inputVm: {
-            placeholder: string;
-            value: string;
-            displayResetAction: boolean;
-        };
-        selectedOptionsVm: {
-            options: import("../../Command").CommandOptionFormatted[];
-            empty: boolean;
-        };
-        optionsListVm: {
-            options: import("../../Command").CommandOptionFormatted[];
-            emptyMessage: any;
-            loadingMessage: any;
-            open: boolean;
-            empty: boolean;
+            option?: import("../../Command/index.js").CommandOptionFormatted;
         };
+        inputVm: import("./presenters/MultiAutoCompleteInputPresenter.js").IMultiAutoCompleteInputPresenter["vm"];
+        selectedOptionsVm: import("./presenters/MultiAutoCompleteSelectedOptionsPresenter.js").IMultiAutoCompleteSelectedOptionsPresenter["vm"];
+        optionsListVm: import("./presenters/MultiAutoCompleteListOptionsPresenter.js").IMultiAutoCompleteListOptionsPresenter["vm"];
     };
     setSelectedOption: ((value: string) => void) | ((value: string) => void);
     removeSelectedOption: ((value: string) => void) | ((value: string) => void);

package/MultiAutoComplete/primitives/useMultiAutoComplete.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
-import { MultiAutoCompleteInputPresenter, MultiAutoCompleteListOptionsPresenter, MultiAutoCompleteListOptionsPresenterWithUniqueValues, MultiAutoCompletePresenter, MultiAutoCompletePresenterWithFreeInput, MultiAutoCompleteSelectedOptionPresenter } from "./presenters";
-import { MultiAutoCompleteTemporaryOptionPresenter } from "./presenters/MultiAutoCompleteTemporaryOptionPresenter";
+import { MultiAutoCompleteInputPresenter, MultiAutoCompleteListOptionsPresenter, MultiAutoCompleteListOptionsPresenterWithUniqueValues, MultiAutoCompletePresenter, MultiAutoCompletePresenterWithFreeInput, MultiAutoCompleteSelectedOptionPresenter } from "./presenters/index.js";
+import { MultiAutoCompleteTemporaryOptionPresenter } from "./presenters/MultiAutoCompleteTemporaryOptionPresenter.js";
 export const useMultiAutoComplete = props => {
   const params = useMemo(() => ({
     displayResetAction: props.displayResetAction,

package/MultiAutoComplete/primitives/useMultiAutoComplete.js.map

@@ -1 +1 @@
-{"version":3,"names":["useEffect","useMemo","useState","autorun","MultiAutoCompleteInputPresenter","MultiAutoCompleteListOptionsPresenter","MultiAutoCompleteListOptionsPresenterWithUniqueValues","MultiAutoCompletePresenter","MultiAutoCompletePresenterWithFreeInput","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompleteTemporaryOptionPresenter","useMultiAutoComplete","props","params","displayResetAction","emptyMessage","loadingMessage","initialMessage","onOpenChange","onValueSearch","onValuesChange","onValuesReset","options","placeholder","values","presenter","optionsListPresenter","optionsListWithUniqueValues","inputPresenter","selectedOptionsPresenter","uniqueValues","allowFreeInput","temporaryOptionsPresenter","withFreeInputPresenter","init","vm","setVm","setSelectedOption","removeSelectedOption","searchOption","resetSelectedOptions","setListOpenState","createOption"],"sources":["useMultiAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./MultiAutoCompletePrimitive\";\nimport type { MultiAutoCompletePresenterParams } from \"./presenters\";\nimport {\n    MultiAutoCompleteInputPresenter,\n    MultiAutoCompleteListOptionsPresenter,\n    MultiAutoCompleteListOptionsPresenterWithUniqueValues,\n    MultiAutoCompletePresenter,\n    MultiAutoCompletePresenterWithFreeInput,\n    MultiAutoCompleteSelectedOptionPresenter\n} from \"./presenters\";\nimport { MultiAutoCompleteTemporaryOptionPresenter } from \"~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter\";\n\nexport const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {\n    const params: MultiAutoCompletePresenterParams = useMemo(\n        () => ({\n            displayResetAction: props.displayResetAction,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueSearch: props.onValueSearch,\n            onValuesChange: props.onValuesChange,\n            onValuesReset: props.onValuesReset,\n            options: props.options,\n            placeholder: props.placeholder,\n            values: props.values\n        }),\n        [\n            props.displayResetAction,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueSearch,\n            props.onValuesChange,\n            props.onValuesReset,\n            props.options,\n            props.placeholder,\n            props.values\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n        const optionsListWithUniqueValues =\n            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);\n\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n\n        let presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n\n        if (props?.uniqueValues) {\n            presenter = new MultiAutoCompletePresenter(\n                inputPresenter,\n                selectedOptionsPresenter,\n                optionsListWithUniqueValues\n            );\n        }\n\n        if (props?.allowFreeInput) {\n            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();\n            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(\n                temporaryOptionsPresenter,\n                presenter\n            );\n            withFreeInputPresenter.init(params);\n            return withFreeInputPresenter;\n        } else {\n            presenter.init(params);\n            return presenter;\n        }\n    }, [props.allowFreeInput, props.uniqueValues]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        removeSelectedOption: presenter.removeSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOptions: presenter.resetSelectedOptions,\n        setListOpenState: presenter.setListOpenState,\n        createOption: presenter.createOption\n    };\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["useEffect","useMemo","useState","autorun","MultiAutoCompleteInputPresenter","MultiAutoCompleteListOptionsPresenter","MultiAutoCompleteListOptionsPresenterWithUniqueValues","MultiAutoCompletePresenter","MultiAutoCompletePresenterWithFreeInput","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompleteTemporaryOptionPresenter","useMultiAutoComplete","props","params","displayResetAction","emptyMessage","loadingMessage","initialMessage","onOpenChange","onValueSearch","onValuesChange","onValuesReset","options","placeholder","values","presenter","optionsListPresenter","optionsListWithUniqueValues","inputPresenter","selectedOptionsPresenter","uniqueValues","allowFreeInput","temporaryOptionsPresenter","withFreeInputPresenter","init","vm","setVm","setSelectedOption","removeSelectedOption","searchOption","resetSelectedOptions","setListOpenState","createOption"],"sources":["useMultiAutoComplete.ts"],"sourcesContent":["import { useEffect, useMemo, useState } from \"react\";\nimport { autorun } from \"mobx\";\nimport type { MultiAutoCompletePrimitiveProps } from \"./MultiAutoCompletePrimitive.js\";\nimport type { MultiAutoCompletePresenterParams } from \"./presenters/index.js\";\nimport {\n    MultiAutoCompleteInputPresenter,\n    MultiAutoCompleteListOptionsPresenter,\n    MultiAutoCompleteListOptionsPresenterWithUniqueValues,\n    MultiAutoCompletePresenter,\n    MultiAutoCompletePresenterWithFreeInput,\n    MultiAutoCompleteSelectedOptionPresenter\n} from \"./presenters/index.js\";\nimport { MultiAutoCompleteTemporaryOptionPresenter } from \"~/MultiAutoComplete/primitives/presenters/MultiAutoCompleteTemporaryOptionPresenter.js\";\n\nexport const useMultiAutoComplete = (props: MultiAutoCompletePrimitiveProps) => {\n    const params: MultiAutoCompletePresenterParams = useMemo(\n        () => ({\n            displayResetAction: props.displayResetAction,\n            emptyMessage: props.emptyMessage,\n            loadingMessage: props.loadingMessage,\n            initialMessage: props.initialMessage,\n            onOpenChange: props.onOpenChange,\n            onValueSearch: props.onValueSearch,\n            onValuesChange: props.onValuesChange,\n            onValuesReset: props.onValuesReset,\n            options: props.options,\n            placeholder: props.placeholder,\n            values: props.values\n        }),\n        [\n            props.displayResetAction,\n            props.emptyMessage,\n            props.loadingMessage,\n            props.initialMessage,\n            props.onOpenChange,\n            props.onValueSearch,\n            props.onValuesChange,\n            props.onValuesReset,\n            props.options,\n            props.placeholder,\n            props.values\n        ]\n    );\n\n    const presenter = useMemo(() => {\n        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();\n        const optionsListWithUniqueValues =\n            new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);\n\n        const inputPresenter = new MultiAutoCompleteInputPresenter();\n        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();\n\n        let presenter = new MultiAutoCompletePresenter(\n            inputPresenter,\n            selectedOptionsPresenter,\n            optionsListPresenter\n        );\n\n        if (props?.uniqueValues) {\n            presenter = new MultiAutoCompletePresenter(\n                inputPresenter,\n                selectedOptionsPresenter,\n                optionsListWithUniqueValues\n            );\n        }\n\n        if (props?.allowFreeInput) {\n            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();\n            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(\n                temporaryOptionsPresenter,\n                presenter\n            );\n            withFreeInputPresenter.init(params);\n            return withFreeInputPresenter;\n        } else {\n            presenter.init(params);\n            return presenter;\n        }\n    }, [props.allowFreeInput, props.uniqueValues]);\n\n    const [vm, setVm] = useState(presenter.vm);\n\n    useEffect(() => {\n        presenter.init(params);\n    }, [params, presenter]);\n\n    useEffect(() => {\n        return autorun(() => {\n            setVm(presenter.vm);\n        });\n    }, [presenter]);\n\n    return {\n        vm,\n        setSelectedOption: presenter.setSelectedOption,\n        removeSelectedOption: presenter.removeSelectedOption,\n        searchOption: presenter.searchOption,\n        resetSelectedOptions: presenter.resetSelectedOptions,\n        setListOpenState: presenter.setListOpenState,\n        createOption: presenter.createOption\n    };\n};\n"],"mappings":"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","ignoreList":[]}

package/MultiFilePicker/MultiFilePicker.d.ts

@@ -1,80 +1,80 @@
 import React from "react";
-import { type MultiFilePickerPrimitiveProps } from "./primitives";
-import { type FormComponentProps } from "../FormComponent";
+import { type MultiFilePickerPrimitiveProps } from "./primitives/index.js";
+import { type FormComponentProps } from "../FormComponent/index.js";
 type MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;
-declare const MultiFilePicker: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
-    original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+declare const MultiFilePicker: (({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
+    original: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
     originalName: string;
     displayName: string;
 } & {
-    original: (({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+    original: (({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
         originalName: string;
         displayName: string;
     };
     originalName: string;
     displayName: string;
 } & {
-    createDecorator: (decorator: import("@webiny/react-composition").ComponentDecorator<(({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
-        original: ({ label, description, note, required, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
+    createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element) & {
+        original: ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type, ...props }: MultiFilePickerProps) => React.JSX.Element;
         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;
+        Image: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+            original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
             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;
+            original: (({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
                 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;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element) & {
+                original: ({ value, className, variant, disabled, onRemoveItem, onReplaceItem, onEditItem }: import("~/FilePicker/primitives/components/index.js").ImagePreviewProps) => React.JSX.Element;
                 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;
+        RichItem: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
             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;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 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;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, value, variant, preview, ...props }: import("~/FilePicker/primitives/components/index.js").RichItemPreviewProps) => React.JSX.Element;
                 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;
+        TextOnly: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+            original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").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;
+            original: (({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").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;
+            createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<(({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element) & {
+                original: ({ className, disabled, onRemoveItem, onReplaceItem, onEditItem, small, variant, value, ...props }: import("~/FilePicker/primitives/components/index.js").TextOnlyPreviewProps) => React.JSX.Element;
                 originalName: string;
                 displayName: string;
             }>) => (props: unknown) => React.JSX.Element;

package/MultiFilePicker/MultiFilePicker.js

@@ -1,13 +1,12 @@
 import React, { useCallback, useMemo } from "react";
-import { makeDecoratable, withStaticProps } from "../utils";
-import { MultiFilePickerPrimitive } from "./primitives";
-import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent";
-import { FilePickerDescription, FilePickerLabel, ImagePreview, RichItemPreview, TextOnlyPreview } from "../FilePicker/primitives/components";
+import { makeDecoratable, withStaticProps } from "../utils.js";
+import { MultiFilePickerPrimitive } from "./primitives/index.js";
+import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent/index.js";
+import { ImagePreview, RichItemPreview, TextOnlyPreview } from "../FilePicker/primitives/components/index.js";
 const BaseMultiFilePicker = ({
   label,
   description,
   note,
-  required,
   disabled,
   validation,
   validate,
@@ -30,16 +29,8 @@ const BaseMultiFilePicker = ({
     originalOnBlur && originalOnBlur(e);
   }, [validate, originalOnBlur]);
   return /*#__PURE__*/React.createElement("div", {
-    className: "wby-w-full"
-  }, type !== "area" && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FilePickerLabel, {
-    label: label,
-    required: required,
-    disabled: disabled,
-    invalid: invalid
-  }), /*#__PURE__*/React.createElement(FilePickerDescription, {
-    description: description,
-    disabled: disabled
-  })), /*#__PURE__*/React.createElement(MultiFilePickerPrimitive, Object.assign({}, props, {
+    className: "w-full"
+  }, /*#__PURE__*/React.createElement(MultiFilePickerPrimitive, Object.assign({}, props, {
     label: label,
     description: description,
     disabled: disabled,

package/MultiFilePicker/MultiFilePicker.js.map

@@ -1 +1 @@
-{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","MultiFilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","FilePickerDescription","FilePickerLabel","ImagePreview","RichItemPreview","TextOnlyPreview","BaseMultiFilePicker","label","description","note","required","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Fragment","Object","assign","text","DecoratableMultiFilePicker","MultiFilePicker","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils\";\nimport { MultiFilePickerPrimitive, type MultiFilePickerPrimitiveProps } from \"./primitives\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent\";\nimport {\n    FilePickerDescription,\n    FilePickerLabel,\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview\n} from \"~/FilePicker/primitives/components\";\n\ntype MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseMultiFilePicker = ({\n    label,\n    description,\n    note,\n    required,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: MultiFilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"wby-w-full\"}>\n            {type !== \"area\" && (\n                <>\n                    <FilePickerLabel\n                        label={label}\n                        required={required}\n                        disabled={disabled}\n                        invalid={invalid}\n                    />\n                    <FilePickerDescription description={description} disabled={disabled} />\n                </>\n            )}\n            <MultiFilePickerPrimitive\n                {...props}\n                label={label}\n                description={description}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePicker = makeDecoratable(\"MultiFilePicker\", BaseMultiFilePicker);\n\nconst MultiFilePicker = withStaticProps(DecoratableMultiFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { MultiFilePicker, type MultiFilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SAASC,wBAAwB;AACjC,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SACIC,qBAAqB,EACrBC,eAAe,EACfC,YAAY,EACZC,eAAe,EACfC,eAAe;AAKnB,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACe,CAAC,KAAK;EACxB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAG3B,OAAO,CAAC,MAAMwB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGpB,WAAW,CACtB,MAAO6B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACItB,KAAA,CAAAgC,aAAA;IAAKC,SAAS,EAAE;EAAa,GACxBV,IAAI,KAAK,MAAM,iBACZvB,KAAA,CAAAgC,aAAA,CAAAhC,KAAA,CAAAkC,QAAA,qBACIlC,KAAA,CAAAgC,aAAA,CAACvB,eAAe;IACZK,KAAK,EAAEA,KAAM;IACbG,QAAQ,EAAEA,QAAS;IACnBC,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA;EAAQ,CACpB,CAAC,eACF7B,KAAA,CAAAgC,aAAA,CAACxB,qBAAqB;IAACO,WAAW,EAAEA,WAAY;IAACG,QAAQ,EAAEA;EAAS,CAAE,CACxE,CACL,eACDlB,KAAA,CAAAgC,aAAA,CAAC3B,wBAAwB,EAAA8B,MAAA,CAAAC,MAAA,KACjBZ,KAAK;IACTV,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBG,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFvB,KAAA,CAAAgC,aAAA,CAAC1B,yBAAyB;IACtB+B,IAAI,EAAET,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFlB,KAAA,CAAAgC,aAAA,CAACzB,iBAAiB;IAAC8B,IAAI,EAAErB,IAAK;IAACE,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMoB,0BAA0B,GAAGnC,eAAe,CAAC,iBAAiB,EAAEU,mBAAmB,CAAC;AAE1F,MAAM0B,eAAe,GAAGnC,eAAe,CAACkC,0BAA0B,EAAE;EAChEE,OAAO,EAAE;IACLC,KAAK,EAAE/B,YAAY;IACnBgC,QAAQ,EAAE/B,eAAe;IACzBgC,QAAQ,EAAE/B;EACd;AACJ,CAAC,CAAC;AACF,SAAS2B,eAAe","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","makeDecoratable","withStaticProps","MultiFilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","ImagePreview","RichItemPreview","TextOnlyPreview","BaseMultiFilePicker","label","description","note","disabled","validation","validate","onBlur","originalOnBlur","type","props","isValid","validationIsValid","message","validationMessage","invalid","e","persist","createElement","className","Object","assign","text","DecoratableMultiFilePicker","MultiFilePicker","Preview","Image","RichItem","TextOnly"],"sources":["MultiFilePicker.tsx"],"sourcesContent":["import React, { useCallback, useMemo } from \"react\";\nimport { makeDecoratable, withStaticProps } from \"~/utils.js\";\nimport {\n    MultiFilePickerPrimitive,\n    type MultiFilePickerPrimitiveProps\n} from \"./primitives/index.js\";\nimport {\n    FormComponentErrorMessage,\n    FormComponentNote,\n    type FormComponentProps\n} from \"~/FormComponent/index.js\";\nimport {\n    ImagePreview,\n    RichItemPreview,\n    TextOnlyPreview\n} from \"~/FilePicker/primitives/components/index.js\";\n\ntype MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;\n\nconst BaseMultiFilePicker = ({\n    label,\n    description,\n    note,\n    disabled,\n    validation,\n    validate,\n    onBlur: originalOnBlur,\n    type = \"area\",\n    ...props\n}: MultiFilePickerProps) => {\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n    const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);\n\n    const onBlur = useCallback(\n        async (e: React.FocusEvent<HTMLInputElement>) => {\n            if (validate) {\n                // Since we are accessing event in an async operation, we need to persist it.\n                // See https://reactjs.org/docs/events.html#event-pooling.\n                e.persist();\n                await validate();\n            }\n            originalOnBlur && originalOnBlur(e);\n        },\n        [validate, originalOnBlur]\n    );\n\n    return (\n        <div className={\"w-full\"}>\n            <MultiFilePickerPrimitive\n                {...props}\n                label={label}\n                description={description}\n                disabled={disabled}\n                invalid={invalid}\n                onBlur={onBlur}\n                type={type}\n            />\n            <FormComponentErrorMessage\n                text={validationMessage}\n                invalid={invalid}\n                disabled={disabled}\n            />\n            <FormComponentNote text={note} disabled={disabled} />\n        </div>\n    );\n};\n\nconst DecoratableMultiFilePicker = makeDecoratable(\"MultiFilePicker\", BaseMultiFilePicker);\n\nconst MultiFilePicker = withStaticProps(DecoratableMultiFilePicker, {\n    Preview: {\n        Image: ImagePreview,\n        RichItem: RichItemPreview,\n        TextOnly: TextOnlyPreview\n    }\n});\nexport { MultiFilePicker, type MultiFilePickerProps };\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,WAAW,EAAEC,OAAO,QAAQ,OAAO;AACnD,SAASC,eAAe,EAAEC,eAAe;AACzC,SACIC,wBAAwB;AAG5B,SACIC,yBAAyB,EACzBC,iBAAiB;AAGrB,SACIC,YAAY,EACZC,eAAe,EACfC,eAAe;AAKnB,MAAMC,mBAAmB,GAAGA,CAAC;EACzBC,KAAK;EACLC,WAAW;EACXC,IAAI;EACJC,QAAQ;EACRC,UAAU;EACVC,QAAQ;EACRC,MAAM,EAAEC,cAAc;EACtBC,IAAI,GAAG,MAAM;EACb,GAAGC;AACe,CAAC,KAAK;EACxB,MAAM;IAAEC,OAAO,EAAEC,iBAAiB;IAAEC,OAAO,EAAEC;EAAkB,CAAC,GAAGT,UAAU,IAAI,CAAC,CAAC;EACnF,MAAMU,OAAO,GAAGxB,OAAO,CAAC,MAAMqB,iBAAiB,KAAK,KAAK,EAAE,CAACA,iBAAiB,CAAC,CAAC;EAE/E,MAAML,MAAM,GAAGjB,WAAW,CACtB,MAAO0B,CAAqC,IAAK;IAC7C,IAAIV,QAAQ,EAAE;MACV;MACA;MACAU,CAAC,CAACC,OAAO,CAAC,CAAC;MACX,MAAMX,QAAQ,CAAC,CAAC;IACpB;IACAE,cAAc,IAAIA,cAAc,CAACQ,CAAC,CAAC;EACvC,CAAC,EACD,CAACV,QAAQ,EAAEE,cAAc,CAC7B,CAAC;EAED,oBACInB,KAAA,CAAA6B,aAAA;IAAKC,SAAS,EAAE;EAAS,gBACrB9B,KAAA,CAAA6B,aAAA,CAACxB,wBAAwB,EAAA0B,MAAA,CAAAC,MAAA,KACjBX,KAAK;IACTT,KAAK,EAAEA,KAAM;IACbC,WAAW,EAAEA,WAAY;IACzBE,QAAQ,EAAEA,QAAS;IACnBW,OAAO,EAAEA,OAAQ;IACjBR,MAAM,EAAEA,MAAO;IACfE,IAAI,EAAEA;EAAK,EACd,CAAC,eACFpB,KAAA,CAAA6B,aAAA,CAACvB,yBAAyB;IACtB2B,IAAI,EAAER,iBAAkB;IACxBC,OAAO,EAAEA,OAAQ;IACjBX,QAAQ,EAAEA;EAAS,CACtB,CAAC,eACFf,KAAA,CAAA6B,aAAA,CAACtB,iBAAiB;IAAC0B,IAAI,EAAEnB,IAAK;IAACC,QAAQ,EAAEA;EAAS,CAAE,CACnD,CAAC;AAEd,CAAC;AAED,MAAMmB,0BAA0B,GAAG/B,eAAe,CAAC,iBAAiB,EAAEQ,mBAAmB,CAAC;AAE1F,MAAMwB,eAAe,GAAG/B,eAAe,CAAC8B,0BAA0B,EAAE;EAChEE,OAAO,EAAE;IACLC,KAAK,EAAE7B,YAAY;IACnB8B,QAAQ,EAAE7B,eAAe;IACzB8B,QAAQ,EAAE7B;EACd;AACJ,CAAC,CAAC;AACF,SAASyB,eAAe","ignoreList":[]}

package/MultiFilePicker/MultiFilePicker.mdx

@@ -1,6 +1,6 @@
-import { Canvas, Meta, Controls } from '@storybook/blocks';
+import { Canvas, Meta, Controls } from "@storybook/addon-docs/blocks";
 
-import * as MultiFilePickerStories from './MultiFilePicker.stories';
+import * as MultiFilePickerStories from "./MultiFilePicker.stories";
 
 <Meta of={MultiFilePickerStories} />
 
@@ -13,8 +13,8 @@ The Multi File Picker component allows users to select, preview, and manage mult
 The MultiFilePicker component is typically used with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager) to provide a complete file selection experience.
 
 > ⚠️ **Note**: The MultiFilePicker component is designed to work seamlessly with [Webiny's File Manager](https://www.webiny.com/enterprise-serverless-cms/file-manager).
-In the Storybook example below, we've used random images from Picsum for demonstration purposes.
-However, if you use this example code in a real Webiny project, the MultiFilePicker will integrate with the actual File Manager as expected.
+> In the Storybook example below, we've used random images from Picsum for demonstration purposes.
+> However, if you use this example code in a real Webiny project, the MultiFilePicker will integrate with the actual File Manager as expected.
 
 <Canvas of={MultiFilePickerStories.Documentation} source={ { code: `
 import React, { useState } from "react";
@@ -23,8 +23,8 @@ import { FileManager } from "@webiny/app-admin/components";
 import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
 
 const MultiFilePickerExample = () => {
-    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+const [validation, setValidation] = useState({ isValid: true, message: "" });
 
         const formatFile = (file: FileManagerFileItem): FileItemDto => {
             const metaItems = file.meta || [];
@@ -90,22 +90,23 @@ const MultiFilePickerExample = () => {
             />
         </div>
     );
+
 };
 
     export default MultiFilePickerExample;
 
 ` } }
-        additionalActions={[
-            {
-                title: 'Open in GitHub',
-                onClick: () => {
-                    window.open(
-                        'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx',
-                        '_blank'
-                    );
-                },
-            }
-        ]}
+additionalActions={[
+{
+title: 'Open in GitHub',
+onClick: () => {
+window.open(
+'https://github.com/webiny/webiny-js/blob/feat/new-admin-ui/packages/admin-ui/src/MultiFilePicker/MultiFilePicker.tsx',
+'_blank'
+);
+},
+}
+]}
 />
 
 <Controls of={MultiFilePickerStories.Documentation} />
@@ -117,73 +118,76 @@ import { FileManager } from "@webiny/app-admin/components";
 import type { FileManagerFileItem } from "@webiny/app-admin/base/ui/FileManager";
 
 const MultiFilePickerExample = () => {
-    const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
-    const [validation, setValidation] = useState({ isValid: true, message: "" });
+  const [selectedFiles, setSelectedFiles] = useState<FileItemDto[]>([]);
+  const [validation, setValidation] = useState({ isValid: true, message: "" });
 
-    const formatFile = (file: FileManagerFileItem): FileItemDto => {
-        const metaItems = file.meta || [];
+  const formatFile = (file: FileManagerFileItem): FileItemDto => {
+    const metaItems = file.meta || [];
 
-        const getValue = (key: string) =>
-            metaItems.find((item: { key: string }) => item.key === key)?.value;
+    const getValue = (key: string) =>
+      metaItems.find((item: { key: string }) => item.key === key)?.value;
 
-        return {
-            id: file.id,
-            name: getValue("name") || "",
-            size: getValue("size") || 0,
-            mimeType: getValue("type") || "",
-            url: file.src || ""
-        };
+    return {
+      id: file.id,
+      name: getValue("name") || "",
+      size: getValue("size") || 0,
+      mimeType: getValue("type") || "",
+      url: file.src || ""
     };
-
-    return (
-        <div>
-            <FileManager
-                accept={["image/*", "application/pdf"]}
-                multiple={true}
-                render={({ showFileManager }) => (
-                    <MultiFilePicker
-                        label="Upload Images"
-                        description="Select files to upload (JPG, PNG, PDF)"
-                        note="Note: Maximum file size is 5MB per file"
-                        type="area"
-                        required={true}
-                        values={selectedFiles}
-                        validation={validation}
-                        onSelectItem={() => {
-                            showFileManager(files => {
-                                if (files && Array.isArray(files) && files.length > 0) {
-                                    const formatted = files.map(formatFile);
-                                    setSelectedFiles(prev => [...prev, ...formatted]);
-                                    setValidation({ isValid: true, message: "" });
-                                }
-                            });
-                        }}
-                        onReplaceItem={(_, index) => {
-                            // For replacing, we'll use the first file from the selection
-                            showFileManager(files => {
-                                if (files && Array.isArray(files) && files.length > 0) {
-                                    const updated = [...selectedFiles];
-                                    updated[index] = formatFile(files[0]);
-                                    setSelectedFiles(updated);
-                                }
-                            });
-                        }}
-                        onRemoveItem={(_, index) => {
-                            const updated = [...selectedFiles];
-                            updated.splice(index, 1);
-                            if (updated.length === 0) {
-                                setValidation({ isValid: false, message: "Please select at least one file" });
-                            }
-                            setSelectedFiles(updated);
-                        }}
-                        onEditItem={(file, index) => {
-                            alert(`Editing: ${file?.name} at index ${index}`);
-                        }}
-                    />
-                )}
-            />
-        </div>
-    );
+  };
+
+  return (
+    <div>
+      <FileManager
+        accept={["image/*", "application/pdf"]}
+        multiple={true}
+        render={({ showFileManager }) => (
+          <MultiFilePicker
+            label="Upload Images"
+            description="Select files to upload (JPG, PNG, PDF)"
+            note="Note: Maximum file size is 5MB per file"
+            type="area"
+            required={true}
+            values={selectedFiles}
+            validation={validation}
+            onSelectItem={() => {
+              showFileManager(files => {
+                if (files && Array.isArray(files) && files.length > 0) {
+                  const formatted = files.map(formatFile);
+                  setSelectedFiles(prev => [...prev, ...formatted]);
+                  setValidation({ isValid: true, message: "" });
+                }
+              });
+            }}
+            onReplaceItem={(_, index) => {
+              // For replacing, we'll use the first file from the selection
+              showFileManager(files => {
+                if (files && Array.isArray(files) && files.length > 0) {
+                  const updated = [...selectedFiles];
+                  updated[index] = formatFile(files[0]);
+                  setSelectedFiles(updated);
+                }
+              });
+            }}
+            onRemoveItem={(_, index) => {
+              const updated = [...selectedFiles];
+              updated.splice(index, 1);
+              if (updated.length === 0) {
+                setValidation({
+                  isValid: false,
+                  message: "Please select at least one file"
+                });
+              }
+              setSelectedFiles(updated);
+            }}
+            onEditItem={(file, index) => {
+              alert(`Editing: ${file?.name} at index ${index}`);
+            }}
+          />
+        )}
+      />
+    </div>
+  );
 };
 
 export default MultiFilePickerExample;

package/MultiFilePicker/MultiFilePicker.stories.d.ts

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

package/MultiFilePicker/MultiFilePicker.stories.js

@@ -1,6 +1,5 @@
 import React, { useState, useEffect } from "react";
-import { MultiFilePicker } from "./";
-import { Providers } from "../Providers";
+import { MultiFilePicker } from "./index.js";
 const getRandomNumber = (min, max) => Math.floor(Math.random() * (max - min + 1)) + min;
 const createFileList = (size = 10) => {
   return Array.from({
@@ -41,7 +40,7 @@ const meta = {
   },
   render: args => {
     const [selectedFiles, setSelectedFiles] = useState([]);
-    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+    return /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
       values: selectedFiles,
       onSelectItem: () => setSelectedFiles(createFileList()),
       onReplaceItem: (_, index) => setSelectedFiles(prevState => {
@@ -52,7 +51,7 @@ const meta = {
       }),
       onRemoveItem: item => setSelectedFiles(prevState => prevState?.filter(value => value.name !== item?.name)),
       onEditItem: (item, i) => alert(`Editing ${item?.name} at position ${i}`)
-    })));
+    }));
   }
 };
 export default meta;
@@ -297,14 +296,14 @@ export const Documentation = {
         });
       }
     }, [args.required, selectedFiles]);
-    return /*#__PURE__*/React.createElement(Providers, null, /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
+    return /*#__PURE__*/React.createElement(MultiFilePicker, Object.assign({}, args, {
       values: selectedFiles,
       onSelectItem: handleSelect,
       onReplaceItem: handleReplace,
       onRemoveItem: handleRemove,
       onEditItem: handleEdit,
       validation: validation
-    })));
+    }));
   },
   args: {
     label: "Upload Images",
@@ -355,28 +354,23 @@ export const Documentation = {
       control: "object"
     },
     validation: {
-      description: "Validation state and message. Please refer to the example code for details on usage.",
-      control: "none"
+      description: "Validation state and message. Please refer to the example code for details on usage."
     },
     onSelectItem: {
       description: "Callback when user selects files - Please refer to the example code for details on usage.",
-      action: "onSelectItem",
-      control: "none"
+      action: "onSelectItem"
     },
     onReplaceItem: {
       description: "Callback when user replaces a file - Please refer to the example code for details on usage.",
-      action: "onReplaceItem",
-      control: "none"
+      action: "onReplaceItem"
     },
     onEditItem: {
       description: "Callback when user edits a file - Please refer to the example code for details on usage.",
-      action: "onEditItem",
-      control: "none"
+      action: "onEditItem"
     },
     onRemoveItem: {
       description: "Callback when user removes a file - Please refer to the example code for details on usage.",
-      action: "onRemoveItem",
-      control: "none"
+      action: "onRemoveItem"
     }
   }
 };