@webiny/ui 5.43.2 → 6.0.0-alpha.0

package/ImageUpload/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_FormElementMessage","_classnames","_Image","_ImageEditorDialog","_EMOTION_STRINGIFIED_CSS_ERROR__","ImageUploadWrapper","_base","default","process","env","NODE_ENV","target","label","name","styles","map","toString","noImageEditingTypes","SingleImageUpload","exports","_React$Component","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","_callSuper2","concat","_defineProperty2","loading","error","imageEditor","open","image","images","_this$props","props","onChange","type","size","src","base64","setState","includes","errors","_errors","_slicedToArray2","_inherits2","_createClass2","key","value","render","_this2","_this$props2","className","validation","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","ImageEditorDialog","options","onClose","onAccept","setTimeout","_objectSpread2","convertToBase64","onSuccess","handleFiles","onError","handleErrors","_ref2","browseFiles","getDropZoneProps","removeImage","undefined","uploadImage","editImage","FormElementMessage","errorMessages","React","Component","maxSizeExceeded","multipleMaxSizeExceeded","multipleNotAllowed","unsupportedFileType"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport BrowseFiles, { SelectedFile, FileError } from \"react-butterfiles\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Image from \"./Image\";\nimport { ImageEditorDialog } from \"./ImageEditorDialog\";\n\nconst ImageUploadWrapper = styled(\"div\")({\n    position: \"relative\",\n    \".disabled\": {\n        opacity: 0.75,\n        pointerEvents: \"none\"\n    },\n    \".mdc-floating-label--float-above\": {\n        transform: \"scale(0.75)\",\n        top: 10,\n        left: 10,\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    },\n    \".mdc-text-field-helper-text\": {\n        color: \"var(--mdc-theme-text-secondary-on-background)\"\n    }\n});\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\ninterface StateImage {\n    name: string;\n    type: string;\n    size: number;\n    src?: string;\n}\ninterface State {\n    loading: boolean;\n    error: FileError | null;\n    imageEditor: {\n        image: StateImage | null;\n        open: boolean;\n    };\n}\n\n// Do not apply editing for following image types.\nconst noImageEditingTypes = [\"image/svg+xml\", \"image/gif\"];\n\ntype ErrorType =\n    | \"maxSizeExceeded\"\n    | \"unsupportedFileType\"\n    | \"default\"\n    | \"multipleNotAllowed\"\n    | \"multipleMaxSizeExceeded\";\n\nexport class SingleImageUpload extends React.Component<SingleImageUploadProps, State> {\n    static defaultProps: Partial<SingleImageUploadProps> = {\n        maxSize: \"10mb\",\n        imageEditor: {},\n        accept: [\"image/jpeg\", \"image/png\", \"image/gif\", \"image/svg+xml\"],\n        showRemoveImageButton: true,\n        errorMessages: {\n            maxSizeExceeded: \"Max size exceeded.\",\n            multipleMaxSizeExceeded: \"Selected fields exceed max file size.\",\n            multipleNotAllowed: \"Multiple selection not allowed.\",\n            unsupportedFileType: \"Unsupported file type.\",\n            default: \"An error occurred.\"\n        }\n    };\n\n    public override state: State = {\n        loading: false,\n        error: null,\n        imageEditor: {\n            open: false,\n            image: null\n        }\n    };\n\n    handleFiles = (images: SelectedFile[]) => {\n        const { onChange, imageEditor } = this.props;\n        const image = {\n            name: images[0].name,\n            type: images[0].type,\n            size: images[0].size,\n            src: images[0].src.base64\n        };\n\n        this.setState({ error: null }, () => {\n            if (imageEditor && !noImageEditingTypes.includes(image.type)) {\n                this.setState({ imageEditor: { image, open: true } });\n            } else {\n                onChange && onChange(image);\n            }\n        });\n    };\n\n    handleErrors = (errors: FileError[]) => {\n        const [error] = errors;\n        this.setState({ error });\n    };\n\n    public override render() {\n        const {\n            className,\n            value,\n            validation,\n            label,\n            description,\n            accept,\n            maxSize,\n            onChange,\n            imageEditor,\n            showRemoveImageButton,\n            renderImagePreview\n        } = this.props;\n\n        let imageEditorImageSrc = \"\";\n        if (this.state.imageEditor.image && this.state.imageEditor.image.src) {\n            imageEditorImageSrc = this.state.imageEditor.image.src;\n        }\n\n        const src = value ? value.src : null;\n\n        const errorType = this.state.error ? (this.state.error.type as ErrorType) : null;\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n        /**\n         * accept can be safely cast because of default value\n         * errorType as keyof Props[\"errorMessages\"] can be safely\n         */\n        return (\n            <ImageUploadWrapper className={classNames(className)}>\n                {label && !src && (\n                    <div className=\"mdc-floating-label mdc-floating-label--float-above\">\n                        {label}\n                    </div>\n                )}\n\n                <ImageEditorDialog\n                    options={imageEditor}\n                    open={this.state.imageEditor.open}\n                    src={imageEditorImageSrc}\n                    onClose={() => {\n                        this.setState(state => {\n                            state.imageEditor.open = false;\n                            return state;\n                        });\n                    }}\n                    onAccept={src => {\n                        // We wrapped everything into setTimeout - prevents dialog freeze when larger image is selected.\n                        setTimeout(() => {\n                            this.setState({ loading: true }, async () => {\n                                onChange &&\n                                    (await onChange({ ...this.state.imageEditor.image, src }));\n                                this.setState({\n                                    loading: false,\n                                    imageEditor: {\n                                        image: null,\n                                        open: false\n                                    }\n                                });\n                            });\n                        });\n                    }}\n                />\n                <BrowseFiles\n                    accept={accept as string[]}\n                    maxSize={maxSize}\n                    convertToBase64\n                    onSuccess={this.handleFiles}\n                    onError={this.handleErrors}\n                >\n                    {({ browseFiles, getDropZoneProps }) => (\n                        <div {...getDropZoneProps()}>\n                            <Image\n                                renderImagePreview={renderImagePreview}\n                                loading={this.state.loading}\n                                value={value}\n                                removeImage={showRemoveImageButton ? onChange : undefined}\n                                uploadImage={browseFiles}\n                                editImage={browseFiles}\n                            />\n                        </div>\n                    )}\n                </BrowseFiles>\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {this.state.error && (\n                    <FormElementMessage error>\n                        {this.props.errorMessages[\n                            errorType as keyof SingleImageUploadProps[\"errorMessages\"]\n                        ] || this.props.errorMessages.default}\n                    </FormElementMessage>\n                )}\n            </ImageUploadWrapper>\n        );\n    }\n}\n"],"mappings":";;;;;;;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AAEA,IAAAC,iBAAA,GAAAF,sBAAA,CAAAC,OAAA;AACA,IAAAE,mBAAA,GAAAF,OAAA;AAEA,IAAAG,WAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,MAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,kBAAA,GAAAL,OAAA;AAAwD,SAAAM,iCAAA;AAExD,IAAMC,kBAAkB,gBAAG,IAAAC,KAAA,CAAAC,OAAA,EAAO,KAAK,EAAAC,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAC,MAAA;AAAA;EAAAA,MAAA;EAAAC,KAAA;AAAA,EAAC,CAAAJ,OAAA,CAAAC,GAAA,CAAAC,QAAA;EAAAG,IAAA;EAAAC,MAAA;AAAA;EAAAD,IAAA;EAAAC,MAAA;EAAAC,GAAA;EAAAC,QAAA,EAAAZ;AAAA,CAevC,CAAC;AA2DF;AACA,IAAMa,mBAAmB,GAAG,CAAC,eAAe,EAAE,WAAW,CAAC;AAAC,IAS9CC,iBAAiB,GAAAC,OAAA,CAAAD,iBAAA,0BAAAE,gBAAA;EAAA,SAAAF,kBAAA;IAAA,IAAAG,KAAA;IAAA,IAAAC,gBAAA,CAAAf,OAAA,QAAAW,iBAAA;IAAA,SAAAK,IAAA,GAAAC,SAAA,CAAAC,MAAA,EAAAC,IAAA,OAAAC,KAAA,CAAAJ,IAAA,GAAAK,IAAA,MAAAA,IAAA,GAAAL,IAAA,EAAAK,IAAA;MAAAF,IAAA,CAAAE,IAAA,IAAAJ,SAAA,CAAAI,IAAA;IAAA;IAAAP,KAAA,OAAAQ,WAAA,CAAAtB,OAAA,QAAAW,iBAAA,KAAAY,MAAA,CAAAJ,IAAA;IAAA,IAAAK,gBAAA,CAAAxB,OAAA,EAAAc,KAAA,WAeK;MAC3BW,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE,IAAI;MACXC,WAAW,EAAE;QACTC,IAAI,EAAE,KAAK;QACXC,KAAK,EAAE;MACX;IACJ,CAAC;IAAA,IAAAL,gBAAA,CAAAxB,OAAA,EAAAc,KAAA,iBAEa,UAACgB,MAAsB,EAAK;MACtC,IAAAC,WAAA,GAAkCjB,KAAA,CAAKkB,KAAK;QAApCC,QAAQ,GAAAF,WAAA,CAARE,QAAQ;QAAEN,WAAW,GAAAI,WAAA,CAAXJ,WAAW;MAC7B,IAAME,KAAK,GAAG;QACVvB,IAAI,EAAEwB,MAAM,CAAC,CAAC,CAAC,CAACxB,IAAI;QACpB4B,IAAI,EAAEJ,MAAM,CAAC,CAAC,CAAC,CAACI,IAAI;QACpBC,IAAI,EAAEL,MAAM,CAAC,CAAC,CAAC,CAACK,IAAI;QACpBC,GAAG,EAAEN,MAAM,CAAC,CAAC,CAAC,CAACM,GAAG,CAACC;MACvB,CAAC;MAEDvB,KAAA,CAAKwB,QAAQ,CAAC;QAAEZ,KAAK,EAAE;MAAK,CAAC,EAAE,YAAM;QACjC,IAAIC,WAAW,IAAI,CAACjB,mBAAmB,CAAC6B,QAAQ,CAACV,KAAK,CAACK,IAAI,CAAC,EAAE;UAC1DpB,KAAA,CAAKwB,QAAQ,CAAC;YAAEX,WAAW,EAAE;cAAEE,KAAK,EAALA,KAAK;cAAED,IAAI,EAAE;YAAK;UAAE,CAAC,CAAC;QACzD,CAAC,MAAM;UACHK,QAAQ,IAAIA,QAAQ,CAACJ,KAAK,CAAC;QAC/B;MACJ,CAAC,CAAC;IACN,CAAC;IAAA,IAAAL,gBAAA,CAAAxB,OAAA,EAAAc,KAAA,kBAEc,UAAC0B,MAAmB,EAAK;MACpC,IAAAC,OAAA,OAAAC,eAAA,CAAA1C,OAAA,EAAgBwC,MAAM;QAAfd,KAAK,GAAAe,OAAA;MACZ3B,KAAA,CAAKwB,QAAQ,CAAC;QAAEZ,KAAK,EAALA;MAAM,CAAC,CAAC;IAC5B,CAAC;IAAA,OAAAZ,KAAA;EAAA;EAAA,IAAA6B,UAAA,CAAA3C,OAAA,EAAAW,iBAAA,EAAAE,gBAAA;EAAA,WAAA+B,aAAA,CAAA5C,OAAA,EAAAW,iBAAA;IAAAkC,GAAA;IAAAC,KAAA,EAED,SAAgBC,MAAMA,CAAA,EAAG;MAAA,IAAAC,MAAA;MACrB,IAAAC,YAAA,GAYI,IAAI,CAACjB,KAAK;QAXVkB,SAAS,GAAAD,YAAA,CAATC,SAAS;QACTJ,KAAK,GAAAG,YAAA,CAALH,KAAK;QACLK,UAAU,GAAAF,YAAA,CAAVE,UAAU;QACV9C,KAAK,GAAA4C,YAAA,CAAL5C,KAAK;QACL+C,WAAW,GAAAH,YAAA,CAAXG,WAAW;QACXC,MAAM,GAAAJ,YAAA,CAANI,MAAM;QACNC,OAAO,GAAAL,YAAA,CAAPK,OAAO;QACPrB,QAAQ,GAAAgB,YAAA,CAARhB,QAAQ;QACRN,WAAW,GAAAsB,YAAA,CAAXtB,WAAW;QACX4B,qBAAqB,GAAAN,YAAA,CAArBM,qBAAqB;QACrBC,kBAAkB,GAAAP,YAAA,CAAlBO,kBAAkB;MAGtB,IAAIC,mBAAmB,GAAG,EAAE;MAC5B,IAAI,IAAI,CAACC,KAAK,CAAC/B,WAAW,CAACE,KAAK,IAAI,IAAI,CAAC6B,KAAK,CAAC/B,WAAW,CAACE,KAAK,CAACO,GAAG,EAAE;QAClEqB,mBAAmB,GAAG,IAAI,CAACC,KAAK,CAAC/B,WAAW,CAACE,KAAK,CAACO,GAAG;MAC1D;MAEA,IAAMA,GAAG,GAAGU,KAAK,GAAGA,KAAK,CAACV,GAAG,GAAG,IAAI;MAEpC,IAAMuB,SAAS,GAAG,IAAI,CAACD,KAAK,CAAChC,KAAK,GAAI,IAAI,CAACgC,KAAK,CAAChC,KAAK,CAACQ,IAAI,GAAiB,IAAI;MAEhF,IAAA0B,IAAA,GAAmET,UAAU,IAAI,CAAC,CAAC;QAAlEU,iBAAiB,GAAAD,IAAA,CAA1BE,OAAO;QAA8BC,iBAAiB,GAAAH,IAAA,CAA1BI,OAAO;MAC3C;AACR;AACA;AACA;MACQ,oBACI3E,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACnE,kBAAkB;QAACoD,SAAS,EAAE,IAAAgB,mBAAU,EAAChB,SAAS;MAAE,GAChD7C,KAAK,IAAI,CAAC+B,GAAG,iBACV/C,MAAA,CAAAW,OAAA,CAAAiE,aAAA;QAAKf,SAAS,EAAC;MAAoD,GAC9D7C,KACA,CACR,eAEDhB,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACrE,kBAAA,CAAAuE,iBAAiB;QACdC,OAAO,EAAEzC,WAAY;QACrBC,IAAI,EAAE,IAAI,CAAC8B,KAAK,CAAC/B,WAAW,CAACC,IAAK;QAClCQ,GAAG,EAAEqB,mBAAoB;QACzBY,OAAO,EAAE,SAATA,OAAOA,CAAA,EAAQ;UACXrB,MAAI,CAACV,QAAQ,CAAC,UAAAoB,KAAK,EAAI;YACnBA,KAAK,CAAC/B,WAAW,CAACC,IAAI,GAAG,KAAK;YAC9B,OAAO8B,KAAK;UAChB,CAAC,CAAC;QACN,CAAE;QACFY,QAAQ,EAAE,SAAVA,QAAQA,CAAElC,GAAG,EAAI;UACb;UACAmC,UAAU,CAAC,YAAM;YACbvB,MAAI,CAACV,QAAQ,CAAC;cAAEb,OAAO,EAAE;YAAK,CAAC,EAAE,kBAAY;cACzCQ,QAAQ,KACH,MAAMA,QAAQ,KAAAuC,cAAA,CAAAxE,OAAA,MAAAwE,cAAA,CAAAxE,OAAA,MAAMgD,MAAI,CAACU,KAAK,CAAC/B,WAAW,CAACE,KAAK;gBAAEO,GAAG,EAAHA;cAAG,EAAE,CAAC,CAAC;cAC9DY,MAAI,CAACV,QAAQ,CAAC;gBACVb,OAAO,EAAE,KAAK;gBACdE,WAAW,EAAE;kBACTE,KAAK,EAAE,IAAI;kBACXD,IAAI,EAAE;gBACV;cACJ,CAAC,CAAC;YACN,CAAC,CAAC;UACN,CAAC,CAAC;QACN;MAAE,CACL,CAAC,eACFvC,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACzE,iBAAA,CAAAQ,OAAW;QACRqD,MAAM,EAAEA,MAAmB;QAC3BC,OAAO,EAAEA,OAAQ;QACjBmB,eAAe;QACfC,SAAS,EAAE,IAAI,CAACC,WAAY;QAC5BC,OAAO,EAAE,IAAI,CAACC;MAAa,GAE1B,UAAAC,KAAA;QAAA,IAAGC,WAAW,GAAAD,KAAA,CAAXC,WAAW;UAAEC,gBAAgB,GAAAF,KAAA,CAAhBE,gBAAgB;QAAA,oBAC7B3F,MAAA,CAAAW,OAAA,CAAAiE,aAAA,QAASe,gBAAgB,CAAC,CAAC,eACvB3F,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACtE,MAAA,CAAAK,OAAK;UACFwD,kBAAkB,EAAEA,kBAAmB;UACvC/B,OAAO,EAAEuB,MAAI,CAACU,KAAK,CAACjC,OAAQ;UAC5BqB,KAAK,EAAEA,KAAM;UACbmC,WAAW,EAAE1B,qBAAqB,GAAGtB,QAAQ,GAAGiD,SAAU;UAC1DC,WAAW,EAAEJ,WAAY;UACzBK,SAAS,EAAEL;QAAY,CAC1B,CACA,CAAC;MAAA,CAED,CAAC,EAEblB,iBAAiB,KAAK,KAAK,iBACxBxE,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACxE,mBAAA,CAAA4F,kBAAkB;QAAC3D,KAAK;MAAA,GAAEqC,iBAAsC,CACpE,EAEAF,iBAAiB,KAAK,KAAK,IAAIT,WAAW,iBACvC/D,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACxE,mBAAA,CAAA4F,kBAAkB,QAAEjC,WAAgC,CACxD,EAEA,IAAI,CAACM,KAAK,CAAChC,KAAK,iBACbrC,MAAA,CAAAW,OAAA,CAAAiE,aAAA,CAACxE,mBAAA,CAAA4F,kBAAkB;QAAC3D,KAAK;MAAA,GACpB,IAAI,CAACM,KAAK,CAACsD,aAAa,CACrB3B,SAAS,CACZ,IAAI,IAAI,CAAC3B,KAAK,CAACsD,aAAa,CAACtF,OACd,CAER,CAAC;IAE7B;EAAC;AAAA,EArJkCuF,cAAK,CAACC,SAAS;AAAA,IAAAhE,gBAAA,CAAAxB,OAAA,EAAzCW,iBAAiB,kBAC6B;EACnD2C,OAAO,EAAE,MAAM;EACf3B,WAAW,EAAE,CAAC,CAAC;EACf0B,MAAM,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC;EACjEE,qBAAqB,EAAE,IAAI;EAC3B+B,aAAa,EAAE;IACXG,eAAe,EAAE,oBAAoB;IACrCC,uBAAuB,EAAE,uCAAuC;IAChEC,kBAAkB,EAAE,iCAAiC;IACrDC,mBAAmB,EAAE,wBAAwB;IAC7C5F,OAAO,EAAE;EACb;AACJ,CAAC","ignoreList":[]}
+{"version":3,"names":["React","Alert","SingleImageUpload","createElement","type","variant"],"sources":["SingleImageUpload.tsx"],"sourcesContent":["import React from \"react\";\nimport { FormComponentProps } from \"~/types\";\nimport { Alert } from \"@webiny/admin-ui\";\n\ninterface SingleImageUploadProps extends FormComponentProps {\n    // Component label.\n    label?: string;\n\n    // Is component disabled?\n    disabled?: boolean;\n\n    // Description beneath the image.\n    description?: string;\n\n    // A className for the root element.\n    className?: string;\n\n    // Define a list of accepted image types.\n    accept?: string[];\n\n    // Define file's max allowed size (default is \"10mb\").\n    // Uses \"bytes\" (https://www.npmjs.com/package/bytes) library to convert string notation to actual number.\n    maxSize: string;\n\n    // Image editor options.\n    // Please check the docs of ImageEditor component for the list of all available options.\n    imageEditor?: {\n        [key: string]: any;\n    };\n\n    // Custom image preview renderer. By default images are rendered via simple <img> element.\n    renderImagePreview?: () => React.ReactElement<any>;\n\n    // Should remove image button (top right ✕) be shown? Default is set to `true`.\n    showRemoveImageButton?: boolean;\n\n    // Use these to customize error messages (eg. if i18n supported is needed).\n    errorMessages: {\n        maxSizeExceeded: string;\n        unsupportedFileType: string;\n        default: string;\n        multipleNotAllowed: string;\n        multipleMaxSizeExceeded: string;\n    };\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please check the `FilePicker` component inside the `@webiny/admin-ui` package instead.\n */\nexport const SingleImageUpload = ({}: SingleImageUploadProps) => {\n    return (\n        <Alert type=\"danger\" variant={\"strong\"}>\n            {\n                \"Deprecated component! The original code has been moved to `@webiny/admin-ui` package.\"\n            }\n        </Alert>\n    );\n};\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAEzB,SAASC,KAAK,QAAQ,kBAAkB;AA4CxC;AACA;AACA;AACA;AACA,OAAO,MAAMC,iBAAiB,GAAGA,CAAC,CAAyB,CAAC,KAAK;EAC7D,oBACIF,KAAA,CAAAG,aAAA,CAACF,KAAK;IAACG,IAAI,EAAC,QAAQ;IAACC,OAAO,EAAE;EAAS,GAE/B,uFAED,CAAC;AAEhB,CAAC","ignoreList":[]}

package/ImageUpload/index.d.ts

@@ -1,4 +1,4 @@
 export { SingleImageUpload } from "./SingleImageUpload";
 export { MultiImageUpload } from "./MultiImageUpload";
-export { default as Image } from "./Image";
+export { Image } from "./Image";
 export { ImageEditorDialog } from "./ImageEditorDialog";

package/ImageUpload/index.js

@@ -1,36 +1,6 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Image", {
-  enumerable: true,
-  get: function get() {
-    return _Image.default;
-  }
-});
-Object.defineProperty(exports, "ImageEditorDialog", {
-  enumerable: true,
-  get: function get() {
-    return _ImageEditorDialog.ImageEditorDialog;
-  }
-});
-Object.defineProperty(exports, "MultiImageUpload", {
-  enumerable: true,
-  get: function get() {
-    return _MultiImageUpload.MultiImageUpload;
-  }
-});
-Object.defineProperty(exports, "SingleImageUpload", {
-  enumerable: true,
-  get: function get() {
-    return _SingleImageUpload.SingleImageUpload;
-  }
-});
-var _SingleImageUpload = require("./SingleImageUpload");
-var _MultiImageUpload = require("./MultiImageUpload");
-var _Image = _interopRequireDefault(require("./Image"));
-var _ImageEditorDialog = require("./ImageEditorDialog");
+export { SingleImageUpload } from "./SingleImageUpload";
+export { MultiImageUpload } from "./MultiImageUpload";
+export { Image } from "./Image";
+export { ImageEditorDialog } from "./ImageEditorDialog";
 
 //# sourceMappingURL=index.js.map

package/ImageUpload/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_SingleImageUpload","require","_MultiImageUpload","_Image","_interopRequireDefault","_ImageEditorDialog"],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { default as Image } from \"./Image\";\nexport { ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,IAAAA,kBAAA,GAAAC,OAAA;AACA,IAAAC,iBAAA,GAAAD,OAAA;AACA,IAAAE,MAAA,GAAAC,sBAAA,CAAAH,OAAA;AACA,IAAAI,kBAAA,GAAAJ,OAAA","ignoreList":[]}
+{"version":3,"names":["SingleImageUpload","MultiImageUpload","Image","ImageEditorDialog"],"sources":["index.ts"],"sourcesContent":["export { SingleImageUpload } from \"./SingleImageUpload\";\nexport { MultiImageUpload } from \"./MultiImageUpload\";\nexport { Image } from \"./Image\";\nexport { ImageEditorDialog } from \"./ImageEditorDialog\";\n"],"mappings":"AAAA,SAASA,iBAAiB;AAC1B,SAASC,gBAAgB;AACzB,SAASC,KAAK;AACd,SAASC,iBAAiB","ignoreList":[]}

package/Input/Input.d.ts

@@ -1,7 +1,57 @@
-import React from "react";
-import { TextFieldProps } from "@rmwc/textfield";
+import React, { ReactElement } from "react";
 import { FormComponentProps } from "../types";
-import { ReactElement } from "react";
+export interface TextFieldHelperTextProps {
+    /** Make the help text always visible */
+    persistent?: boolean;
+    /** Make the help a validation message style */
+    validationMsg?: boolean;
+    /** Content for the help text */
+    children: React.ReactNode;
+}
+export interface TextFieldProps {
+    /** Sets the value for controlled TextFields. */
+    value?: string | number;
+    /** Adds help text to the field */
+    helpText?: React.ReactNode | TextFieldHelperTextProps;
+    /** Shows the character count, must be used in conjunction with maxLength. */
+    characterCount?: boolean;
+    /** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used.  */
+    invalid?: boolean;
+    /** Makes the Textfield disabled. */
+    disabled?: boolean;
+    /** Makes the Textfield required. */
+    required?: boolean;
+    /** Outline the TextField. */
+    outlined?: boolean;
+    /** How to align the text inside the TextField. Defaults to 'start'. */
+    align?: "start" | "end";
+    /** A label for the input. */
+    label?: React.ReactNode;
+    /** The label floats automatically based on value, but you can use this prop for manual control. */
+    floatLabel?: boolean;
+    /** Makes a multiline TextField. */
+    textarea?: boolean;
+    /** Makes the TextField fullwidth. */
+    fullwidth?: boolean;
+    /** Add a leading icon. */
+    icon?: any;
+    /** Add a trailing icon. */
+    trailingIcon?: any;
+    /** By default, props spread to the input. These props are for the component's root container. */
+    rootProps?: any;
+    /** A reference to the native input or textarea. */
+    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;
+    /** The type of input field to render, search, number, etc */
+    type?: string;
+    /** Add prefix. */
+    prefix?: string;
+    /** Add suffix. */
+    suffix?: string;
+    /** Advanced: A reference to the MDCFoundation. */
+    foundationRef?: any;
+    /** Make textarea resizeable */
+    resizeable?: boolean;
+}
 export type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldProps & {
     autoComplete?: string;
     rawOnChange?: boolean;
@@ -10,15 +60,16 @@ export type InputProps<TValue = any> = FormComponentProps<TValue> & TextFieldPro
     description?: string | ReactElement;
     rows?: number;
     maxLength?: number;
-    onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
-    onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
+    onBlur?: (e: React.SyntheticEvent<any>) => any;
+    onKeyDown?: (e: React.SyntheticEvent<any>) => any;
     onEnter?: () => any;
     className?: string;
     "data-testid"?: string;
     size?: "small" | "medium" | "large";
     children?: React.ReactNode;
 };
-export type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {
-    key?: string;
-};
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
+ */
 export declare const Input: (props: InputProps) => React.JSX.Element;

package/Input/Input.js

@@ -1,92 +1,89 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Input = void 0;
-var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = _interopRequireWildcard(require("react"));
-var _textfield = require("@rmwc/textfield");
-var _FormElementMessage = require("../FormElementMessage");
-var _pick = _interopRequireDefault(require("lodash/pick"));
-var _classnames = _interopRequireDefault(require("classnames"));
-var _styled = require("./styled");
-var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter", "size"];
+import React, { useCallback, useMemo } from "react";
+import pick from "lodash/pick";
+import { Input as AdminInput, Textarea as AdminTextarea } from "@webiny/admin-ui";
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
  */
 
 // IconProps directly passed to RMWC
-var rmwcProps = ["label", "type", "step", "disabled", "readOnly", "placeholder", "outlined", "onKeyDown", "onKeyPress", "onKeyUp", "onFocus", "rootProps", "fullwidth", "inputRef", "className", "maxLength", "characterCount", "autoComplete"];
-var Input = exports.Input = function Input(props) {
-  var onChange = (0, _react.useCallback)(function (e) {
-    var onChange = props.onChange,
-      rawOnChange = props.rawOnChange;
-    if (!onChange) {
-      return;
-    }
+const rmwcProps = ["label", "type", "disabled", "readOnly", "placeholder", "onKeyDown", "onEnter", "onKeyPress", "onKeyUp", "onFocus", "className", "maxLength", "characterCount", "autoComplete", "maxLength"];
 
-    // @ts-expect-error
-    onChange(rawOnChange ? e : e.target.value);
-  }, [props.onChange, props.rawOnChange]);
-  var onBlur = (0, _react.useCallback)(async function (e) {
-    var validate = props.validate,
-      onBlur = props.onBlur;
-    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();
-    }
-    onBlur && onBlur(e);
-  }, [props.validate, props.onBlur]);
-  var autoFocus = props.autoFocus,
-    value = props.value,
-    label = props.label,
-    description = props.description,
-    placeholder = props.placeholder,
-    rows = props.rows,
-    validation = props.validation,
-    icon = props.icon,
-    trailingIcon = props.trailingIcon,
-    onEnter = props.onEnter,
-    size = props.size,
-    rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  var inputValue = value;
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `Input` component from the `@webiny/admin-ui` package instead.
+ */
+export const Input = props => {
+  const {
+    autoFocus,
+    value,
+    description,
+    placeholder,
+    rows,
+    validation,
+    icon,
+    trailingIcon,
+    onBlur,
+    onChange,
+    rawOnChange,
+    required,
+    inputRef,
+    ...rest
+  } = props;
+  let inputValue = value;
   if (value === null || typeof value === "undefined") {
     inputValue = "";
   }
-  var _ref = validation || {},
-    validationIsValid = _ref.isValid,
-    validationMessage = _ref.message;
-  var inputOnKeyDown = (0, _react.useCallback)(function (e) {
-    if (typeof onEnter === "function" && e.key === "Enter") {
-      onEnter();
+  const size = useMemo(() => {
+    if (props.size === "medium") {
+      return "md";
+    }
+    if (props.size === "large") {
+      return "lg";
     }
-    if (typeof rest.onKeyDown === "function") {
-      return rest.onKeyDown(e);
+    return "lg";
+  }, [props.size]);
+  const getValidIcon = useCallback(icon => {
+    if (/*#__PURE__*/React.isValidElement(icon)) {
+      return icon;
     }
-  }, [rest.onKeyDown, onEnter]);
-  return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_textfield.TextField, Object.assign({}, (0, _pick.default)(rest, rmwcProps), {
-    onKeyDown: inputOnKeyDown,
+    return undefined;
+  }, []);
+  if (Boolean(rows)) {
+    return /*#__PURE__*/React.createElement(AdminTextarea, Object.assign({}, pick(rest, rmwcProps), {
+      autoFocus: autoFocus,
+      value: inputValue,
+      onChange: onChange,
+      placeholder: placeholder,
+      size: size,
+      className: "webiny-ui-input",
+      "data-testid": props["data-testid"],
+      validation: validation,
+      description: description,
+      required: required,
+      rows: rows,
+      forwardEventOnChange: rawOnChange,
+      textareaRef: inputRef,
+      onBlur: onBlur
+    }));
+  }
+  return /*#__PURE__*/React.createElement(AdminInput, Object.assign({}, pick(rest, rmwcProps), {
     autoFocus: autoFocus,
-    textarea: Boolean(rows),
     value: inputValue,
     onChange: onChange,
-    onBlur: onBlur,
-    label: label,
-    icon: icon,
+    startIcon: getValidIcon(icon),
+    endIcon: getValidIcon(trailingIcon),
     placeholder: placeholder,
-    trailingIcon: trailingIcon,
-    rows: rows,
-    className: (0, _classnames.default)("webiny-ui-input", _styled.webinyInputStyles, props.size ? "webiny-ui-input--size-".concat(size) : null),
-    "data-testid": props["data-testid"]
-  })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
-    error: true
-  }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));
+    size: size,
+    className: "webiny-ui-input",
+    "data-testid": props["data-testid"],
+    validation: validation,
+    description: description,
+    required: required,
+    forwardEventOnChange: rawOnChange,
+    inputRef: inputRef,
+    onBlur: onBlur
+  }));
 };
 
 //# sourceMappingURL=Input.js.map

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","exports","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","validate","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","_objectWithoutProperties2","default","inputValue","_ref","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","createElement","Fragment","TextField","Object","assign","pick","textarea","Boolean","className","classNames","webinyInputStyles","concat","FormElementMessage","error"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback } from \"react\";\nimport { TextField, TextFieldProps } from \"@rmwc/textfield\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactElement } from \"react\";\nimport classNames from \"classnames\";\nimport { webinyInputStyles } from \"./styled\";\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n\n        // Size - small, medium or large\n        size?: \"small\" | \"medium\" | \"large\";\n\n        children?: React.ReactNode;\n    };\n\nexport type InputOnKeyDownProps = React.SyntheticEvent<HTMLInputElement> & {\n    key?: string;\n};\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n    \"label\",\n    \"type\",\n    \"step\",\n    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"outlined\",\n    \"onKeyDown\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"rootProps\",\n    \"fullwidth\",\n    \"inputRef\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\",\n    \"autoComplete\"\n];\n\nexport const Input = (props: InputProps) => {\n    const onChange = useCallback(\n        (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { onChange, rawOnChange } = props;\n            if (!onChange) {\n                return;\n            }\n\n            // @ts-expect-error\n            onChange(rawOnChange ? e : e.target.value);\n        },\n        [props.onChange, props.rawOnChange]\n    );\n\n    const onBlur = useCallback(\n        async (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { validate, onBlur } = props;\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            onBlur && onBlur(e);\n        },\n        [props.validate, props.onBlur]\n    );\n\n    const {\n        autoFocus,\n        value,\n        label,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onEnter,\n        size,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    const inputOnKeyDown = useCallback(\n        (e: InputOnKeyDownProps) => {\n            if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                onEnter();\n            }\n\n            if (typeof rest.onKeyDown === \"function\") {\n                return rest.onKeyDown(e);\n            }\n        },\n        [rest.onKeyDown, onEnter]\n    );\n\n    return (\n        <React.Fragment>\n            <TextField\n                {...pick(rest, rmwcProps)}\n                onKeyDown={inputOnKeyDown}\n                autoFocus={autoFocus}\n                textarea={Boolean(rows)}\n                value={inputValue}\n                onChange={onChange}\n                onBlur={onBlur}\n                label={label}\n                icon={icon}\n                placeholder={placeholder}\n                trailingIcon={trailingIcon}\n                rows={rows}\n                className={classNames(\n                    \"webiny-ui-input\",\n                    webinyInputStyles,\n                    props.size ? `webiny-ui-input--size-${size}` : null\n                )}\n                data-testid={props[\"data-testid\"]}\n            />\n\n            {validationIsValid === false && (\n                <FormElementMessage error>{validationMessage}</FormElementMessage>\n            )}\n            {validationIsValid !== false && description && (\n                <FormElementMessage>{description}</FormElementMessage>\n            )}\n        </React.Fragment>\n    );\n};\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["React","useCallback","useMemo","pick","Input","AdminInput","Textarea","AdminTextarea","rmwcProps","props","autoFocus","value","description","placeholder","rows","validation","icon","trailingIcon","onBlur","onChange","rawOnChange","required","inputRef","rest","inputValue","size","getValidIcon","isValidElement","undefined","Boolean","createElement","Object","assign","className","forwardEventOnChange","textareaRef","startIcon","endIcon"],"sources":["Input.tsx"],"sourcesContent":["import React, { useCallback, useMemo, ReactElement } from \"react\";\nimport pick from \"lodash/pick\";\nimport { FormComponentProps } from \"~/types\";\nimport { Input as AdminInput, Textarea as AdminTextarea } from \"@webiny/admin-ui\";\n\nexport interface TextFieldHelperTextProps {\n    /** Make the help text always visible */\n    persistent?: boolean;\n    /** Make the help a validation message style */\n    validationMsg?: boolean;\n    /** Content for the help text */\n    children: React.ReactNode;\n}\n\nexport interface TextFieldProps {\n    /** Sets the value for controlled TextFields. */\n    value?: string | number;\n    /** Adds help text to the field */\n    helpText?: React.ReactNode | TextFieldHelperTextProps;\n    /** Shows the character count, must be used in conjunction with maxLength. */\n    characterCount?: boolean;\n    /** Makes the TextField visually invalid. This is sometimes automatically applied in cases where required or pattern is used.  */\n    invalid?: boolean;\n    /** Makes the Textfield disabled. */\n    disabled?: boolean;\n    /** Makes the Textfield required. */\n    required?: boolean;\n    /** Outline the TextField. */\n    outlined?: boolean;\n    /** How to align the text inside the TextField. Defaults to 'start'. */\n    align?: \"start\" | \"end\";\n    /** A label for the input. */\n    label?: React.ReactNode;\n    /** The label floats automatically based on value, but you can use this prop for manual control. */\n    floatLabel?: boolean;\n    /** Makes a multiline TextField. */\n    textarea?: boolean;\n    /** Makes the TextField fullwidth. */\n    fullwidth?: boolean;\n    /** Add a leading icon. */\n    icon?: any;\n    /** Add a trailing icon. */\n    trailingIcon?: any;\n    /** By default, props spread to the input. These props are for the component's root container. */\n    rootProps?: any;\n    /** A reference to the native input or textarea. */\n    inputRef?: React.Ref<HTMLInputElement | HTMLTextAreaElement | null>;\n    /** The type of input field to render, search, number, etc */\n    type?: string;\n    /** Add prefix. */\n    prefix?: string;\n    /** Add suffix. */\n    suffix?: string;\n    /** Advanced: A reference to the MDCFoundation. */\n    foundationRef?: any;\n    /** Make textarea resizeable */\n    resizeable?: boolean;\n}\n\nexport type InputProps<TValue = any> = FormComponentProps<TValue> &\n    TextFieldProps & {\n        // Should this input be filled with browser values\n        autoComplete?: string;\n\n        // If true, will pass native `event` to the `onChange` callback\n        rawOnChange?: boolean;\n\n        // Auto-focus input\n        autoFocus?: boolean;\n\n        // Input placeholder\n        placeholder?: string;\n\n        // Description beneath the input.\n        description?: string | ReactElement;\n\n        // Converts input into a text area with given number of rows.\n        rows?: number;\n\n        maxLength?: number;\n\n        // A callback that is executed when input focus is lost.\n        onBlur?: (e: React.SyntheticEvent<any>) => any;\n\n        onKeyDown?: (e: React.SyntheticEvent<any>) => any;\n\n        // A callback that gets triggered when the user presses the \"Enter\" key.\n        onEnter?: () => any;\n\n        // CSS class name\n        className?: string;\n\n        // For testing purposes.\n        \"data-testid\"?: string;\n\n        // Size - small, medium or large\n        size?: \"small\" | \"medium\" | \"large\";\n\n        children?: React.ReactNode;\n    };\n\n/**\n * Use Input component to store short string values, like first name, last name, e-mail etc.\n * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.\n */\n\n// IconProps directly passed to RMWC\nconst rmwcProps = [\n    \"label\",\n    \"type\",\n    \"disabled\",\n    \"readOnly\",\n    \"placeholder\",\n    \"onKeyDown\",\n    \"onEnter\",\n    \"onKeyPress\",\n    \"onKeyUp\",\n    \"onFocus\",\n    \"className\",\n    \"maxLength\",\n    \"characterCount\",\n    \"autoComplete\",\n    \"maxLength\"\n];\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `Input` component from the `@webiny/admin-ui` package instead.\n */\nexport const Input = (props: InputProps) => {\n    const {\n        autoFocus,\n        value,\n        description,\n        placeholder,\n        rows,\n        validation,\n        icon,\n        trailingIcon,\n        onBlur,\n        onChange,\n        rawOnChange,\n        required,\n        inputRef,\n        ...rest\n    } = props;\n\n    let inputValue = value;\n    if (value === null || typeof value === \"undefined\") {\n        inputValue = \"\";\n    }\n\n    const size = useMemo(() => {\n        if (props.size === \"medium\") {\n            return \"md\";\n        }\n\n        if (props.size === \"large\") {\n            return \"lg\";\n        }\n\n        return \"lg\";\n    }, [props.size]);\n\n    const getValidIcon = useCallback((icon: React.ReactNode) => {\n        if (React.isValidElement(icon)) {\n            return icon;\n        }\n\n        return undefined;\n    }, []);\n\n    if (Boolean(rows)) {\n        return (\n            <AdminTextarea\n                {...pick(rest, rmwcProps)}\n                autoFocus={autoFocus}\n                value={inputValue}\n                onChange={onChange}\n                placeholder={placeholder}\n                size={size}\n                className={\"webiny-ui-input\"}\n                data-testid={props[\"data-testid\"]}\n                validation={validation}\n                description={description}\n                required={required}\n                rows={rows}\n                forwardEventOnChange={rawOnChange}\n                textareaRef={inputRef as React.Ref<HTMLTextAreaElement> | undefined}\n                onBlur={onBlur}\n            />\n        );\n    }\n\n    return (\n        <AdminInput\n            {...pick(rest, rmwcProps)}\n            autoFocus={autoFocus}\n            value={inputValue}\n            onChange={onChange}\n            startIcon={getValidIcon(icon)}\n            endIcon={getValidIcon(trailingIcon)}\n            placeholder={placeholder}\n            size={size}\n            className={\"webiny-ui-input\"}\n            data-testid={props[\"data-testid\"]}\n            validation={validation}\n            description={description}\n            required={required}\n            forwardEventOnChange={rawOnChange}\n            inputRef={inputRef as React.Ref<HTMLInputElement> | undefined}\n            onBlur={onBlur}\n        />\n    );\n};\n"],"mappings":"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","ignoreList":[]}

package/Input/index.js

@@ -1,18 +1,3 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-var _Input = require("./Input");
-Object.keys(_Input).forEach(function (key) {
-  if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _Input[key]) return;
-  Object.defineProperty(exports, key, {
-    enumerable: true,
-    get: function get() {
-      return _Input[key];
-    }
-  });
-});
+export * from "./Input";
 
 //# sourceMappingURL=index.js.map

package/Input/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["_Input","require","Object","keys","forEach","key","exports","defineProperty","enumerable","get"],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\n"],"mappings":";;;;;AAAA,IAAAA,MAAA,GAAAC,OAAA;AAAAC,MAAA,CAAAC,IAAA,CAAAH,MAAA,EAAAI,OAAA,WAAAC,GAAA;EAAA,IAAAA,GAAA,kBAAAA,GAAA;EAAA,IAAAA,GAAA,IAAAC,OAAA,IAAAA,OAAA,CAAAD,GAAA,MAAAL,MAAA,CAAAK,GAAA;EAAAH,MAAA,CAAAK,cAAA,CAAAD,OAAA,EAAAD,GAAA;IAAAG,UAAA;IAAAC,GAAA,WAAAA,IAAA;MAAA,OAAAT,MAAA,CAAAK,GAAA;IAAA;EAAA;AAAA","ignoreList":[]}
+{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./Input\";\n"],"mappings":"AAAA","ignoreList":[]}

package/List/CollapsibleList/index.d.ts

@@ -1,8 +1,22 @@
-import "./index.css";
 import React from "react";
-import { CollapsibleListProps as RmwcCollapsibleListProps } from "@rmwc/list";
-export type CollapsibleListProps = RmwcCollapsibleListProps & {
+export interface CollapsibleListProps {
+    /** The handle that opens and closes the collapsible section. Usually a ListItem. */
+    handle: React.ReactElement<any>;
+    /** Starts the collapsible list as open. */
+    defaultOpen?: boolean;
+    /** Callback for when the collapsible list opens. */
+    onOpen?: () => void;
+    /** Callback for when the collapsible list closes. */
+    onClose?: () => void;
+    /** CollapsibleState */
+    open: boolean;
+    childrenStyle: React.CSSProperties;
+    /** Component props */
     children: React.ReactNode;
-};
+}
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
 export declare const CollapsibleList: (props: CollapsibleListProps) => React.JSX.Element;
 export default CollapsibleList;

package/List/CollapsibleList/index.js

@@ -1,16 +1,12 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.CollapsibleList = void 0;
-require("./index.css");
-var _react = _interopRequireDefault(require("react"));
-var _list = require("@rmwc/list");
-var CollapsibleList = exports.CollapsibleList = function CollapsibleList(props) {
-  return /*#__PURE__*/_react.default.createElement(_list.CollapsibleList, props);
+import React from "react";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
+export const CollapsibleList = props => {
+  console.warn("The `CollapsibleList` component is deprecated and will be removed in future releases. Please refer to the documentation for the recommended alternative.");
+  return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
 };
-var _default = exports.default = CollapsibleList;
+export default CollapsibleList;
 
 //# sourceMappingURL=index.js.map

package/List/CollapsibleList/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["require","_react","_interopRequireDefault","_list","CollapsibleList","exports","props","default","createElement","_default"],"sources":["index.tsx"],"sourcesContent":["import \"./index.css\";\nimport React from \"react\";\nimport {\n    CollapsibleList as RmwcCollapsibleList,\n    CollapsibleListProps as RmwcCollapsibleListProps\n} from \"@rmwc/list\";\n\nexport type CollapsibleListProps = RmwcCollapsibleListProps & {\n    children: React.ReactNode;\n};\n\nexport const CollapsibleList = (props: CollapsibleListProps) => {\n    return <RmwcCollapsibleList {...props} />;\n};\n\nexport default CollapsibleList;\n"],"mappings":";;;;;;;AAAAA,OAAA;AACA,IAAAC,MAAA,GAAAC,sBAAA,CAAAF,OAAA;AACA,IAAAG,KAAA,GAAAH,OAAA;AASO,IAAMI,eAAe,GAAAC,OAAA,CAAAD,eAAA,GAAG,SAAlBA,eAAeA,CAAIE,KAA2B,EAAK;EAC5D,oBAAOL,MAAA,CAAAM,OAAA,CAAAC,aAAA,CAACL,KAAA,CAAAC,eAAmB,EAAKE,KAAQ,CAAC;AAC7C,CAAC;AAAC,IAAAG,QAAA,GAAAJ,OAAA,CAAAE,OAAA,GAEaH,eAAe","ignoreList":[]}
+{"version":3,"names":["React","CollapsibleList","props","console","warn","createElement","Fragment","children"],"sources":["index.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface CollapsibleListProps {\n    /** The handle that opens and closes the collapsible section. Usually a ListItem. */\n    handle: React.ReactElement<any>;\n    /** Starts the collapsible list as open. */\n    defaultOpen?: boolean;\n    /** Callback for when the collapsible list opens. */\n    onOpen?: () => void;\n    /** Callback for when the collapsible list closes. */\n    onClose?: () => void;\n\n    /** CollapsibleState */\n    open: boolean;\n    childrenStyle: React.CSSProperties;\n\n    /** Component props */\n    children: React.ReactNode;\n}\n\n/**\n * @deprecated This component is deprecated and will be removed in future releases.\n * Please use the `List` component from the `@webiny/admin-ui` package instead.\n */\nexport const CollapsibleList = (props: CollapsibleListProps) => {\n    console.warn(\n        \"The `CollapsibleList` component is deprecated and will be removed in future releases. Please refer to the documentation for the recommended alternative.\"\n    );\n    return <>{props.children}</>;\n};\n\nexport default CollapsibleList;\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AAoBzB;AACA;AACA;AACA;AACA,OAAO,MAAMC,eAAe,GAAIC,KAA2B,IAAK;EAC5DC,OAAO,CAACC,IAAI,CACR,0JACJ,CAAC;EACD,oBAAOJ,KAAA,CAAAK,aAAA,CAAAL,KAAA,CAAAM,QAAA,QAAGJ,KAAK,CAACK,QAAW,CAAC;AAChC,CAAC;AAED,eAAeN,eAAe","ignoreList":[]}

package/List/DataList/DataList.d.ts

@@ -1,42 +1,16 @@
 import React from "react";
-import { ListItem, ListProps } from "..";
-import { PaginationProp, SortersProp } from "./types";
-interface DataListProps {
-    children?: ((props: any) => React.ReactNode) | null;
-    title?: React.ReactNode;
-    data?: Record<string, any>[] | null;
-    refresh?: (() => void) | null;
-    loading?: boolean;
-    loader?: React.ReactNode;
-    noData?: React.ReactNode;
-    pagination?: PaginationProp;
-    setSorters?: ((sorter: any) => void) | null;
-    sorters?: SortersProp | null;
-    actions?: React.ReactNode;
-    filters?: React.ReactNode;
-    multiSelectActions?: React.ReactNode;
-    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;
-    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;
-    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;
-    showOptions?: {
-        refresh?: boolean;
-        pagination?: boolean;
-        filters?: boolean;
-        sorters?: boolean;
-        [key: string]: any;
-    };
-    search?: React.ReactElement;
-    modalOverlay?: React.ReactElement;
-    modalOverlayAction?: React.ReactElement;
-    subHeader?: React.ReactElement;
-    meta?: Record<string, any> | null;
-    setPage?: ((page: string) => void) | null;
-    setPerPage?: ((page: string) => void) | null;
-    perPageOptions?: number[];
-}
-export declare const DataList: (propsInput: DataListProps) => React.JSX.Element;
+import { ListProps, ListItemProps } from "../List";
+import { DataListProps } from "@webiny/admin-ui/DataList/types";
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `DataList` component from the `@webiny/admin-ui` package instead.
+ */
+export declare const DataList: (props: DataListProps<Record<string, any>>) => React.JSX.Element;
 export interface ScrollListProps extends ListProps {
-    children: React.ReactElement<typeof ListItem>[];
+    children: React.ReactElement<ListItemProps>[];
 }
+/**
+ * @deprecated This component is deprecated and will be removed in future releases.
+ * Please use the `List` component from the `@webiny/admin-ui` package instead.
+ */
 export declare const ScrollList: (props: ScrollListProps) => React.JSX.Element;
-export {};