@webiny/admin-ui 6.3.0-beta.4 → 6.4.0-beta.0

package/MultiAutoComplete/primitives/useMultiAutoComplete.js

@@ -2,57 +2,73 @@ import { useEffect, useMemo, useState } from "react";
 import { autorun } from "mobx";
 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,
-    emptyMessage: props.emptyMessage,
-    loadingMessage: props.loadingMessage,
-    initialMessage: props.initialMessage,
-    onOpenChange: props.onOpenChange,
-    onValueSearch: props.onValueSearch,
-    onValuesChange: props.onValuesChange,
-    onValuesReset: props.onValuesReset,
-    options: props.options,
-    placeholder: props.placeholder,
-    values: props.values
-  }), [props.displayResetAction, props.emptyMessage, props.loadingMessage, props.initialMessage, props.onOpenChange, props.onValueSearch, props.onValuesChange, props.onValuesReset, props.options, props.placeholder, props.values]);
-  const presenter = useMemo(() => {
-    const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
-    const optionsListWithUniqueValues = new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);
-    const inputPresenter = new MultiAutoCompleteInputPresenter();
-    const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
-    let presenter = new MultiAutoCompletePresenter(inputPresenter, selectedOptionsPresenter, optionsListPresenter);
-    if (props?.uniqueValues) {
-      presenter = new MultiAutoCompletePresenter(inputPresenter, selectedOptionsPresenter, optionsListWithUniqueValues);
-    }
-    if (props?.allowFreeInput) {
-      const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();
-      const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(temporaryOptionsPresenter, presenter);
-      withFreeInputPresenter.init(params);
-      return withFreeInputPresenter;
-    } else {
-      presenter.init(params);
-      return presenter;
-    }
-  }, [props.allowFreeInput, props.uniqueValues]);
-  const [vm, setVm] = useState(presenter.vm);
-  useEffect(() => {
-    presenter.init(params);
-  }, [params, presenter]);
-  useEffect(() => {
-    return autorun(() => {
-      setVm(presenter.vm);
-    });
-  }, [presenter]);
-  return {
-    vm,
-    setSelectedOption: presenter.setSelectedOption,
-    removeSelectedOption: presenter.removeSelectedOption,
-    searchOption: presenter.searchOption,
-    resetSelectedOptions: presenter.resetSelectedOptions,
-    setListOpenState: presenter.setListOpenState,
-    createOption: presenter.createOption
-  };
+const useMultiAutoComplete = (props)=>{
+    const params = useMemo(()=>({
+            displayResetAction: props.displayResetAction,
+            emptyMessage: props.emptyMessage,
+            loadingMessage: props.loadingMessage,
+            initialMessage: props.initialMessage,
+            onOpenChange: props.onOpenChange,
+            onValueSearch: props.onValueSearch,
+            onValuesChange: props.onValuesChange,
+            onValuesReset: props.onValuesReset,
+            options: props.options,
+            placeholder: props.placeholder,
+            values: props.values
+        }), [
+        props.displayResetAction,
+        props.emptyMessage,
+        props.loadingMessage,
+        props.initialMessage,
+        props.onOpenChange,
+        props.onValueSearch,
+        props.onValuesChange,
+        props.onValuesReset,
+        props.options,
+        props.placeholder,
+        props.values
+    ]);
+    const presenter = useMemo(()=>{
+        const optionsListPresenter = new MultiAutoCompleteListOptionsPresenter();
+        const optionsListWithUniqueValues = new MultiAutoCompleteListOptionsPresenterWithUniqueValues(optionsListPresenter);
+        const inputPresenter = new MultiAutoCompleteInputPresenter();
+        const selectedOptionsPresenter = new MultiAutoCompleteSelectedOptionPresenter();
+        let presenter = new MultiAutoCompletePresenter(inputPresenter, selectedOptionsPresenter, optionsListPresenter);
+        if (props?.uniqueValues) presenter = new MultiAutoCompletePresenter(inputPresenter, selectedOptionsPresenter, optionsListWithUniqueValues);
+        if (props?.allowFreeInput) {
+            const temporaryOptionsPresenter = new MultiAutoCompleteTemporaryOptionPresenter();
+            const withFreeInputPresenter = new MultiAutoCompletePresenterWithFreeInput(temporaryOptionsPresenter, presenter);
+            withFreeInputPresenter.init(params);
+            return withFreeInputPresenter;
+        }
+        presenter.init(params);
+        return presenter;
+    }, [
+        props.allowFreeInput,
+        props.uniqueValues
+    ]);
+    const [vm, setVm] = useState(presenter.vm);
+    useEffect(()=>{
+        presenter.init(params);
+    }, [
+        params,
+        presenter
+    ]);
+    useEffect(()=>autorun(()=>{
+            setVm(presenter.vm);
+        }), [
+        presenter
+    ]);
+    return {
+        vm,
+        setSelectedOption: presenter.setSelectedOption,
+        removeSelectedOption: presenter.removeSelectedOption,
+        searchOption: presenter.searchOption,
+        resetSelectedOptions: presenter.resetSelectedOptions,
+        setListOpenState: presenter.setListOpenState,
+        createOption: presenter.createOption
+    };
 };
+export { useMultiAutoComplete };
 
 //# sourceMappingURL=useMultiAutoComplete.js.map

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.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":[]}
+{"version":3,"file":"MultiAutoComplete/primitives/useMultiAutoComplete.js","sources":["../../../src/MultiAutoComplete/primitives/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"],"names":["useMultiAutoComplete","props","params","useMemo","presenter","optionsListPresenter","MultiAutoCompleteListOptionsPresenter","optionsListWithUniqueValues","MultiAutoCompleteListOptionsPresenterWithUniqueValues","inputPresenter","MultiAutoCompleteInputPresenter","selectedOptionsPresenter","MultiAutoCompleteSelectedOptionPresenter","MultiAutoCompletePresenter","temporaryOptionsPresenter","MultiAutoCompleteTemporaryOptionPresenter","withFreeInputPresenter","MultiAutoCompletePresenterWithFreeInput","vm","setVm","useState","useEffect","autorun"],"mappings":";;;;AAcO,MAAMA,uBAAuB,CAACC;IACjC,MAAMC,SAA2CC,QAC7C,IAAO;YACH,oBAAoBF,MAAM,kBAAkB;YAC5C,cAAcA,MAAM,YAAY;YAChC,gBAAgBA,MAAM,cAAc;YACpC,gBAAgBA,MAAM,cAAc;YACpC,cAAcA,MAAM,YAAY;YAChC,eAAeA,MAAM,aAAa;YAClC,gBAAgBA,MAAM,cAAc;YACpC,eAAeA,MAAM,aAAa;YAClC,SAASA,MAAM,OAAO;YACtB,aAAaA,MAAM,WAAW;YAC9B,QAAQA,MAAM,MAAM;QACxB,IACA;QACIA,MAAM,kBAAkB;QACxBA,MAAM,YAAY;QAClBA,MAAM,cAAc;QACpBA,MAAM,cAAc;QACpBA,MAAM,YAAY;QAClBA,MAAM,aAAa;QACnBA,MAAM,cAAc;QACpBA,MAAM,aAAa;QACnBA,MAAM,OAAO;QACbA,MAAM,WAAW;QACjBA,MAAM,MAAM;KACf;IAGL,MAAMG,YAAYD,QAAQ;QACtB,MAAME,uBAAuB,IAAIC;QACjC,MAAMC,8BACF,IAAIC,sDAAsDH;QAE9D,MAAMI,iBAAiB,IAAIC;QAC3B,MAAMC,2BAA2B,IAAIC;QAErC,IAAIR,YAAY,IAAIS,2BAChBJ,gBACAE,0BACAN;QAGJ,IAAIJ,OAAO,cACPG,YAAY,IAAIS,2BACZJ,gBACAE,0BACAJ;QAIR,IAAIN,OAAO,gBAAgB;YACvB,MAAMa,4BAA4B,IAAIC;YACtC,MAAMC,yBAAyB,IAAIC,wCAC/BH,2BACAV;YAEJY,uBAAuB,IAAI,CAACd;YAC5B,OAAOc;QACX;QACIZ,UAAU,IAAI,CAACF;QACf,OAAOE;IAEf,GAAG;QAACH,MAAM,cAAc;QAAEA,MAAM,YAAY;KAAC;IAE7C,MAAM,CAACiB,IAAIC,MAAM,GAAGC,SAAShB,UAAU,EAAE;IAEzCiB,UAAU;QACNjB,UAAU,IAAI,CAACF;IACnB,GAAG;QAACA;QAAQE;KAAU;IAEtBiB,UAAU,IACCC,QAAQ;YACXH,MAAMf,UAAU,EAAE;QACtB,IACD;QAACA;KAAU;IAEd,OAAO;QACHc;QACA,mBAAmBd,UAAU,iBAAiB;QAC9C,sBAAsBA,UAAU,oBAAoB;QACpD,cAAcA,UAAU,YAAY;QACpC,sBAAsBA,UAAU,oBAAoB;QACpD,kBAAkBA,UAAU,gBAAgB;QAC5C,cAAcA,UAAU,YAAY;IACxC;AACJ"}

package/MultiFilePicker/MultiFilePicker.d.ts

@@ -2,21 +2,21 @@ import React from "react";
 import { type MultiFilePickerPrimitiveProps } from "./primitives/index.js";
 import { type FormComponentProps } from "../FormComponent/index.js";
 type MultiFilePickerProps = MultiFilePickerPrimitiveProps & FormComponentProps;
-declare const MultiFilePicker: (({ label, description, note, 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/types.js").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;

package/MultiFilePicker/MultiFilePicker.js

@@ -1,67 +1,49 @@
-import React, { useCallback, useMemo } from "react";
+import react, { useCallback, useMemo } from "react";
 import { makeDecoratable, withStaticProps } from "../utils.js";
 import { MultiFilePickerPrimitive } from "./primitives/index.js";
 import { FormComponentErrorMessage, FormComponentNote } from "../FormComponent/index.js";
-import { FilePickerDescription, FilePickerLabel, ImagePreview, RichItemPreview, TextOnlyPreview } from "../FilePicker/primitives/components/index.js";
-const BaseMultiFilePicker = ({
-  label,
-  description,
-  note,
-  required,
-  disabled,
-  validation,
-  validate,
-  onBlur: originalOnBlur,
-  type = "area",
-  ...props
-}) => {
-  const {
-    isValid: validationIsValid,
-    message: validationMessage
-  } = validation || {};
-  const invalid = useMemo(() => validationIsValid === false, [validationIsValid]);
-  const onBlur = useCallback(async e => {
-    if (validate) {
-      // Since we are accessing event in an async operation, we need to persist it.
-      // See https://reactjs.org/docs/events.html#event-pooling.
-      e.persist();
-      await validate();
-    }
-    originalOnBlur && originalOnBlur(e);
-  }, [validate, originalOnBlur]);
-  return /*#__PURE__*/React.createElement("div", {
-    className: "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, {
-    label: label,
-    description: description,
-    disabled: disabled,
-    invalid: invalid,
-    onBlur: onBlur,
-    type: type
-  })), /*#__PURE__*/React.createElement(FormComponentErrorMessage, {
-    text: validationMessage,
-    invalid: invalid,
-    disabled: disabled
-  }), /*#__PURE__*/React.createElement(FormComponentNote, {
-    text: note,
-    disabled: disabled
-  }));
+import { ImagePreview, RichItemPreview, TextOnlyPreview } from "../FilePicker/primitives/components/index.js";
+const BaseMultiFilePicker = ({ label, description, note, disabled, validation, validate, onBlur: originalOnBlur, type = "area", ...props })=>{
+    const { isValid: validationIsValid, message: validationMessage } = validation || {};
+    const invalid = useMemo(()=>false === validationIsValid, [
+        validationIsValid
+    ]);
+    const onBlur = useCallback(async (e)=>{
+        if (validate) {
+            e.persist();
+            await validate();
+        }
+        originalOnBlur && originalOnBlur(e);
+    }, [
+        validate,
+        originalOnBlur
+    ]);
+    return /*#__PURE__*/ react.createElement("div", {
+        className: "w-full"
+    }, /*#__PURE__*/ react.createElement(MultiFilePickerPrimitive, {
+        ...props,
+        label: label,
+        description: description,
+        disabled: disabled,
+        invalid: invalid,
+        onBlur: onBlur,
+        type: type
+    }), /*#__PURE__*/ react.createElement(FormComponentErrorMessage, {
+        text: validationMessage,
+        invalid: invalid,
+        disabled: disabled
+    }), /*#__PURE__*/ react.createElement(FormComponentNote, {
+        text: note,
+        disabled: disabled
+    }));
 };
 const DecoratableMultiFilePicker = makeDecoratable("MultiFilePicker", BaseMultiFilePicker);
 const MultiFilePicker = withStaticProps(DecoratableMultiFilePicker, {
-  Preview: {
-    Image: ImagePreview,
-    RichItem: RichItemPreview,
-    TextOnly: TextOnlyPreview
-  }
+    Preview: {
+        Image: ImagePreview,
+        RichItem: RichItemPreview,
+        TextOnly: TextOnlyPreview
+    }
 });
 export { MultiFilePicker };
 

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.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    FilePickerDescription,\n    FilePickerLabel,\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    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={\"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,SACIC,wBAAwB;AAG5B,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;EAAS,GACpBV,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,"file":"MultiFilePicker/MultiFilePicker.js","sources":["../../src/MultiFilePicker/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"],"names":["BaseMultiFilePicker","label","description","note","disabled","validation","validate","originalOnBlur","type","props","validationIsValid","validationMessage","invalid","useMemo","onBlur","useCallback","e","MultiFilePickerPrimitive","FormComponentErrorMessage","FormComponentNote","DecoratableMultiFilePicker","makeDecoratable","MultiFilePicker","withStaticProps","ImagePreview","RichItemPreview","TextOnlyPreview"],"mappings":";;;;;AAmBA,MAAMA,sBAAsB,CAAC,EACzBC,KAAK,EACLC,WAAW,EACXC,IAAI,EACJC,QAAQ,EACRC,UAAU,EACVC,QAAQ,EACR,QAAQC,cAAc,EACtBC,OAAO,MAAM,EACb,GAAGC,OACgB;IACnB,MAAM,EAAE,SAASC,iBAAiB,EAAE,SAASC,iBAAiB,EAAE,GAAGN,cAAc,CAAC;IAClF,MAAMO,UAAUC,QAAQ,IAAMH,AAAsB,UAAtBA,mBAA6B;QAACA;KAAkB;IAE9E,MAAMI,SAASC,YACX,OAAOC;QACH,IAAIV,UAAU;YAGVU,EAAE,OAAO;YACT,MAAMV;QACV;QACAC,kBAAkBA,eAAeS;IACrC,GACA;QAACV;QAAUC;KAAe;IAG9B,OAAO,WAAP,GACI,oBAAC;QAAI,WAAW;qBACZ,oBAACU,0BAAwBA;QACpB,GAAGR,KAAK;QACT,OAAOR;QACP,aAAaC;QACb,UAAUE;QACV,SAASQ;QACT,QAAQE;QACR,MAAMN;sBAEV,oBAACU,2BAAyBA;QACtB,MAAMP;QACN,SAASC;QACT,UAAUR;sBAEd,oBAACe,mBAAiBA;QAAC,MAAMhB;QAAM,UAAUC;;AAGrD;AAEA,MAAMgB,6BAA6BC,gBAAgB,mBAAmBrB;AAEtE,MAAMsB,kBAAkBC,gBAAgBH,4BAA4B;IAChE,SAAS;QACL,OAAOI;QACP,UAAUC;QACV,UAAUC;IACd;AACJ"}