@webiny/ui 5.29.0-beta.2 → 5.30.0-beta.1

package/ImageEditor/ImageEditor.js

@@ -310,10 +310,12 @@ var ImageEditor = /*#__PURE__*/function (_React$Component) {
         image: this.image,
         canvas: this.canvas
       }), /*#__PURE__*/_react.default.createElement(ApplyCancelActions, null, /*#__PURE__*/_react.default.createElement(_Button.ButtonSecondary, {
+        "data-testid": "button-cancel",
         onClick: function onClick() {
           _this3.cancelActiveTool();
         }
       }, "Cancel"), "\xA0", /*#__PURE__*/_react.default.createElement(_Button.ButtonPrimary, {
+        "data-testid": "button-apply",
         onClick: function onClick() {
           _this3.applyActiveTool();
         }

package/ImageEditor/ImageEditor.js.map

@@ -1 +1 @@
-{"version":3,"names":["toolbar","flip","filter","crop","rotate","Toolbar","styled","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","tool","src","React","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","name","then","updateCanvas","setTimeout","key","option","autoEnable","activateTool","tools","children","editor","map","classNames","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-ignore\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-ignore\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: Function;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: Function;\n    onToolDeactivate?: Function;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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"}
+{"version":3,"names":["toolbar","flip","filter","crop","rotate","Toolbar","styled","display","justifyContent","alignItems","backgroundColor","margin","padding","position","width","boxSizing","zIndex","opacity","pointerEvents","ToolOptions","borderTop","ApplyCancelActions","textAlign","initScripts","Promise","resolve","window","Caman","loadScript","ImageEditor","tool","src","React","createRef","props","image","Image","canvas","current","onload","height","ctx","getContext","drawImage","setState","tt","onActivate","options","getToolOptions","startsWith","toDataURL","state","apply","deactivateTool","cancel","name","then","updateCanvas","setTimeout","key","option","autoEnable","activateTool","tools","children","editor","map","classNames","disabled","icon","renderForm","cancelActiveTool","applyActiveTool","maxWidth","render","getCanvasDataUrl","activeTool","Component"],"sources":["ImageEditor.tsx"],"sourcesContent":["import React from \"react\";\nimport { flip, filter, crop, rotate } from \"./toolbar\";\nimport { ImageEditorTool, ToolbarTool } from \"./toolbar/types\";\nimport styled from \"@emotion/styled\";\nimport classNames from \"classnames\";\nimport { ButtonSecondary, ButtonPrimary } from \"../Button\";\n/**\n * Package load-script does not have types.\n */\n// @ts-ignore\nimport loadScript from \"load-script\";\n\nconst toolbar = {\n    flip,\n    filter,\n    crop,\n    rotate\n};\n\nconst Toolbar = styled(\"div\")({\n    display: \"flex\",\n    justifyContent: \"center\",\n    alignItems: \"center\",\n    backgroundColor: \"var(--mdc-theme-secondary)\",\n    margin: \"-24px -24px 0px -24px\",\n    padding: 2,\n    position: \"absolute\",\n    width: \"100%\",\n    boxSizing: \"border-box\",\n    zIndex: 10,\n    \"> div.disabled\": {\n        opacity: 0.5,\n        pointerEvents: \"none\"\n    }\n});\n\nconst ToolOptions = styled(\"div\")({\n    margin: \"50px -24px 10px -24px\",\n    boxSizing: \"border-box\",\n    padding: 10,\n    backgroundColor: \"var(--mdc-theme-background)\",\n    borderTop: \"1px solid var(--mdc-theme-on-background)\"\n});\n\nconst ApplyCancelActions = styled(\"div\")({\n    textAlign: \"center\"\n});\n\nconst initScripts = (): Promise<string> => {\n    return new Promise((resolve: any) => {\n        // @ts-ignore\n        if (window.Caman) {\n            return resolve();\n        }\n        return loadScript(\n            \"https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js\",\n            resolve\n        );\n    });\n};\n\ninterface RenderPropArgs {\n    render: Function;\n    getCanvasDataUrl: () => string;\n    activeTool: ImageEditorTool | null;\n    applyActiveTool: () => Promise<void>;\n    cancelActiveTool: () => Promise<void>;\n}\n\ninterface ImageEditorPropsPropsOptions {\n    autoEnable: boolean;\n}\n\ninterface ImageEditorProps {\n    src: string;\n    tools: ToolbarTool[];\n    options?: {\n        flip: ImageEditorPropsPropsOptions;\n        filter: ImageEditorPropsPropsOptions;\n        crop: ImageEditorPropsPropsOptions;\n        rotate: ImageEditorPropsPropsOptions;\n    };\n    onToolActivate?: Function;\n    onToolDeactivate?: Function;\n    children?: (props: RenderPropArgs) => React.ReactNode;\n}\n\ninterface ImageEditorState {\n    tool: ImageEditorTool | null;\n    src: string;\n}\n\nclass ImageEditor extends React.Component<ImageEditorProps, ImageEditorState> {\n    static defaultProps: Partial<ImageEditorProps> = {\n        tools: [\"crop\", \"flip\", \"rotate\", \"filter\"]\n    };\n\n    public override state: ImageEditorState = {\n        tool: null,\n        src: \"\"\n    };\n\n    public canvas = React.createRef<HTMLCanvasElement>();\n    public image?: HTMLImageElement;\n\n    public override componentDidMount() {\n        initScripts().then(() => {\n            this.updateCanvas();\n            setTimeout(() => {\n                const { options } = this.props;\n                if (!options || typeof options !== \"object\") {\n                    return;\n                }\n                for (const key in options) {\n                    const option = options[key as ToolbarTool];\n                    if (option.autoEnable === true) {\n                        const tool: ImageEditorTool | null = toolbar[key as ToolbarTool];\n                        tool && this.activateTool(tool);\n                        break;\n                    }\n                }\n            }, 250);\n        });\n    }\n\n    private readonly updateCanvas = (): void => {\n        const { src } = this.props;\n        this.image = new window.Image();\n        const canvas = this.canvas.current;\n        if (canvas) {\n            this.image.onload = () => {\n                if (this.image) {\n                    canvas.width = this.image.width;\n                    canvas.height = this.image.height;\n                    const ctx = canvas.getContext(\"2d\") as CanvasRenderingContext2D;\n                    ctx.drawImage(this.image, 0, 0);\n                }\n            };\n\n            this.image.src = src;\n        }\n    };\n\n    private readonly activateTool = (tool: ToolbarTool | ImageEditorTool): void => {\n        if (typeof tool === \"string\") {\n            tool = toolbar[tool];\n        }\n\n        this.setState({ tool }, () => {\n            const tt = tool as ImageEditorTool;\n            typeof tt.onActivate === \"function\" &&\n                tt.onActivate({ canvas: this.canvas, options: this.getToolOptions(tt) });\n        });\n    };\n\n    private readonly deactivateTool = (): void => {\n        this.setState({\n            tool: null\n        });\n    };\n\n    public readonly getCanvasDataUrl = (): string => {\n        const canvas = this.canvas.current as HTMLCanvasElement;\n        if (canvas) {\n            const { src } = this.props;\n            if (src.startsWith(\"data:image/jpeg;\")) {\n                return canvas.toDataURL(\"image/jpeg\", 1.0);\n            }\n\n            return canvas.toDataURL();\n        }\n\n        return \"\";\n    };\n\n    private readonly applyActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.apply) {\n            await tool.apply({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly cancelActiveTool = async (): Promise<void> => {\n        const { tool } = this.state;\n        if (!tool) {\n            return;\n        }\n\n        if (tool.cancel) {\n            await tool.cancel({\n                canvas: this.canvas\n            });\n        }\n        this.deactivateTool();\n    };\n\n    private readonly getToolOptions = (\n        tool: ImageEditorTool\n    ): Partial<ImageEditorPropsPropsOptions> => {\n        const { options } = this.props;\n        if (!options || typeof options !== \"object\") {\n            return {};\n        }\n\n        return options[tool.name as ToolbarTool] || {};\n    };\n\n    public override render(): React.ReactNode {\n        const { src, tools, children } = this.props;\n        const { tool } = this.state;\n        const editor = (\n            <React.Fragment>\n                <Toolbar>\n                    {tools.map(key => {\n                        const tool: ImageEditorTool = toolbar[key];\n                        if (!tool) {\n                            return null;\n                        }\n\n                        return (\n                            <div key={key} className={classNames({ disabled: this.state.tool })}>\n                                {tool.icon({\n                                    activateTool: () => this.activateTool(tool)\n                                })}\n                            </div>\n                        );\n                    })}\n                </Toolbar>\n\n                <ToolOptions>\n                    {tool ? (\n                        <>\n                            {typeof tool.renderForm === \"function\" &&\n                                tool.renderForm({\n                                    options: this.getToolOptions(tool as ImageEditorTool),\n                                    image: this.image as HTMLImageElement,\n                                    canvas: this.canvas\n                                })}\n\n                            <ApplyCancelActions>\n                                <ButtonSecondary\n                                    data-testid=\"button-cancel\"\n                                    onClick={() => {\n                                        this.cancelActiveTool();\n                                    }}\n                                >\n                                    Cancel\n                                </ButtonSecondary>\n                                &nbsp;\n                                <ButtonPrimary\n                                    data-testid=\"button-apply\"\n                                    onClick={() => {\n                                        this.applyActiveTool();\n                                    }}\n                                >\n                                    Apply\n                                </ButtonPrimary>\n                            </ApplyCancelActions>\n                        </>\n                    ) : (\n                        <div style={{ textAlign: \"center\" }}>\n                            Select a tool to start working on your image.\n                        </div>\n                    )}\n                </ToolOptions>\n\n                <div style={{ margin: \"0 auto\", textAlign: \"center\" }}>\n                    <canvas\n                        key={src}\n                        id={\"canvas\"}\n                        style={{ maxWidth: 700 }}\n                        ref={this.canvas as React.Ref<any>}\n                    />\n                </div>\n            </React.Fragment>\n        );\n\n        if (typeof children === \"function\") {\n            return children({\n                render: () => editor,\n                // canvas: this.canvas,\n                getCanvasDataUrl: this.getCanvasDataUrl,\n                activeTool: this.state.tool,\n                applyActiveTool: this.applyActiveTool,\n                cancelActiveTool: this.cancelActiveTool\n            });\n        }\n\n        return editor;\n    }\n}\n\nexport { ImageEditor };\n"],"mappings":"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"}

package/ImageUpload/styled.d.ts

@@ -4,15 +4,15 @@ export declare const AddImageWrapperRound: import("@emotion/styled-base").Styled
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "theme" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement> & Pick<Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, keyof import("react").HTMLAttributes<HTMLDivElement>> & {
     theme?: object | undefined;
 } & {
     children?: import("react").ReactNode;
-}, "theme" | "key" | keyof import("react").HTMLAttributes<HTMLDivElement>> & {
+}, "key" | keyof import("react").HTMLAttributes<HTMLDivElement> | "theme"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, "theme" | keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
+}, keyof import("react").HTMLAttributes<HTMLDivElement> | "theme">, object>;
 export declare const RemoveImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const EditImage: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;
 export declare const ImagePreviewWrapper: import("@emotion/styled-base").StyledComponent<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, Pick<import("react").ClassAttributes<HTMLDivElement> & import("react").HTMLAttributes<HTMLDivElement>, keyof import("react").HTMLAttributes<HTMLDivElement>>, object>;

package/Input/Input.d.ts

@@ -14,6 +14,7 @@ export declare type InputProps = FormComponentProps & TextFieldProps & {
     onKeyDown?: (e: React.SyntheticEvent<HTMLInputElement>) => any;
     onEnter?: () => any;
     className?: string;
+    "data-testid"?: string;
 };
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.

package/Input/Input.js

@@ -33,12 +33,22 @@ var _FormElementMessage = require("../FormElementMessage");
 
 var _pick = _interopRequireDefault(require("lodash/pick"));
 
+var _emotion = require("emotion");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
 var _excluded = ["autoFocus", "value", "label", "description", "placeholder", "rows", "validation", "icon", "trailingIcon", "onEnter"];
 
+/**
+ * fix label position when autofilled
+ * @type {string}
+ */
+var webinyInputStyles = /*#__PURE__*/(0, _emotion.css)(".mdc-text-field__input:-webkit-autofill + .mdc-floating-label{transform:translateY(-106%) scale(0.75);}}label:webinyInputStyles;");
 /**
  * Use Input component to store short string values, like first name, last name, e-mail etc.
  * Additionally, with rows prop, it can also be turned into a text area, to store longer strings.
  */
+
 var Input = /*#__PURE__*/function (_React$Component) {
   (0, _inherits2.default)(Input, _React$Component);
 
@@ -153,7 +163,9 @@ var Input = /*#__PURE__*/function (_React$Component) {
         icon: icon,
         placeholder: !label && placeholder || undefined,
         trailingIcon: trailingIcon,
-        rows: this.props.rows
+        rows: this.props.rows,
+        className: (0, _classnames.default)("webiny-ui-input", webinyInputStyles),
+        "data-testid": props["data-testid"]
       })), validationIsValid === false && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, {
         error: true
       }, validationMessage), validationIsValid !== false && description && /*#__PURE__*/_react.default.createElement(_FormElementMessage.FormElementMessage, null, description));

package/Input/Input.js.map

@@ -1 +1 @@
-{"version":3,"names":["Input","e","props","onChange","rawOnChange","target","value","validate","onBlur","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","inputValue","validationIsValid","isValid","validationMessage","message","pick","rmwcProps","key","onKeyDown","rest","Boolean","undefined","React","Component"],"sources":["Input.tsx"],"sourcesContent":["import React 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\";\n\nexport type InputProps = FormComponentProps &\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\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\nexport class Input extends React.Component<InputProps> {\n    static defaultProps: InputProps = {\n        rawOnChange: false\n    };\n\n    // IconProps directly passed to RMWC\n    static 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\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { onChange, rawOnChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        // @ts-ignore\n        onChange(rawOnChange ? e : e.target.value);\n    };\n\n    onBlur = async (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { validate, onBlur } = this.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\n    public override render() {\n        const {\n            autoFocus,\n            value,\n            label,\n            description,\n            placeholder,\n            rows,\n            validation,\n            icon,\n            trailingIcon,\n            onEnter,\n            ...props\n        } = this.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        return (\n            <React.Fragment>\n                <TextField\n                    {...pick(props, Input.rmwcProps)}\n                    onKeyDown={(e, ...rest) => {\n                        if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                            onEnter();\n                        }\n\n                        if (typeof props.onKeyDown === \"function\") {\n                            return props.onKeyDown(e, ...rest);\n                        }\n                    }}\n                    autoFocus={autoFocus}\n                    textarea={Boolean(rows)}\n                    value={inputValue}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    label={label}\n                    icon={icon}\n                    placeholder={(!label && placeholder) || undefined}\n                    trailingIcon={trailingIcon}\n                    rows={this.props.rows}\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}\n"],"mappings":"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"}
+{"version":3,"names":["webinyInputStyles","css","Input","e","props","onChange","rawOnChange","target","value","validate","onBlur","persist","autoFocus","label","description","placeholder","rows","validation","icon","trailingIcon","onEnter","inputValue","validationIsValid","isValid","validationMessage","message","pick","rmwcProps","key","onKeyDown","rest","Boolean","undefined","classNames","React","Component"],"sources":["Input.tsx"],"sourcesContent":["import React 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 { css } from \"emotion\";\nimport classNames from \"classnames\";\n\nexport type InputProps = FormComponentProps &\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\n/**\n * fix label position when autofilled\n * @type {string}\n */\nconst webinyInputStyles = css`\n    .mdc-text-field__input:-webkit-autofill + .mdc-floating-label {\n            transform: translateY(-106%) scale(0.75);\n        }\n    }\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\nexport class Input extends React.Component<InputProps> {\n    static defaultProps: InputProps = {\n        rawOnChange: false\n    };\n\n    // IconProps directly passed to RMWC\n    static 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\n    onChange = (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { onChange, rawOnChange } = this.props;\n        if (!onChange) {\n            return;\n        }\n\n        // @ts-ignore\n        onChange(rawOnChange ? e : e.target.value);\n    };\n\n    onBlur = async (e: React.SyntheticEvent<HTMLInputElement>) => {\n        const { validate, onBlur } = this.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\n    public override render() {\n        const {\n            autoFocus,\n            value,\n            label,\n            description,\n            placeholder,\n            rows,\n            validation,\n            icon,\n            trailingIcon,\n            onEnter,\n            ...props\n        } = this.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        return (\n            <React.Fragment>\n                <TextField\n                    {...pick(props, Input.rmwcProps)}\n                    onKeyDown={(e, ...rest) => {\n                        if (typeof onEnter === \"function\" && e.key === \"Enter\") {\n                            onEnter();\n                        }\n\n                        if (typeof props.onKeyDown === \"function\") {\n                            return props.onKeyDown(e, ...rest);\n                        }\n                    }}\n                    autoFocus={autoFocus}\n                    textarea={Boolean(rows)}\n                    value={inputValue}\n                    onChange={this.onChange}\n                    onBlur={this.onBlur}\n                    label={label}\n                    icon={icon}\n                    placeholder={(!label && placeholder) || undefined}\n                    trailingIcon={trailingIcon}\n                    rows={this.props.rows}\n                    className={classNames(\"webiny-ui-input\", webinyInputStyles)}\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}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AAGA;;AACA;;;;AAuCA;AACA;AACA;AACA;AACA,IAAMA,iBAAiB,oBAAGC,YAAH,qIAAvB;AAOA;AACA;AACA;AACA;;IAEaC,K;;;;;;;;;;;;;;;2FA0BE,UAACC,CAAD,EAA+C;MACtD,kBAAkC,MAAKC,KAAvC;MAAA,IAAQC,QAAR,eAAQA,QAAR;MAAA,IAAkBC,WAAlB,eAAkBA,WAAlB;;MACA,IAAI,CAACD,QAAL,EAAe;QACX;MACH,CAJqD,CAMtD;;;MACAA,QAAQ,CAACC,WAAW,GAAGH,CAAH,GAAOA,CAAC,CAACI,MAAF,CAASC,KAA5B,CAAR;IACH,C;;wGAEQ,iBAAOL,CAAP;QAAA;;QAAA;UAAA;YAAA;cAAA;gBAAA,eACwB,MAAKC,KAD7B,EACGK,QADH,gBACGA,QADH,EACaC,MADb,gBACaA,MADb;;gBAAA,KAEDD,QAFC;kBAAA;kBAAA;gBAAA;;gBAGD;gBACA;gBACAN,CAAC,CAACQ,OAAF;gBALC;gBAAA,OAMKF,QAAQ,EANb;;cAAA;gBAQLC,MAAM,IAAIA,MAAM,CAACP,CAAD,CAAhB;;cARK;cAAA;gBAAA;YAAA;UAAA;QAAA;MAAA,C;;;;;;;;;;;WAWT,kBAAyB;MACrB,mBAYI,KAAKC,KAZT;MAAA,IACIQ,SADJ,gBACIA,SADJ;MAAA,IAEIJ,KAFJ,gBAEIA,KAFJ;MAAA,IAGIK,KAHJ,gBAGIA,KAHJ;MAAA,IAIIC,WAJJ,gBAIIA,WAJJ;MAAA,IAKIC,WALJ,gBAKIA,WALJ;MAAA,IAMIC,IANJ,gBAMIA,IANJ;MAAA,IAOIC,UAPJ,gBAOIA,UAPJ;MAAA,IAQIC,IARJ,gBAQIA,IARJ;MAAA,IASIC,YATJ,gBASIA,YATJ;MAAA,IAUIC,OAVJ,gBAUIA,OAVJ;MAAA,IAWOhB,KAXP;MAcA,IAAIiB,UAAU,GAAGb,KAAjB;;MACA,IAAIA,KAAK,KAAK,IAAV,IAAkB,OAAOA,KAAP,KAAiB,WAAvC,EAAoD;QAChDa,UAAU,GAAG,EAAb;MACH;;MAED,YAAmEJ,UAAU,IAAI,EAAjF;MAAA,IAAiBK,iBAAjB,SAAQC,OAAR;MAAA,IAA6CC,iBAA7C,SAAoCC,OAApC;;MAEA,oBACI,6BAAC,cAAD,CAAO,QAAP,qBACI,6BAAC,oBAAD,oBACQ,IAAAC,aAAA,EAAKtB,KAAL,EAAYF,KAAK,CAACyB,SAAlB,CADR;QAEI,SAAS,EAAE,mBAACxB,CAAD,EAAgB;UACvB,IAAI,OAAOiB,OAAP,KAAmB,UAAnB,IAAiCjB,CAAC,CAACyB,GAAF,KAAU,OAA/C,EAAwD;YACpDR,OAAO;UACV;;UAED,IAAI,OAAOhB,KAAK,CAACyB,SAAb,KAA2B,UAA/B,EAA2C;YAAA,mCAL7BC,IAK6B;cAL7BA,IAK6B;YAAA;;YACvC,OAAO1B,KAAK,CAACyB,SAAN,OAAAzB,KAAK,GAAWD,CAAX,SAAiB2B,IAAjB,EAAZ;UACH;QACJ,CAVL;QAWI,SAAS,EAAElB,SAXf;QAYI,QAAQ,EAAEmB,OAAO,CAACf,IAAD,CAZrB;QAaI,KAAK,EAAEK,UAbX;QAcI,QAAQ,EAAE,KAAKhB,QAdnB;QAeI,MAAM,EAAE,KAAKK,MAfjB;QAgBI,KAAK,EAAEG,KAhBX;QAiBI,IAAI,EAAEK,IAjBV;QAkBI,WAAW,EAAG,CAACL,KAAD,IAAUE,WAAX,IAA2BiB,SAlB5C;QAmBI,YAAY,EAAEb,YAnBlB;QAoBI,IAAI,EAAE,KAAKf,KAAL,CAAWY,IApBrB;QAqBI,SAAS,EAAE,IAAAiB,mBAAA,EAAW,iBAAX,EAA8BjC,iBAA9B,CArBf;QAsBI,eAAaI,KAAK,CAAC,aAAD;MAtBtB,GADJ,EA0BKkB,iBAAiB,KAAK,KAAtB,iBACG,6BAAC,sCAAD;QAAoB,KAAK;MAAzB,GAA2BE,iBAA3B,CA3BR,EA6BKF,iBAAiB,KAAK,KAAtB,IAA+BR,WAA/B,iBACG,6BAAC,sCAAD,QAAqBA,WAArB,CA9BR,CADJ;IAmCH;;;EAxGsBoB,cAAA,CAAMC,S;;;8BAApBjC,K,kBACyB;EAC9BI,WAAW,EAAE;AADiB,C;8BADzBJ,K,eAMU,CACf,OADe,EAEf,MAFe,EAGf,MAHe,EAIf,UAJe,EAKf,UALe,EAMf,aANe,EAOf,UAPe,EAQf,WARe,EASf,YATe,EAUf,SAVe,EAWf,SAXe,EAYf,WAZe,EAaf,WAbe,EAcf,UAde,EAef,WAfe,EAgBf,WAhBe,EAiBf,gBAjBe,C"}

package/List/DataList/DataList.js.map

@@ -1 +1 @@
-{"version":3,"names":["ListContainer","styled","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","listHeader","css","color","listSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","listTitle","listActions","scrollList","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","MultiSelectActions","RefreshButton","refresh","Sorters","sorters","map","sorter","label","setSorters","value","Filters","filters","Pagination","pagination","setNextPage","classNames","disabled","hasPreviousPage","setPreviousPage","hasNextPage","Array","isArray","perPageOptions","setPerPage","perPage","Search","search","React","cloneElement","DataList","render","loading","loader","isEmpty","noData","ch","children","showOptions","listHeaderActionsCellSpan","actions","listHeaderTitleCellSpan","title","Object","keys","length","justifySelf","modalOverlayAction","subHeader","modalOverlay","defaultProps","meta","setPage","noop","ScrollList","className"],"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\";\n\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"../../Menu\";\nimport { Grid, Cell } from \"../../Grid\";\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 = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    width: \"100%\"\n});\n\nconst listSubHeader = css({\n    width: \"100%\",\n    \"&.mdc-layout-grid\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 24px 10px 12px\",\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\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 listTitle = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst listActions = css({\n    textAlign: \"right\"\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\nconst Search: React.FC<DataListProps> = props => {\n    if (!props.search) {\n        return null;\n    }\n    return <Cell span={7}>{React.cloneElement(props.search, props)}</Cell>;\n};\n\nexport const DataList: React.FC<DataListProps> = props => {\n    let render = 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    const listHeaderActionsCellSpan = props.actions ? 7 : 0;\n    const listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <Grid className={listHeader}>\n                        <Cell span={listHeaderTitleCellSpan} className={listTitle}>\n                            <Typography use=\"headline5\">{props.title}</Typography>\n                        </Cell>\n                        {props.actions && (\n                            <Cell span={listHeaderActionsCellSpan} className={listActions}>\n                                {props.actions}\n                            </Cell>\n                        )}\n                    </Grid>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <Grid className={listSubHeader}>\n                        <Search {...props} />\n                        <Cell span={props.search ? 5 : 12} style={{ justifySelf: \"end\" }}>\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                        </Cell>\n                    </Grid>\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":["ListContainer","styled","position","height","paddingBottom","paddingTop","borderBottom","padding","minHeight","display","marginRight","width","margin","alignItems","justifyContent","flexDirection","boxSizing","whiteSpace","marginTop","marginBottom","textAlign","listHeader","css","color","listSubHeader","ListHeaderItem","verticalAlign","opacity","pointerEvents","listTitle","listActions","scrollList","overflow","dataListContent","MultiSelectAll","props","multiSelectActions","isAllMultiSelected","isNoneMultiSelected","multiSelectAll","data","MultiSelectActions","RefreshButton","refresh","Sorters","sorters","map","sorter","label","setSorters","value","Filters","filters","Pagination","pagination","setNextPage","classNames","disabled","hasPreviousPage","setPreviousPage","hasNextPage","Array","isArray","perPageOptions","setPerPage","perPage","Search","search","React","cloneElement","DataList","render","loading","loader","isEmpty","noData","ch","children","showOptions","listHeaderActionsCellSpan","actions","listHeaderTitleCellSpan","title","Object","keys","length","justifySelf","modalOverlayAction","subHeader","modalOverlay","defaultProps","meta","setPage","noop","ScrollList","className"],"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\";\n\nimport { Checkbox } from \"../../Checkbox\";\nimport { Menu, MenuItem } from \"../../Menu\";\nimport { Grid, Cell } from \"../../Grid\";\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 = css({\n    borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n    color: \"var(--mdc-theme-text-primary-on-background)\",\n    width: \"100%\"\n});\n\nconst listSubHeader = css({\n    width: \"100%\",\n    \"&.mdc-layout-grid\": {\n        borderBottom: \"1px solid var(--mdc-theme-on-background)\",\n        padding: \"10px 24px 10px 12px\",\n        color: \"var(--mdc-theme-text-primary-on-background)\"\n    }\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 listTitle = css({\n    display: \"flex\",\n    alignItems: \"center\"\n});\n\nconst listActions = css({\n    textAlign: \"right\"\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\nconst Search: React.FC<DataListProps> = props => {\n    if (!props.search) {\n        return null;\n    }\n    return <Cell span={7}>{React.cloneElement(props.search, props)}</Cell>;\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    const listHeaderActionsCellSpan = props.actions ? 7 : 0;\n    const listHeaderTitleCellSpan = 12 - listHeaderActionsCellSpan;\n\n    return (\n        <DataListModalOverlayProvider>\n            <ListContainer className={\"webiny-data-list\"} data-testid={\"ui.list.data-list\"}>\n                {(props.title || props.actions) && (\n                    <Grid className={listHeader}>\n                        <Cell span={listHeaderTitleCellSpan} className={listTitle}>\n                            <Typography use=\"headline5\">{props.title}</Typography>\n                        </Cell>\n                        {props.actions && (\n                            <Cell span={listHeaderActionsCellSpan} className={listActions}>\n                                {props.actions}\n                            </Cell>\n                        )}\n                    </Grid>\n                )}\n\n                {Object.keys(showOptions).length > 0 && (\n                    <Grid className={listSubHeader}>\n                        <Search {...props} />\n                        <Cell span={props.search ? 5 : 12} style={{ justifySelf: \"end\" }}>\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                        </Cell>\n                    </Grid>\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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"}

package/List/DataList/DataListWithSections.d.ts

@@ -0,0 +1,45 @@
+import React from "react";
+import { ListItem, ListProps } from "..";
+import { PaginationProp, SortersProp } from "./types";
+interface DataListData {
+    [key: string]: Record<string, any>[];
+}
+interface DataListWithSectionsProps {
+    children?: ((props: any) => React.ReactNode) | null;
+    title?: React.ReactNode;
+    data?: DataListData | null;
+    refresh?: (() => void) | null;
+    loading?: boolean;
+    loader?: React.ReactNode;
+    noData?: React.ReactNode;
+    pagination?: PaginationProp;
+    setSorters?: Function | null;
+    sorters?: SortersProp | null;
+    actions?: React.ReactNode;
+    filters?: React.ReactNode;
+    multiSelectActions?: React.ReactNode;
+    multiSelectAll?: (value: boolean, data: DataListData | null) => void;
+    isAllMultiSelected?: (data: DataListData | null) => boolean;
+    isNoneMultiSelected?: (data: DataListData | null) => boolean;
+    showOptions?: {
+        refresh?: boolean;
+        pagination?: boolean;
+        filters?: boolean;
+        sorters?: boolean;
+        [key: string]: any;
+    };
+    search?: React.ReactElement;
+    modalOverlay?: React.ReactElement;
+    modalOverlayAction?: React.ReactElement;
+    subHeader?: React.ReactElement;
+    meta?: Record<string, any> | null;
+    setPage?: ((page: string) => void) | null;
+    setPerPage?: ((page: string) => void) | null;
+    perPageOptions?: number[];
+}
+export declare const DataListWithSections: React.FC<DataListWithSectionsProps>;
+interface ScrollListWithSectionsProps extends ListProps {
+    children: React.ReactElement<typeof ListItem>[];
+}
+export declare const ScrollListWithSections: React.FC<ScrollListWithSectionsProps>;
+export {};