@webiny/ui 5.39.0-beta.0 → 5.39.0-beta.2

package/ImageUpload/SingleImageUpload.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_FormElementMessage","_styled","_classnames","_Image","_ImageEditorDialog","ImageUploadWrapper","styled","target","label","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","loading","error","imageEditor","open","image","images","_this$props","props","onChange","name","type","size","src","base64","setState","includes","errors","_errors","_slicedToArray2","_createClass2","key","value","render","_this2","_this$props2","className","validation","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","options","onClose","onAccept","setTimeout","_asyncToGenerator2","_regeneratorRuntime2","mark","_callee","wrap","_callee$","_context","prev","next","t0","_objectSpread2","stop","convertToBase64","onSuccess","handleFiles","onError","handleErrors","_ref3","browseFiles","getDropZoneProps","removeImage","undefined","uploadImage","editImage","FormElementMessage","errorMessages","React","Component","exports","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?: Array<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?: Object;\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;AACA,IAAAG,OAAA,GAAAJ,sBAAA,CAAAC,OAAA;AACA,IAAAI,WAAA,GAAAL,sBAAA,CAAAC,OAAA;AACA,IAAAK,MAAA,GAAAN,sBAAA,CAAAC,OAAA;AACA,IAAAM,kBAAA,GAAAP,sBAAA,CAAAC,OAAA;AAEA,IAAMO,kBAAkB,oBAAGC,eAAM,EAAC,KAAK;EAAAC,MAAA;EAAAC,KAAA;AAAA,GAAE;EACrCC,QAAQ,EAAE,UAAU;EACpB,WAAW,EAAE;IACTC,OAAO,EAAE,IAAI;IACbC,aAAa,EAAE;EACnB,CAAC;EACD,kCAAkC,EAAE;IAChCC,SAAS,EAAE,aAAa;IACxBC,GAAG,EAAE,EAAE;IACPC,IAAI,EAAE,EAAE;IACRC,KAAK,EAAE;EACX,CAAC;EACD,6BAA6B,EAAE;IAC3BA,KAAK,EAAE;EACX;AACJ,CAAC,CAAC;AAyDF;AACA,IAAMC,mBAAmB,GAAG,CAAC,eAAe,EAAE,WAAW,CAAC;AAAC,IAS9CC,iBAAiB,0BAAAC,gBAAA;EAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,iBAAA,EAAAC,gBAAA;EAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,iBAAA;EAAA,SAAAA,kBAAA;IAAA,IAAAM,KAAA;IAAA,IAAAC,gBAAA,CAAAJ,OAAA,QAAAH,iBAAA;IAAA,SAAAQ,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,GAAAF,MAAA,CAAAU,IAAA,CAAAC,KAAA,CAAAX,MAAA,SAAAY,MAAA,CAAAL,IAAA;IAAA,IAAAM,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,YAeK;MAC3Ba,OAAO,EAAE,KAAK;MACdC,KAAK,EAAE,IAAI;MACXC,WAAW,EAAE;QACTC,IAAI,EAAE,KAAK;QACXC,KAAK,EAAE;MACX;IACJ,CAAC;IAAA,IAAAN,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,kBAEa,UAACkB,MAAsB,EAAK;MACtC,IAAAC,WAAA,GAAkCnB,KAAA,CAAKoB,KAAK;QAApCC,QAAQ,GAAAF,WAAA,CAARE,QAAQ;QAAEN,WAAW,GAAAI,WAAA,CAAXJ,WAAW;MAC7B,IAAME,KAAK,GAAG;QACVK,IAAI,EAAEJ,MAAM,CAAC,CAAC,CAAC,CAACI,IAAI;QACpBC,IAAI,EAAEL,MAAM,CAAC,CAAC,CAAC,CAACK,IAAI;QACpBC,IAAI,EAAEN,MAAM,CAAC,CAAC,CAAC,CAACM,IAAI;QACpBC,GAAG,EAAEP,MAAM,CAAC,CAAC,CAAC,CAACO,GAAG,CAACC;MACvB,CAAC;MAED1B,KAAA,CAAK2B,QAAQ,CAAC;QAAEb,KAAK,EAAE;MAAK,CAAC,EAAE,YAAM;QACjC,IAAIC,WAAW,IAAI,CAACtB,mBAAmB,CAACmC,QAAQ,CAACX,KAAK,CAACM,IAAI,CAAC,EAAE;UAC1DvB,KAAA,CAAK2B,QAAQ,CAAC;YAAEZ,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,IAAAN,gBAAA,CAAAd,OAAA,MAAAe,uBAAA,CAAAf,OAAA,EAAAG,KAAA,mBAEc,UAAC6B,MAAmB,EAAK;MACpC,IAAAC,OAAA,OAAAC,eAAA,CAAAlC,OAAA,EAAgBgC,MAAM;QAAff,KAAK,GAAAgB,OAAA;MACZ9B,KAAA,CAAK2B,QAAQ,CAAC;QAAEb,KAAK,EAALA;MAAM,CAAC,CAAC;IAC5B,CAAC;IAAA,OAAAd,KAAA;EAAA;EAAA,IAAAgC,aAAA,CAAAnC,OAAA,EAAAH,iBAAA;IAAAuC,GAAA;IAAAC,KAAA,EAED,SAAAC,OAAA,EAAyB;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;QACVtD,KAAK,GAAAoD,YAAA,CAALpD,KAAK;QACLuD,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,CAACQ,GAAG,EAAE;QAClEoB,mBAAmB,GAAG,IAAI,CAACC,KAAK,CAAC/B,WAAW,CAACE,KAAK,CAACQ,GAAG;MAC1D;MAEA,IAAMA,GAAG,GAAGS,KAAK,GAAGA,KAAK,CAACT,GAAG,GAAG,IAAI;MAEpC,IAAMsB,SAAS,GAAG,IAAI,CAACD,KAAK,CAAChC,KAAK,GAAI,IAAI,CAACgC,KAAK,CAAChC,KAAK,CAACS,IAAI,GAAiB,IAAI;MAEhF,IAAAyB,IAAA,GAAmET,UAAU,IAAI,CAAC,CAAC;QAAlEU,iBAAiB,GAAAD,IAAA,CAA1BE,OAAO;QAA8BC,iBAAiB,GAAAH,IAAA,CAA1BI,OAAO;MAC3C;AACR;AACA;AACA;MACQ,oBACI/E,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAACvE,kBAAkB;QAACwD,SAAS,EAAE,IAAAgB,mBAAU,EAAChB,SAAS;MAAE,GAChDrD,KAAK,IAAI,CAACwC,GAAG,iBACVpD,MAAA,CAAAwB,OAAA,CAAAwD,aAAA;QAAKf,SAAS,EAAC;MAAoD,GAC9DrD,KACA,CACR,eAEDZ,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAACxE,kBAAA,CAAAgB,OAAiB;QACd0D,OAAO,EAAExC,WAAY;QACrBC,IAAI,EAAE,IAAI,CAAC8B,KAAK,CAAC/B,WAAW,CAACC,IAAK;QAClCS,GAAG,EAAEoB,mBAAoB;QACzBW,OAAO,EAAE,SAAAA,QAAA,EAAM;UACXpB,MAAI,CAACT,QAAQ,CAAC,UAAAmB,KAAK,EAAI;YACnBA,KAAK,CAAC/B,WAAW,CAACC,IAAI,GAAG,KAAK;YAC9B,OAAO8B,KAAK;UAChB,CAAC,CAAC;QACN,CAAE;QACFW,QAAQ,EAAE,SAAAA,SAAAhC,GAAG,EAAI;UACb;UACAiC,UAAU,CAAC,YAAM;YACbtB,MAAI,CAACT,QAAQ,CAAC;cAAEd,OAAO,EAAE;YAAK,CAAC,mBAAA8C,kBAAA,CAAA9D,OAAA,oBAAA+D,oBAAA,CAAA/D,OAAA,IAAAgE,IAAA,CAAE,SAAAC,QAAA;cAAA,WAAAF,oBAAA,CAAA/D,OAAA,IAAAkE,IAAA,UAAAC,SAAAC,QAAA;gBAAA,kBAAAA,QAAA,CAAAC,IAAA,GAAAD,QAAA,CAAAE,IAAA;kBAAA;oBAAAF,QAAA,CAAAG,EAAA,GAC7B/C,QAAQ;oBAAA,KAAA4C,QAAA,CAAAG,EAAA;sBAAAH,QAAA,CAAAE,IAAA;sBAAA;oBAAA;oBAAAF,QAAA,CAAAE,IAAA;oBAAA,OACG9C,QAAQ,KAAAgD,cAAA,CAAAxE,OAAA,MAAAwE,cAAA,CAAAxE,OAAA,MAAMuC,MAAI,CAACU,KAAK,CAAC/B,WAAW,CAACE,KAAK;sBAAEQ,GAAG,EAAHA;oBAAG,EAAE,CAAC;kBAAA;oBAC7DW,MAAI,CAACT,QAAQ,CAAC;sBACVd,OAAO,EAAE,KAAK;sBACdE,WAAW,EAAE;wBACTE,KAAK,EAAE,IAAI;wBACXD,IAAI,EAAE;sBACV;oBACJ,CAAC,CAAC;kBAAC;kBAAA;oBAAA,OAAAiD,QAAA,CAAAK,IAAA;gBAAA;cAAA,GAAAR,OAAA;YAAA,CACN,GAAC;UACN,CAAC,CAAC;QACN;MAAE,CACL,CAAC,eACFzF,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAAC7E,iBAAA,CAAAqB,OAAW;QACR4C,MAAM,EAAEA,MAAmB;QAC3BC,OAAO,EAAEA,OAAQ;QACjB6B,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,oBAC7BzG,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,QAASyB,gBAAgB,CAAC,CAAC,eACvBzG,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAACzE,MAAA,CAAAiB,OAAK;UACF+C,kBAAkB,EAAEA,kBAAmB;UACvC/B,OAAO,EAAEuB,MAAI,CAACU,KAAK,CAACjC,OAAQ;UAC5BqB,KAAK,EAAEA,KAAM;UACb6C,WAAW,EAAEpC,qBAAqB,GAAGtB,QAAQ,GAAG2D,SAAU;UAC1DC,WAAW,EAAEJ,WAAY;UACzBK,SAAS,EAAEL;QAAY,CAC1B,CACA,CAAC;MAAA,CAED,CAAC,EAEb5B,iBAAiB,KAAK,KAAK,iBACxB5E,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAAC5E,mBAAA,CAAA0G,kBAAkB;QAACrE,KAAK;MAAA,GAAEqC,iBAAsC,CACpE,EAEAF,iBAAiB,KAAK,KAAK,IAAIT,WAAW,iBACvCnE,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAAC5E,mBAAA,CAAA0G,kBAAkB,QAAE3C,WAAgC,CACxD,EAEA,IAAI,CAACM,KAAK,CAAChC,KAAK,iBACbzC,MAAA,CAAAwB,OAAA,CAAAwD,aAAA,CAAC5E,mBAAA,CAAA0G,kBAAkB;QAACrE,KAAK;MAAA,GACpB,IAAI,CAACM,KAAK,CAACgE,aAAa,CACrBrC,SAAS,CACZ,IAAI,IAAI,CAAC3B,KAAK,CAACgE,aAAa,CAACvF,OACd,CAER,CAAC;IAE7B;EAAC;EAAA,OAAAH,iBAAA;AAAA,EArJkC2F,cAAK,CAACC,SAAS;AAAAC,OAAA,CAAA7F,iBAAA,GAAAA,iBAAA;AAAA,IAAAiB,gBAAA,CAAAd,OAAA,EAAzCH,iBAAiB,kBAC6B;EACnDgD,OAAO,EAAE,MAAM;EACf3B,WAAW,EAAE,CAAC,CAAC;EACf0B,MAAM,EAAE,CAAC,YAAY,EAAE,WAAW,EAAE,WAAW,EAAE,eAAe,CAAC;EACjEE,qBAAqB,EAAE,IAAI;EAC3ByC,aAAa,EAAE;IACXI,eAAe,EAAE,oBAAoB;IACrCC,uBAAuB,EAAE,uCAAuC;IAChEC,kBAAkB,EAAE,iCAAiC;IACrDC,mBAAmB,EAAE,wBAAwB;IAC7C9F,OAAO,EAAE;EACb;AACJ,CAAC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_reactButterfiles","_FormElementMessage","_styled","_classnames","_Image","_ImageEditorDialog","ImageUploadWrapper","styled","target","label","position","opacity","pointerEvents","transform","top","left","color","noImageEditingTypes","SingleImageUpload","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","arguments","length","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","loading","error","imageEditor","open","image","images","_this$props","props","onChange","name","type","size","src","base64","setState","includes","errors","_errors","_slicedToArray2","_createClass2","key","value","render","_this2","_this$props2","className","validation","description","accept","maxSize","showRemoveImageButton","renderImagePreview","imageEditorImageSrc","state","errorType","_ref","validationIsValid","isValid","validationMessage","message","createElement","classNames","options","onClose","onAccept","setTimeout","_objectSpread2","convertToBase64","onSuccess","handleFiles","onError","handleErrors","_ref2","browseFiles","getDropZoneProps","removeImage","undefined","uploadImage","editImage","FormElementMessage","errorMessages","React","Component","exports","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":"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"}

package/ImageUpload/styled.d.ts

@@ -1,6 +1,4 @@
 /// <reference types="react" />
-/// <reference types="react" />
-/// <reference types="web" />
 export declare const AddImageIconWrapper: import("@emotion/styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any> | undefined;

package/ImageUpload/styled.js

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.RemoveImage = exports.ImagePreviewWrapper = exports.EditImage = exports.AddImageWrapperRound = exports.AddImageWrapper = exports.AddImageIconWrapper = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _styled2 = _interopRequireDefault(require("@emotion/styled"));
-var _hover, _styled; // TODO remove
-// @ts-nocheck
+var _hover, _styled;
 var AddImageIconWrapper = /*#__PURE__*/(0, _styled2.default)("div", {
   target: "e1engwcq0",
   label: "AddImageIconWrapper"

package/ImageUpload/styled.js.map

@@ -1 +1 @@
-{"version":3,"names":["_styled2","_interopRequireDefault","require","_hover","_styled","AddImageIconWrapper","styled","target","label","color","width","height","maxWidth","maxHeight","display","opacity","margin","exports","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","_defineProperty2","default","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["// TODO remove\n// @ts-nocheck\nimport styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}
+{"version":3,"names":["_styled2","_interopRequireDefault","require","_hover","_styled","AddImageIconWrapper","styled","target","label","color","width","height","maxWidth","maxHeight","display","opacity","margin","exports","AddImageWrapper","minHeight","minWidth","textAlign","backgroundColor","borderRadius","borderBottom","alignItems","justifyContent","flexDirection","transition","cursor","padding","boxSizing","AddImageWrapperRound","RemoveImage","position","top","right","EditImage","left","ImagePreviewWrapper","_defineProperty2","default","zIndex","transform"],"sources":["styled.ts"],"sourcesContent":["import styled from \"@emotion/styled\";\n\nexport const AddImageIconWrapper = styled(\"div\")({\n    color: \"var(--mdc-theme-text-secondary-on-background)\",\n    \">svg\": {\n        width: \"100%\",\n        height: \"100%\",\n        maxWidth: 50,\n        maxHeight: 50,\n        display: \"block\",\n        opacity: 0.5,\n        margin: \"0 auto\"\n    }\n});\n\nexport const AddImageWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    textAlign: \"center\",\n    backgroundColor: \"var(--mdc-theme-on-background)\",\n    borderRadius: 0,\n    borderBottom: \"1px solid var(--mdc-theme-text-hint-on-background)\",\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    transition: \"color 0.2s\",\n    cursor: \"pointer\",\n    padding: 10,\n    boxSizing: \"border-box\",\n    \"&:hover\": {\n        backgroundColor: \"rgba(0,0,0, 0.5)\",\n        borderBottom: \"1px solid var(--mdc-theme-on-surface)\"\n    }\n});\n\nexport const AddImageWrapperRound = styled(AddImageWrapper)({\n    margin: \"auto\",\n    width: \"150px\",\n    height: \"150px\",\n    borderRadius: \"50%\"\n});\n\nexport const RemoveImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    right: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const EditImage = styled(\"div\")({\n    position: \"absolute\",\n    cursor: \"pointer\",\n    top: 10,\n    left: 10,\n    display: \"none\",\n    color: \"white\",\n    opacity: 0.5,\n    \"&:hover\": {\n        opacity: 0.75\n    }\n});\n\nexport const ImagePreviewWrapper = styled(\"div\")({\n    width: \"100%\",\n    height: \"100%\",\n    minHeight: 50,\n    minWidth: 50,\n    display: \"flex\",\n    alignItems: \"center\",\n    justifyContent: \"space-around\",\n    flexDirection: \"column\",\n    boxSizing: \"border-box\",\n    position: \"relative\",\n    // @ts-expect-error\n    [AddImageWrapper]: {\n        position: \"absolute\",\n        display: \"none\",\n        top: 0,\n        height: \"100%\",\n        zIndex: 1,\n        backgroundColor: \"rgba(0,0,0, 0.75)\",\n        // @ts-expect-error\n        [AddImageIconWrapper]: {\n            top: \"50%\",\n            left: \"50%\",\n            transform: \"translateY(-50%) translateX(-50%)\",\n            position: \"absolute\",\n            color: \"white\"\n        }\n    },\n    \"&:hover\": {\n        // @ts-expect-error\n        [AddImageWrapper]: {\n            display: \"block\"\n        },\n        // @ts-expect-error\n        [RemoveImage]: {\n            display: \"block\",\n            zIndex: 2\n        },\n        // @ts-expect-error\n        [EditImage]: {\n            display: \"block\",\n            zIndex: 2\n        }\n    }\n});\n"],"mappings":"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"}

package/Input/Input.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="web" />
 import React from "react";
 import { TextFieldProps } from "@rmwc/textfield";
 import { FormComponentProps } from "../types";
@@ -17,5 +16,11 @@ export declare type InputProps<TValue = any> = FormComponentProps<TValue> & Text
     className?: string;
     "data-testid"?: string;
     size?: "small" | "medium" | "large";
+    children?: React.ReactNode;
+};
+export declare const Input: {
+    (props: InputProps): JSX.Element;
+    defaultProps: {
+        rawOnChange: boolean;
+    };
 };
-export declare const Input: React.FC<InputProps>;

package/Input/Input.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.Input = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _regeneratorRuntime2 = _interopRequireDefault(require("@babel/runtime/helpers/regeneratorRuntime"));
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
 var _react = _interopRequireWildcard(require("react"));
 var _textfield = require("@rmwc/textfield");
 var _FormElementMessage = require("../FormElementMessage");
@@ -29,37 +27,20 @@ var Input = function Input(props) {
       return;
     }
 
-    // @ts-ignore
+    // @ts-expect-error
     onChange(rawOnChange ? e : e.target.value);
   }, [props.onChange, props.rawOnChange]);
-  var onBlur = (0, _react.useCallback)( /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/(0, _regeneratorRuntime2.default)().mark(function _callee(e) {
-      var validate, onBlur;
-      return (0, _regeneratorRuntime2.default)().wrap(function _callee$(_context) {
-        while (1) switch (_context.prev = _context.next) {
-          case 0:
-            validate = props.validate, onBlur = props.onBlur;
-            if (!validate) {
-              _context.next = 5;
-              break;
-            }
-            // 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();
-            _context.next = 5;
-            return validate();
-          case 5:
-            onBlur && onBlur(e);
-          case 6:
-          case "end":
-            return _context.stop();
-        }
-      }, _callee);
-    }));
-    return function (_x) {
-      return _ref.apply(this, arguments);
-    };
-  }(), [props.validate, props.onBlur]);
+  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,
@@ -76,9 +57,9 @@ var Input = function Input(props) {
   if (value === null || typeof value === "undefined") {
     inputValue = "";
   }
-  var _ref2 = validation || {},
-    validationIsValid = _ref2.isValid,
-    validationMessage = _ref2.message;
+  var _ref = validation || {},
+    validationIsValid = _ref.isValid,
+    validationMessage = _ref.message;
   var inputOnKeyDown = (0, _react.useCallback)(function (e) {
     if (typeof onEnter === "function" && e.key === "Enter") {
       onEnter();

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","props","onChange","useCallback","e","rawOnChange","target","value","onBlur","_ref","_asyncToGenerator2","default","_regeneratorRuntime2","mark","_callee","validate","wrap","_callee$","_context","prev","next","persist","stop","_x","apply","arguments","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","size","rest","_objectWithoutProperties2","inputValue","_ref2","validationIsValid","isValid","validationMessage","message","inputOnKeyDown","key","onKeyDown","createElement","Fragment","TextField","Object","assign","pick","textarea","Boolean","className","classNames","webinyInputStyles","concat","FormElementMessage","error","exports","defaultProps"],"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\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];\n\nexport const Input: React.FC<InputProps> = props => {\n    const onChange = useCallback(\n        (e: React.SyntheticEvent<HTMLInputElement>) => {\n            const { onChange, rawOnChange } = props;\n            if (!onChange) {\n                return;\n            }\n\n            // @ts-ignore\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 => {\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\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireWildcard","require","_textfield","_FormElementMessage","_pick","_interopRequireDefault","_classnames","_styled","_excluded","rmwcProps","Input","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","exports","defaultProps"],"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\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];\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 => {\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\nInput.defaultProps = { rawOnChange: false };\n"],"mappings":"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"}

package/Input/__tests__/Input.test.js

@@ -88,8 +88,6 @@ describe("Input tests", function () {
   test("passes expected props to render prop", function () {
     var _setup = setup(),
       renderArg = _setup.renderArg;
-
-    // @ts-ignore
     expect(renderArg).toContainKeys(["value", "validation", "onChange", "onBlur"]);
   });
   test("updates value via onChange", function () {

package/Input/__tests__/Input.test.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_index","_react2","afterEach","cleanup","setup","props","arguments","length","undefined","renderArg","onChange","_","value","renderProp","jest","fn","controllerArg","Object","assign","Test","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","setState","_createClass2","key","render","createElement","Input","state","callAll","React","Component","utils","_objectSpread2","_len2","fns","_key2","_len3","_key3","forEach","describe","test","_setup","expect","toContainKeys","_setup2","toBe"],"sources":["Input.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"../index\";\nimport \"jest-dom/extend-expect\";\nimport { render, cleanup } from \"@testing-library/react\";\n\nafterEach(cleanup);\n\ninterface SetupProps {\n    onChange?: () => void;\n}\nfunction setup(props: SetupProps = {}) {\n    const renderArg = {\n        // eslint-disable-next-line\n        onChange: (_: string) => {},\n        value: null\n    };\n    const renderProp = jest.fn(controllerArg => {\n        Object.assign(renderArg, controllerArg);\n        return null;\n    });\n\n    const onChange = props.onChange\n        ? props.onChange\n        : () => {\n              return void 0;\n          };\n\n    class Test extends React.Component {\n        public override state = { value: \"init-value\" };\n\n        onChange = (value: string) => {\n            this.setState({ value });\n        };\n\n        public override render() {\n            return (\n                <Input\n                    {...props}\n                    value={this.state.value}\n                    onChange={callAll(onChange, this.onChange)}\n                >\n                    {renderProp}\n                </Input>\n            );\n        }\n    }\n\n    const utils = render(<Test />);\n\n    return { renderArg, ...utils };\n}\n\n/**\n * This return a function that will call all the given functions with\n * the arguments with which it's called. It does a null-check before\n * attempting to call the functions and can take any number of functions.\n * @param {...Function} fns the functions to call\n * @return {Function} the function that calls all the functions\n */\nfunction callAll(...fns: Function[]) {\n    return (...args: any) => {\n        fns.forEach(fn => {\n            fn && fn(...args);\n        });\n    };\n}\n\ndescribe(\"Input tests\", () => {\n    test(\"passes expected props to render prop\", () => {\n        const { renderArg } = setup();\n\n        // @ts-ignore\n        expect(renderArg).toContainKeys([\"value\", \"validation\", \"onChange\", \"onBlur\"]);\n    });\n\n    test(\"updates value via onChange\", () => {\n        const { renderArg } = setup();\n        expect(renderArg.value).toBe(\"init-value\");\n        renderArg.onChange(\"new-value\");\n        expect(renderArg.value).toBe(\"new-value\");\n        renderArg.onChange(\"third-value\");\n        expect(renderArg.value).toBe(\"third-value\");\n    });\n});\n"],"mappings":";;;;;;;;;;AAAA,IAAAA,MAAA,GAAAC,sBAAA,CAAAC,OAAA;AACA,IAAAC,MAAA,GAAAD,OAAA;AACAA,OAAA;AACA,IAAAE,OAAA,GAAAF,OAAA;AAEAG,SAAS,CAACC,eAAO,CAAC;AAKlB,SAASC,KAAKA,CAAA,EAAyB;EAAA,IAAxBC,KAAiB,GAAAC,SAAA,CAAAC,MAAA,QAAAD,SAAA,QAAAE,SAAA,GAAAF,SAAA,MAAG,CAAC,CAAC;EACjC,IAAMG,SAAS,GAAG;IACd;IACAC,QAAQ,EAAE,SAAAA,SAACC,CAAS,EAAK,CAAC,CAAC;IAC3BC,KAAK,EAAE;EACX,CAAC;EACD,IAAMC,UAAU,GAAGC,IAAI,CAACC,EAAE,CAAC,UAAAC,aAAa,EAAI;IACxCC,MAAM,CAACC,MAAM,CAACT,SAAS,EAAEO,aAAa,CAAC;IACvC,OAAO,IAAI;EACf,CAAC,CAAC;EAEF,IAAMN,QAAQ,GAAGL,KAAK,CAACK,QAAQ,GACzBL,KAAK,CAACK,QAAQ,GACd,YAAM;IACF,OAAO,KAAK,CAAC;EACjB,CAAC;EAAC,IAEFS,IAAI,0BAAAC,gBAAA;IAAA,IAAAC,UAAA,CAAAC,OAAA,EAAAH,IAAA,EAAAC,gBAAA;IAAA,IAAAG,MAAA,OAAAC,aAAA,CAAAF,OAAA,EAAAH,IAAA;IAAA,SAAAA,KAAA;MAAA,IAAAM,KAAA;MAAA,IAAAC,gBAAA,CAAAJ,OAAA,QAAAH,IAAA;MAAA,SAAAQ,IAAA,GAAArB,SAAA,CAAAC,MAAA,EAAAqB,IAAA,OAAAC,KAAA,CAAAF,IAAA,GAAAG,IAAA,MAAAA,IAAA,GAAAH,IAAA,EAAAG,IAAA;QAAAF,IAAA,CAAAE,IAAA,IAAAxB,SAAA,CAAAwB,IAAA;MAAA;MAAAL,KAAA,GAAAF,MAAA,CAAAQ,IAAA,CAAAC,KAAA,CAAAT,MAAA,SAAAU,MAAA,CAAAL,IAAA;MAAA,IAAAM,gBAAA,CAAAZ,OAAA,MAAAa,uBAAA,CAAAb,OAAA,EAAAG,KAAA,YACkB;QAAEb,KAAK,EAAE;MAAa,CAAC;MAAA,IAAAsB,gBAAA,CAAAZ,OAAA,MAAAa,uBAAA,CAAAb,OAAA,EAAAG,KAAA,eAEpC,UAACb,KAAa,EAAK;QAC1Ba,KAAA,CAAKW,QAAQ,CAAC;UAAExB,KAAK,EAALA;QAAM,CAAC,CAAC;MAC5B,CAAC;MAAA,OAAAa,KAAA;IAAA;IAAA,IAAAY,aAAA,CAAAf,OAAA,EAAAH,IAAA;MAAAmB,GAAA;MAAA1B,KAAA,EAED,SAAA2B,OAAA,EAAyB;QACrB,oBACI1C,MAAA,CAAAyB,OAAA,CAAAkB,aAAA,CAACxC,MAAA,CAAAyC,KAAK,EAAAxB,MAAA,CAAAC,MAAA,KACEb,KAAK;UACTO,KAAK,EAAE,IAAI,CAAC8B,KAAK,CAAC9B,KAAM;UACxBF,QAAQ,EAAEiC,OAAO,CAACjC,QAAQ,EAAE,IAAI,CAACA,QAAQ;QAAE,IAE1CG,UACE,CAAC;MAEhB;IAAC;IAAA,OAAAM,IAAA;EAAA,EAjBcyB,cAAK,CAACC,SAAS;EAoBlC,IAAMC,KAAK,GAAG,IAAAP,cAAM,gBAAC1C,MAAA,CAAAyB,OAAA,CAAAkB,aAAA,CAACrB,IAAI,MAAE,CAAC,CAAC;EAE9B,WAAA4B,cAAA,CAAAzB,OAAA;IAASb,SAAS,EAATA;EAAS,GAAKqC,KAAK;AAChC;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,SAASH,OAAOA,CAAA,EAAqB;EAAA,SAAAK,KAAA,GAAA1C,SAAA,CAAAC,MAAA,EAAjB0C,GAAG,OAAApB,KAAA,CAAAmB,KAAA,GAAAE,KAAA,MAAAA,KAAA,GAAAF,KAAA,EAAAE,KAAA;IAAHD,GAAG,CAAAC,KAAA,IAAA5C,SAAA,CAAA4C,KAAA;EAAA;EACnB,OAAO,YAAkB;IAAA,SAAAC,KAAA,GAAA7C,SAAA,CAAAC,MAAA,EAAdqB,IAAI,OAAAC,KAAA,CAAAsB,KAAA,GAAAC,KAAA,MAAAA,KAAA,GAAAD,KAAA,EAAAC,KAAA;MAAJxB,IAAI,CAAAwB,KAAA,IAAA9C,SAAA,CAAA8C,KAAA;IAAA;IACXH,GAAG,CAACI,OAAO,CAAC,UAAAtC,EAAE,EAAI;MACdA,EAAE,IAAIA,EAAE,CAAAiB,KAAA,SAAIJ,IAAI,CAAC;IACrB,CAAC,CAAC;EACN,CAAC;AACL;AAEA0B,QAAQ,CAAC,aAAa,EAAE,YAAM;EAC1BC,IAAI,CAAC,sCAAsC,EAAE,YAAM;IAC/C,IAAAC,MAAA,GAAsBpD,KAAK,CAAC,CAAC;MAArBK,SAAS,GAAA+C,MAAA,CAAT/C,SAAS;;IAEjB;IACAgD,MAAM,CAAChD,SAAS,CAAC,CAACiD,aAAa,CAAC,CAAC,OAAO,EAAE,YAAY,EAAE,UAAU,EAAE,QAAQ,CAAC,CAAC;EAClF,CAAC,CAAC;EAEFH,IAAI,CAAC,4BAA4B,EAAE,YAAM;IACrC,IAAAI,OAAA,GAAsBvD,KAAK,CAAC,CAAC;MAArBK,SAAS,GAAAkD,OAAA,CAATlD,SAAS;IACjBgD,MAAM,CAAChD,SAAS,CAACG,KAAK,CAAC,CAACgD,IAAI,CAAC,YAAY,CAAC;IAC1CnD,SAAS,CAACC,QAAQ,CAAC,WAAW,CAAC;IAC/B+C,MAAM,CAAChD,SAAS,CAACG,KAAK,CAAC,CAACgD,IAAI,CAAC,WAAW,CAAC;IACzCnD,SAAS,CAACC,QAAQ,CAAC,aAAa,CAAC;IACjC+C,MAAM,CAAChD,SAAS,CAACG,KAAK,CAAC,CAACgD,IAAI,CAAC,aAAa,CAAC;EAC/C,CAAC,CAAC;AACN,CAAC,CAAC"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_index","_react2","afterEach","cleanup","setup","props","arguments","length","undefined","renderArg","onChange","_","value","renderProp","jest","fn","controllerArg","Object","assign","Test","_React$Component","_inherits2","default","_super","_createSuper2","_this","_classCallCheck2","_len","args","Array","_key","call","apply","concat","_defineProperty2","_assertThisInitialized2","setState","_createClass2","key","render","createElement","Input","state","callAll","React","Component","utils","_objectSpread2","_len2","fns","_key2","_len3","_key3","forEach","describe","test","_setup","expect","toContainKeys","_setup2","toBe"],"sources":["Input.test.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input } from \"../index\";\nimport \"jest-dom/extend-expect\";\nimport { render, cleanup } from \"@testing-library/react\";\n\nafterEach(cleanup);\n\ninterface SetupProps {\n    onChange?: () => void;\n}\n\nfunction setup(props: SetupProps = {}) {\n    const renderArg = {\n        // eslint-disable-next-line\n        onChange: (_: string) => {},\n        value: null\n    };\n    const renderProp = jest.fn(controllerArg => {\n        Object.assign(renderArg, controllerArg);\n        return null;\n    });\n\n    const onChange = props.onChange\n        ? props.onChange\n        : () => {\n              return void 0;\n          };\n\n    class Test extends React.Component {\n        public override state = { value: \"init-value\" };\n\n        onChange = (value: string) => {\n            this.setState({ value });\n        };\n\n        public override render() {\n            return (\n                <Input\n                    {...props}\n                    value={this.state.value}\n                    onChange={callAll(onChange, this.onChange)}\n                >\n                    {renderProp}\n                </Input>\n            );\n        }\n    }\n\n    const utils = render(<Test />);\n\n    return { renderArg, ...utils };\n}\n\n/**\n * This return a function that will call all the given functions with\n * the arguments with which it's called. It does a null-check before\n * attempting to call the functions and can take any number of functions.\n * @param {...Function} fns the functions to call\n * @return {Function} the function that calls all the functions\n */\nfunction callAll(...fns: ((...params: any) => void)[]) {\n    return (...args: any) => {\n        fns.forEach(fn => {\n            fn && fn(...args);\n        });\n    };\n}\n\ndescribe(\"Input tests\", () => {\n    test(\"passes expected props to render prop\", () => {\n        const { renderArg } = setup();\n\n        expect(renderArg).toContainKeys([\"value\", \"validation\", \"onChange\", \"onBlur\"]);\n    });\n\n    test(\"updates value via onChange\", () => {\n        const { renderArg } = setup();\n        expect(renderArg.value).toBe(\"init-value\");\n        renderArg.onChange(\"new-value\");\n        expect(renderArg.value).toBe(\"new-value\");\n        renderArg.onChange(\"third-value\");\n        expect(renderArg.value).toBe(\"third-value\");\n    });\n});\n"],"mappings":"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"}

package/List/CollapsibleList/index.d.ts

@@ -4,5 +4,5 @@ import { CollapsibleListProps as RmwcCollapsibleListProps } from "@rmwc/list";
 export declare type CollapsibleListProps = RmwcCollapsibleListProps & {
     children: React.ReactNode;
 };
-export declare const CollapsibleList: React.FC<CollapsibleListProps>;
+export declare const CollapsibleList: (props: CollapsibleListProps) => JSX.Element;
 export default CollapsibleList;

package/List/CollapsibleList/index.js.map

@@ -1 +1 @@
-{"version":3,"names":["require","_react","_interopRequireDefault","_list","CollapsibleList","props","default","createElement","exports","_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: React.FC<CollapsibleListProps> = props => {\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,eAA+C,GAAG,SAAlDA,eAA+CA,CAAGC,KAAK,EAAI;EACpE,oBAAOJ,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACJ,KAAA,CAAAC,eAAmB,EAAKC,KAAQ,CAAC;AAC7C,CAAC;AAACG,OAAA,CAAAJ,eAAA,GAAAA,eAAA;AAAA,IAAAK,QAAA,GAEaL,eAAe;AAAAI,OAAA,CAAAF,OAAA,GAAAG,QAAA"}
+{"version":3,"names":["require","_react","_interopRequireDefault","_list","CollapsibleList","props","default","createElement","exports","_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,GAAG,SAAlBA,eAAeA,CAAIC,KAA2B,EAAK;EAC5D,oBAAOJ,MAAA,CAAAK,OAAA,CAAAC,aAAA,CAACJ,KAAA,CAAAC,eAAmB,EAAKC,KAAQ,CAAC;AAC7C,CAAC;AAACG,OAAA,CAAAJ,eAAA,GAAAA,eAAA;AAAA,IAAAK,QAAA,GAEaL,eAAe;AAAAI,OAAA,CAAAF,OAAA,GAAAG,QAAA"}

package/List/DataList/DataList.d.ts

@@ -10,7 +10,7 @@ interface DataListProps {
     loader?: React.ReactNode;
     noData?: React.ReactNode;
     pagination?: PaginationProp;
-    setSorters?: Function | null;
+    setSorters?: ((sorter: any) => void) | null;
     sorters?: SortersProp | null;
     actions?: React.ReactNode;
     filters?: React.ReactNode;
@@ -34,9 +34,37 @@ interface DataListProps {
     setPerPage?: ((page: string) => void) | null;
     perPageOptions?: number[];
 }
-export declare const DataList: React.FC<DataListProps>;
+export declare const DataList: {
+    (props: DataListProps): JSX.Element;
+    defaultProps: {
+        children: null;
+        title: null;
+        data: null;
+        meta: null;
+        loading: boolean;
+        refresh: () => undefined;
+        setPage: null;
+        setPerPage: null;
+        perPageOptions: number[];
+        filters: null;
+        sorters: null;
+        setSorters: null;
+        actions: null;
+        multiSelectAll: (...args: any[]) => void;
+        isAllMultiSelected: () => boolean;
+        isNoneMultiSelected: () => boolean;
+        loader: JSX.Element;
+        noData: JSX.Element;
+        showOptions: {
+            refresh: boolean;
+            pagination: boolean;
+            sorters: boolean;
+            filters: boolean;
+        };
+    };
+};
 export interface ScrollListProps extends ListProps {
     children: React.ReactElement<typeof ListItem>[];
 }
-export declare const ScrollList: React.FC<ScrollListProps>;
+export declare const ScrollList: (props: ScrollListProps) => JSX.Element;
 export {};

package/List/DataList/DataList.js.map

@@ -1 +1 @@
-{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_classnames","_Loader","_NoData","_Typography","_emotion","_noop","_isEmpty","_Checkbox","_Menu","_icons","_","_DataListModalOverlay","ListContainer","styled","target","label","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","ListHeader","ListSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","scrollList","css","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","_ref","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","default","createElement","Fragment","Checkbox","indeterminate","value","onClick","MultiSelectActions","RefreshButton","refresh","RefreshIcon","Sorters","sorters","Menu","handle","SortIcon","map","sorter","MenuItem","key","setSorters","Filters","filters","FilterIcon","Pagination","pagination","setNextPage","className","classNames","disabled","hasPreviousPage","PreviousPageIcon","setPreviousPage","hasNextPage","NextPageIcon","Array","isArray","perPageOptions","setPerPage","OptionsIcon","perPage","DataList","render","loading","loader","isEmpty","noData","ch","children","showOptions","DataListModalOverlayProvider","title","actions","Typography","use","Object","keys","length","search","React","cloneElement","modalOverlayAction","subHeader","modalOverlay","exports","defaultProps","meta","setPage","noop","ScrollList","List","assign"],"sources":["DataList.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Loader from \"./Loader\";\nimport NoData from \"./NoData\";\nimport { Typography } from \"~/Typography\";\nimport { css } from \"emotion\";\nimport noop from \"lodash/noop\";\nimport isEmpty from \"lodash/isEmpty\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"~/Menu\";\n\nimport {\n    RefreshIcon,\n    SortIcon,\n    FilterIcon,\n    PreviousPageIcon,\n    NextPageIcon,\n    OptionsIcon\n} from \"./icons\";\nimport { List, ListItem, ListProps } from \"..\";\nimport { DataListModalOverlayProvider } from \"./DataListModalOverlay\";\nimport { PaginationProp, SortersProp } from \"./types\";\n\nconst ListContainer = styled(\"div\")({\n    position: \"relative\",\n    height: \"100%\",\n    \".mdc-list\": {\n        paddingBottom: 0,\n        paddingTop: 0\n    },\n    \".mdc-list-item\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 20px 10px 20px\",\n        height: \"auto\",\n        minHeight: 40,\n        \".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline\": {\n            display: \"block\"\n        },\n        \".mdc-list-item__graphic\": {\n            marginRight: 20\n        },\n        \".mdc-list-item__text\": {\n            width: \"100%\",\n            margin: \"-20px 0\",\n            padding: \"20px 0\"\n        },\n        \".mdc-list-item__meta\": {\n            alignItems: \"center\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            flexDirection: \"column\",\n            position: \"relative\",\n            padding: \"5px 0\",\n            boxSizing: \"border-box\",\n            height: \"100%\",\n            whiteSpace: \"nowrap\",\n            marginTop: -10,\n            marginBottom: -10,\n            \".webiny-list-actions\": {\n                display: \"none\"\n            },\n            \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                //position: 'absolute',\n                width: \"100%\",\n                textAlign: \"right\"\n            },\n            \".webiny-list-top-caption\": {\n                marginBottom: 20\n            }\n        },\n        \"&:hover\": {\n            \".mdc-list-item__meta\": {\n                \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                    display: \"none\"\n                },\n                \".webiny-list-actions\": {\n                    display: \"flex\",\n                    height: \"100%\",\n                    alignItems: \"center\"\n                }\n            }\n        }\n    }\n});\n\nconst ListHeader = styled.div`\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n    color: var(--mdc-theme-text-primary-on-background);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 24px;\n    max-height: 85px;\n    min-height: 85px;\n`;\n\nconst ListSubHeader = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 10px;\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n`;\n\nconst ListHeaderItem = styled(\"div\")({\n    display: \"inline-block\",\n    verticalAlign: \"middle\",\n    \"&.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst scrollList = css({\n    overflow: \"auto\",\n    height: \"calc(100vh - 235px)\"\n});\n\nconst dataListContent = css({\n    position: \"relative\",\n    height: \"100%\",\n    overflow: \"auto\"\n});\n\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListProps {\n    // Pass a function to take full control of list render.\n    children?: ((props: any) => React.ReactNode) | null;\n\n    // A title of paginated list.\n    title?: React.ReactNode;\n\n    // FormData that needs to be shown in the list.\n    data?: Record<string, any>[] | null;\n\n    // A callback that must refresh current view by repeating the previous query.\n    refresh?: (() => void) | null;\n\n    // If true, Loader component will be shown, disallowing any interaction.\n    loading?: boolean;\n\n    // Provide a custom loader. Shown while the content is loading.\n    loader?: React.ReactNode;\n\n    // Provide a custom no data component. Shown while there is no data to be shown.\n    noData?: React.ReactNode;\n\n    // Provide all pagination data, options and callbacks here.\n    pagination?: PaginationProp;\n\n    // Triggered once a sorter has been selected.\n    setSorters?: Function | null;\n\n    // Provide all sorters options and callbacks here.\n    sorters?: SortersProp | null;\n\n    // Provide actions that will be shown in the top right corner (eg. export or import actions).\n    actions?: React.ReactNode;\n\n    // Provide filters that will be shown in the top left corner (eg. filter by category or status).\n    filters?: React.ReactNode;\n\n    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).\n    multiSelectActions?: React.ReactNode;\n\n    // Provide callback that will be executed once user selects all list items.\n    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    showOptions?: {\n        refresh?: boolean;\n        pagination?: boolean;\n        filters?: boolean;\n        sorters?: boolean;\n        [key: string]: any;\n    };\n\n    // Provide search UI that will be shown in the top left corner.\n    search?: React.ReactElement;\n    // Provide simple modal UI that will be shown over the list content.\n    modalOverlay?: React.ReactElement;\n    // Provide an action element that handle toggling the \"Modal overlay\".\n    modalOverlayAction?: React.ReactElement;\n    // Provide additional UI for list sub-header.\n    subHeader?: React.ReactElement;\n\n    meta?: Record<string, any> | null;\n\n    setPage?: ((page: string) => void) | null;\n\n    setPerPage?: ((page: string) => void) | null;\n\n    perPageOptions?: number[];\n}\n\nconst MultiSelectAll: React.FC<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n    /**\n     * We can safely cast because we have defaults.\n     */\n    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =\n        props as Required<DataListProps>;\n\n    return (\n        <React.Fragment>\n            {typeof multiSelectAll === \"function\" && (\n                <ListHeaderItem>\n                    <Checkbox\n                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}\n                        value={isAllMultiSelected(data)}\n                        onClick={() => {\n                            multiSelectAll(!isAllMultiSelected(data), data);\n                        }}\n                    />\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst MultiSelectActions: React.FC<DataListProps> = props => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton: React.FC<DataListProps> = props => {\n    const refresh = props.refresh;\n    if (!refresh) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <RefreshIcon onClick={() => refresh()} />\n        </ListHeaderItem>\n    );\n};\n\nconst Sorters: React.FC<DataListProps> = props => {\n    const sorters = props.sorters;\n    if (!sorters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<SortIcon />}>\n                {sorters.map(sorter => (\n                    <MenuItem\n                        key={sorter.label}\n                        onClick={() => {\n                            if (sorters && props.setSorters) {\n                                props.setSorters(sorter.value);\n                            }\n                        }}\n                    >\n                        {sorter.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Filters: React.FC<DataListProps> = props => {\n    const filters = props.filters;\n    if (!filters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<FilterIcon />}>{filters}</Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Pagination: React.FC<DataListProps> = props => {\n    const { pagination } = props;\n    if (!pagination) {\n        return null;\n    }\n\n    return (\n        <React.Fragment>\n            {pagination.setNextPage && (\n                <React.Fragment>\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasPreviousPage\n                        })}\n                    >\n                        <PreviousPageIcon\n                            onClick={() => {\n                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {\n                                    pagination.setPreviousPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasNextPage\n                        })}\n                    >\n                        <NextPageIcon\n                            onClick={() => {\n                                if (pagination.setNextPage && pagination.hasNextPage) {\n                                    pagination.setNextPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n                </React.Fragment>\n            )}\n\n            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (\n                <ListHeaderItem>\n                    <Menu handle={<OptionsIcon />}>\n                        {pagination.setPerPage &&\n                            pagination.perPageOptions.map(perPage => (\n                                <MenuItem\n                                    key={perPage}\n                                    onClick={() =>\n                                        pagination.setPerPage && pagination.setPerPage(perPage)\n                                    }\n                                >\n                                    {perPage}\n                                </MenuItem>\n                            ))}\n                    </Menu>\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport const DataList: React.FC<DataListProps> = props => {\n    let render: React.ReactNode | null = null;\n\n    if (props.loading) {\n        render = props.loader;\n    } else if (isEmpty(props.data)) {\n        render = props.noData;\n    } else {\n        const ch = props.children;\n        render = typeof ch === \"function\" ? ch(props) : null;\n    }\n\n    const showOptions = props.showOptions || {};\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <ListHeader>\n                        <Typography use=\"headline5\">{props.title}</Typography>\n                        {props.actions}\n                    </ListHeader>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <ListSubHeader>\n                        {props.search ? React.cloneElement(props.search, props) : null}\n                        <MultiSelectAll {...props} />\n                        {showOptions.refresh && <RefreshButton {...props} />}\n                        {showOptions.pagination && <Pagination {...props} />}\n                        {showOptions.sorters && <Sorters {...props} />}\n                        {showOptions.filters && <Filters {...props} />}\n                        {props.modalOverlayAction ? (\n                            <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>\n                        ) : null}\n                        <MultiSelectActions {...props} />\n                    </ListSubHeader>\n                )}\n\n                <div className={classNames(dataListContent, \"webiny-data-list__content\")}>\n                    {props.subHeader}\n                    {render}\n                    {props.modalOverlay}\n                </div>\n            </ListContainer>\n        </DataListModalOverlayProvider>\n    );\n};\n\nDataList.defaultProps = {\n    children: null,\n    title: null,\n    data: null,\n    meta: null,\n    loading: false,\n    refresh: () => {\n        return void 0;\n    },\n    setPage: null,\n    setPerPage: null,\n    perPageOptions: [10, 25, 50],\n    filters: null,\n    sorters: null,\n    setSorters: null,\n    actions: null,\n    multiSelectAll: noop,\n    isAllMultiSelected: () => false,\n    isNoneMultiSelected: () => false,\n    loader: <Loader />,\n    noData: <NoData />,\n    showOptions: {\n        refresh: true,\n        pagination: true,\n        sorters: true,\n        filters: true\n    }\n};\n\nexport interface ScrollListProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollList: React.FC<ScrollListProps> = props => {\n    return (\n        <List {...props} className={classNames(props.className, scrollList)}>\n            {props.children}\n        </List>\n    );\n};\n"],"mappings":"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"}
+{"version":3,"names":["_react","_interopRequireDefault","require","_styled","_classnames","_Loader","_NoData","_Typography","_emotion","_noop","_isEmpty","_Checkbox","_Menu","_icons","_","_DataListModalOverlay","ListContainer","styled","target","label","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","ListHeader","ListSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","scrollList","css","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","_ref","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","default","createElement","Fragment","Checkbox","indeterminate","value","onClick","MultiSelectActions","RefreshButton","refresh","RefreshIcon","Sorters","sorters","Menu","handle","SortIcon","map","sorter","MenuItem","key","setSorters","Filters","filters","FilterIcon","Pagination","pagination","setNextPage","className","classNames","disabled","hasPreviousPage","PreviousPageIcon","setPreviousPage","hasNextPage","NextPageIcon","Array","isArray","perPageOptions","setPerPage","OptionsIcon","perPage","DataList","render","loading","loader","isEmpty","noData","ch","children","showOptions","DataListModalOverlayProvider","title","actions","Typography","use","Object","keys","length","search","React","cloneElement","modalOverlayAction","subHeader","modalOverlay","exports","defaultProps","meta","setPage","noop","ScrollList","List","assign"],"sources":["DataList.tsx"],"sourcesContent":["import React from \"react\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport Loader from \"./Loader\";\nimport NoData from \"./NoData\";\nimport { Typography } from \"~/Typography\";\nimport { css } from \"emotion\";\nimport noop from \"lodash/noop\";\nimport isEmpty from \"lodash/isEmpty\";\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"~/Menu\";\n\nimport {\n    RefreshIcon,\n    SortIcon,\n    FilterIcon,\n    PreviousPageIcon,\n    NextPageIcon,\n    OptionsIcon\n} from \"./icons\";\nimport { List, ListItem, ListProps } from \"..\";\nimport { DataListModalOverlayProvider } from \"./DataListModalOverlay\";\nimport { PaginationProp, SortersProp } from \"./types\";\n\nconst ListContainer = styled(\"div\")({\n    position: \"relative\",\n    height: \"100%\",\n    \".mdc-list\": {\n        paddingBottom: 0,\n        paddingTop: 0\n    },\n    \".mdc-list-item\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 20px 10px 20px\",\n        height: \"auto\",\n        minHeight: 40,\n        \".mdc-list-item__text, .mdc-list-item__secondary-text, .webiny-list-text-overline\": {\n            display: \"block\"\n        },\n        \".mdc-list-item__graphic\": {\n            marginRight: 20\n        },\n        \".mdc-list-item__text\": {\n            width: \"100%\",\n            margin: \"-20px 0\",\n            padding: \"20px 0\"\n        },\n        \".mdc-list-item__meta\": {\n            alignItems: \"center\",\n            display: \"flex\",\n            justifyContent: \"space-between\",\n            flexDirection: \"column\",\n            position: \"relative\",\n            padding: \"5px 0\",\n            boxSizing: \"border-box\",\n            height: \"100%\",\n            whiteSpace: \"nowrap\",\n            marginTop: -10,\n            marginBottom: -10,\n            \".webiny-list-actions\": {\n                display: \"none\"\n            },\n            \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                //position: 'absolute',\n                width: \"100%\",\n                textAlign: \"right\"\n            },\n            \".webiny-list-top-caption\": {\n                marginBottom: 20\n            }\n        },\n        \"&:hover\": {\n            \".mdc-list-item__meta\": {\n                \".webiny-list-top-caption, .webiny-list-bottom-caption\": {\n                    display: \"none\"\n                },\n                \".webiny-list-actions\": {\n                    display: \"flex\",\n                    height: \"100%\",\n                    alignItems: \"center\"\n                }\n            }\n        }\n    }\n});\n\nconst ListHeader = styled.div`\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n    color: var(--mdc-theme-text-primary-on-background);\n    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    padding: 0 24px;\n    max-height: 85px;\n    min-height: 85px;\n`;\n\nconst ListSubHeader = styled.div`\n    display: flex;\n    justify-content: flex-end;\n    align-items: center;\n    padding: 10px;\n    border-bottom: 1px solid var(--mdc-theme-on-background);\n`;\n\nconst ListHeaderItem = styled(\"div\")({\n    display: \"inline-block\",\n    verticalAlign: \"middle\",\n    \"&.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst scrollList = css({\n    overflow: \"auto\",\n    height: \"calc(100vh - 235px)\"\n});\n\nconst dataListContent = css({\n    position: \"relative\",\n    height: \"100%\",\n    overflow: \"auto\"\n});\n\n// This was copied from \"./types\" so that it can be outputted in docs.\ninterface DataListProps {\n    // Pass a function to take full control of list render.\n    children?: ((props: any) => React.ReactNode) | null;\n\n    // A title of paginated list.\n    title?: React.ReactNode;\n\n    // FormData that needs to be shown in the list.\n    data?: Record<string, any>[] | null;\n\n    // A callback that must refresh current view by repeating the previous query.\n    refresh?: (() => void) | null;\n\n    // If true, Loader component will be shown, disallowing any interaction.\n    loading?: boolean;\n\n    // Provide a custom loader. Shown while the content is loading.\n    loader?: React.ReactNode;\n\n    // Provide a custom no data component. Shown while there is no data to be shown.\n    noData?: React.ReactNode;\n\n    // Provide all pagination data, options and callbacks here.\n    pagination?: PaginationProp;\n\n    // Triggered once a sorter has been selected.\n    setSorters?: ((sorter: any) => void) | null;\n\n    // Provide all sorters options and callbacks here.\n    sorters?: SortersProp | null;\n\n    // Provide actions that will be shown in the top right corner (eg. export or import actions).\n    actions?: React.ReactNode;\n\n    // Provide filters that will be shown in the top left corner (eg. filter by category or status).\n    filters?: React.ReactNode;\n\n    // Provide actions that can be executed on one or more multi-selected list items (eg. export or delete).\n    multiSelectActions?: React.ReactNode;\n\n    // Provide callback that will be executed once user selects all list items.\n    multiSelectAll?: (value: boolean, data: Record<string, any>[] | null) => void;\n\n    // Callback which returns true if all items were selected, otherwise returns false.\n    isAllMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    // Callback which returns true if none of the items were selected, otherwise returns false.\n    isNoneMultiSelected?: (data: Record<string, any>[] | null) => boolean;\n\n    showOptions?: {\n        refresh?: boolean;\n        pagination?: boolean;\n        filters?: boolean;\n        sorters?: boolean;\n        [key: string]: any;\n    };\n\n    // Provide search UI that will be shown in the top left corner.\n    search?: React.ReactElement;\n    // Provide simple modal UI that will be shown over the list content.\n    modalOverlay?: React.ReactElement;\n    // Provide an action element that handle toggling the \"Modal overlay\".\n    modalOverlayAction?: React.ReactElement;\n    // Provide additional UI for list sub-header.\n    subHeader?: React.ReactElement;\n\n    meta?: Record<string, any> | null;\n\n    setPage?: ((page: string) => void) | null;\n\n    setPerPage?: ((page: string) => void) | null;\n\n    perPageOptions?: number[];\n}\n\nconst MultiSelectAll = (props: DataListProps) => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n    /**\n     * We can safely cast because we have defaults.\n     */\n    const { isAllMultiSelected, isNoneMultiSelected, multiSelectAll, data } =\n        props as Required<DataListProps>;\n\n    return (\n        <React.Fragment>\n            {typeof multiSelectAll === \"function\" && (\n                <ListHeaderItem>\n                    <Checkbox\n                        indeterminate={!isAllMultiSelected(data) && !isNoneMultiSelected(data)}\n                        value={isAllMultiSelected(data)}\n                        onClick={() => {\n                            multiSelectAll(!isAllMultiSelected(data), data);\n                        }}\n                    />\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nconst MultiSelectActions = (props: DataListProps) => {\n    const { multiSelectActions } = props;\n    if (!multiSelectActions) {\n        return null;\n    }\n\n    return <ListHeaderItem>{multiSelectActions}</ListHeaderItem>;\n};\n\nconst RefreshButton = (props: DataListProps) => {\n    const refresh = props.refresh;\n    if (!refresh) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <RefreshIcon onClick={() => refresh()} />\n        </ListHeaderItem>\n    );\n};\n\nconst Sorters = (props: DataListProps) => {\n    const sorters = props.sorters;\n    if (!sorters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<SortIcon />}>\n                {sorters.map(sorter => (\n                    <MenuItem\n                        key={sorter.label}\n                        onClick={() => {\n                            if (sorters && props.setSorters) {\n                                props.setSorters(sorter.value);\n                            }\n                        }}\n                    >\n                        {sorter.label}\n                    </MenuItem>\n                ))}\n            </Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Filters = (props: DataListProps) => {\n    const filters = props.filters;\n    if (!filters) {\n        return null;\n    }\n\n    return (\n        <ListHeaderItem>\n            <Menu handle={<FilterIcon />}>{filters}</Menu>\n        </ListHeaderItem>\n    );\n};\n\nconst Pagination = (props: DataListProps) => {\n    const { pagination } = props;\n    if (!pagination) {\n        return null;\n    }\n\n    return (\n        <React.Fragment>\n            {pagination.setNextPage && (\n                <React.Fragment>\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasPreviousPage\n                        })}\n                    >\n                        <PreviousPageIcon\n                            onClick={() => {\n                                if (pagination.setPreviousPage && pagination.hasPreviousPage) {\n                                    pagination.setPreviousPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n\n                    <ListHeaderItem\n                        className={classNames({\n                            disabled: !pagination.hasNextPage\n                        })}\n                    >\n                        <NextPageIcon\n                            onClick={() => {\n                                if (pagination.setNextPage && pagination.hasNextPage) {\n                                    pagination.setNextPage();\n                                }\n                            }}\n                        />\n                    </ListHeaderItem>\n                </React.Fragment>\n            )}\n\n            {Array.isArray(pagination.perPageOptions) && pagination.setPerPage && (\n                <ListHeaderItem>\n                    <Menu handle={<OptionsIcon />}>\n                        {pagination.setPerPage &&\n                            pagination.perPageOptions.map(perPage => (\n                                <MenuItem\n                                    key={perPage}\n                                    onClick={() =>\n                                        pagination.setPerPage && pagination.setPerPage(perPage)\n                                    }\n                                >\n                                    {perPage}\n                                </MenuItem>\n                            ))}\n                    </Menu>\n                </ListHeaderItem>\n            )}\n        </React.Fragment>\n    );\n};\n\nexport const DataList = (props: DataListProps) => {\n    let render: React.ReactNode | null = null;\n\n    if (props.loading) {\n        render = props.loader;\n    } else if (isEmpty(props.data)) {\n        render = props.noData;\n    } else {\n        const ch = props.children;\n        render = typeof ch === \"function\" ? ch(props) : null;\n    }\n\n    const showOptions = props.showOptions || {};\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <ListHeader>\n                        <Typography use=\"headline5\">{props.title}</Typography>\n                        {props.actions}\n                    </ListHeader>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <ListSubHeader>\n                        {props.search ? React.cloneElement(props.search, props) : null}\n                        <MultiSelectAll {...props} />\n                        {showOptions.refresh && <RefreshButton {...props} />}\n                        {showOptions.pagination && <Pagination {...props} />}\n                        {showOptions.sorters && <Sorters {...props} />}\n                        {showOptions.filters && <Filters {...props} />}\n                        {props.modalOverlayAction ? (\n                            <ListHeaderItem>{props.modalOverlayAction}</ListHeaderItem>\n                        ) : null}\n                        <MultiSelectActions {...props} />\n                    </ListSubHeader>\n                )}\n\n                <div className={classNames(dataListContent, \"webiny-data-list__content\")}>\n                    {props.subHeader}\n                    {render}\n                    {props.modalOverlay}\n                </div>\n            </ListContainer>\n        </DataListModalOverlayProvider>\n    );\n};\n\nDataList.defaultProps = {\n    children: null,\n    title: null,\n    data: null,\n    meta: null,\n    loading: false,\n    refresh: () => {\n        return void 0;\n    },\n    setPage: null,\n    setPerPage: null,\n    perPageOptions: [10, 25, 50],\n    filters: null,\n    sorters: null,\n    setSorters: null,\n    actions: null,\n    multiSelectAll: noop,\n    isAllMultiSelected: () => false,\n    isNoneMultiSelected: () => false,\n    loader: <Loader />,\n    noData: <NoData />,\n    showOptions: {\n        refresh: true,\n        pagination: true,\n        sorters: true,\n        filters: true\n    }\n};\n\nexport interface ScrollListProps extends ListProps {\n    children: React.ReactElement<typeof ListItem>[];\n}\n\nexport const ScrollList = (props: ScrollListProps) => {\n    return (\n        <List {...props} className={classNames(props.className, scrollList)}>\n            {props.children}\n        </List>\n    );\n};\n"],"mappings":"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"}

package/List/DataList/DataList.stories.js

@@ -83,7 +83,7 @@ story.add("data list", function () {
   return /*#__PURE__*/_react.default.createElement(_Story.Story, null, /*#__PURE__*/_react.default.createElement(_Story.StoryReadme, null, _README.default), /*#__PURE__*/_react.default.createElement(_Story.StorySandbox, null, /*#__PURE__*/_react.default.createElement(_Story.StorySandboxExample, null, /*#__PURE__*/_react.default.createElement(_DataList.DataList, Object.assign({}, generalOptionsAndCallbacks, {
     data: dataProp,
     meta: metaProp
-    // @ts-ignore
+    // @ts-expect-error
     ,
     sorters: sortersProp.list
   }), function (_ref) {