@webiny/ui 5.33.5 → 5.34.0-beta.1

package/Tags/Tags.js.map

@@ -1 +1 @@
-{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","inputValue","props","validation","value","disabled","onChange","description","otherInputProps","inputProps","state","setState","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index","React","Component"],"sources":["Tags.tsx"],"sourcesContent":["import React from \"react\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"../Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\nimport { SyntheticEvent } from \"react\";\n\ntype TagsProps = FormComponentProps & {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * Default structure of value, an object consisting of \"id\" and \"name\" keys. Different keys can be set using \"valueProp\" and \"textProp\" props.\n     */\n    value?: { id: string; name: string };\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n};\n\ninterface TagsState {\n    inputValue: string;\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport class Tags extends React.Component<TagsProps, TagsState> {\n    public override state = {\n        inputValue: \"\"\n    };\n\n    public override render() {\n        const { validation, value, disabled, onChange, description, ...otherInputProps } =\n            this.props;\n\n        const inputProps: InputProps = {\n            ...otherInputProps,\n            value: this.state.inputValue,\n            onChange: (inputValue: string) => {\n                this.setState({ inputValue });\n            },\n            onKeyDown: (ev: SyntheticEvent) => {\n                if (!onChange) {\n                    return;\n                }\n\n                const newValue = Array.isArray(value) ? [...value] : [];\n                const inputValue = this.state.inputValue || \"\";\n                /**\n                 * We must cast as keycode only works with Event | string type.\n                 */\n                switch (keycode(ev as unknown as Event)) {\n                    case \"enter\":\n                        if (inputValue) {\n                            newValue.push(inputValue);\n                            onChange(newValue);\n                            this.setState({ inputValue: \"\" });\n                        }\n                        break;\n                    case \"backspace\":\n                        if (newValue.length && !inputValue) {\n                            newValue.splice(-1, 1);\n                            onChange(newValue);\n                            break;\n                        }\n                }\n            }\n        };\n\n        const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n        return (\n            <div className={tagsStyle}>\n                <div>\n                    <Input {...inputProps} />\n\n                    {validationIsValid === false && (\n                        <FormElementMessage error>{validationMessage}</FormElementMessage>\n                    )}\n                    {validationIsValid !== false && description && (\n                        <FormElementMessage>{description}</FormElementMessage>\n                    )}\n\n                    {Array.isArray(value) && value.length ? (\n                        <Chips disabled={disabled}>\n                            {value.map((item, index) => (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={<BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            ))}\n                        </Chips>\n                    ) : null}\n                </div>\n            </div>\n        );\n    }\n}\n\nexport default Tags;\n"],"mappings":"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"}
+{"version":3,"names":["tagsStyle","css","position","width","left","top","zIndex","maxHeight","overflowY","backgroundColor","ul","listStyle","padding","li","Tags","props","useState","inputValue","setInputValue","validation","value","disabled","onChange","description","protectedTags","otherInputProps","isProtected","useCallback","tag","some","pattern","minimatch","inputProps","onKeyDown","ev","newValue","Array","isArray","keycode","push","length","splice","validationIsValid","isValid","validationMessage","message","map","item","index"],"sources":["Tags.tsx"],"sourcesContent":["import React, { SyntheticEvent, useCallback, useState } from \"react\";\nimport { css } from \"emotion\";\nimport keycode from \"keycode\";\nimport minimatch from \"minimatch\";\nimport { Input, InputProps } from \"~/Input\";\nimport { Chips, Chip } from \"~/Chips\";\nimport { FormComponentProps } from \"~/types\";\nimport { ReactComponent as BaselineCloseIcon } from \"./icons/baseline-close-24px.svg\";\nimport { FormElementMessage } from \"~/FormElementMessage\";\n\ninterface TagsProps extends FormComponentProps {\n    /**\n     * Component label.\n     */\n    label?: string;\n\n    /**\n     * Are input and chosen tags disabled?\n     */\n    disabled?: boolean;\n\n    /**\n     * Placeholder text for the form control. Set to a blank string to create a non-floating placeholder label.\n     */\n    placeholder?: string;\n\n    /**\n     * Description beneath the input.\n     */\n    description?: string;\n\n    /**\n     * A className for the root element.\n     */\n    className?: string;\n\n    /**\n     * A list of tags.\n     */\n    value?: string[];\n\n    /**\n     * Callback that gets executed on change of input value.\n     */\n    onInput?: Function;\n\n    /**\n     * Callback that gets executed when the input is focused.\n     */\n    onFocus?: Function;\n\n    /**\n     * Automatically focus on the tags input.\n     */\n    autoFocus?: boolean;\n\n    /**\n     * Protected tags cannot be removed by the user.\n     */\n    protectedTags?: string[];\n}\n\nconst tagsStyle = css({\n    position: \"relative\",\n    \".mdc-elevation--z1\": {\n        position: \"absolute\",\n        width: \"calc(100% - 2px)\",\n        left: 1,\n        top: 56,\n        zIndex: 10,\n        maxHeight: 200,\n        overflowY: \"scroll\",\n        backgroundColor: \"var(--mdc-theme-surface)\"\n    },\n    ul: {\n        listStyle: \"none\",\n        width: \"100%\",\n        padding: 0,\n        li: {\n            padding: 10\n        }\n    }\n});\n\nexport const Tags: React.FC<TagsProps> = props => {\n    const [inputValue, setInputValue] = useState(\"\");\n\n    const {\n        validation,\n        value,\n        disabled,\n        onChange,\n        description,\n        protectedTags = [],\n        ...otherInputProps\n    } = props;\n\n    const isProtected = useCallback(\n        (tag: string) => protectedTags.some(pattern => minimatch(tag, pattern)),\n        [protectedTags]\n    );\n\n    const inputProps: InputProps<string> = {\n        ...otherInputProps,\n        value: inputValue,\n        onChange: inputValue => {\n            setInputValue(inputValue);\n        },\n        onKeyDown: (ev: SyntheticEvent) => {\n            if (!onChange) {\n                return;\n            }\n\n            const newValue = Array.isArray(value) ? [...value] : [];\n\n            /**\n             * We must cast as keycode only works with Event | string type.\n             */\n            switch (keycode(ev as unknown as Event)) {\n                case \"enter\":\n                    if (inputValue) {\n                        newValue.push(inputValue);\n                        onChange(newValue);\n                        setInputValue(\"\");\n                    }\n                    break;\n                case \"backspace\":\n                    if (newValue.length && !inputValue) {\n                        newValue.splice(-1, 1);\n                        onChange(newValue);\n                        break;\n                    }\n            }\n        }\n    };\n\n    const { isValid: validationIsValid, message: validationMessage } = validation || {};\n\n    return (\n        <div className={tagsStyle}>\n            <div>\n                <Input {...inputProps} />\n\n                {validationIsValid === false && (\n                    <FormElementMessage error>{validationMessage}</FormElementMessage>\n                )}\n                {validationIsValid !== false && description && (\n                    <FormElementMessage>{description}</FormElementMessage>\n                )}\n\n                {Array.isArray(value) && value.length ? (\n                    <Chips disabled={disabled}>\n                        {value.map((item, index) => {\n                            return (\n                                <Chip\n                                    label={item}\n                                    trailingIcon={isProtected(item) ? null : <BaselineCloseIcon />}\n                                    key={`${item}-${index}`}\n                                    onRemove={() => {\n                                        // On removal, let's update the value and call \"onChange\" callback.\n                                        if (onChange) {\n                                            const newValue = [...value];\n                                            newValue.splice(index, 1);\n                                            onChange(newValue);\n                                        }\n                                    }}\n                                />\n                            );\n                        })}\n                    </Chips>\n                ) : null}\n            </div>\n        </div>\n    );\n};\n\nexport default Tags;\n"],"mappings":"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"}

package/Typography/Typography.d.ts

@@ -1,6 +1,6 @@
 import React from "react";
 import { TypographyProps as RmwcTypographyProps } from "@rmwc/typography";
-export interface TypographyProps extends RmwcTypographyProps {
+interface TypographyProps extends RmwcTypographyProps {
     children?: React.ReactNode;
     className?: string;
     style?: React.CSSProperties;
@@ -10,4 +10,4 @@ export interface TypographyProps extends RmwcTypographyProps {
  * Use Ripple component to display a list of choices, once the handler is triggered.
  */
 declare const Typography: React.FC<TypographyProps>;
-export { Typography };
+export { Typography, TypographyProps };

package/Typography/Typography.js.map

@@ -1 +1 @@
-{"version":3,"names":["Typography","props","children"],"sources":["Typography.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Typography as RwmcTypography,\n    TypographyProps as RmwcTypographyProps\n} from \"@rmwc/typography\";\n\nexport interface TypographyProps extends RmwcTypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    tag?: string;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Typography: React.FC<TypographyProps> = props => {\n    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;\n};\n\nexport { Typography };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAYA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,oBAAO,6BAAC,sBAAD,EAAoBA,KAApB,EAA4BA,KAAK,CAACC,QAAlC,CAAP;AACH,CAFD"}
+{"version":3,"names":["Typography","props","children"],"sources":["Typography.tsx"],"sourcesContent":["import React from \"react\";\nimport {\n    Typography as RwmcTypography,\n    TypographyProps as RmwcTypographyProps\n} from \"@rmwc/typography\";\n\ninterface TypographyProps extends RmwcTypographyProps {\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    tag?: string;\n}\n\n/**\n * Use Ripple component to display a list of choices, once the handler is triggered.\n */\nconst Typography: React.FC<TypographyProps> = props => {\n    return <RwmcTypography {...props}>{props.children}</RwmcTypography>;\n};\n\nexport { Typography, TypographyProps };\n"],"mappings":";;;;;;;;;AAAA;;AACA;;AAYA;AACA;AACA;AACA,IAAMA,UAAqC,GAAG,SAAxCA,UAAwC,CAAAC,KAAK,EAAI;EACnD,oBAAO,6BAAC,sBAAD,EAAoBA,KAApB,EAA4BA,KAAK,CAACC,QAAlC,CAAP;AACH,CAFD"}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webiny/ui",
-	"version": "5.33.5",
+	"version": "5.34.0-beta.1",
 	"main": "index.js",
 	"repository": {
 		"type": "git",
@@ -14,13 +14,14 @@
 	],
 	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "7.18.9",
+		"@babel/runtime": "7.19.0",
 		"@editorjs/editorjs": "2.25.0",
 		"@emotion/core": "10.3.1",
 		"@emotion/styled": "10.3.0",
 		"@rmwc/button": "7.0.3",
 		"@rmwc/checkbox": "7.0.3",
 		"@rmwc/chip": "7.0.3",
+		"@rmwc/data-table": "7.0.3",
 		"@rmwc/dialog": "7.0.3",
 		"@rmwc/drawer": "7.0.3",
 		"@rmwc/elevation": "7.0.3",
@@ -39,9 +40,10 @@
 		"@rmwc/textfield": "7.0.3",
 		"@rmwc/top-app-bar": "7.0.3",
 		"@rmwc/typography": "7.0.3",
-		"@svgr/webpack": "6.3.1",
+		"@svgr/webpack": "6.4.0",
+		"@tanstack/react-table": "8.5.22",
 		"brace": "0.11.1",
-		"classnames": "2.3.1",
+		"classnames": "2.3.2",
 		"cropperjs": "1.5.12",
 		"dot-prop-immutable": "2.1.1",
 		"downshift": "2.2.3",
@@ -58,33 +60,32 @@
 		"react-color": "2.19.3",
 		"react-columned": "1.1.3",
 		"react-custom-scrollbars": "4.2.1",
-		"react-loading-skeleton": "0.5.0",
+		"react-loading-skeleton": "3.1.0",
 		"react-spinner-material": "1.1.4",
 		"react-transition-group": "4.4.5",
 		"shortid": "2.2.16"
 	},
 	"devDependencies": {
-		"@babel/cli": "^7.16.0",
-		"@babel/core": "^7.16.0",
-		"@babel/plugin-proposal-class-properties": "^7.16.0",
-		"@babel/preset-env": "^7.16.4",
-		"@babel/preset-typescript": "^7.16.0",
+		"@babel/cli": "^7.19.3",
+		"@babel/core": "^7.19.3",
+		"@babel/plugin-proposal-class-properties": "^7.18.6",
+		"@babel/preset-env": "^7.19.4",
+		"@babel/preset-typescript": "^7.18.6",
 		"@storybook/addon-info": "^5.2.8",
 		"@storybook/addon-knobs": "^5.0.5",
 		"@storybook/addon-links": "^5.0.5",
 		"@storybook/react": "^5.2.8",
 		"@testing-library/react": "^12.1.2",
-		"@types/classnames": "^2.2.7",
 		"@types/nprogress": "^0.2.0",
 		"@types/rc-tooltip": "^3.7.2",
 		"@types/react-custom-scrollbars": "^4.0.10",
 		"@types/react-transition-group": "^4.4.4",
 		"@types/shortid": "^0.0.29",
-		"@webiny/cli": "^5.33.5",
-		"@webiny/form": "^5.33.5",
-		"@webiny/project-utils": "^5.33.5",
-		"@webiny/storybook-utils": "^5.33.5",
-		"@webiny/validation": "^5.33.5",
+		"@webiny/cli": "^5.34.0-beta.1",
+		"@webiny/form": "^5.34.0-beta.1",
+		"@webiny/project-utils": "^5.34.0-beta.1",
+		"@webiny/storybook-utils": "^5.34.0-beta.1",
+		"@webiny/validation": "^5.34.0-beta.1",
 		"babel-loader": "^8.0.0-beta.6",
 		"babel-plugin-emotion": "^9.2.8",
 		"execa": "^5.0.0",
@@ -102,6 +103,7 @@
 		"webpack": "^4.46.0"
 	},
 	"peerDependencies": {
+		"minimatch": "^5.1.0",
 		"react": "^17.0.2",
 		"react-dom": "^17.0.2"
 	},
@@ -130,5 +132,5 @@
 			]
 		}
 	},
-	"gitHead": "5063045cd2abdcdb360f97262f9b90b8858ec1df"
+	"gitHead": "1ee2a7338a865a67e24eb42d16bf0b6091195286"
 }

package/styles.scss

@@ -11,9 +11,8 @@ $webiny-theme-light-text-primary-on-background: rgba(0, 0, 0, 0.87);
 $webiny-theme-light-text-secondary-on-background: rgba(0, 0, 0, 0.54);
 $webiny-theme-light-text-hint-on-dark: rgba(255, 255, 255, 0.5);
 $webiny-theme-light-caret-down: url("data:image/svg+xml,%3Csvg%20width%3D%2210px%22%20height%3D%225px%22%20viewBox%3D%227%2010%2010%205%22%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%3E%0A%20%20%20%20%3Cpolygon%20id%3D%22Shape%22%20stroke%3D%22none%22%20fill%3D%22%23000000%22%20fill-rule%3D%22evenodd%22%20opacity%3D%220.54%22%20points%3D%227%2010%2012%2015%2017%2010%22%3E%3C%2Fpolygon%3E%0A%3C%2Fsvg%3E");
-
-// webiny typography
 $webiny-theme-typography-font-family: "Source Sans Pro" !default;
+$webiny-theme-typography-subtitle2-font-weight: 600 !default;
 
 $mdc-theme-primary: $webiny-theme-light-primary;
 $mdc-theme-on-primary: $webiny-theme-light-on-primary;
@@ -29,7 +28,7 @@ $mdc-theme-text-hint-on-dark: $webiny-theme-light-text-hint-on-dark;
 $mdc-typography-font-family: $webiny-theme-typography-font-family;
 
 @import "material-components-web/material-components-web.scss";
-@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700");
+@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700|Open+Sans:300,400,600,700|Source+Code+Pro:400,700");
 
 /*
 Fix for select box appearance. For some reason browser prefix css attributes are striped away.

package/types.d.ts

@@ -1,4 +1,4 @@
-export interface FormComponentProps {
+export interface FormComponentProps<TValue = any> {
     validation?: {
         isValid: boolean;
         message: string;
@@ -7,6 +7,6 @@ export interface FormComponentProps {
         };
     };
     validate?: () => Promise<boolean | any>;
-    value?: any;
-    onChange?: (value: any) => void;
+    value?: TValue;
+    onChange?: (value: TValue) => void;
 }

package/types.js.map

@@ -1 +1 @@
-{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface FormComponentProps {\n    validation?: {\n        /* Is form element's value valid? */\n        isValid: boolean;\n        /* Error message if value is not valid. */\n        message: string;\n        /* Any validation result returned by the validator. */\n        results?: { [key: string]: any };\n    };\n\n    /* Provided by <Form> component to perform validation when value has changed. */\n    validate?: () => Promise<boolean | any>;\n\n    /* Form component's value. */\n    value?: any;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: any) => void;\n}\n"],"mappings":""}
+{"version":3,"names":[],"sources":["types.ts"],"sourcesContent":["export interface FormComponentProps<TValue = any> {\n    validation?: {\n        /* Is form element's value valid? */\n        isValid: boolean;\n        /* Error message if value is not valid. */\n        message: string;\n        /* Any validation result returned by the validator. */\n        results?: { [key: string]: any };\n    };\n\n    /* Provided by <Form> component to perform validation when value has changed. */\n    validate?: () => Promise<boolean | any>;\n\n    /* Form component's value. */\n    value?: TValue;\n\n    /* A callback that is executed each time a value is changed. */\n    onChange?: (value: TValue) => void;\n}\n"],"mappings":""}