From c2d31cc5a68a171548064198c16c34cc64b59995 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 17:15:54 +0200 Subject: [PATCH 01/68] add emotion peer dependencies --- docs/src/modules/utils/helpers.js | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js index cef69f1acd9a71..7bea9ccffbf6ca 100644 --- a/docs/src/modules/utils/helpers.js +++ b/docs/src/modules/utils/helpers.js @@ -77,6 +77,8 @@ function includePeerDependencies(deps, versions) { Object.assign(deps, { 'react-dom': versions['react-dom'], react: versions.react, + '@emotion/core': versions['@emotion/core'], + '@emotion/styled': versions['@emotion/styled'], }); if ( @@ -140,6 +142,8 @@ function getDependencies(raw, options = {}) { '@material-ui/system': getMuiPackageVersion('system', muiCommitRef), '@material-ui/utils': getMuiPackageVersion('utils', muiCommitRef), '@material-ui/pickers': 'next', + '@emotion/core': 'latest', + '@emotion/styled': 'latest', }; const re = /^import\s'([^']+)'|import\s[\s\S]*?\sfrom\s+'([^']+)/gm; From 5ae933ff68e3c736092102a1efeec89dbb850c97 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 17:57:28 +0200 Subject: [PATCH 02/68] fixed types & tests --- docs/src/modules/utils/helpers.js | 2 +- docs/src/modules/utils/helpers.test.js | 18 ++++++++++++++++++ 2 files changed, 19 insertions(+), 1 deletion(-) diff --git a/docs/src/modules/utils/helpers.js b/docs/src/modules/utils/helpers.js index 7bea9ccffbf6ca..d4dbb1c7e66eed 100644 --- a/docs/src/modules/utils/helpers.js +++ b/docs/src/modules/utils/helpers.js @@ -44,7 +44,7 @@ function pageToTitleI18n(page, t) { * set of packages that ship their own typings instead of using @types/ namespace * Array because Set([iterable]) is not supported in IE11 */ -const packagesWithBundledTypes = ['date-fns']; +const packagesWithBundledTypes = ['date-fns', '@emotion/core', '@emotion/styled']; /** * WARNING: Always uses `latest` typings. diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index 42d93b963c1a11..b18c9e45994ed1 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/docs/src/modules/utils/helpers.test.js @@ -22,6 +22,8 @@ const styles = theme => ({ it('should handle @ dependencies', () => { expect(getDependencies(s1)).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -46,6 +48,8 @@ const suggestions = [ `; expect(getDependencies(source)).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@unexisting/thing': 'latest', 'autosuggest-highlight': 'latest', @@ -58,6 +62,8 @@ const suggestions = [ it('should support next dependencies', () => { expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -78,6 +84,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/pickers': 'next', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -88,6 +96,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic it('can collect required @types packages', () => { expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -114,6 +124,8 @@ import { expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@material-ui/pickers': 'next', react: 'latest', @@ -127,6 +139,8 @@ import lab from '@material-ui/lab'; `; expect(getDependencies(source)).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@material-ui/lab': 'next', react: 'latest', @@ -142,6 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; `; expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({ + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'next', '@material-ui/lab': 'next', '@material-ui/icons': 'next', @@ -170,6 +186,8 @@ import * as Utils from '@material-ui/utils'; ).to.deep.equal({ react: 'latest', 'react-dom': 'latest', + "@emotion/core": "latest", + "@emotion/styled": "latest", '@material-ui/core': 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core', '@material-ui/icons': From 18b066810678d92bb2ff9b979f06a1ba3393aba6 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 18:06:59 +0200 Subject: [PATCH 03/68] prettier --- docs/src/modules/utils/helpers.test.js | 36 +++++++++++++------------- 1 file changed, 18 insertions(+), 18 deletions(-) diff --git a/docs/src/modules/utils/helpers.test.js b/docs/src/modules/utils/helpers.test.js index b18c9e45994ed1..80152e4c1918f4 100644 --- a/docs/src/modules/utils/helpers.test.js +++ b/docs/src/modules/utils/helpers.test.js @@ -22,8 +22,8 @@ const styles = theme => ({ it('should handle @ dependencies', () => { expect(getDependencies(s1)).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -48,8 +48,8 @@ const suggestions = [ `; expect(getDependencies(source)).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@unexisting/thing': 'latest', 'autosuggest-highlight': 'latest', @@ -62,8 +62,8 @@ const suggestions = [ it('should support next dependencies', () => { expect(getDependencies(s1, { reactVersion: 'next' })).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -84,8 +84,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/pickers': 'next', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -96,8 +96,8 @@ import { LocalizationProvider as MuiPickersLocalizationProvider, KeyboardTimePic it('can collect required @types packages', () => { expect(getDependencies(s1, { codeLanguage: 'TS' })).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@foo-bar/bip': 'latest', '@material-ui/core': 'next', 'prop-types': 'latest', @@ -124,8 +124,8 @@ import { expect(getDependencies(source)).to.deep.equal({ 'date-fns': 'latest', - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@material-ui/pickers': 'next', react: 'latest', @@ -139,8 +139,8 @@ import lab from '@material-ui/lab'; `; expect(getDependencies(source)).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@material-ui/lab': 'next', react: 'latest', @@ -156,8 +156,8 @@ import { useDemoData } from '@material-ui/x-grid-data-generator'; `; expect(getDependencies(source, { codeLanguage: 'TS' })).to.deep.equal({ - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'next', '@material-ui/lab': 'next', '@material-ui/icons': 'next', @@ -186,8 +186,8 @@ import * as Utils from '@material-ui/utils'; ).to.deep.equal({ react: 'latest', 'react-dom': 'latest', - "@emotion/core": "latest", - "@emotion/styled": "latest", + '@emotion/core': 'latest', + '@emotion/styled': 'latest', '@material-ui/core': 'https://pkg.csb.dev/mui-org/material-ui/commit/2d0e8b4d/@material-ui/core', '@material-ui/icons': From 74dc451854f9c751959059345203418ecfc687f1 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 2 Oct 2020 14:35:02 +0200 Subject: [PATCH 04/68] wip --- .../slider-styled/ContinuousSlider.js | 91 ++++++++--- packages/material-ui/src/Box/Box.js | 145 +++++++++++++++++- 2 files changed, 210 insertions(+), 26 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 6b14f7b682ebe4..315232a8acb316 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -5,6 +5,10 @@ import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/lab/SliderStyled'; import VolumeDown from '@material-ui/icons/VolumeDown'; import VolumeUp from '@material-ui/icons/VolumeUp'; +import { ThemeProvider as SCThemeProvider } from 'styled-components'; +import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; +import { createMuiTheme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; const useStyles = makeStyles({ root: { @@ -12,6 +16,8 @@ const useStyles = makeStyles({ }, }); +const theme = createMuiTheme(); + export default function ContinuousSlider() { const classes = useStyles(); const [value, setValue] = React.useState(30); @@ -21,29 +27,66 @@ export default function ContinuousSlider() { }; return ( -
- - Volume - - - - - - - - - - - - - - Disabled slider - - -
+ + +
+ + Volume + + + + + + + + + + + + + + Disabled slider + + + + Regular Box + + + + + + Cloned Box + + + + + + Children as fn Box + + + {({className}) => ( + + )} + +
+ + ); } diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 10b85801656fa9..5097bd113a7396 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,3 +1,4 @@ +import clsx from 'clsx'; import { borders, compose, @@ -12,7 +13,7 @@ import { typography, css, } from '@material-ui/system'; -import styled from '../styles/styled'; +import muiStyled from '../styles/muiStyled'; export const styleFunction = css( compose( @@ -29,9 +30,149 @@ export const styleFunction = css( ), ); +function omit(input, fields) { + const output = {}; + + Object.keys(input).forEach((prop) => { + if (fields.indexOf(prop) === -1) { + output[prop] = input[prop]; + } + }); + + return output; +} + +const boxProps = [ + 'border', + 'borderTop', + 'borderRight', + 'borderBottom', + 'borderLeft', + 'borderColor', + 'borderRadius', + 'display', + 'displayPrint', + 'overflow', + 'textOverflow', + 'visibility', + 'whiteSpace', + 'flexBasis', + 'flexDirection', + 'flexWrap', + 'justifyContent', + 'alignItems', + 'alignContent', + 'order', + 'flex', + 'flexGrow', + 'flexShrink', + 'alignSelf', + 'justifyItems', + 'justifySelf', + 'gridGap', + 'gridColumnGap', + 'gridRowGap', + 'gridColumn', + 'gridRow', + 'gridAutoFlow', + 'gridAutoColumns', + 'gridAutoRows', + 'gridTemplateColumns', + 'gridTemplateRows', + 'gridTemplateAreas', + 'gridArea', + 'zIndex', + 'position', + 'top', + 'right', + 'bottom', + 'left', + 'bgcolor', + 'color', + 'boxShadow', + 'width', + 'maxWidth', + 'minWidth', + 'height', + 'maxHeight', + 'minHeight', + 'sizeWidth', + 'sizeHeight', + 'boxSizing', + 'm', + 'mt', + 'mr', + 'mb', + 'ml', + 'mx', + 'my', + 'p', + 'pt', + 'pr', + 'pb', + 'pl', + 'px', + 'py', + 'margin', + 'marginTop', + 'marginRight', + 'marginBottom', + 'marginLeft', + 'marginX', + 'marginY', + 'padding', + 'paddingTop', + 'paddingRight', + 'paddingBottom', + 'paddingLeft', + 'paddingX', + 'paddingY', + 'fontFamily', + 'fontSize', + 'fontStyle', + 'fontWeight', + 'letterSpacing', + 'lineHeight', + 'textAlign', +]; + +/** + * @ignore - do not document. + */ +const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { + const { + children, + clone, + className, + component: Component = "div", + ...other + } = props; + + const spread = omit(other, boxProps); + + if (clone) { + return React.cloneElement(children, { + className: clsx(children.prop?.className, className), + ...spread, + }); + } + + if (typeof children === 'function') { + return children({ className, ...spread }); + } + + return ( + + {children} + + ); +}); + +const shouldForwardProp = prop => boxProps.indexOf(prop) === -1; + /** * @ignore - do not document. */ -const Box = styled('div')(styleFunction, { name: 'MuiBox' }); +const Box = muiStyled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction); export default Box; From 688d13a99ea16a4ede3222fcba788f766e5a97e5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 2 Oct 2020 20:16:01 +0200 Subject: [PATCH 05/68] fixed typo --- packages/material-ui/src/Box/Box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 5097bd113a7396..ddf90d8e87761e 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -152,7 +152,7 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { if (clone) { return React.cloneElement(children, { - className: clsx(children.prop?.className, className), + className: clsx(children.props.className, className), ...spread, }); } From a1da207cd499d000d37cf530a928d1ed2b9a67af Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 18:38:21 +0200 Subject: [PATCH 06/68] added cross-env --- packages/material-ui-benchmark/package.json | 13 +- yarn.lock | 146 +++++++++++++++++--- 2 files changed, 136 insertions(+), 23 deletions(-) diff --git a/packages/material-ui-benchmark/package.json b/packages/material-ui-benchmark/package.json index e1fec970b36713..a8a526aa668574 100644 --- a/packages/material-ui-benchmark/package.json +++ b/packages/material-ui-benchmark/package.json @@ -12,11 +12,11 @@ }, "homepage": "https://github.com/mui-org/material-ui/tree/next/packages/material-ui-benchmark", "scripts": { - "core": "cd ../../ && NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/core.js --inspect=0.0.0.0:9229", - "docs": "cd ../../ && NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/docs.js --inspect=0.0.0.0:9229", - "server": "cd ../../ && NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/server.js --inspect=0.0.0.0:9229", - "styles": "cd ../../ && NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/styles.js --inspect=0.0.0.0:9229", - "system": "cd ../../ && NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/system.js --inspect=0.0.0.0:9229", + "core": "cd ../../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/core.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"", + "docs": "cd ../../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/docs.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"", + "server": "cd ../../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/server.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"", + "styles": "cd ../../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/styles.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"", + "system": "cd ../../ && cross-env NODE_ENV=production BABEL_ENV=benchmark babel-node packages/material-ui-benchmark/src/system.js --inspect=0.0.0.0:9229 --extensions \".tsx,.ts,.js\"", "test": "exit 0" }, "engines": { @@ -34,5 +34,8 @@ "react-dom": "^16.13.0", "react-jss": "^10.3.0", "styled-system": "^5.1.2" + }, + "devDependencies": { + "cross-env": "^7.0.2" } } diff --git a/yarn.lock b/yarn.lock index 187985a6c63532..d5d840b6016e88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -69,7 +69,7 @@ optionalDependencies: chokidar "^2.1.8" -"@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4": +"@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== @@ -85,7 +85,27 @@ invariant "^2.2.4" semver "^5.5.0" -"@babel/core@7.7.7", "@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5": +"@babel/core@7.7.7": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9" + integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.7" + "@babel/helpers" "^7.7.4" + "@babel/parser" "^7.7.7" + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.13" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + +"@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.4.tgz#780e8b83e496152f8dd7df63892b2e052bf1d51d" integrity sha512-3A0tS0HWpy4XujGc7QtOIHTeNwUgWaZc/WuS5YQrfhU67jnVmsD6OGPc1AKHH0LJHQICGncy3+YUjIhVlfDdcA== @@ -117,6 +137,15 @@ lodash "^4.17.13" source-map "^0.5.0" +"@babel/generator@^7.7.7": + version "7.11.6" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620" + integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA== + dependencies: + "@babel/types" "^7.11.5" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -325,7 +354,7 @@ "@babel/traverse" "^7.10.4" "@babel/types" "^7.10.4" -"@babel/helpers@^7.10.4": +"@babel/helpers@^7.10.4", "@babel/helpers@^7.7.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044" integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA== @@ -357,11 +386,16 @@ resolve "^1.13.1" v8flags "^3.1.1" -"@babel/parser@7.10.5", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.7.5": +"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.7.5": version "7.10.5" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b" integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ== +"@babel/parser@^7.7.7": + version "7.11.5" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037" + integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q== + "@babel/plugin-proposal-async-generator-functions@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.4.tgz#4b65abb3d9bacc6c657aaa413e56696f9f170fc6" @@ -411,7 +445,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" -"@babel/plugin-proposal-nullish-coalescing-operator@7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4": +"@babel/plugin-proposal-nullish-coalescing-operator@7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a" integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw== @@ -444,7 +478,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-optional-catch-binding" "^7.8.0" -"@babel/plugin-proposal-optional-chaining@7.11.0", "@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.10.1", "@babel/plugin-proposal-optional-chaining@^7.11.0": +"@babel/plugin-proposal-optional-chaining@7.11.0", "@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.11.0": version "7.11.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076" integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA== @@ -633,12 +667,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.10.4" -"@babel/plugin-transform-destructuring@^7.10.4", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2": - version "7.5.2" - resolved "https://registry.yarnpkg.com/@minh.nguyen/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.2.tgz#49de3e25c373fadd11471a2fc99ec0ce07d92f19" - integrity sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg== +"@babel/plugin-transform-destructuring@^7.10.4": + version "7.10.4" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5" + integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA== dependencies: - "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4": version "7.10.4" @@ -1038,7 +1072,7 @@ "@babel/plugin-transform-react-jsx-source" "^7.10.4" "@babel/plugin-transform-react-pure-annotations" "^7.10.4" -"@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.10.4", "@babel/preset-typescript@^7.7.4": +"@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.7.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.10.4.tgz#7d5d052e52a682480d6e2cc5aa31be61c8c25e36" integrity sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ== @@ -1073,7 +1107,14 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@7.0.0", "@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c" + integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA== + dependencies: + regenerator-runtime "^0.12.0" + +"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.11.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== @@ -1104,7 +1145,7 @@ globals "^11.1.0" lodash "^4.17.13" -"@babel/types@7.11.5", "@babel/types@7.8.3", "@babel/types@^7.0.0", "@babel/types@^7.10.2", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1": +"@babel/types@7.11.5", "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1", "@babel/types@^7.7.4": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d" integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q== @@ -1113,6 +1154,15 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@7.8.3": + version "7.8.3" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c" + integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + "@date-io/core@^1.3.9": version "1.3.13" resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa" @@ -5620,14 +5670,21 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" -cross-env@^7.0.0: +cross-env@^7.0.0, cross-env@^7.0.2: version "7.0.2" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9" integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw== dependencies: cross-spawn "^7.0.1" -cross-fetch@3.0.5, cross-fetch@^3.0.5: +cross-fetch@3.0.5: + version "3.0.5" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.5.tgz#2739d2981892e7ab488a7ad03b92df2816e03f4c" + integrity sha512-FFLcLtraisj5eteosnX1gf01qYDCOc4fDy0+euOt8Kn9YBY2NtXL/pCoYPavw24NIQkQqm5ZOLsGD5Zzj0gyew== + dependencies: + node-fetch "2.6.0" + +cross-fetch@^3.0.5: version "3.0.6" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ== @@ -6601,7 +6658,21 @@ domutils@^1.5.1, domutils@^1.7.0: dom-serializer "0" domelementtype "1" -dot-prop@^3.0.0, dot-prop@^4.1.1, dot-prop@^4.2.0, dot-prop@^5.2.0: +dot-prop@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177" + integrity sha1-G3CK8JSknJoOfbyteQq6U52sEXc= + dependencies: + is-obj "^1.0.0" + +dot-prop@^4.1.1, dot-prop@^4.2.0: + version "4.2.1" + resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4" + integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ== + dependencies: + is-obj "^1.0.0" + +dot-prop@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb" integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A== @@ -9280,6 +9351,11 @@ is-number@^7.0.0: resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== +is-obj@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" + integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8= + is-obj@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982" @@ -13893,6 +13969,11 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== +regenerator-runtime@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" + integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== + regenerator-runtime@^0.13.4: version "0.13.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" @@ -16700,7 +16781,36 @@ webpack-sources@1.4.3, webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-s source-list-map "^2.0.0" source-map "~0.6.1" -webpack@4.44.1, webpack@^4.28.2, webpack@^4.41.0, webpack@^4.43.0, webpack@^4.44.1: +webpack@4.44.1: + version "4.44.1" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21" + integrity sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ== + dependencies: + "@webassemblyjs/ast" "1.9.0" + "@webassemblyjs/helper-module-context" "1.9.0" + "@webassemblyjs/wasm-edit" "1.9.0" + "@webassemblyjs/wasm-parser" "1.9.0" + acorn "^6.4.1" + ajv "^6.10.2" + ajv-keywords "^3.4.1" + chrome-trace-event "^1.0.2" + enhanced-resolve "^4.3.0" + eslint-scope "^4.0.3" + json-parse-better-errors "^1.0.2" + loader-runner "^2.4.0" + loader-utils "^1.2.3" + memory-fs "^0.4.1" + micromatch "^3.1.10" + mkdirp "^0.5.3" + neo-async "^2.6.1" + node-libs-browser "^2.2.1" + schema-utils "^1.0.0" + tapable "^1.1.3" + terser-webpack-plugin "^1.4.3" + watchpack "^1.7.4" + webpack-sources "^1.4.1" + +webpack@^4.28.2, webpack@^4.41.0, webpack@^4.43.0: version "4.44.2" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72" integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q== From 6ff31f9387b4a5b95c9ea296a4aab33e3886a28a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 18:42:29 +0200 Subject: [PATCH 07/68] yarn lock --- yarn.lock | 144 +++++++----------------------------------------------- 1 file changed, 17 insertions(+), 127 deletions(-) diff --git a/yarn.lock b/yarn.lock index d5d840b6016e88..6ef126ae965dba 100644 --- a/yarn.lock +++ b/yarn.lock @@ -69,7 +69,7 @@ optionalDependencies: chokidar "^2.1.8" -"@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5": +"@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== @@ -85,27 +85,7 @@ invariant "^2.2.4" semver "^5.5.0" -"@babel/core@7.7.7": - version "7.7.7" - resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9" - integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ== - dependencies: - "@babel/code-frame" "^7.5.5" - "@babel/generator" "^7.7.7" - "@babel/helpers" "^7.7.4" - "@babel/parser" "^7.7.7" - "@babel/template" "^7.7.4" - "@babel/traverse" "^7.7.4" - "@babel/types" "^7.7.4" - convert-source-map "^1.7.0" - debug "^4.1.0" - json5 "^2.1.0" - lodash "^4.17.13" - resolve "^1.3.2" - semver "^5.4.1" - source-map "^0.5.0" - -"@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5": +"@babel/core@7.7.7", "@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.10.4.tgz#780e8b83e496152f8dd7df63892b2e052bf1d51d" integrity sha512-3A0tS0HWpy4XujGc7QtOIHTeNwUgWaZc/WuS5YQrfhU67jnVmsD6OGPc1AKHH0LJHQICGncy3+YUjIhVlfDdcA== @@ -137,15 +117,6 @@ lodash "^4.17.13" source-map "^0.5.0" -"@babel/generator@^7.7.7": - version "7.11.6" - resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.11.6.tgz#b868900f81b163b4d464ea24545c61cbac4dc620" - integrity sha512-DWtQ1PV3r+cLbySoHrwn9RWEgKMBLLma4OBQloPRyDYvc5msJM9kvTLo1YnlJd1P/ZuKbdli3ijr5q3FvAF3uA== - dependencies: - "@babel/types" "^7.11.5" - jsesc "^2.5.1" - source-map "^0.5.0" - "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -354,7 +325,7 @@ "@babel/traverse" "^7.10.4" "@babel/types" "^7.10.4" -"@babel/helpers@^7.10.4", "@babel/helpers@^7.7.4": +"@babel/helpers@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.10.4.tgz#2abeb0d721aff7c0a97376b9e1f6f65d7a475044" integrity sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA== @@ -386,16 +357,11 @@ resolve "^1.13.1" v8flags "^3.1.1" -"@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.7.5": +"@babel/parser@7.10.5", "@babel/parser@^7.1.0", "@babel/parser@^7.1.6", "@babel/parser@^7.10.4", "@babel/parser@^7.7.5": version "7.10.5" resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.10.5.tgz#e7c6bf5a7deff957cec9f04b551e2762909d826b" integrity sha512-wfryxy4bE1UivvQKSQDU4/X6dr+i8bctjUjj8Zyt3DQy7NtPizJXT8M52nqpNKL+nq2PW8lxk4ZqLj0fD4B4hQ== -"@babel/parser@^7.7.7": - version "7.11.5" - resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037" - integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q== - "@babel/plugin-proposal-async-generator-functions@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.4.tgz#4b65abb3d9bacc6c657aaa413e56696f9f170fc6" @@ -445,7 +411,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" -"@babel/plugin-proposal-nullish-coalescing-operator@7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4": +"@babel/plugin-proposal-nullish-coalescing-operator@7.10.4", "@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a" integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw== @@ -478,7 +444,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-optional-catch-binding" "^7.8.0" -"@babel/plugin-proposal-optional-chaining@7.11.0", "@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.11.0": +"@babel/plugin-proposal-optional-chaining@7.11.0", "@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.10.1", "@babel/plugin-proposal-optional-chaining@^7.11.0": version "7.11.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076" integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA== @@ -667,12 +633,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.10.4" -"@babel/plugin-transform-destructuring@^7.10.4": - version "7.10.4" - resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.10.4.tgz#70ddd2b3d1bea83d01509e9bb25ddb3a74fc85e5" - integrity sha512-+WmfvyfsyF603iPa6825mq6Qrb7uLjTOsa3XOFzlYcYDHSS4QmpOWOL0NNBY5qMbvrcf3tq0Cw+v4lxswOBpgA== +"@babel/plugin-transform-destructuring@^7.10.4", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2": + version "7.5.2" + resolved "https://registry.yarnpkg.com/@minh.nguyen/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.2.tgz#49de3e25c373fadd11471a2fc99ec0ce07d92f19" + integrity sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg== dependencies: - "@babel/helper-plugin-utils" "^7.10.4" + "@babel/helper-plugin-utils" "^7.0.0" "@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4": version "7.10.4" @@ -1072,7 +1038,7 @@ "@babel/plugin-transform-react-jsx-source" "^7.10.4" "@babel/plugin-transform-react-pure-annotations" "^7.10.4" -"@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.7.4": +"@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.10.4", "@babel/preset-typescript@^7.7.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.10.4.tgz#7d5d052e52a682480d6e2cc5aa31be61c8c25e36" integrity sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ== @@ -1107,14 +1073,7 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@7.0.0": - version "7.0.0" - resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c" - integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA== - dependencies: - regenerator-runtime "^0.12.0" - -"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@7.0.0", "@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.11.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== @@ -1145,7 +1104,7 @@ globals "^11.1.0" lodash "^4.17.13" -"@babel/types@7.11.5", "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1", "@babel/types@^7.7.4": +"@babel/types@7.11.5", "@babel/types@7.8.3", "@babel/types@^7.0.0", "@babel/types@^7.10.2", "@babel/types@^7.10.4", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d" integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q== @@ -1154,15 +1113,6 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" -"@babel/types@7.8.3": - version "7.8.3" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c" - integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg== - dependencies: - esutils "^2.0.2" - lodash "^4.17.13" - to-fast-properties "^2.0.0" - "@date-io/core@^1.3.9": version "1.3.13" resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa" @@ -5677,14 +5627,7 @@ cross-env@^7.0.0, cross-env@^7.0.2: dependencies: cross-spawn "^7.0.1" -cross-fetch@3.0.5: - version "3.0.5" - resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.5.tgz#2739d2981892e7ab488a7ad03b92df2816e03f4c" - integrity sha512-FFLcLtraisj5eteosnX1gf01qYDCOc4fDy0+euOt8Kn9YBY2NtXL/pCoYPavw24NIQkQqm5ZOLsGD5Zzj0gyew== - dependencies: - node-fetch "2.6.0" - -cross-fetch@^3.0.5: +cross-fetch@3.0.5, cross-fetch@^3.0.5: version "3.0.6" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ== @@ -6658,21 +6601,7 @@ domutils@^1.5.1, domutils@^1.7.0: dom-serializer "0" domelementtype "1" -dot-prop@^3.0.0: - version "3.0.0" - resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177" - integrity sha1-G3CK8JSknJoOfbyteQq6U52sEXc= - dependencies: - is-obj "^1.0.0" - -dot-prop@^4.1.1, dot-prop@^4.2.0: - version "4.2.1" - resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4" - integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ== - dependencies: - is-obj "^1.0.0" - -dot-prop@^5.2.0: +dot-prop@^3.0.0, dot-prop@^4.1.1, dot-prop@^4.2.0, dot-prop@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb" integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A== @@ -9351,11 +9280,6 @@ is-number@^7.0.0: resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== -is-obj@^1.0.0: - version "1.0.1" - resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" - integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8= - is-obj@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982" @@ -13969,11 +13893,6 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== -regenerator-runtime@^0.12.0: - version "0.12.1" - resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" - integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== - regenerator-runtime@^0.13.4: version "0.13.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" @@ -16781,36 +16700,7 @@ webpack-sources@1.4.3, webpack-sources@^1.0.1, webpack-sources@^1.1.0, webpack-s source-list-map "^2.0.0" source-map "~0.6.1" -webpack@4.44.1: - version "4.44.1" - resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21" - integrity sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ== - dependencies: - "@webassemblyjs/ast" "1.9.0" - "@webassemblyjs/helper-module-context" "1.9.0" - "@webassemblyjs/wasm-edit" "1.9.0" - "@webassemblyjs/wasm-parser" "1.9.0" - acorn "^6.4.1" - ajv "^6.10.2" - ajv-keywords "^3.4.1" - chrome-trace-event "^1.0.2" - enhanced-resolve "^4.3.0" - eslint-scope "^4.0.3" - json-parse-better-errors "^1.0.2" - loader-runner "^2.4.0" - loader-utils "^1.2.3" - memory-fs "^0.4.1" - micromatch "^3.1.10" - mkdirp "^0.5.3" - neo-async "^2.6.1" - node-libs-browser "^2.2.1" - schema-utils "^1.0.0" - tapable "^1.1.3" - terser-webpack-plugin "^1.4.3" - watchpack "^1.7.4" - webpack-sources "^1.4.1" - -webpack@^4.28.2, webpack@^4.41.0, webpack@^4.43.0: +webpack@4.44.1, webpack@^4.28.2, webpack@^4.41.0, webpack@^4.43.0, webpack@^4.44.1: version "4.44.2" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72" integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q== From 9fd7f7be68dcc47d77897760d35765510e69def4 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 18:44:11 +0200 Subject: [PATCH 08/68] version --- packages/material-ui-benchmark/package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-benchmark/package.json b/packages/material-ui-benchmark/package.json index a8a526aa668574..5fac9c97ae675d 100644 --- a/packages/material-ui-benchmark/package.json +++ b/packages/material-ui-benchmark/package.json @@ -1,6 +1,6 @@ { "name": "@material-ui/benchmark", - "version": "4.0.0", + "version": "5.0.0", "private": true, "description": "Material-UI Benchmark.", "repository": { From 2a71a6e719545c116b583376806ff96893c60aa5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 19:22:15 +0200 Subject: [PATCH 09/68] fixes --- docs/src/pages/components/slider-styled/ContinuousSlider.js | 3 --- packages/material-ui-benchmark/src/system.js | 4 ++-- packages/material-ui/src/Box/Box.js | 5 +++-- 3 files changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 9a5e8de5e21c24..33ee804baf3f68 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -5,9 +5,6 @@ import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/lab/SliderStyled'; import VolumeDown from '@material-ui/icons/VolumeDown'; import VolumeUp from '@material-ui/icons/VolumeUp'; -import { ThemeProvider as SCThemeProvider } from 'styled-components'; -import { ThemeProvider as EmotionThemeProvider } from 'emotion-theming'; -import { createMuiTheme } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; const Root = styled('div')({ diff --git a/packages/material-ui-benchmark/src/system.js b/packages/material-ui-benchmark/src/system.js index 8ed2b88d4f418a..54b5650eb829f1 100644 --- a/packages/material-ui-benchmark/src/system.js +++ b/packages/material-ui-benchmark/src/system.js @@ -8,7 +8,8 @@ import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled- import { spacing, palette, typography, compose } from '@material-ui/system'; import { createMuiTheme } from '@material-ui/core/styles'; import { styleFunction } from '@material-ui/core/Box'; -import { styled, ThemeProvider as StylesThemeProvider } from '@material-ui/styles'; +import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles'; +import BoxStyles from '@material-ui/core/Box'; import styledComponents, { ThemeProvider as StyledComponentsThemeProvider, } from 'styled-components'; @@ -23,7 +24,6 @@ Benchmark.options.minSamples = 100; const materialSystem = compose(palette, spacing, typography); const styledSystem = compose2(color, space, fontFamily, fontSize); -const BoxStyles = styled('div')(styleFunction); const BoxStyleComponents = styledComponents('div')(styleFunction); const NakedStyleComponents = styledComponents('div')(spacing); const BoxEmotion = styledEmotion('div')(styleFunction); diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index ddf90d8e87761e..88b577e4137e00 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,3 +1,4 @@ +import React from 'react'; import clsx from 'clsx'; import { borders, @@ -13,7 +14,7 @@ import { typography, css, } from '@material-ui/system'; -import muiStyled from '../styles/muiStyled'; +import styled from '../styles/experimentalStyled'; export const styleFunction = css( compose( @@ -173,6 +174,6 @@ const shouldForwardProp = prop => boxProps.indexOf(prop) === -1; /** * @ignore - do not document. */ -const Box = muiStyled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction); +const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction); export default Box; From 77d601734c1d057c8f973a0c4294d19744d89450 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 19:23:25 +0200 Subject: [PATCH 10/68] prettier --- .../slider-styled/ContinuousSlider.js | 60 +++++++++---------- packages/material-ui/src/Box/Box.js | 10 +--- 2 files changed, 29 insertions(+), 41 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 33ee804baf3f68..90bcf3f4401af3 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -44,39 +44,33 @@ export default function ContinuousSlider() { Disabled slider - - Regular Box - - - - - - Cloned Box - - - - - - Children as fn Box - - - {({className}) => ( - - )} - + Regular Box + + + + Cloned Box + + + + Children as fn Box + + {({ className }) => ( + + )} + ); } diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 88b577e4137e00..246c56e1c36f89 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -141,13 +141,7 @@ const boxProps = [ * @ignore - do not document. */ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { - const { - children, - clone, - className, - component: Component = "div", - ...other - } = props; + const { children, clone, className, component: Component = 'div', ...other } = props; const spread = omit(other, boxProps); @@ -169,7 +163,7 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { ); }); -const shouldForwardProp = prop => boxProps.indexOf(prop) === -1; +const shouldForwardProp = (prop) => boxProps.indexOf(prop) === -1; /** * @ignore - do not document. From a3beed3e3762f0296816894cd93022ef32c32ef3 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 19:32:41 +0200 Subject: [PATCH 11/68] removed cross-env dependency --- packages/material-ui-benchmark/package.json | 3 --- yarn.lock | 2 +- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/material-ui-benchmark/package.json b/packages/material-ui-benchmark/package.json index 5fac9c97ae675d..cb1f258d6d2c62 100644 --- a/packages/material-ui-benchmark/package.json +++ b/packages/material-ui-benchmark/package.json @@ -34,8 +34,5 @@ "react-dom": "^16.13.0", "react-jss": "^10.3.0", "styled-system": "^5.1.2" - }, - "devDependencies": { - "cross-env": "^7.0.2" } } diff --git a/yarn.lock b/yarn.lock index 6ef126ae965dba..187985a6c63532 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5620,7 +5620,7 @@ create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4: safe-buffer "^5.0.1" sha.js "^2.4.8" -cross-env@^7.0.0, cross-env@^7.0.2: +cross-env@^7.0.0: version "7.0.2" resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.2.tgz#bd5ed31339a93a3418ac4f3ca9ca3403082ae5f9" integrity sha512-KZP/bMEOJEDCkDQAyRhu3RL2ZO/SUVrxQVI0G3YEQ+OLbRA3c6zgixe8Mq8a/z7+HKlNEjo8oiLUs8iRijY2Rw== From 0b2d5033afaac59dc2be046b2c2e37c0f9ecd8a7 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 5 Oct 2020 19:34:02 +0200 Subject: [PATCH 12/68] removed unused theme --- docs/src/pages/components/slider-styled/ContinuousSlider.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 90bcf3f4401af3..d861815747e8f0 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -11,8 +11,6 @@ const Root = styled('div')({ width: 200, }); -const theme = createMuiTheme(); - export default function ContinuousSlider() { const [value, setValue] = React.useState(30); From eddfa1489f01478476af44cc67d3f6bd700721e0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 7 Oct 2020 08:50:04 +0200 Subject: [PATCH 13/68] reversed style fn --- packages/material-ui-benchmark/src/system.js | 9 +- packages/material-ui-system/src/index.d.ts | 2 + packages/material-ui-system/src/index.js | 1 + .../src/styleFunctionInversed.js | 84 +++++++++++++++++++ packages/material-ui/src/Box/Box.js | 22 ++++- 5 files changed, 112 insertions(+), 6 deletions(-) create mode 100644 packages/material-ui-system/src/styleFunctionInversed.js diff --git a/packages/material-ui-benchmark/src/system.js b/packages/material-ui-benchmark/src/system.js index 54b5650eb829f1..224ff3d1b2077e 100644 --- a/packages/material-ui-benchmark/src/system.js +++ b/packages/material-ui-benchmark/src/system.js @@ -5,9 +5,8 @@ import ReactDOMServer from 'react-dom/server'; import styledEmotion from '@emotion/styled'; import { ThemeProvider as EmotionTheme } from 'emotion-theming'; import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled-system'; -import { spacing, palette, typography, compose } from '@material-ui/system'; +import { spacing, palette, typography, compose, styleFunctionInversed } from '@material-ui/system'; import { createMuiTheme } from '@material-ui/core/styles'; -import { styleFunction } from '@material-ui/core/Box'; import { ThemeProvider as StylesThemeProvider } from '@material-ui/styles'; import BoxStyles from '@material-ui/core/Box'; import styledComponents, { @@ -24,9 +23,9 @@ Benchmark.options.minSamples = 100; const materialSystem = compose(palette, spacing, typography); const styledSystem = compose2(color, space, fontFamily, fontSize); -const BoxStyleComponents = styledComponents('div')(styleFunction); +const BoxStyleComponents = styledComponents('div')(styleFunctionInversed); const NakedStyleComponents = styledComponents('div')(spacing); -const BoxEmotion = styledEmotion('div')(styleFunction); +const BoxEmotion = styledEmotion('div')(styleFunctionInversed); const BoxMaterialSystem = styledComponents('div')(materialSystem); const BoxStyledSystem = styledComponents('div')(styledSystem); @@ -89,7 +88,7 @@ suite }) // --- .add('@material-ui/core all-inclusive', () => { - styleFunction({ + styleFunctionInversed({ theme: materialSystemTheme, color: 'primary.main', bgcolor: 'background.paper', diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 01852b04881085..a5def682383b2c 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -215,3 +215,5 @@ export const visuallyHidden: React.CSSProperties; // utils type Omit = Pick>; + +export const styleFunctionInversed: (props: any) => object; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 46dce6a29323d7..e0f20f5f3fef93 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -21,3 +21,4 @@ export { default as style } from './style'; export { default as typography } from './typography'; export * from './typography'; export { default as visuallyHidden } from './visuallyHidden'; +export { default as styleFunctionInversed } from './styleFunctionInversed'; diff --git a/packages/material-ui-system/src/styleFunctionInversed.js b/packages/material-ui-system/src/styleFunctionInversed.js new file mode 100644 index 00000000000000..f0cb1ef1fdc7e0 --- /dev/null +++ b/packages/material-ui-system/src/styleFunctionInversed.js @@ -0,0 +1,84 @@ +import borders from './borders'; +import display from './display'; +import flexbox from './flexbox'; +import grid from './grid'; +import positions from './positions'; +import palette from './palette'; +import shadows from './shadows'; +import sizing from './sizing'; +import spacing from './spacing'; +import typography from './typography'; + +const styleFunctionInversed = props => { + let result = {}; + Object.keys(props).forEach(prop => { + const inputProps = { + [prop]: props[prop], + theme: props.theme, + }; + + if(borders.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...borders(inputProps), + } + } + if(display.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...display(inputProps), + } + } + if(flexbox.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...flexbox(inputProps), + } + } + if(grid.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...grid(inputProps), + } + } + if(positions.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...positions(inputProps), + } + } + if(palette.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...palette(inputProps), + } + } + if(shadows.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...shadows(inputProps), + } + } + if(sizing.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...sizing(inputProps), + } + } + if(spacing.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...spacing(inputProps), + } + } + if(typography.filterProps.indexOf(prop) !== -1) { + result = { + ...result, + ...typography(inputProps), + } + } + }); + return result; +} + +export default styleFunctionInversed; \ No newline at end of file diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 246c56e1c36f89..daf126eea861e2 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -13,6 +13,7 @@ import { spacing, typography, css, + styleFunctionInversed, } from '@material-ui/system'; import styled from '../styles/experimentalStyled'; @@ -44,6 +45,7 @@ function omit(input, fields) { } const boxProps = [ + // borders 'border', 'borderTop', 'borderRight', @@ -51,12 +53,16 @@ const boxProps = [ 'borderLeft', 'borderColor', 'borderRadius', + + // display 'display', 'displayPrint', 'overflow', 'textOverflow', 'visibility', 'whiteSpace', + + // flexbox 'flexBasis', 'flexDirection', 'flexWrap', @@ -70,6 +76,8 @@ const boxProps = [ 'alignSelf', 'justifyItems', 'justifySelf', + + // grid 'gridGap', 'gridColumnGap', 'gridRowGap', @@ -82,15 +90,23 @@ const boxProps = [ 'gridTemplateRows', 'gridTemplateAreas', 'gridArea', + + // positions 'zIndex', 'position', 'top', 'right', 'bottom', 'left', + + // palette 'bgcolor', 'color', + + // shadows 'boxShadow', + + // sizing 'width', 'maxWidth', 'minWidth', @@ -100,6 +116,8 @@ const boxProps = [ 'sizeWidth', 'sizeHeight', 'boxSizing', + + // spacing 'm', 'mt', 'mr', @@ -128,6 +146,8 @@ const boxProps = [ 'paddingLeft', 'paddingX', 'paddingY', + + // typography 'fontFamily', 'fontSize', 'fontStyle', @@ -168,6 +188,6 @@ const shouldForwardProp = (prop) => boxProps.indexOf(prop) === -1; /** * @ignore - do not document. */ -const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunction); +const Box = styled(BoxRoot, { shouldForwardProp }, { muiName: 'MuiBox' })(styleFunctionInversed); export default Box; From 83e0ea2fb7b34c14d15b5bfb627358ede7bc98af Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 8 Oct 2020 12:51:34 +0200 Subject: [PATCH 14/68] sx wip --- .../slider-styled/ContinuousSlider.js | 10 +- packages/material-ui-system/src/palette.js | 8 +- .../src/styleFunctionInversed.js | 158 +++++++++++------- 3 files changed, 112 insertions(+), 64 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index d861815747e8f0..4d67fe4cac4ff3 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -43,7 +43,15 @@ export default function ContinuousSlider() { Regular Box - + { - let result = {}; - Object.keys(props).forEach(prop => { - const inputProps = { - [prop]: props[prop], - theme: props.theme, - }; +const filterProps = [ + ...borders.filterProps, + ...display.filterProps, + ...flexbox.filterProps, + ...grid.filterProps, + ...positions.filterProps, + ...palette.filterProps, + ...shadows.filterProps, + ...spacing.filterProps, + ...typography.filterProps, +]; - if(borders.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...borders(inputProps), - } - } - if(display.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...display(inputProps), - } - } - if(flexbox.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...flexbox(inputProps), - } - } - if(grid.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...grid(inputProps), - } - } - if(positions.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...positions(inputProps), - } - } - if(palette.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...palette(inputProps), - } - } - if(shadows.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...shadows(inputProps), - } - } - if(sizing.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...sizing(inputProps), - } - } - if(spacing.filterProps.indexOf(prop) !== -1) { - result = { - ...result, - ...spacing(inputProps), +const getThemeValue = (prop, value, theme) => { + const inputProps = { + [prop]: value, + theme, + }; + + if(borders.filterProps.indexOf(prop) !== -1) { + return borders(inputProps); + } + if(display.filterProps.indexOf(prop) !== -1) { + return display(inputProps); + } + if(flexbox.filterProps.indexOf(prop) !== -1) { + return flexbox(inputProps); + } + if(grid.filterProps.indexOf(prop) !== -1) { + return grid(inputProps); + } + if(positions.filterProps.indexOf(prop) !== -1) { + return positions(inputProps); + } + if(palette.filterProps.indexOf(prop) !== -1) { + return palette(inputProps); + } + if(shadows.filterProps.indexOf(prop) !== -1) { + return shadows(inputProps); + } + if(sizing.filterProps.indexOf(prop) !== -1) { + return sizing(inputProps); + } + if(spacing.filterProps.indexOf(prop) !== -1) { + return spacing(inputProps); + } + if(typography.filterProps.indexOf(prop) !== -1) { + return typography(inputProps); + } + return { [prop]: value }; +}; + +const traverseSx = (styles, theme) => { + if(!styles) + return null; + + if(typeof styles !== 'object') { + // value + return styles; + } + + let css = {}; + + Object.keys(styles).forEach(styleKey => { + if(typeof styles[styleKey] === 'object') { + if(filterProps.indexOf(styleKey) !== -1) { + css = { + ...css, + ...getThemeValue(styleKey, value, theme) + } + } else { + const transformedValue = traverseSx(styles[styleKey], theme); + css[styleKey] = transformedValue; } + } else { + const value = styles[styleKey]; + css = { + ...css, + ...getThemeValue(styleKey, value, theme) + }; } - if(typography.filterProps.indexOf(prop) !== -1) { + }); + + return css; +} + +const styleFunctionInversed = props => { + let result = {}; + Object.keys(props).forEach(prop => { + if(prop !== 'sx' && prop !== 'theme' && prop !== 'children' && prop !== 'component') { result = { ...result, - ...typography(inputProps), + ...getThemeValue(prop, props[prop], props.theme) } } }); - return result; + + let sxValue = traverseSx(props.sx, props.theme); + + return { + ...result, + ...sxValue, + }; } +styleFunctionInversed.filterProps = filterProps; + export default styleFunctionInversed; \ No newline at end of file From ff2d4c3617a17ae799fc06468efb4aa6ac7f60be Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 8 Oct 2020 13:15:38 +0200 Subject: [PATCH 15/68] Updated box filterProps --- .../src/styleFunctionInversed.js | 3 +- packages/material-ui/src/Box/Box.js | 132 +----------------- 2 files changed, 5 insertions(+), 130 deletions(-) diff --git a/packages/material-ui-system/src/styleFunctionInversed.js b/packages/material-ui-system/src/styleFunctionInversed.js index bd0bcf521afb4f..89f97306b9361d 100644 --- a/packages/material-ui-system/src/styleFunctionInversed.js +++ b/packages/material-ui-system/src/styleFunctionInversed.js @@ -19,6 +19,7 @@ const filterProps = [ ...shadows.filterProps, ...spacing.filterProps, ...typography.filterProps, + 'sx', ]; const getThemeValue = (prop, value, theme) => { @@ -97,7 +98,7 @@ const traverseSx = (styles, theme) => { const styleFunctionInversed = props => { let result = {}; Object.keys(props).forEach(prop => { - if(prop !== 'sx' && prop !== 'theme' && prop !== 'children' && prop !== 'component') { + if(filterProps.indexOf(prop) !== -1) { result = { ...result, ...getThemeValue(prop, props[prop], props.theme) diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index daf126eea861e2..ba68aa7eb1d666 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -17,20 +17,7 @@ import { } from '@material-ui/system'; import styled from '../styles/experimentalStyled'; -export const styleFunction = css( - compose( - borders, - display, - flexbox, - grid, - positions, - palette, - shadows, - sizing, - spacing, - typography, - ), -); +export const styleFunction = styleFunctionInversed; function omit(input, fields) { const output = {}; @@ -44,126 +31,13 @@ function omit(input, fields) { return output; } -const boxProps = [ - // borders - 'border', - 'borderTop', - 'borderRight', - 'borderBottom', - 'borderLeft', - 'borderColor', - 'borderRadius', - - // display - 'display', - 'displayPrint', - 'overflow', - 'textOverflow', - 'visibility', - 'whiteSpace', - - // flexbox - 'flexBasis', - 'flexDirection', - 'flexWrap', - 'justifyContent', - 'alignItems', - 'alignContent', - 'order', - 'flex', - 'flexGrow', - 'flexShrink', - 'alignSelf', - 'justifyItems', - 'justifySelf', - - // grid - 'gridGap', - 'gridColumnGap', - 'gridRowGap', - 'gridColumn', - 'gridRow', - 'gridAutoFlow', - 'gridAutoColumns', - 'gridAutoRows', - 'gridTemplateColumns', - 'gridTemplateRows', - 'gridTemplateAreas', - 'gridArea', - - // positions - 'zIndex', - 'position', - 'top', - 'right', - 'bottom', - 'left', - - // palette - 'bgcolor', - 'color', - - // shadows - 'boxShadow', - - // sizing - 'width', - 'maxWidth', - 'minWidth', - 'height', - 'maxHeight', - 'minHeight', - 'sizeWidth', - 'sizeHeight', - 'boxSizing', - - // spacing - 'm', - 'mt', - 'mr', - 'mb', - 'ml', - 'mx', - 'my', - 'p', - 'pt', - 'pr', - 'pb', - 'pl', - 'px', - 'py', - 'margin', - 'marginTop', - 'marginRight', - 'marginBottom', - 'marginLeft', - 'marginX', - 'marginY', - 'padding', - 'paddingTop', - 'paddingRight', - 'paddingBottom', - 'paddingLeft', - 'paddingX', - 'paddingY', - - // typography - 'fontFamily', - 'fontSize', - 'fontStyle', - 'fontWeight', - 'letterSpacing', - 'lineHeight', - 'textAlign', -]; - /** * @ignore - do not document. */ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { const { children, clone, className, component: Component = 'div', ...other } = props; - const spread = omit(other, boxProps); + const spread = omit(other, styleFunction.filtreProps); if (clone) { return React.cloneElement(children, { @@ -183,7 +57,7 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { ); }); -const shouldForwardProp = (prop) => boxProps.indexOf(prop) === -1; +const shouldForwardProp = (prop) => styleFunctionInversed.filterProps.indexOf(prop) === -1; /** * @ignore - do not document. From f7a74e94b3cd4e4c97b98c83d4f9b85e7f0e91b5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 8 Oct 2020 13:23:21 +0200 Subject: [PATCH 16/68] prettier --- .../slider-styled/ContinuousSlider.js | 21 ++++---- .../src/styleFunctionInversed.js | 53 +++++++++---------- packages/material-ui/src/Box/Box.js | 16 +----- 3 files changed, 39 insertions(+), 51 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 4d67fe4cac4ff3..b5d92878f741ce 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -43,15 +43,18 @@ export default function ContinuousSlider() { Regular Box - + { theme, }; - if(borders.filterProps.indexOf(prop) !== -1) { + if (borders.filterProps.indexOf(prop) !== -1) { return borders(inputProps); } - if(display.filterProps.indexOf(prop) !== -1) { + if (display.filterProps.indexOf(prop) !== -1) { return display(inputProps); } - if(flexbox.filterProps.indexOf(prop) !== -1) { + if (flexbox.filterProps.indexOf(prop) !== -1) { return flexbox(inputProps); } - if(grid.filterProps.indexOf(prop) !== -1) { + if (grid.filterProps.indexOf(prop) !== -1) { return grid(inputProps); } - if(positions.filterProps.indexOf(prop) !== -1) { + if (positions.filterProps.indexOf(prop) !== -1) { return positions(inputProps); } - if(palette.filterProps.indexOf(prop) !== -1) { + if (palette.filterProps.indexOf(prop) !== -1) { return palette(inputProps); } - if(shadows.filterProps.indexOf(prop) !== -1) { + if (shadows.filterProps.indexOf(prop) !== -1) { return shadows(inputProps); } - if(sizing.filterProps.indexOf(prop) !== -1) { + if (sizing.filterProps.indexOf(prop) !== -1) { return sizing(inputProps); } - if(spacing.filterProps.indexOf(prop) !== -1) { + if (spacing.filterProps.indexOf(prop) !== -1) { return spacing(inputProps); } - if(typography.filterProps.indexOf(prop) !== -1) { + if (typography.filterProps.indexOf(prop) !== -1) { return typography(inputProps); } return { [prop]: value }; }; const traverseSx = (styles, theme) => { - if(!styles) - return null; + if (!styles) return null; - if(typeof styles !== 'object') { + if (typeof styles !== 'object') { // value return styles; } let css = {}; - Object.keys(styles).forEach(styleKey => { - if(typeof styles[styleKey] === 'object') { - if(filterProps.indexOf(styleKey) !== -1) { + Object.keys(styles).forEach((styleKey) => { + if (typeof styles[styleKey] === 'object') { + if (filterProps.indexOf(styleKey) !== -1) { css = { ...css, - ...getThemeValue(styleKey, value, theme) - } + ...getThemeValue(styleKey, value, theme), + }; } else { const transformedValue = traverseSx(styles[styleKey], theme); css[styleKey] = transformedValue; @@ -87,22 +86,22 @@ const traverseSx = (styles, theme) => { const value = styles[styleKey]; css = { ...css, - ...getThemeValue(styleKey, value, theme) + ...getThemeValue(styleKey, value, theme), }; } }); return css; -} +}; -const styleFunctionInversed = props => { +const styleFunctionInversed = (props) => { let result = {}; - Object.keys(props).forEach(prop => { - if(filterProps.indexOf(prop) !== -1) { + Object.keys(props).forEach((prop) => { + if (filterProps.indexOf(prop) !== -1) { result = { ...result, - ...getThemeValue(prop, props[prop], props.theme) - } + ...getThemeValue(prop, props[prop], props.theme), + }; } }); @@ -112,8 +111,8 @@ const styleFunctionInversed = props => { ...result, ...sxValue, }; -} +}; styleFunctionInversed.filterProps = filterProps; -export default styleFunctionInversed; \ No newline at end of file +export default styleFunctionInversed; diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index ba68aa7eb1d666..6bce6488d541d7 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,20 +1,6 @@ import React from 'react'; import clsx from 'clsx'; -import { - borders, - compose, - display, - flexbox, - grid, - palette, - positions, - shadows, - sizing, - spacing, - typography, - css, - styleFunctionInversed, -} from '@material-ui/system'; +import { styleFunctionInversed } from '@material-ui/system'; import styled from '../styles/experimentalStyled'; export const styleFunction = styleFunctionInversed; From 72893a9d0259750be0176c5b7db119a7163675a0 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:50:16 +0200 Subject: [PATCH 17/68] merge conflicts --- docs/src/pages/components/slider-styled/ContinuousSlider.js | 3 +-- docs/src/pages/components/slider-styled/ContinuousSlider.tsx | 2 +- packages/material-ui/src/Box/Box.js | 3 +-- 3 files changed, 3 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 18b753f51c27c1..0bb05b95a58a1a 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -5,7 +5,6 @@ import Typography from '@material-ui/core/Typography'; import Slider from '@material-ui/lab/SliderStyled'; import VolumeDown from '@material-ui/icons/VolumeDown'; import VolumeUp from '@material-ui/icons/VolumeUp'; -import Box from '@material-ui/core/Box'; export default function ContinuousSlider() { const [value, setValue] = React.useState(30); @@ -15,7 +14,7 @@ export default function ContinuousSlider() { }; return ( - + Volume diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx index e76715b28ceea8..62c316f34541f1 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx @@ -17,7 +17,7 @@ export default function ContinuousSlider() { }; return ( - + Volume diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 76ae5230e4f484..79b786d7d89e69 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,4 +1,5 @@ import React from 'react'; +import * as PropTypes from 'prop-types'; import clsx from 'clsx'; import { styleFunctionInversed } from '@material-ui/system'; import styled from '../styles/experimentalStyled'; @@ -52,8 +53,6 @@ BoxRoot.propTypes = { component: PropTypes.elementType, }; -const shouldForwardProp = (prop) => styleFunction.filterProps.indexOf(prop) === -1; - /** * @ignore - do not document. */ From d59605841b7a19b7a072123c96084aea47bb294b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:53:11 +0200 Subject: [PATCH 18/68] cleanup --- packages/material-ui/src/Box/Box.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 79b786d7d89e69..5b4575dd33a345 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -44,8 +44,6 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { ); }); -const shouldForwardProp = (prop) => styleFunction.filterProps.indexOf(prop) === -1; - BoxRoot.propTypes = { children: PropTypes.node, className: PropTypes.string, @@ -53,6 +51,8 @@ BoxRoot.propTypes = { component: PropTypes.elementType, }; +const shouldForwardProp = (prop) => styleFunction.filterProps.indexOf(prop) === -1; + /** * @ignore - do not document. */ From 94c905d3e6c1c69cc9c548e54ac6d84016e1e7ed Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:53:56 +0200 Subject: [PATCH 19/68] Update docs/src/pages/components/slider-styled/ContinuousSlider.js --- docs/src/pages/components/slider-styled/ContinuousSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index 0bb05b95a58a1a..e578278b5b5120 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -14,7 +14,7 @@ export default function ContinuousSlider() { }; return ( - + Volume From f179fb90d097986f2385e15af464c4d8fc5cafa5 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 16:54:08 +0200 Subject: [PATCH 20/68] Update docs/src/pages/components/slider-styled/ContinuousSlider.tsx --- docs/src/pages/components/slider-styled/ContinuousSlider.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx index 62c316f34541f1..e76715b28ceea8 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.tsx +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.tsx @@ -17,7 +17,7 @@ export default function ContinuousSlider() { }; return ( - + Volume From 0373182fa33a6144e95f1c01157f8a17125c3c68 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Wed, 14 Oct 2020 17:43:08 +0200 Subject: [PATCH 21/68] updated scenarios to be in the correct benchmark --- .../material-ui-system-all-inclusive/index.js | 17 --- .../material-ui-system-colors/index.js | 10 -- .../material-ui-system-compose/index.js | 18 --- .../material-ui-system-spaces/index.js | 10 -- .../scenarios/styled-system-colors/index.js | 10 -- .../scenarios/styled-system-compose/index.js | 22 ---- .../scenarios/styled-system-spaces/index.js | 10 -- benchmark/scripts/benchmark.js | 27 ----- packages/material-ui-benchmark/src/system.js | 112 ------------------ 9 files changed, 236 deletions(-) delete mode 100644 benchmark/scenarios/material-ui-system-all-inclusive/index.js delete mode 100644 benchmark/scenarios/material-ui-system-colors/index.js delete mode 100644 benchmark/scenarios/material-ui-system-compose/index.js delete mode 100644 benchmark/scenarios/material-ui-system-spaces/index.js delete mode 100644 benchmark/scenarios/styled-system-colors/index.js delete mode 100644 benchmark/scenarios/styled-system-compose/index.js delete mode 100644 benchmark/scenarios/styled-system-spaces/index.js diff --git a/benchmark/scenarios/material-ui-system-all-inclusive/index.js b/benchmark/scenarios/material-ui-system-all-inclusive/index.js deleted file mode 100644 index 1e028b882391c9..00000000000000 --- a/benchmark/scenarios/material-ui-system-all-inclusive/index.js +++ /dev/null @@ -1,17 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; -import { styleFunction } from '@material-ui/core/Box'; - -const materialSystemTheme = createMuiTheme(); - -export default function MaterialUISystemAllInclusive() { - styleFunction({ - theme: materialSystemTheme, - color: 'primary.main', - bgcolor: 'background.paper', - fontFamily: 'h6.fontFamily', - fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'], - p: [2, 3, 4], - }); - - return null; -} diff --git a/benchmark/scenarios/material-ui-system-colors/index.js b/benchmark/scenarios/material-ui-system-colors/index.js deleted file mode 100644 index 1dd175a4377e16..00000000000000 --- a/benchmark/scenarios/material-ui-system-colors/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { palette } from '@material-ui/system'; - -export default function MaterialUISystemColors() { - palette({ - theme: {}, - bgcolor: ['red', 'blue'], - }); - - return null; -} diff --git a/benchmark/scenarios/material-ui-system-compose/index.js b/benchmark/scenarios/material-ui-system-compose/index.js deleted file mode 100644 index 0e85b395b597db..00000000000000 --- a/benchmark/scenarios/material-ui-system-compose/index.js +++ /dev/null @@ -1,18 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; -import { spacing, palette, typography, compose } from '@material-ui/system'; - -const materialSystem = compose(palette, spacing, typography); -const materialSystemTheme = createMuiTheme(); - -export default function MaterialUISystemCompose() { - materialSystem({ - theme: materialSystemTheme, - color: 'primary.main', - bgcolor: 'background.paper', - fontFamily: 'h6.fontFamily', - fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'], - p: [2, 3, 4], - }); - - return null; -} diff --git a/benchmark/scenarios/material-ui-system-spaces/index.js b/benchmark/scenarios/material-ui-system-spaces/index.js deleted file mode 100644 index ec9677f1957803..00000000000000 --- a/benchmark/scenarios/material-ui-system-spaces/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { spacing } from '@material-ui/system'; - -export default function MaterialUISystemSpaces() { - spacing({ - theme: {}, - p: [1, 2, 3], - }); - - return null; -} diff --git a/benchmark/scenarios/styled-system-colors/index.js b/benchmark/scenarios/styled-system-colors/index.js deleted file mode 100644 index e3265ba3f95516..00000000000000 --- a/benchmark/scenarios/styled-system-colors/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { color } from 'styled-system'; - -export default function StyledSystemColors() { - color({ - theme: {}, - bg: ['red', 'blue'], - }); - - return null; -} diff --git a/benchmark/scenarios/styled-system-compose/index.js b/benchmark/scenarios/styled-system-compose/index.js deleted file mode 100644 index be8f1305cda567..00000000000000 --- a/benchmark/scenarios/styled-system-compose/index.js +++ /dev/null @@ -1,22 +0,0 @@ -import { createMuiTheme } from '@material-ui/core/styles'; -import { space, color, fontFamily, fontSize, compose } from 'styled-system'; - -const styledSystem = compose(color, space, fontFamily, fontSize); -const styledSystemTheme = createMuiTheme(); -styledSystemTheme.breakpoints = ['40em', '52em', '64em']; -styledSystemTheme.colors = styledSystemTheme.palette; -styledSystemTheme.fontSizes = styledSystemTheme.typography; -styledSystemTheme.fonts = styledSystemTheme.typography; - -export default function StyledSystemCompose() { - styledSystem({ - theme: styledSystemTheme, - color: 'primary.main', - bg: 'background.paper', - fontFamily: 'h6.fontFamily', - fontSize: ['h6.fontSize', 'h4.fontSize', 'h3.fontSize'], - p: [2, 3, 4], - }); - - return null; -} diff --git a/benchmark/scenarios/styled-system-spaces/index.js b/benchmark/scenarios/styled-system-spaces/index.js deleted file mode 100644 index 41c78350b5c97e..00000000000000 --- a/benchmark/scenarios/styled-system-spaces/index.js +++ /dev/null @@ -1,10 +0,0 @@ -import { space } from 'styled-system'; - -export default function StyledSystemSpaces() { - space({ - theme: {}, - p: [1, 2, 3], - }); - - return null; -} diff --git a/benchmark/scripts/benchmark.js b/benchmark/scripts/benchmark.js index efce8715cb8eba..02a3a8f19a8652 100644 --- a/benchmark/scripts/benchmark.js +++ b/benchmark/scripts/benchmark.js @@ -96,33 +96,6 @@ async function run() { try { await runMeasures(browser, 'noop (baseline)', './noop/index.js', 10); - await runMeasures( - browser, - '@material-ui/system colors', - './material-ui-system-colors/index.js', - 10, - ); - await runMeasures(browser, 'styled-system colors', './styled-system-colors/index.js', 10); - await runMeasures( - browser, - '@material-ui/system spaces', - './material-ui-system-spaces/index.js', - 10, - ); - await runMeasures(browser, 'styled-system spaces', './styled-system-spaces/index.js', 10); - await runMeasures( - browser, - '@material-ui/system compose', - './material-ui-system-compose/index.js', - 10, - ); - await runMeasures(browser, 'styled-system compose', './styled-system-compose/index.js', 10); - await runMeasures( - browser, - '@material-ui/core all-inclusive', - './material-ui-system-all-inclusive/index.js', - 10, - ); await runMeasures( browser, 'styled-components Box + @material-ui/system', diff --git a/packages/material-ui-benchmark/src/system.js b/packages/material-ui-benchmark/src/system.js index 8ed2b88d4f418a..d427db3c587a4a 100644 --- a/packages/material-ui-benchmark/src/system.js +++ b/packages/material-ui-benchmark/src/system.js @@ -1,17 +1,9 @@ /* eslint-disable no-console */ import Benchmark from 'benchmark'; -import React from 'react'; -import ReactDOMServer from 'react-dom/server'; -import styledEmotion from '@emotion/styled'; -import { ThemeProvider as EmotionTheme } from 'emotion-theming'; import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled-system'; import { spacing, palette, typography, compose } from '@material-ui/system'; import { createMuiTheme } from '@material-ui/core/styles'; import { styleFunction } from '@material-ui/core/Box'; -import { styled, ThemeProvider as StylesThemeProvider } from '@material-ui/styles'; -import styledComponents, { - ThemeProvider as StyledComponentsThemeProvider, -} from 'styled-components'; const suite = new Benchmark.Suite('system', { onError: (event) => { @@ -23,14 +15,6 @@ Benchmark.options.minSamples = 100; const materialSystem = compose(palette, spacing, typography); const styledSystem = compose2(color, space, fontFamily, fontSize); -const BoxStyles = styled('div')(styleFunction); -const BoxStyleComponents = styledComponents('div')(styleFunction); -const NakedStyleComponents = styledComponents('div')(spacing); -const BoxEmotion = styledEmotion('div')(styleFunction); - -const BoxMaterialSystem = styledComponents('div')(materialSystem); -const BoxStyledSystem = styledComponents('div')(styledSystem); - const materialSystemTheme = createMuiTheme(); const styledSystemTheme = createMuiTheme(); @@ -98,102 +82,6 @@ suite p: [2, 3, 4], }); }) - // --- - .add('styled-components Box + @material-ui/system', () => { - ReactDOMServer.renderToString( - - - @material-ui/system - - , - ); - }) - .add('styled-components Box + styled-system', () => { - ReactDOMServer.renderToString( - - - styled-system - - , - ); - }) - // // --- - .add('Box emotion', () => { - ReactDOMServer.renderToString( - - - emotion - - , - ); - }) - .add('Box @material-ui/styles', () => { - ReactDOMServer.renderToString( - - - @material-ui/styles - - , - ); - }) - .add('Box styled-components', () => { - ReactDOMServer.renderToString( - - - styled-components - - , - ); - }) - .add('Naked styled-components', () => { - ReactDOMServer.renderToString( - - - styled-components - - , - ); - }) .on('cycle', (event) => { console.log(String(event.target)); }) From d43819142e85c6d96ff618995791567440ab100b Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 13:21:49 +0200 Subject: [PATCH 22/68] fixed typings, updated box page --- docs/src/pages/components/box/box.md | 17 +++++++++ .../slider-styled/ContinuousSlider.js | 38 ------------------- packages/material-ui-system/src/index.d.ts | 2 +- .../src/styleFunctionInversed.js | 11 +++--- packages/material-ui/src/Box/Box.d.ts | 3 ++ packages/material-ui/src/Box/Box.js | 2 +- 6 files changed, 27 insertions(+), 46 deletions(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 1d39a7347ddbb6..5e75080bbed482 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -57,6 +57,23 @@ The Box children accepts a render props function. You can pull out the `classNam > ⚠️ The CSS specificity relies on the import order. > If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last. +### The sx prop + +Sometimes, the properties on the Box component are not enough for styling the component. For solving this, we support the `sx` prop, which allows you to specify any css rules you want, in addition to the ones already available on the `Box` component. Here is an example of how you may use it: + +```jsx + +``` + ## API ```jsx diff --git a/docs/src/pages/components/slider-styled/ContinuousSlider.js b/docs/src/pages/components/slider-styled/ContinuousSlider.js index e578278b5b5120..40d8ee67e3c625 100644 --- a/docs/src/pages/components/slider-styled/ContinuousSlider.js +++ b/docs/src/pages/components/slider-styled/ContinuousSlider.js @@ -37,44 +37,6 @@ export default function ContinuousSlider() { Disabled slider - Regular Box - - - - Cloned Box - - - - Children as fn Box - - {({ className }) => ( - - )} - ); } diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index a5def682383b2c..c3a1db49f68b05 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -216,4 +216,4 @@ export const visuallyHidden: React.CSSProperties; // utils type Omit = Pick>; -export const styleFunctionInversed: (props: any) => object; +export function styleFunctionInversed(props: any): object; diff --git a/packages/material-ui-system/src/styleFunctionInversed.js b/packages/material-ui-system/src/styleFunctionInversed.js index 05840adcfbdb6e..75d537f868fa38 100644 --- a/packages/material-ui-system/src/styleFunctionInversed.js +++ b/packages/material-ui-system/src/styleFunctionInversed.js @@ -76,17 +76,16 @@ const traverseSx = (styles, theme) => { if (filterProps.indexOf(styleKey) !== -1) { css = { ...css, - ...getThemeValue(styleKey, value, theme), + ...getThemeValue(styleKey, styles[styleKey], theme), }; } else { const transformedValue = traverseSx(styles[styleKey], theme); css[styleKey] = transformedValue; } } else { - const value = styles[styleKey]; css = { ...css, - ...getThemeValue(styleKey, value, theme), + ...getThemeValue(styleKey, styles[styleKey], theme), }; } }); @@ -94,7 +93,7 @@ const traverseSx = (styles, theme) => { return css; }; -const styleFunctionInversed = (props) => { +function styleFunctionInversed(props) { let result = {}; Object.keys(props).forEach((prop) => { if (filterProps.indexOf(prop) !== -1) { @@ -105,13 +104,13 @@ const styleFunctionInversed = (props) => { } }); - let sxValue = traverseSx(props.sx, props.theme); + const sxValue = traverseSx(props.sx, props.theme); return { ...result, ...sxValue, }; -}; +} styleFunctionInversed.filterProps = filterProps; diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 7b29a250ea3a02..148cb89a6de96b 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -13,6 +13,7 @@ import { typography, PropsFor, } from '@material-ui/system'; +import { CSSObject } from '../styles/experimentalStyled'; import { Omit } from '..'; type BoxStyleFunction = ComposedStyleFunction< @@ -32,6 +33,7 @@ type BoxStyleFunction = ComposedStyleFunction< type SystemProps = PropsFor; type ElementProps = Omit, keyof SystemProps>; +type SxProps = Omit & SystemProps; export interface BoxProps extends ElementProps, SystemProps { // styled API @@ -40,6 +42,7 @@ export interface BoxProps extends ElementProps, SystemProps { ref?: React.Ref; // workaround for https://github.com/mui-org/material-ui/pull/15611 css?: SystemProps; + sx?: SxProps; } declare const Box: React.ComponentType; diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 5b4575dd33a345..e3c3dfe2632a08 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,5 +1,5 @@ import React from 'react'; -import * as PropTypes from 'prop-types'; +import PropTypes from 'prop-types'; import clsx from 'clsx'; import { styleFunctionInversed } from '@material-ui/system'; import styled from '../styles/experimentalStyled'; From 7bab4bddcfb9c94a109618e1d9ba3388240b150d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 13:42:27 +0200 Subject: [PATCH 23/68] moved styleFunction to Box --- packages/material-ui-benchmark/src/system.js | 5 ++-- packages/material-ui-system/src/index.d.ts | 2 -- packages/material-ui-system/src/index.js | 1 - packages/material-ui/src/Box/Box.d.ts | 2 +- packages/material-ui/src/Box/Box.js | 4 +-- packages/material-ui/src/Box/index.d.ts | 2 ++ packages/material-ui/src/Box/index.js | 3 +- .../material-ui/src/Box/styleFunction.d.ts | 4 +++ .../src/Box/styleFunction.js} | 30 ++++++++++--------- 9 files changed, 29 insertions(+), 24 deletions(-) create mode 100644 packages/material-ui/src/Box/styleFunction.d.ts rename packages/{material-ui-system/src/styleFunctionInversed.js => material-ui/src/Box/styleFunction.js} (83%) diff --git a/packages/material-ui-benchmark/src/system.js b/packages/material-ui-benchmark/src/system.js index 6c9aa45b9585fc..d427db3c587a4a 100644 --- a/packages/material-ui-benchmark/src/system.js +++ b/packages/material-ui-benchmark/src/system.js @@ -1,8 +1,9 @@ /* eslint-disable no-console */ import Benchmark from 'benchmark'; import { space, color, fontFamily, fontSize, compose as compose2 } from 'styled-system'; -import { spacing, palette, typography, compose, styleFunctionInversed } from '@material-ui/system'; +import { spacing, palette, typography, compose } from '@material-ui/system'; import { createMuiTheme } from '@material-ui/core/styles'; +import { styleFunction } from '@material-ui/core/Box'; const suite = new Benchmark.Suite('system', { onError: (event) => { @@ -72,7 +73,7 @@ suite }) // --- .add('@material-ui/core all-inclusive', () => { - styleFunctionInversed({ + styleFunction({ theme: materialSystemTheme, color: 'primary.main', bgcolor: 'background.paper', diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index c3a1db49f68b05..01852b04881085 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -215,5 +215,3 @@ export const visuallyHidden: React.CSSProperties; // utils type Omit = Pick>; - -export function styleFunctionInversed(props: any): object; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index e0f20f5f3fef93..46dce6a29323d7 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -21,4 +21,3 @@ export { default as style } from './style'; export { default as typography } from './typography'; export * from './typography'; export { default as visuallyHidden } from './visuallyHidden'; -export { default as styleFunctionInversed } from './styleFunctionInversed'; diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 148cb89a6de96b..3d6bc7302d764e 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -16,7 +16,7 @@ import { import { CSSObject } from '../styles/experimentalStyled'; import { Omit } from '..'; -type BoxStyleFunction = ComposedStyleFunction< +export type BoxStyleFunction = ComposedStyleFunction< [ typeof borders, typeof display, diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index e3c3dfe2632a08..44fde841d6e854 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,11 +1,9 @@ import React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; -import { styleFunctionInversed } from '@material-ui/system'; +import styleFunction from './styleFunction'; import styled from '../styles/experimentalStyled'; -export const styleFunction = styleFunctionInversed; - function omit(input, fields) { const output = {}; diff --git a/packages/material-ui/src/Box/index.d.ts b/packages/material-ui/src/Box/index.d.ts index 38ce2fc4f25954..a6fe0c7c004d42 100644 --- a/packages/material-ui/src/Box/index.d.ts +++ b/packages/material-ui/src/Box/index.d.ts @@ -1,2 +1,4 @@ export { default } from './Box'; export * from './Box'; +export { default as styleFunction } from './styleFunction'; +export * from './styleFunction'; diff --git a/packages/material-ui/src/Box/index.js b/packages/material-ui/src/Box/index.js index bdc699f271dc49..c15b792255b474 100644 --- a/packages/material-ui/src/Box/index.js +++ b/packages/material-ui/src/Box/index.js @@ -1 +1,2 @@ -export { default, styleFunction } from './Box'; +export { default } from './Box'; +export { default as styleFunction } from './styleFunction'; diff --git a/packages/material-ui/src/Box/styleFunction.d.ts b/packages/material-ui/src/Box/styleFunction.d.ts new file mode 100644 index 00000000000000..3c201089140988 --- /dev/null +++ b/packages/material-ui/src/Box/styleFunction.d.ts @@ -0,0 +1,4 @@ +import { BoxStyleFunction } from './Box'; + +declare const styleFunction: BoxStyleFunction; +export default styleFunction; diff --git a/packages/material-ui-system/src/styleFunctionInversed.js b/packages/material-ui/src/Box/styleFunction.js similarity index 83% rename from packages/material-ui-system/src/styleFunctionInversed.js rename to packages/material-ui/src/Box/styleFunction.js index 75d537f868fa38..110424bce467e4 100644 --- a/packages/material-ui-system/src/styleFunctionInversed.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -1,13 +1,15 @@ -import borders from './borders'; -import display from './display'; -import flexbox from './flexbox'; -import grid from './grid'; -import positions from './positions'; -import palette from './palette'; -import shadows from './shadows'; -import sizing from './sizing'; -import spacing from './spacing'; -import typography from './typography'; +import { + borders, + display, + flexbox, + grid, + positions, + palette, + shadows, + sizing, + spacing, + typography, +} from '@material-ui/system'; const filterProps = [ ...borders.filterProps, @@ -93,7 +95,7 @@ const traverseSx = (styles, theme) => { return css; }; -function styleFunctionInversed(props) { +const styleFunction = (props) => { let result = {}; Object.keys(props).forEach((prop) => { if (filterProps.indexOf(prop) !== -1) { @@ -110,8 +112,8 @@ function styleFunctionInversed(props) { ...result, ...sxValue, }; -} +}; -styleFunctionInversed.filterProps = filterProps; +styleFunction.filterProps = filterProps; -export default styleFunctionInversed; +export default styleFunction; From d966402474350767579bbdb16e85c65c17bb45cb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 15:49:41 +0200 Subject: [PATCH 24/68] Update docs/src/pages/components/box/box.md Co-authored-by: Olivier Tassinari --- docs/src/pages/components/box/box.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 5e75080bbed482..e363e8981db35e 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -57,7 +57,7 @@ The Box children accepts a render props function. You can pull out the `classNam > ⚠️ The CSS specificity relies on the import order. > If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last. -### The sx prop +## The sx prop Sometimes, the properties on the Box component are not enough for styling the component. For solving this, we support the `sx` prop, which allows you to specify any css rules you want, in addition to the ones already available on the `Box` component. Here is an example of how you may use it: From 76c0f7e6f6e3eab0be3a1dd09023d401c22c4f7a Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 15:50:03 +0200 Subject: [PATCH 25/68] Update packages/material-ui-system/src/palette.js Co-authored-by: Olivier Tassinari --- packages/material-ui-system/src/palette.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/material-ui-system/src/palette.js b/packages/material-ui-system/src/palette.js index 0fe83e52edfc9a..cd4586a57cfa34 100644 --- a/packages/material-ui-system/src/palette.js +++ b/packages/material-ui-system/src/palette.js @@ -14,7 +14,6 @@ export const bgcolor = style({ export const backgroundColor = style({ prop: 'backgroundColor', - cssProperty: 'backgroundColor', themeKey: 'palette', }); From 448bc827ff5b4a91fa45291f47ba330dc525355f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 15:50:26 +0200 Subject: [PATCH 26/68] Update packages/material-ui/src/Box/Box.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/Box/Box.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index 44fde841d6e854..e36f3a21947aed 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -1,4 +1,4 @@ -import React from 'react'; +import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import styleFunction from './styleFunction'; From a7b690ddec0ec7c5a6eb423368ba4809823f6a46 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 15:50:38 +0200 Subject: [PATCH 27/68] Update docs/src/pages/components/box/box.md Co-authored-by: Olivier Tassinari --- docs/src/pages/components/box/box.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index e363e8981db35e..420b69fedeba03 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -59,7 +59,7 @@ The Box children accepts a render props function. You can pull out the `classNam ## The sx prop -Sometimes, the properties on the Box component are not enough for styling the component. For solving this, we support the `sx` prop, which allows you to specify any css rules you want, in addition to the ones already available on the `Box` component. Here is an example of how you may use it: +Sometimes, the props on the Box component are not enough for styling the component. For solving this, we support the `sx` prop, which allows you to specify any CSS rules you want, in addition to the ones already available on the `Box` component. Here is an example of how you may use it: ```jsx Date: Thu, 15 Oct 2020 16:17:25 +0200 Subject: [PATCH 28/68] added support for functions for the values --- packages/material-ui/src/Box/styleFunction.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index 110424bce467e4..370704cbeeaa1a 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -66,6 +66,10 @@ const getThemeValue = (prop, value, theme) => { const traverseSx = (styles, theme) => { if (!styles) return null; + if(typeof styles === 'function') { + return styles(theme); + } + if (typeof styles !== 'object') { // value return styles; @@ -84,6 +88,11 @@ const traverseSx = (styles, theme) => { const transformedValue = traverseSx(styles[styleKey], theme); css[styleKey] = transformedValue; } + } else if(typeof styles[styleKey] === 'function') { + css = { + ...css, + [styleKey]: styles[styleKey](theme), + }; } else { css = { ...css, From f6faf73415942c9e11db997ba3f9d2a5b16e77ab Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 16:28:32 +0200 Subject: [PATCH 29/68] prettier --- packages/material-ui/src/Box/styleFunction.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index 370704cbeeaa1a..6107ae1836cb98 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -66,7 +66,7 @@ const getThemeValue = (prop, value, theme) => { const traverseSx = (styles, theme) => { if (!styles) return null; - if(typeof styles === 'function') { + if (typeof styles === 'function') { return styles(theme); } @@ -88,7 +88,7 @@ const traverseSx = (styles, theme) => { const transformedValue = traverseSx(styles[styleKey], theme); css[styleKey] = transformedValue; } - } else if(typeof styles[styleKey] === 'function') { + } else if (typeof styles[styleKey] === 'function') { css = { ...css, [styleKey]: styles[styleKey](theme), From c53c4bd3cbfc11f1befd969fe9885feda7db7061 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 16:58:08 +0200 Subject: [PATCH 30/68] fixed sizing filterProps --- packages/material-ui/src/Box/styleFunction.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index 6107ae1836cb98..968ff0f6cf3f06 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -19,6 +19,7 @@ const filterProps = [ ...positions.filterProps, ...palette.filterProps, ...shadows.filterProps, + ...sizing.filterProps, ...spacing.filterProps, ...typography.filterProps, 'sx', From ed02098814fc5886e113529bff8250086d6d9657 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 19:44:55 +0200 Subject: [PATCH 31/68] support sx as function --- packages/material-ui/src/Box/Box.d.ts | 4 +++- packages/material-ui/src/Box/styleFunction.js | 3 ++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 3d6bc7302d764e..67940b45fa7457 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -13,6 +13,7 @@ import { typography, PropsFor, } from '@material-ui/system'; +import { Theme } from '../styles/createMuiTheme'; import { CSSObject } from '../styles/experimentalStyled'; import { Omit } from '..'; @@ -33,7 +34,8 @@ export type BoxStyleFunction = ComposedStyleFunction< type SystemProps = PropsFor; type ElementProps = Omit, keyof SystemProps>; -type SxProps = Omit & SystemProps; +type SxObjectType = Omit & SystemProps | Partial & SystemProps, (theme: Theme) => CSSObject>> +type SxProps = SxObjectType | ((theme: Theme) => SxObjectType); export interface BoxProps extends ElementProps, SystemProps { // styled API diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index 968ff0f6cf3f06..ed48253df2c4cd 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -116,7 +116,8 @@ const styleFunction = (props) => { } }); - const sxValue = traverseSx(props.sx, props.theme); + const sxObjectInput = typeof props.sx === 'function' ? props.sx(props.theme) : props.sx; + const sxValue = traverseSx(sxObjectInput, props.theme); return { ...result, From f1ae038723e42672ba79e390203a032deb172b0d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 15 Oct 2020 20:04:15 +0200 Subject: [PATCH 32/68] prettier --- packages/material-ui/src/Box/Box.d.ts | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 67940b45fa7457..af40a10baf861e 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -34,7 +34,11 @@ export type BoxStyleFunction = ComposedStyleFunction< type SystemProps = PropsFor; type ElementProps = Omit, keyof SystemProps>; -type SxObjectType = Omit & SystemProps | Partial & SystemProps, (theme: Theme) => CSSObject>> +type SxObjectType = + | (Omit & SystemProps) + | Partial< + Record & SystemProps, (theme: Theme) => CSSObject> + >; type SxProps = SxObjectType | ((theme: Theme) => SxObjectType); export interface BoxProps extends ElementProps, SystemProps { From d2756c7b5ce707271ac96a0d8fbe3bbf78d68213 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 19 Oct 2020 14:27:09 +0200 Subject: [PATCH 33/68] implemented breakpoints, fixed types, removed theme function callback --- .../material-ui-system/src/breakpoints.js | 8 ++++- packages/material-ui-system/src/index.d.ts | 4 +++ packages/material-ui-system/src/index.js | 1 + packages/material-ui/src/Box/Box.d.ts | 10 +++--- packages/material-ui/src/Box/styleFunction.js | 31 ++++++++++++++++--- 5 files changed, 42 insertions(+), 12 deletions(-) diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js index 029896503ce07b..0ae68ea983f2c0 100644 --- a/packages/material-ui-system/src/breakpoints.js +++ b/packages/material-ui-system/src/breakpoints.js @@ -36,7 +36,13 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) { if (typeof propValue === 'object') { const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints; return Object.keys(propValue).reduce((acc, breakpoint) => { - acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]); + // key is breakpoint + if(defaultBreakpoints.keys.indexOf(breakpoint) != -1) { + acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]); + } else { + const cssKey = breakpoint; + acc[cssKey] = propValue[cssKey]; + } return acc; }, {}); } diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 01852b04881085..0386aca5e63012 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -34,6 +34,10 @@ type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; * @returns An enhanced stylefunction that considers breakpoints */ export function breakpoints( + props: Props, propValue: any, styleFromPropValue: (value: any) => any +): any; + +export function handleBreakpoints( styleFunction: StyleFunction ): StyleFunction> & Props>; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 46dce6a29323d7..0a0bd45c26638f 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -1,6 +1,7 @@ export { default as borders } from './borders'; export * from './borders'; export { default as breakpoints } from './breakpoints'; +export { handleBreakpoints as handleBreakpoints } from './breakpoints'; export { default as compose } from './compose'; export { default as css } from './css'; export { default as display } from './display'; diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index af40a10baf861e..7d75e6e2e16d1d 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -34,12 +34,10 @@ export type BoxStyleFunction = ComposedStyleFunction< type SystemProps = PropsFor; type ElementProps = Omit, keyof SystemProps>; -type SxObjectType = - | (Omit & SystemProps) - | Partial< - Record & SystemProps, (theme: Theme) => CSSObject> - >; -type SxProps = SxObjectType | ((theme: Theme) => SxObjectType); +type SxPropsValue = (Omit & SystemProps); +type SxProps = { + [Name in keyof SxPropsValue]?: SxPropsValue[Name] | ((theme: Theme) => CSSObject | SxPropsValue[Name]) | SxProps; +}; export interface BoxProps extends ElementProps, SystemProps { // styled API diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index ed48253df2c4cd..2e2ccffd05bec5 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -9,8 +9,15 @@ import { sizing, spacing, typography, + handleBreakpoints, } from '@material-ui/system'; +function objectsHaveSameKeys(...objects) { + const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []); + const union = new Set(allKeys); + return objects.every(object => union.size === Object.keys(object).length); +} + const filterProps = [ ...borders.filterProps, ...display.filterProps, @@ -86,8 +93,24 @@ const traverseSx = (styles, theme) => { ...getThemeValue(styleKey, styles[styleKey], theme), }; } else { - const transformedValue = traverseSx(styles[styleKey], theme); - css[styleKey] = transformedValue; + const breakpointsValues = handleBreakpoints({ theme }, styles[styleKey], x => ({ [styleKey]: x })); + + if(objectsHaveSameKeys(breakpointsValues, styles[styleKey])) { + const transformedValue = traverseSx(styles[styleKey], theme); + css[styleKey] = transformedValue; + } else { + const spread = {}; + Object.keys(breakpointsValues).forEach(breakpoint => { + spread[breakpoint] = { + ...css[breakpoint], + ...breakpointsValues[breakpoint], + } + }) + css = { + ...css, + ...spread, + } + } } } else if (typeof styles[styleKey] === 'function') { css = { @@ -101,7 +124,6 @@ const traverseSx = (styles, theme) => { }; } }); - return css; }; @@ -116,8 +138,7 @@ const styleFunction = (props) => { } }); - const sxObjectInput = typeof props.sx === 'function' ? props.sx(props.theme) : props.sx; - const sxValue = traverseSx(sxObjectInput, props.theme); + const sxValue = traverseSx(props.sx, props.theme); return { ...result, From 0f64e53897de855904542e9fce7b1f904de732da Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 19 Oct 2020 16:21:07 +0200 Subject: [PATCH 34/68] added theme-ui benchmark + sx prop benchmark for the box --- .../sx-prop-box-material-ui/index.js | 32 ++ .../scenarios/sx-prop-box-theme-ui/index.js | 49 ++++ benchmark/browser/scripts/benchmark.js | 12 + docs/package.json | 3 +- yarn.lock | 277 ++++++++++++++++-- 5 files changed, 349 insertions(+), 24 deletions(-) create mode 100644 benchmark/browser/scenarios/sx-prop-box-material-ui/index.js create mode 100644 benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js diff --git a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js new file mode 100644 index 00000000000000..9f0ae0eb671664 --- /dev/null +++ b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js @@ -0,0 +1,32 @@ +import * as React from 'react'; +import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; +import Box from '@material-ui/core/Box'; +import { logReactMetrics } from '../utils'; + +const theme = createMuiTheme(); + +export default function BasicStyledComponents() { + return ( + + {new Array(1000).fill().map(() => ( + + theme.palette.secondary.dark, + }, + }} + > + material-ui + + + ))} + + ); + } \ No newline at end of file diff --git a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js new file mode 100644 index 00000000000000..0971cc57817ce3 --- /dev/null +++ b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js @@ -0,0 +1,49 @@ +import * as React from 'react'; +/** @jsx jsx */ +import { + jsx, + Box, + ThemeProvider + } from 'theme-ui'; +import { alpha } from '@material-ui/core/styles'; +import { logReactMetrics } from '../utils'; + +const theme = { + fonts: { + body: 'system-ui, sans-serif', + heading: '"Avenir Next", sans-serif', + monospace: 'Menlo, monospace', + }, + colors: { + text: '#000', + background: '#fff', + primary: '#33e', + }, +} + +export default function BasicStyledComponents() { + return ( + + {new Array(1000).fill().map(() => ( + + theme.colors.text, + }, + }} + > + theme-ui + + + ))} + + ); + } \ No newline at end of file diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js index 55ac06647ccf46..f77a12edc2ddec 100644 --- a/benchmark/browser/scripts/benchmark.js +++ b/benchmark/browser/scripts/benchmark.js @@ -117,6 +117,18 @@ async function run() { './basic-styled-components/index.js', 10, ); + await runMeasures( + browser, + 'Theme-UI box sx prop', + './sx-prop-box-theme-ui/index.js', + 10, + ); + await runMeasures( + browser, + 'Material-UI box sx prop', + './sx-prop-box-material-ui/index.js', + 10, + ); } finally { await Promise.all([browser.close(), server.close()]); } diff --git a/docs/package.json b/docs/package.json index 887977570cdff2..149292eef087cf 100644 --- a/docs/package.json +++ b/docs/package.json @@ -114,8 +114,9 @@ "redux-logger": "^3.0.6", "rimraf": "^3.0.0", "styled-components": "^5.0.0", - "stylis-plugin-rtl": "^1.0.0", "stylis": "^3.5.4", + "stylis-plugin-rtl": "^1.0.0", + "theme-ui": "^0.3.1", "webfontloader": "^1.6.28", "webpack": "^4.41.0", "webpack-bundle-analyzer": "^3.5.1" diff --git a/yarn.lock b/yarn.lock index 35384bf2ade587..32aa5532edf2ca 100644 --- a/yarn.lock +++ b/yarn.lock @@ -69,7 +69,7 @@ optionalDependencies: chokidar "^2.1.8" -"@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4": +"@babel/code-frame@7.10.4", "@babel/code-frame@^7.0.0", "@babel/code-frame@^7.10.4", "@babel/code-frame@^7.5.5": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.10.4.tgz#168da1a36e90da68ae8d49c0f1b48c7c6249213a" integrity sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg== @@ -85,7 +85,27 @@ invariant "^2.2.4" semver "^5.5.0" -"@babel/core@7.7.7", "@babel/core@>=7.9.0", "@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5": +"@babel/core@7.7.7": + version "7.7.7" + resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.7.7.tgz#ee155d2e12300bcc0cff6a8ad46f2af5063803e9" + integrity sha512-jlSjuj/7z138NLZALxVgrx13AOtqip42ATZP7+kYl53GvDV6+4dCek1mVUo8z8c8Xnw/mx2q3d9HWh3griuesQ== + dependencies: + "@babel/code-frame" "^7.5.5" + "@babel/generator" "^7.7.7" + "@babel/helpers" "^7.7.4" + "@babel/parser" "^7.7.7" + "@babel/template" "^7.7.4" + "@babel/traverse" "^7.7.4" + "@babel/types" "^7.7.4" + convert-source-map "^1.7.0" + debug "^4.1.0" + json5 "^2.1.0" + lodash "^4.17.13" + resolve "^1.3.2" + semver "^5.4.1" + source-map "^0.5.0" + +"@babel/core@>=7.9.0", "@babel/core@^7.1.6", "@babel/core@^7.10.2", "@babel/core@^7.4.5", "@babel/core@^7.5.4", "@babel/core@^7.7.5": version "7.11.6" resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.11.6.tgz#3a9455dc7387ff1bac45770650bc13ba04a15651" integrity sha512-Wpcv03AGnmkgm6uS6k8iwhIwTrcP0m17TL1n1sy7qD0qelDu4XNeW0dN0mHfa+Gei211yDaLoEe/VlbXQzM4Bg== @@ -116,6 +136,15 @@ jsesc "^2.5.1" source-map "^0.5.0" +"@babel/generator@^7.12.1", "@babel/generator@^7.7.7": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.12.1.tgz#0d70be32bdaa03d7c51c8597dda76e0df1f15468" + integrity sha512-DB+6rafIdc9o72Yc3/Ph5h+6hUjeOp66pF0naQBgUFFuPqzQwIlPTm3xZR7YNvduIMtkDIj2t21LSQwnbCrXvg== + dependencies: + "@babel/types" "^7.12.1" + jsesc "^2.5.1" + source-map "^0.5.0" + "@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.10.4.tgz#5bf0d495a3f757ac3bda48b5bf3b3ba309c72ba3" @@ -331,6 +360,15 @@ "@babel/traverse" "^7.10.4" "@babel/types" "^7.10.4" +"@babel/helpers@^7.7.4": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.12.1.tgz#8a8261c1d438ec18cb890434df4ec768734c1e79" + integrity sha512-9JoDSBGoWtmbay98efmT2+mySkwjzeFeAL9BuWNoVQpkPFQF8SIIFUfY5os9u8wVzglzoiPRSW7cuJmBDUt43g== + dependencies: + "@babel/template" "^7.10.4" + "@babel/traverse" "^7.12.1" + "@babel/types" "^7.12.1" + "@babel/highlight@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.10.4.tgz#7d1bdfd65753538fabe6c38596cdb76d9ac60143" @@ -359,6 +397,11 @@ resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.11.5.tgz#c7ff6303df71080ec7a4f5b8c003c58f1cf51037" integrity sha512-X9rD8qqm695vgmeaQ4fvz/o3+Wk4ZzQvSHkDBgpYKxpD4qTAUm88ZKtHkVqIOsYFFbIQ6wQYhC6q7pjqVK0E0Q== +"@babel/parser@^7.12.1", "@babel/parser@^7.7.7": + version "7.12.3" + resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.12.3.tgz#a305415ebe7a6c7023b40b5122a0662d928334cd" + integrity sha512-kFsOS0IbsuhO5ojF8Hc8z/8vEIOkylVBrjiZUbLTE3XFe0Qi+uu6HjzQixkFaqr0ZPAMZcBVxEwmsnsLPZ2Xsw== + "@babel/plugin-proposal-async-generator-functions@^7.10.4": version "7.10.5" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-async-generator-functions/-/plugin-proposal-async-generator-functions-7.10.5.tgz#3491cabf2f7c179ab820606cec27fed15e0e8558" @@ -408,7 +451,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4" -"@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.1", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4": +"@babel/plugin-proposal-nullish-coalescing-operator@^7.1.0", "@babel/plugin-proposal-nullish-coalescing-operator@^7.10.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-nullish-coalescing-operator/-/plugin-proposal-nullish-coalescing-operator-7.10.4.tgz#02a7e961fc32e6d5b2db0649e01bf80ddee7e04a" integrity sha512-wq5n1M3ZUlHl9sqT2ok1T2/MTt6AXE0e1Lz4WzWBr95LsAZ5qDXe4KnFuauYyEyLiohvXFMdbsOTMyLZs91Zlw== @@ -441,7 +484,7 @@ "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-syntax-optional-catch-binding" "^7.8.0" -"@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.10.1", "@babel/plugin-proposal-optional-chaining@^7.11.0": +"@babel/plugin-proposal-optional-chaining@^7.1.0", "@babel/plugin-proposal-optional-chaining@^7.11.0": version "7.11.0" resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.11.0.tgz#de5866d0646f6afdaab8a566382fe3a221755076" integrity sha512-v9fZIu3Y8562RRwhm1BbMRxtqZNFmFA2EG+pT2diuU8PT3H6T/KXoZ54KgYisfOFZHV6PfvAiBIZ9Rcz+/JCxA== @@ -629,12 +672,12 @@ dependencies: "@babel/helper-plugin-utils" "^7.10.4" -"@babel/plugin-transform-destructuring@^7.10.4", "@babel/plugin-transform-destructuring@npm:@minh.nguyen/plugin-transform-destructuring@^7.5.2": - version "7.5.2" - resolved "https://registry.yarnpkg.com/@minh.nguyen/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.2.tgz#49de3e25c373fadd11471a2fc99ec0ce07d92f19" - integrity sha512-DIzWFKl5nzSk9Hj9ZsEXAvvgHiyuAsw52queJMuKqfZOk1BOr9u1i2h0tc6tPF3rQieubP+eX4DPLTKSMpbyMg== +"@babel/plugin-transform-destructuring@^7.10.4": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.12.1.tgz#b9a570fe0d0a8d460116413cb4f97e8e08b2f847" + integrity sha512-fRMYFKuzi/rSiYb2uRLiUENJOKq4Gnl+6qOv5f8z0TZXg3llUwUhsNNwrwaT/6dUhJTzNpBr+CUvEWBtfNY1cw== dependencies: - "@babel/helper-plugin-utils" "^7.0.0" + "@babel/helper-plugin-utils" "^7.10.4" "@babel/plugin-transform-dotall-regex@^7.10.4", "@babel/plugin-transform-dotall-regex@^7.4.4": version "7.10.4" @@ -1034,7 +1077,7 @@ "@babel/plugin-transform-react-jsx-source" "^7.10.4" "@babel/plugin-transform-react-pure-annotations" "^7.10.4" -"@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.10.4", "@babel/preset-typescript@^7.7.4": +"@babel/preset-typescript@7.10.4", "@babel/preset-typescript@^7.1.0", "@babel/preset-typescript@^7.7.4": version "7.10.4" resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.10.4.tgz#7d5d052e52a682480d6e2cc5aa31be61c8c25e36" integrity sha512-SdYnvGPv+bLlwkF2VkJnaX/ni1sMNetcGI1+nThF1gyv6Ph8Qucc4ZZAjM5yZcE/AKRXIOTZz7eSRDWOEjPyRQ== @@ -1069,7 +1112,14 @@ core-js-pure "^3.0.0" regenerator-runtime "^0.13.4" -"@babel/runtime@7.0.0", "@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@7.0.0": + version "7.0.0" + resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.0.0.tgz#adeb78fedfc855aa05bc041640f3f6f98e85424c" + integrity sha512-7hGhzlcmg01CvH1EHdSPVXYX1aJ8KCEyz6I9xYIi/asDtzBPMyMhVibhM/K6g/5qnKBwjZtp10bNZIEFTRW1MA== + dependencies: + regenerator-runtime "^0.12.0" + +"@babel/runtime@7.11.2", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.1.5", "@babel/runtime@^7.10.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.11.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.11.2.tgz#f549c13c754cc40b87644b9fa9f09a6a95fe0736" integrity sha512-TeWkU52so0mPtDcaCTxNBI/IHiz0pZgr8VEFqXFtZWpYD08ZB6FaSwVAS8MKRQAP3bYKiVjwysOJgMFY28o6Tw== @@ -1100,7 +1150,22 @@ globals "^11.1.0" lodash "^4.17.19" -"@babel/types@7.11.5", "@babel/types@7.8.3", "@babel/types@^7.0.0", "@babel/types@^7.10.2", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1": +"@babel/traverse@^7.12.1": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.12.1.tgz#941395e0c5cc86d5d3e75caa095d3924526f0c1e" + integrity sha512-MA3WPoRt1ZHo2ZmoGKNqi20YnPt0B1S0GTZEPhhd+hw2KGUzBlHuVunj6K4sNuK+reEvyiPwtp0cpaqLzJDmAw== + dependencies: + "@babel/code-frame" "^7.10.4" + "@babel/generator" "^7.12.1" + "@babel/helper-function-name" "^7.10.4" + "@babel/helper-split-export-declaration" "^7.11.0" + "@babel/parser" "^7.12.1" + "@babel/types" "^7.12.1" + debug "^4.1.0" + globals "^11.1.0" + lodash "^4.17.19" + +"@babel/types@7.11.5", "@babel/types@^7.0.0", "@babel/types@^7.10.4", "@babel/types@^7.10.5", "@babel/types@^7.11.0", "@babel/types@^7.11.5", "@babel/types@^7.3.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0", "@babel/types@^7.6.1": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.11.5.tgz#d9de577d01252d77c6800cee039ee64faf75662d" integrity sha512-bvM7Qz6eKnJVFIn+1LPtjlBFPVN5jNDc1XmN15vWe7Q3DPBufWWsLiIvUu7xW87uTG6QoggpIDnUgLQvPheU+Q== @@ -1109,6 +1174,24 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@babel/types@7.8.3": + version "7.8.3" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c" + integrity sha512-jBD+G8+LWpMBBWvVcdr4QysjUE4mU/syrhN17o1u3gx0/WzJB1kwiVZAXRtWbsIPOwW8pF/YJV5+nmetPzepXg== + dependencies: + esutils "^2.0.2" + lodash "^4.17.13" + to-fast-properties "^2.0.0" + +"@babel/types@^7.12.1", "@babel/types@^7.7.4": + version "7.12.1" + resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.12.1.tgz#e109d9ab99a8de735be287ee3d6a9947a190c4ae" + integrity sha512-BzSY3NJBKM4kyatSOWh3D/JJ2O3CVzBybHWxtgxnggaxEuaSTTDqeiSb/xk9lrkw2Tbqyivw5ZU4rT+EfznQsA== + dependencies: + "@babel/helper-validator-identifier" "^7.10.4" + lodash "^4.17.19" + to-fast-properties "^2.0.0" + "@date-io/core@^1.3.9": version "1.3.13" resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa" @@ -1199,7 +1282,7 @@ "@emotion/utils" "0.11.3" "@emotion/weak-memoize" "0.2.5" -"@emotion/core@^10.0.27": +"@emotion/core@^10.0.0", "@emotion/core@^10.0.27": version "10.0.35" resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.35.tgz#513fcf2e22cd4dfe9d3894ed138c9d7a859af9b3" integrity sha512-sH++vJCdk025fBlRZSAhkRlSUoqSqgCzYf5fMOmqqi3bM6how+sQpg3hkgJonj8GxXM4WbD7dRO+4tegDB9fUw== @@ -1244,7 +1327,7 @@ dependencies: "@emotion/memoize" "0.7.1" -"@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8": +"@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.2", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1256,7 +1339,7 @@ resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f" integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg== -"@emotion/memoize@0.7.4": +"@emotion/memoize@0.7.4", "@emotion/memoize@^0.7.1": version "0.7.4" resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb" integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw== @@ -1287,7 +1370,7 @@ "@emotion/serialize" "^0.11.15" "@emotion/utils" "0.11.3" -"@emotion/styled@^10.0.27": +"@emotion/styled@^10.0.0", "@emotion/styled@^10.0.27": version "10.0.27" resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.27.tgz#12cb67e91f7ad7431e1875b1d83a94b814133eaf" integrity sha512-iK/8Sh7+NLJzyp9a5+vIQIXTYxfT4yB/OJbjzQanB2RZpvmzBQOHZWhpAMZWYEKRNNbsD6WfBw5sVWkb6WzS/Q== @@ -2190,6 +2273,11 @@ dependencies: "@types/react" "*" +"@mdx-js/react@^1.0.0": + version "1.6.18" + resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.6.18.tgz#f83cbb2355de9cf36a213140ce21647da1e34fa7" + integrity sha512-aFHsZVu7r9WamlP+WO/lyvHHZAubkQjkcRYlvS7fQElypfJvjKdHevjC3xiqlsQpasx/4KqRMoEIb++wNtd+6w== + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -2485,6 +2573,15 @@ dependencies: "@styled-system/core" "^5.1.2" +"@styled-system/should-forward-prop@^5.1.2": + version "5.1.5" + resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76" + integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q== + dependencies: + "@emotion/is-prop-valid" "^0.8.1" + "@emotion/memoize" "^0.7.1" + styled-system "^5.1.5" + "@styled-system/space@^5.1.2": version "5.1.2" resolved "https://registry.yarnpkg.com/@styled-system/space/-/space-5.1.2.tgz#38925d2fa29a41c0eb20e65b7c3efb6e8efce953" @@ -2565,6 +2662,61 @@ "@babel/runtime" "^7.11.2" "@testing-library/dom" "^7.24.2" +"@theme-ui/color-modes@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@theme-ui/color-modes/-/color-modes-0.3.1.tgz#8c2b18fb170e6c998287b7381240a8b9cca8b0d1" + integrity sha512-WuZGgFW7M5wOWSse1PVZCEfM0OZip15/D6U3bB3B9KmWax7qiSnAm1yAMLRQKC+QYhndrjq3xU+WAQm11KnhIw== + dependencies: + "@emotion/core" "^10.0.0" + "@theme-ui/core" "^0.3.1" + "@theme-ui/css" "^0.3.1" + deepmerge "^4.2.2" + +"@theme-ui/components@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@theme-ui/components/-/components-0.3.1.tgz#fe023e156c1e1c076d5f2258466426e94adc2765" + integrity sha512-uG4dUM61s4tWv6N34uxs5VIh24bJyA/7TrYJ75WDiI+s72zbcNG7aGRpvX/hSZnAhxjdXpuskdEM3eEgOabdEg== + dependencies: + "@emotion/core" "^10.0.0" + "@emotion/styled" "^10.0.0" + "@styled-system/color" "^5.1.2" + "@styled-system/should-forward-prop" "^5.1.2" + "@styled-system/space" "^5.1.2" + "@theme-ui/css" "^0.3.1" + +"@theme-ui/core@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@theme-ui/core/-/core-0.3.1.tgz#dbe9800b9d6e923e1a7417e6adebce21524f8c02" + integrity sha512-cK6EVSOx0Kyx1Xpi4qb0JTLIxywx0DRh+53Ln1foXMplF2qKaDsFi3vD6duHIlT331E3CNOa9dftHHNM7y4rbA== + dependencies: + "@emotion/core" "^10.0.0" + "@theme-ui/css" "^0.3.1" + deepmerge "^4.2.2" + +"@theme-ui/css@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@theme-ui/css/-/css-0.3.1.tgz#b85c7e8fae948dc0de65aa30b853368993e25cb3" + integrity sha512-QB2/fZBpo4inaLHL3OrB8NOBgNfwnj8GtHzXWHb9iQSRjmtNX8zPXBe32jLT7qQP0+y8JxPT4YChZIkm5ZyIdg== + +"@theme-ui/mdx@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@theme-ui/mdx/-/mdx-0.3.0.tgz#8bb1342204acfaa69914d6b6567c5c49d9a8c1e6" + integrity sha512-/GHBNKqmUptWwkmF+zIASVQtjYs81XMEwtqPCHnHuaaCzhZxcXrtCwvcAgmCXF8hpRttCXVVxw1X3Gt0mhzaTQ== + dependencies: + "@emotion/core" "^10.0.0" + "@emotion/styled" "^10.0.0" + "@mdx-js/react" "^1.0.0" + +"@theme-ui/theme-provider@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@theme-ui/theme-provider/-/theme-provider-0.3.1.tgz#910bc43454fd61b1047d7bb0dce05e36ffb6b44b" + integrity sha512-Sjj6lD0gPxBi+hcGCkawcGZECeESV/mW2YfmPqjNgmc296x5tulfNc+0/N5CJwLVOmnkn8zR5KNWZ8BjndfeTg== + dependencies: + "@emotion/core" "^10.0.0" + "@theme-ui/color-modes" "^0.3.1" + "@theme-ui/core" "^0.3.1" + "@theme-ui/mdx" "^0.3.0" + "@trendmicro/react-interpolate@^0.5.5": version "0.5.5" resolved "https://registry.yarnpkg.com/@trendmicro/react-interpolate/-/react-interpolate-0.5.5.tgz#70a5040524b46475ee0104939f371db201886a0d" @@ -4001,7 +4153,14 @@ ast-types@0.14.1: dependencies: tslib "^2.0.1" -ast-types@^0.13.2, ast-types@^0.14.1: +ast-types@^0.13.2: + version "0.13.4" + resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.4.tgz#ee0d77b343263965ecc3fb62da16e7222b2b6782" + integrity sha512-x1FCFnFifvYDDzTaLII71vG5uvDwgtmDTEVWAxrgeiR8VjMONcCXJx7E+USjDtHlwFmt9MysbqgF9b9Vjr6w+w== + dependencies: + tslib "^2.0.1" + +ast-types@^0.14.1: version "0.14.2" resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.14.2.tgz#600b882df8583e3cd4f2df5fa20fa83759d4bdfd" integrity sha512-O0yuUDnZeQDL+ncNGlJ78BiO4jnYI3bvMsD5prT0/nsgijG/LpNBIr63gTjVTNsiGkgQhiyCShTgxt8oXOrklA== @@ -5896,7 +6055,14 @@ cross-env@^7.0.0: dependencies: cross-spawn "^7.0.1" -cross-fetch@3.0.5, cross-fetch@^3.0.5: +cross-fetch@3.0.5: + version "3.0.5" + resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.5.tgz#2739d2981892e7ab488a7ad03b92df2816e03f4c" + integrity sha512-FFLcLtraisj5eteosnX1gf01qYDCOc4fDy0+euOt8Kn9YBY2NtXL/pCoYPavw24NIQkQqm5ZOLsGD5Zzj0gyew== + dependencies: + node-fetch "2.6.0" + +cross-fetch@^3.0.5: version "3.0.6" resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.0.6.tgz#3a4040bc8941e653e0e9cf17f29ebcd177d3365c" integrity sha512-KBPUbqgFjzWlVcURG+Svp9TlhA5uliYtiNx/0r8nv0pdypeQCRJ9IaSIc3q/x3q8t3F75cHuwxVql1HFGHCNJQ== @@ -6444,7 +6610,7 @@ deep-is@^0.1.3, deep-is@~0.1.3: resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34" integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ= -deepmerge@^4.0.0: +deepmerge@^4.0.0, deepmerge@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955" integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg== @@ -6785,7 +6951,21 @@ domutils@^1.5.1, domutils@^1.7.0: dom-serializer "0" domelementtype "1" -dot-prop@^3.0.0, dot-prop@^4.2.0, dot-prop@^5.2.0: +dot-prop@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-3.0.0.tgz#1b708af094a49c9a0e7dbcad790aba539dac1177" + integrity sha1-G3CK8JSknJoOfbyteQq6U52sEXc= + dependencies: + is-obj "^1.0.0" + +dot-prop@^4.2.0: + version "4.2.1" + resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-4.2.1.tgz#45884194a71fc2cda71cbb4bceb3a4dd2f433ba4" + integrity sha512-l0p4+mIuJIua0mhxGoh4a+iNL9bmeK5DvnSVQa6T0OhrVmaEa1XScX5Etc673FePCJOArq/4Pa2cLGODUWTPOQ== + dependencies: + is-obj "^1.0.0" + +dot-prop@^5.2.0: version "5.2.0" resolved "https://registry.yarnpkg.com/dot-prop/-/dot-prop-5.2.0.tgz#c34ecc29556dc45f1f4c22697b6f4904e0cc4fcb" integrity sha512-uEUyaDKoSQ1M4Oq8l45hSE26SnTxL6snNnqvK/VWx5wJhmff5z0FUVJDKDanor/6w3kzE3i7XZOk+7wC0EXr1A== @@ -9695,6 +9875,11 @@ is-number@^7.0.0: resolved "https://registry.yarnpkg.com/is-number/-/is-number-7.0.0.tgz#7535345b896734d5f80c4d06c50955527a14f12b" integrity sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng== +is-obj@^1.0.0: + version "1.0.1" + resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-1.0.1.tgz#3e4729ac1f5fde025cd7d83a896dab9f4f67db0f" + integrity sha1-PkcprB9f3gJc19g6iW2rn09n2w8= + is-obj@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/is-obj/-/is-obj-2.0.0.tgz#473fb05d973705e3fd9620545018ca8e22ef4982" @@ -10990,7 +11175,7 @@ lodash.uniq@^4.5.0: resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773" integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M= -lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.4: +lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.11, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.2, lodash@^4.17.20, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1, lodash@~4.17.4: version "4.17.20" resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.20.tgz#b44a9b6297bcb698f1c51a3545a2b3b368d59c52" integrity sha512-PlhdFcillOINfeV7Ni6oF1TAEayyZBoZ8bcshTHqOYJYlrqzRK5hagpagky5o4HfCzzd1TRkXPMFq6cKk9rGmA== @@ -14333,6 +14518,11 @@ regenerator-runtime@^0.11.0: resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz#be05ad7f9bf7d22e056f9726cee5017fbf19e2e9" integrity sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg== +regenerator-runtime@^0.12.0: + version "0.12.1" + resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de" + integrity sha512-odxIc1/vDlo4iZcfXqRYFj0vpXFNoGdKMAUieAlFYO6m/nl5e9KR/beGf41z4a1FI+aQgtjhuaSlDxQ0hmkrHg== + regenerator-runtime@^0.13.4: version "0.13.5" resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz#d878a1d094b4306d10b9096484b33ebd55e26697" @@ -15923,7 +16113,7 @@ styled-jsx@3.3.0: stylis "3.5.4" stylis-rule-sheet "0.0.10" -styled-system@^5.1.2: +styled-system@^5.1.2, styled-system@^5.1.5: version "5.1.5" resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e" integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A== @@ -16327,6 +16517,18 @@ textextensions@^2.5.0: resolved "https://registry.yarnpkg.com/textextensions/-/textextensions-2.6.0.tgz#d7e4ab13fe54e32e08873be40d51b74229b00fc4" integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ== +theme-ui@^0.3.1: + version "0.3.1" + resolved "https://registry.yarnpkg.com/theme-ui/-/theme-ui-0.3.1.tgz#b00ee2c03eb3d820536af8b121c64d13b3777cf0" + integrity sha512-My/TSALqp7Dst5Ez7nJA+94Q8zJhc26Z0qGo8kEWyoqHHJ5TU8xdhjLPBltTdQck3T32cSq5USIeSKU3JtxYUQ== + dependencies: + "@theme-ui/color-modes" "^0.3.1" + "@theme-ui/components" "^0.3.1" + "@theme-ui/core" "^0.3.1" + "@theme-ui/css" "^0.3.1" + "@theme-ui/mdx" "^0.3.0" + "@theme-ui/theme-provider" "^0.3.1" + theming@^3.3.0: version "3.3.0" resolved "https://registry.yarnpkg.com/theming/-/theming-3.3.0.tgz#dacabf04aa689edde35f1e1c117ec6de73fbf870" @@ -17388,7 +17590,36 @@ webpack-sources@1.4.3, webpack-sources@^1.4.0, webpack-sources@^1.4.1, webpack-s source-list-map "^2.0.0" source-map "~0.6.1" -webpack@4.44.1, webpack@^4.41.0, webpack@^4.43.0, webpack@^4.44.1: +webpack@4.44.1: + version "4.44.1" + resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.1.tgz#17e69fff9f321b8f117d1fda714edfc0b939cc21" + integrity sha512-4UOGAohv/VGUNQJstzEywwNxqX417FnjZgZJpJQegddzPmTvph37eBIRbRTfdySXzVtJXLJfbMN3mMYhM6GdmQ== + dependencies: + "@webassemblyjs/ast" "1.9.0" + "@webassemblyjs/helper-module-context" "1.9.0" + "@webassemblyjs/wasm-edit" "1.9.0" + "@webassemblyjs/wasm-parser" "1.9.0" + acorn "^6.4.1" + ajv "^6.10.2" + ajv-keywords "^3.4.1" + chrome-trace-event "^1.0.2" + enhanced-resolve "^4.3.0" + eslint-scope "^4.0.3" + json-parse-better-errors "^1.0.2" + loader-runner "^2.4.0" + loader-utils "^1.2.3" + memory-fs "^0.4.1" + micromatch "^3.1.10" + mkdirp "^0.5.3" + neo-async "^2.6.1" + node-libs-browser "^2.2.1" + schema-utils "^1.0.0" + tapable "^1.1.3" + terser-webpack-plugin "^1.4.3" + watchpack "^1.7.4" + webpack-sources "^1.4.1" + +webpack@^4.41.0, webpack@^4.43.0: version "4.44.2" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.44.2.tgz#6bfe2b0af055c8b2d1e90ed2cd9363f841266b72" integrity sha512-6KJVGlCxYdISyurpQ0IPTklv+DULv05rs2hseIXer6D7KrUicRDLFb4IUM1S6LUAKypPM/nSiVSuv8jHu1m3/Q== From b32dd5ab69cd8b56ee17c46a952d40f3a8475976 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Mon, 19 Oct 2020 17:24:20 +0200 Subject: [PATCH 35/68] fixed custom breakpoints support --- packages/material-ui-system/src/breakpoints.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js index 0ae68ea983f2c0..79e1ef6ef42761 100644 --- a/packages/material-ui-system/src/breakpoints.js +++ b/packages/material-ui-system/src/breakpoints.js @@ -37,7 +37,7 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) { const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints; return Object.keys(propValue).reduce((acc, breakpoint) => { // key is breakpoint - if(defaultBreakpoints.keys.indexOf(breakpoint) != -1) { + if(themeBreakpoints.keys.indexOf(breakpoint) != -1) { acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]); } else { const cssKey = breakpoint; From 79af93990cccaba4133e55167f4388ed5108dc27 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 09:29:44 +0200 Subject: [PATCH 36/68] Update docs/src/pages/components/box/box.md Co-authored-by: Matt --- docs/src/pages/components/box/box.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 420b69fedeba03..58f09fb6cac841 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -59,7 +59,7 @@ The Box children accepts a render props function. You can pull out the `classNam ## The sx prop -Sometimes, the props on the Box component are not enough for styling the component. For solving this, we support the `sx` prop, which allows you to specify any CSS rules you want, in addition to the ones already available on the `Box` component. Here is an example of how you may use it: +Sometimes, the props on the Box component are not enough to style the component. To solve this, `Box` supports the `sx` prop. This allows you to specify any CSS rules you want, in addition to the ones already available using system props. Here is an example of how you can use it: ```jsx Date: Tue, 20 Oct 2020 09:41:48 +0200 Subject: [PATCH 37/68] added theme-ui div scenario benchmark --- .../sx-prop-box-material-ui/index.js | 35 ++++++-------- .../scenarios/sx-prop-box-theme-ui/index.js | 43 ++++++++--------- .../scenarios/sx-prop-div-theme-ui/index.js | 47 +++++++++++++++++++ benchmark/browser/scripts/benchmark.js | 6 +++ 4 files changed, 88 insertions(+), 43 deletions(-) create mode 100644 benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js diff --git a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js index 9f0ae0eb671664..4a501cbfeb8f44 100644 --- a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js @@ -1,31 +1,26 @@ import * as React from 'react'; -import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles'; import Box from '@material-ui/core/Box'; import { logReactMetrics } from '../utils'; -const theme = createMuiTheme(); - export default function BasicStyledComponents() { return ( {new Array(1000).fill().map(() => ( - - theme.palette.secondary.dark, - }, - }} - > - material-ui - - + theme.palette.secondary.dark, + }, + }} + > + material-ui + ))} ); diff --git a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js index 0971cc57817ce3..fe018591265477 100644 --- a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js @@ -1,11 +1,8 @@ import * as React from 'react'; -/** @jsx jsx */ import { - jsx, Box, ThemeProvider } from 'theme-ui'; -import { alpha } from '@material-ui/core/styles'; import { logReactMetrics } from '../utils'; const theme = { @@ -24,26 +21,26 @@ const theme = { export default function BasicStyledComponents() { return ( - {new Array(1000).fill().map(() => ( - - theme.colors.text, - }, - }} - > - theme-ui - - - ))} + + {new Array(1000).fill().map(() => ( + theme.colors.text, + }, + }} + > + theme-ui + + ))} + ); } \ No newline at end of file diff --git a/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js new file mode 100644 index 00000000000000..48a8c7a1329ed9 --- /dev/null +++ b/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js @@ -0,0 +1,47 @@ +import * as React from 'react'; +/** @jsx jsx */ +import { + jsx, + ThemeProvider + } from 'theme-ui'; +import { logReactMetrics } from '../utils'; + +const theme = { + fonts: { + body: 'system-ui, sans-serif', + heading: '"Avenir Next", sans-serif', + monospace: 'Menlo, monospace', + }, + colors: { + text: '#000', + background: '#fff', + primary: '#33e', + }, +} + +export default function BasicStyledComponents() { + return ( + + + {new Array(1000).fill().map(() => ( +
theme.colors.text, + }, + }} + > + theme-ui +
+ ))} + + + ); + } \ No newline at end of file diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js index f77a12edc2ddec..6a5664611f5019 100644 --- a/benchmark/browser/scripts/benchmark.js +++ b/benchmark/browser/scripts/benchmark.js @@ -123,6 +123,12 @@ async function run() { './sx-prop-box-theme-ui/index.js', 10, ); + await runMeasures( + browser, + 'Theme-UI div sx prop', + './sx-prop-div-theme-ui/index.js', + 10, + ); await runMeasures( browser, 'Material-UI box sx prop', From 502733ea6203bdd48cedab620c187ee23d5c7cfb Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 10:38:44 +0200 Subject: [PATCH 38/68] improved examples, added chakra-ui box & added results in readme --- benchmark/browser/README.md | 186 +++++++++++++++++- .../basic-styled-components/index.js | 26 +-- .../browser/scenarios/box-chakra-ui/index.js | 36 ++++ .../browser/scenarios/box-emotion/index.js | 26 +-- .../scenarios/box-styled-components/index.js | 26 +-- .../index.js | 26 +-- .../index.js | 26 +-- benchmark/browser/scripts/benchmark.js | 6 + docs/package.json | 1 + 9 files changed, 293 insertions(+), 66 deletions(-) create mode 100644 benchmark/browser/scenarios/box-chakra-ui/index.js diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md index 3e42ce1960a376..db0c088a8c982c 100644 --- a/benchmark/browser/README.md +++ b/benchmark/browser/README.md @@ -3,9 +3,193 @@ This project is used when running the following command: ```sh -yarn benchmark +yarn benchmark:browser ``` It is suppose to give developers comparable values between running different scenarios inside the browser, that can be find the `./scenarios` folder. You should use these numbers exclusively for comparing performance between different scenarios, not as absolute values. There is also a `./noop` scenario, that renders nothing, to give you the idea of the initial setup time before the actual code is being run. + +## Results + +``` +yarn benchmark:browser + +noop (baseline): + +4.32ms +4.26ms +6.18ms +4.17ms +4.00ms +4.15ms +3.83ms +3.84ms +3.86ms +3.90ms +------------- +Avg: 4.25ms +Median: 4.07ms + +styled-components Box + @material-ui/system: + +161.68ms +161.10ms +164.99ms +172.28ms +164.73ms +160.93ms +165.72ms +158.97ms +160.60ms +163.72ms +------------- +Avg: 163.47ms +Median: 162.70ms + +styled-components Box + styled-system: + +144.14ms +141.62ms +142.00ms +134.81ms +147.93ms +144.84ms +143.01ms +143.91ms +146.84ms +147.96ms +------------- +Avg: 143.71ms +Median: 144.02ms + +Box emotion: + +173.31ms +168.19ms +175.82ms +178.98ms +172.33ms +148.63ms +181.64ms +182.94ms +172.77ms +153.54ms +------------- +Avg: 170.82ms +Median: 173.04ms + +Box @material-ui/styles: + +202.45ms +188.87ms +171.55ms +171.95ms +195.44ms +187.87ms +171.53ms +193.70ms +201.01ms +170.26ms +------------- +Avg: 185.46ms +Median: 188.37ms + +Box styled-components: + +172.00ms +193.89ms +187.75ms +168.34ms +163.00ms +192.08ms +187.17ms +163.28ms +168.21ms +192.83ms +------------- +Avg: 178.85ms +Median: 179.58ms + +Basic styled-components box: + +140.86ms +119.85ms +122.55ms +145.65ms +141.74ms +117.54ms +121.83ms +117.58ms +145.90ms +140.92ms +------------- +Avg: 131.44ms +Median: 131.70ms + +Chakra-UI box component: + +123.20ms +122.41ms +144.09ms +135.43ms +115.99ms +123.37ms +114.71ms +138.75ms +133.79ms +123.71ms +------------- +Avg: 127.54ms +Median: 123.54ms + +Theme-UI box sx prop: + +147.55ms +175.65ms +174.38ms +147.36ms +148.91ms +179.23ms +172.43ms +147.87ms +150.14ms +149.70ms +------------- +Avg: 159.32ms +Median: 149.92ms + +Theme-UI div sx prop: + +138.23ms +136.78ms +138.53ms +138.89ms +172.48ms +166.99ms +140.68ms +139.84ms +137.00ms +141.95ms +------------- +Avg: 145.14ms +Median: 139.37ms + +Material-UI box sx prop: + +163.42ms +164.45ms +164.62ms +195.22ms +185.98ms +163.27ms +165.08ms +163.87ms +163.95ms +163.93ms +------------- +Avg: 169.38ms +Median: 164.20ms +Done in 32.03s. + +``` \ No newline at end of file diff --git a/benchmark/browser/scenarios/basic-styled-components/index.js b/benchmark/browser/scenarios/basic-styled-components/index.js index e58fdde5bdfde0..acc50590aad72c 100644 --- a/benchmark/browser/scenarios/basic-styled-components/index.js +++ b/benchmark/browser/scenarios/basic-styled-components/index.js @@ -12,19 +12,19 @@ const BasicStyleComponents = styledComponents('div')(spacing); export default function BasicStyledComponents() { return ( - {new Array(1000).fill().map(() => ( - - - styled-components - - - ))} + + {new Array(1000).fill().map(() => ( + + styled-components + + ))} + ); } diff --git a/benchmark/browser/scenarios/box-chakra-ui/index.js b/benchmark/browser/scenarios/box-chakra-ui/index.js new file mode 100644 index 00000000000000..c912f6945d57b4 --- /dev/null +++ b/benchmark/browser/scenarios/box-chakra-ui/index.js @@ -0,0 +1,36 @@ +import * as React from 'react'; +import { logReactMetrics } from '../utils'; +import { Box, ThemeProvider, theme } from '@chakra-ui/core'; + +// Let's say you want to add custom colors +const customTheme = { + ...theme, + colors: { + ...theme.colors, + brand: { + 900: "#1a365d", + 800: "#153e75", + 700: "#2a69ac", + }, + }, +}; + +export default function BoxEmotion() { + return ( + + + {new Array(1000).fill().map(() => ( + + chakra-ui + + ))} + + + ); +} diff --git a/benchmark/browser/scenarios/box-emotion/index.js b/benchmark/browser/scenarios/box-emotion/index.js index 817cee62d43e2a..f546cb7121da6f 100644 --- a/benchmark/browser/scenarios/box-emotion/index.js +++ b/benchmark/browser/scenarios/box-emotion/index.js @@ -11,19 +11,19 @@ const Box = styledEmotion('div')(styleFunction); export default function BoxEmotion() { return ( - {new Array(1000).fill().map(() => ( - - - emotion - - - ))} + + {new Array(1000).fill().map(() => ( + + emotion + + ))} + ); } diff --git a/benchmark/browser/scenarios/box-styled-components/index.js b/benchmark/browser/scenarios/box-styled-components/index.js index 66efc41169c8e1..9a857d8804e26e 100644 --- a/benchmark/browser/scenarios/box-styled-components/index.js +++ b/benchmark/browser/scenarios/box-styled-components/index.js @@ -12,19 +12,19 @@ const BoxStyleComponents = styledComponents('div')(styleFunction); export default function BoxStyledComponents() { return ( - {new Array(1000).fill().map(() => ( - - - styled-components - - - ))} + + {new Array(1000).fill().map(() => ( + + styled-components + + ))} + ); } diff --git a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js b/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js index fd865f4c6eefde..4df5cdb3b71104 100644 --- a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js +++ b/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js @@ -13,19 +13,19 @@ const BoxMaterialSystem = styledComponents('div')(materialSystem); export default function StyledComponentsBoxMaterialUISystem() { return ( - {new Array(1000).fill().map(() => ( - - - @material-ui/system - - - ))} + + {new Array(1000).fill().map(() => ( + + @material-ui/system + + ))} + ); } diff --git a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js b/benchmark/browser/scenarios/styled-components-box-styled-system/index.js index 3d618afb296476..e408f826c40947 100644 --- a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js +++ b/benchmark/browser/scenarios/styled-components-box-styled-system/index.js @@ -18,19 +18,19 @@ styledSystemTheme.fonts = styledSystemTheme.typography; export default function StyledComponentsBoxStyledSystem() { return ( - {new Array(1000).fill().map(() => ( - - - styled-system - - - ))} + + {new Array(1000).fill().map(() => ( + + styled-system + + ))} + ); } diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js index 6a5664611f5019..e158b194820a83 100644 --- a/benchmark/browser/scripts/benchmark.js +++ b/benchmark/browser/scripts/benchmark.js @@ -117,6 +117,12 @@ async function run() { './basic-styled-components/index.js', 10, ); + await runMeasures( + browser, + 'Chakra-UI box component', + './box-chakra-ui/index.js', + 10, + ); await runMeasures( browser, 'Theme-UI box sx prop', diff --git a/docs/package.json b/docs/package.json index 149292eef087cf..8383577945e712 100644 --- a/docs/package.json +++ b/docs/package.json @@ -21,6 +21,7 @@ "@babel/core": "^7.10.2", "@babel/plugin-transform-object-assign": "^7.10.1", "@babel/runtime-corejs2": "^7.10.2", + "@chakra-ui/core": "^0.8.0", "@date-io/core": "^1.3.9", "@emotion/cache": "^10.0.27", "@emotion/core": "^10.0.27", From 49641ac9d77eff437a25f9a966290c6aa65c1d33 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 14:45:17 +0200 Subject: [PATCH 39/68] added tests, fixes --- benchmark/browser/README.md | 2 +- .../basic-styled-components/index.js | 18 +- .../browser/scenarios/box-chakra-ui/index.js | 26 +-- .../browser/scenarios/box-emotion/index.js | 18 +- .../scenarios/box-material-ui-styles/index.js | 26 +-- .../scenarios/box-styled-components/index.js | 18 +- .../index.js | 18 +- .../index.js | 18 +- .../sx-prop-box-material-ui/index.js | 44 ++-- .../scenarios/sx-prop-box-theme-ui/index.js | 57 +++-- .../scenarios/sx-prop-div-theme-ui/index.js | 57 +++-- benchmark/browser/scripts/benchmark.js | 28 +-- .../material-ui-system/src/breakpoints.js | 2 +- packages/material-ui-system/src/index.d.ts | 10 +- packages/material-ui-system/src/index.js | 2 +- packages/material-ui/src/Box/Box.d.ts | 7 +- packages/material-ui/src/Box/styleFunction.js | 24 +- .../material-ui/src/Box/styleFunction.test.js | 186 +++++++++++++++ yarn.lock | 219 +++++++++++++++++- 19 files changed, 576 insertions(+), 204 deletions(-) create mode 100644 packages/material-ui/src/Box/styleFunction.test.js diff --git a/benchmark/browser/README.md b/benchmark/browser/README.md index db0c088a8c982c..637d8e299b8c2a 100644 --- a/benchmark/browser/README.md +++ b/benchmark/browser/README.md @@ -192,4 +192,4 @@ Avg: 169.38ms Median: 164.20ms Done in 32.03s. -``` \ No newline at end of file +``` diff --git a/benchmark/browser/scenarios/basic-styled-components/index.js b/benchmark/browser/scenarios/basic-styled-components/index.js index acc50590aad72c..65e5e13e9bb6af 100644 --- a/benchmark/browser/scenarios/basic-styled-components/index.js +++ b/benchmark/browser/scenarios/basic-styled-components/index.js @@ -14,15 +14,15 @@ export default function BasicStyledComponents() { {new Array(1000).fill().map(() => ( - - styled-components - + + styled-components + ))} diff --git a/benchmark/browser/scenarios/box-chakra-ui/index.js b/benchmark/browser/scenarios/box-chakra-ui/index.js index c912f6945d57b4..8e5226cc1e79a6 100644 --- a/benchmark/browser/scenarios/box-chakra-ui/index.js +++ b/benchmark/browser/scenarios/box-chakra-ui/index.js @@ -1,6 +1,6 @@ import * as React from 'react'; -import { logReactMetrics } from '../utils'; import { Box, ThemeProvider, theme } from '@chakra-ui/core'; +import { logReactMetrics } from '../utils'; // Let's say you want to add custom colors const customTheme = { @@ -8,9 +8,9 @@ const customTheme = { colors: { ...theme.colors, brand: { - 900: "#1a365d", - 800: "#153e75", - 700: "#2a69ac", + 900: '#1a365d', + 800: '#153e75', + 700: '#2a69ac', }, }, }; @@ -20,15 +20,15 @@ export default function BoxEmotion() { {new Array(1000).fill().map(() => ( - - chakra-ui - + + chakra-ui + ))} diff --git a/benchmark/browser/scenarios/box-emotion/index.js b/benchmark/browser/scenarios/box-emotion/index.js index f546cb7121da6f..5b5a5330b26d0d 100644 --- a/benchmark/browser/scenarios/box-emotion/index.js +++ b/benchmark/browser/scenarios/box-emotion/index.js @@ -13,15 +13,15 @@ export default function BoxEmotion() { {new Array(1000).fill().map(() => ( - - emotion - + + emotion + ))} diff --git a/benchmark/browser/scenarios/box-material-ui-styles/index.js b/benchmark/browser/scenarios/box-material-ui-styles/index.js index 23065b9c1ab0fd..2efc0a0fb4e6f4 100644 --- a/benchmark/browser/scenarios/box-material-ui-styles/index.js +++ b/benchmark/browser/scenarios/box-material-ui-styles/index.js @@ -9,19 +9,19 @@ const materialSystemTheme = createMuiTheme(); export default function BoxMaterialUIStyles() { return ( - {new Array(1000).fill().map(() => ( - - - @material-ui/styles - - - ))} + + {new Array(1000).fill().map(() => ( + + @material-ui/styles + + ))} + ); } diff --git a/benchmark/browser/scenarios/box-styled-components/index.js b/benchmark/browser/scenarios/box-styled-components/index.js index 9a857d8804e26e..725c1dfae61a7a 100644 --- a/benchmark/browser/scenarios/box-styled-components/index.js +++ b/benchmark/browser/scenarios/box-styled-components/index.js @@ -14,15 +14,15 @@ export default function BoxStyledComponents() { {new Array(1000).fill().map(() => ( - - styled-components - + + styled-components + ))} diff --git a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js b/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js index 4df5cdb3b71104..b6c64d379dc51e 100644 --- a/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js +++ b/benchmark/browser/scenarios/styled-components-box-material-ui-system/index.js @@ -15,15 +15,15 @@ export default function StyledComponentsBoxMaterialUISystem() { {new Array(1000).fill().map(() => ( - - @material-ui/system - + + @material-ui/system + ))} diff --git a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js b/benchmark/browser/scenarios/styled-components-box-styled-system/index.js index e408f826c40947..a99e947638e1e9 100644 --- a/benchmark/browser/scenarios/styled-components-box-styled-system/index.js +++ b/benchmark/browser/scenarios/styled-components-box-styled-system/index.js @@ -20,15 +20,15 @@ export default function StyledComponentsBoxStyledSystem() { {new Array(1000).fill().map(() => ( - - styled-system - + + styled-system + ))} diff --git a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js index 4a501cbfeb8f44..78958b8fe99261 100644 --- a/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-box-material-ui/index.js @@ -3,25 +3,25 @@ import Box from '@material-ui/core/Box'; import { logReactMetrics } from '../utils'; export default function BasicStyledComponents() { - return ( - - {new Array(1000).fill().map(() => ( - theme.palette.secondary.dark, - }, - }} - > - material-ui - - ))} - - ); - } \ No newline at end of file + return ( + + {new Array(1000).fill().map(() => ( + theme.palette.secondary.dark, + }, + }} + > + material-ui + + ))} + + ); +} diff --git a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js index fe018591265477..12fa3afa01ec21 100644 --- a/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-box-theme-ui/index.js @@ -1,8 +1,5 @@ import * as React from 'react'; -import { - Box, - ThemeProvider - } from 'theme-ui'; +import { Box, ThemeProvider } from 'theme-ui'; import { logReactMetrics } from '../utils'; const theme = { @@ -16,31 +13,31 @@ const theme = { background: '#fff', primary: '#33e', }, -} +}; export default function BasicStyledComponents() { - return ( - - - {new Array(1000).fill().map(() => ( - theme.colors.text, - }, - }} - > - theme-ui - - ))} - - - ); - } \ No newline at end of file + return ( + + + {new Array(1000).fill().map(() => ( + t.colors.text, + }, + }} + > + theme-ui + + ))} + + + ); +} diff --git a/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js b/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js index 48a8c7a1329ed9..2313b37e545d68 100644 --- a/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js +++ b/benchmark/browser/scenarios/sx-prop-div-theme-ui/index.js @@ -1,9 +1,6 @@ import * as React from 'react'; /** @jsx jsx */ -import { - jsx, - ThemeProvider - } from 'theme-ui'; +import { jsx, ThemeProvider } from 'theme-ui'; import { logReactMetrics } from '../utils'; const theme = { @@ -17,31 +14,31 @@ const theme = { background: '#fff', primary: '#33e', }, -} +}; export default function BasicStyledComponents() { - return ( - - - {new Array(1000).fill().map(() => ( -
theme.colors.text, - }, - }} - > - theme-ui -
- ))} - - - ); - } \ No newline at end of file + return ( + + + {new Array(1000).fill().map(() => ( +
t.colors.text, + }, + }} + > + theme-ui +
+ ))} + + + ); +} diff --git a/benchmark/browser/scripts/benchmark.js b/benchmark/browser/scripts/benchmark.js index e158b194820a83..da4c40620421f1 100644 --- a/benchmark/browser/scripts/benchmark.js +++ b/benchmark/browser/scripts/benchmark.js @@ -117,30 +117,10 @@ async function run() { './basic-styled-components/index.js', 10, ); - await runMeasures( - browser, - 'Chakra-UI box component', - './box-chakra-ui/index.js', - 10, - ); - await runMeasures( - browser, - 'Theme-UI box sx prop', - './sx-prop-box-theme-ui/index.js', - 10, - ); - await runMeasures( - browser, - 'Theme-UI div sx prop', - './sx-prop-div-theme-ui/index.js', - 10, - ); - await runMeasures( - browser, - 'Material-UI box sx prop', - './sx-prop-box-material-ui/index.js', - 10, - ); + await runMeasures(browser, 'Chakra-UI box component', './box-chakra-ui/index.js', 10); + await runMeasures(browser, 'Theme-UI box sx prop', './sx-prop-box-theme-ui/index.js', 10); + await runMeasures(browser, 'Theme-UI div sx prop', './sx-prop-div-theme-ui/index.js', 10); + await runMeasures(browser, 'Material-UI box sx prop', './sx-prop-box-material-ui/index.js', 10); } finally { await Promise.all([browser.close(), server.close()]); } diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js index 79e1ef6ef42761..1cfeb9e111a408 100644 --- a/packages/material-ui-system/src/breakpoints.js +++ b/packages/material-ui-system/src/breakpoints.js @@ -37,7 +37,7 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) { const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints; return Object.keys(propValue).reduce((acc, breakpoint) => { // key is breakpoint - if(themeBreakpoints.keys.indexOf(breakpoint) != -1) { + if (themeBreakpoints.keys.indexOf(breakpoint) !== -1) { acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]); } else { const cssKey = breakpoint; diff --git a/packages/material-ui-system/src/index.d.ts b/packages/material-ui-system/src/index.d.ts index 0386aca5e63012..441052f8f41f7f 100644 --- a/packages/material-ui-system/src/index.d.ts +++ b/packages/material-ui-system/src/index.d.ts @@ -30,14 +30,16 @@ export type BordersProps = PropsFor; // breakpoints.js type DefaultBreakPoints = 'xs' | 'sm' | 'md' | 'lg' | 'xl'; +export function handleBreakpoints( + props: Props, + propValue: any, + styleFromPropValue: (value: any) => any +): any; + /** * @returns An enhanced stylefunction that considers breakpoints */ export function breakpoints( - props: Props, propValue: any, styleFromPropValue: (value: any) => any -): any; - -export function handleBreakpoints( styleFunction: StyleFunction ): StyleFunction> & Props>; diff --git a/packages/material-ui-system/src/index.js b/packages/material-ui-system/src/index.js index 0a0bd45c26638f..d1fe90e016ba03 100644 --- a/packages/material-ui-system/src/index.js +++ b/packages/material-ui-system/src/index.js @@ -1,7 +1,7 @@ export { default as borders } from './borders'; export * from './borders'; export { default as breakpoints } from './breakpoints'; -export { handleBreakpoints as handleBreakpoints } from './breakpoints'; +export { handleBreakpoints } from './breakpoints'; export { default as compose } from './compose'; export { default as css } from './css'; export { default as display } from './display'; diff --git a/packages/material-ui/src/Box/Box.d.ts b/packages/material-ui/src/Box/Box.d.ts index 7d75e6e2e16d1d..23cb8e6dcc91ab 100644 --- a/packages/material-ui/src/Box/Box.d.ts +++ b/packages/material-ui/src/Box/Box.d.ts @@ -34,9 +34,12 @@ export type BoxStyleFunction = ComposedStyleFunction< type SystemProps = PropsFor; type ElementProps = Omit, keyof SystemProps>; -type SxPropsValue = (Omit & SystemProps); +type SxPropsValue = Omit & SystemProps; type SxProps = { - [Name in keyof SxPropsValue]?: SxPropsValue[Name] | ((theme: Theme) => CSSObject | SxPropsValue[Name]) | SxProps; + [Name in keyof SxPropsValue]?: + | SxPropsValue[Name] + | ((theme: Theme) => CSSObject | SxPropsValue[Name]) + | SxProps; }; export interface BoxProps extends ElementProps, SystemProps { diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index 2e2ccffd05bec5..5e68ec8b361d28 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -15,7 +15,7 @@ import { function objectsHaveSameKeys(...objects) { const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []); const union = new Set(allKeys); - return objects.every(object => union.size === Object.keys(object).length); + return objects.every((object) => union.size === Object.keys(object).length); } const filterProps = [ @@ -71,7 +71,7 @@ const getThemeValue = (prop, value, theme) => { return { [prop]: value }; }; -const traverseSx = (styles, theme) => { +const styleFunctionSx = (styles, theme) => { if (!styles) return null; if (typeof styles === 'function') { @@ -93,23 +93,25 @@ const traverseSx = (styles, theme) => { ...getThemeValue(styleKey, styles[styleKey], theme), }; } else { - const breakpointsValues = handleBreakpoints({ theme }, styles[styleKey], x => ({ [styleKey]: x })); + const breakpointsValues = handleBreakpoints({ theme }, styles[styleKey], (x) => ({ + [styleKey]: x, + })); - if(objectsHaveSameKeys(breakpointsValues, styles[styleKey])) { - const transformedValue = traverseSx(styles[styleKey], theme); + if (objectsHaveSameKeys(breakpointsValues, styles[styleKey])) { + const transformedValue = styleFunctionSx(styles[styleKey], theme); css[styleKey] = transformedValue; } else { const spread = {}; - Object.keys(breakpointsValues).forEach(breakpoint => { + Object.keys(breakpointsValues).forEach((breakpoint) => { spread[breakpoint] = { ...css[breakpoint], ...breakpointsValues[breakpoint], - } - }) + }; + }); css = { ...css, ...spread, - } + }; } } } else if (typeof styles[styleKey] === 'function') { @@ -130,7 +132,7 @@ const traverseSx = (styles, theme) => { const styleFunction = (props) => { let result = {}; Object.keys(props).forEach((prop) => { - if (filterProps.indexOf(prop) !== -1) { + if (filterProps.indexOf(prop) !== -1 && prop !== 'sx') { result = { ...result, ...getThemeValue(prop, props[prop], props.theme), @@ -138,7 +140,7 @@ const styleFunction = (props) => { } }); - const sxValue = traverseSx(props.sx, props.theme); + const sxValue = styleFunctionSx(props.sx, props.theme); return { ...result, diff --git a/packages/material-ui/src/Box/styleFunction.test.js b/packages/material-ui/src/Box/styleFunction.test.js new file mode 100644 index 00000000000000..28f1711b018806 --- /dev/null +++ b/packages/material-ui/src/Box/styleFunction.test.js @@ -0,0 +1,186 @@ +import { expect } from 'chai'; +import { createMuiTheme } from '@material-ui/core/styles'; +import styleFunction from './styleFunction'; + +describe('styleFunction', () => { + const theme = createMuiTheme({ + spacing: 10, + palette: { + primary: { + main: 'rgb(0, 0, 255)', + }, + secondary: { + main: 'rgb(0, 255, 0)', + }, + }, + }); + + it('resolves palette', () => { + const result = styleFunction({ + theme, + color: 'primary.main', + bgcolor: 'secondary.main', + }); + + expect(result).to.deep.equal({ + color: 'rgb(0, 0, 255)', + backgroundColor: 'rgb(0, 255, 0)', + }); + }); + + it('resolves spacing', () => { + const result = styleFunction({ + theme, + m: 2, + p: 1, + }); + + expect(result).to.deep.equal({ + margin: '20px', + padding: '10px', + }); + }); + + it('resolves typography', () => { + const result = styleFunction({ + theme, + fontFamily: 'fontFamily', + fontWeight: 'fontWeightLight', + fontSize: 'fontSize', + }); + + expect(result).to.deep.equal({ + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: 14, + }); + }); + + it('resolves display', () => { + const result = styleFunction({ + theme, + displayPrint: 'block', + }); + + expect(result).to.deep.equal({ + '@media print': { + display: 'block', + }, + }); + }); + + it('resolves borders', () => { + const result = styleFunction({ + theme, + border: 1, + borderColor: 'black', + }); + + expect(result).to.deep.equal({ + border: '1px solid', + borderColor: 'black', + }); + }); + + describe('breakpoints', () => { + const breakpointsExpectedResult = { + '@media (min-width:0px)': { border: '1px solid' }, + '@media (min-width:600px)': { border: '2px solid' }, + '@media (min-width:960px)': { border: '3px solid' }, + '@media (min-width:1280px)': { border: '4px solid' }, + '@media (min-width:1920px)': { border: '5px solid' } + }; + + it('resolves breakpoints array', () => { + const result = styleFunction({ + theme, + border: [1, 2, 3, 4, 5], + }); + + expect(result).to.deep.equal(breakpointsExpectedResult); + }); + + it('resolves breakpoints object', () => { + const result = styleFunction({ + theme, + border: { + xs: 1, + sm: 2, + md: 3, + lg: 4, + xl: 5 + }, + }); + + expect(result).to.deep.equal(breakpointsExpectedResult); + }); + }); + + describe('sx prop', () => { + it('resolves system', () => { + const result = styleFunction({ + theme, + sx: { + color: 'primary.main', + bgcolor: 'secondary.main', + m: 2, + p: 1, + fontFamily: 'fontFamily', + fontWeight: 'fontWeightLight', + fontSize: 'fontSize', + displayPrint: 'block', + border: [1, 2, 3, 4, 5], + } + }); + + expect(result).to.deep.equal({ + color: 'rgb(0, 0, 255)', + backgroundColor: 'rgb(0, 255, 0)', + margin: '20px', + padding: '10px', + fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif', + fontWeight: 300, + fontSize: 14, + '@media print': { + display: 'block', + }, + '@media (min-width:0px)': { border: '1px solid' }, + '@media (min-width:600px)': { border: '2px solid' }, + '@media (min-width:960px)': { border: '3px solid' }, + '@media (min-width:1280px)': { border: '4px solid' }, + '@media (min-width:1920px)': { border: '5px solid' }, + }); + }); + + it('resolves non system CSS properties', () => { + const result = styleFunction({ + theme, + sx: { + background: 'rgb(0, 0, 255)', + ':hover': { + backgroundColor: 'primary.main', + opacity: { + xs: 0.1, + sm: 0.2, + md: 0.3, + lg: 0.4, + xl: 0.5 + } + } + } + }); + + expect(result).to.deep.equal({ + background: 'rgb(0, 0, 255)', + ":hover": { + backgroundColor: 'rgb(0, 0, 255)', + '@media (min-width:0px)': { opacity: 0.1 }, + '@media (min-width:600px)': { opacity: 0.2 }, + '@media (min-width:960px)': { opacity: 0.3 }, + '@media (min-width:1280px)': { opacity: 0.4 }, + '@media (min-width:1920px)': { opacity: 0.5 }, + }, + }); + }); + }); +}); diff --git a/yarn.lock b/yarn.lock index 32aa5532edf2ca..d666c94ec6e91b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1192,6 +1192,28 @@ lodash "^4.17.19" to-fast-properties "^2.0.0" +"@chakra-ui/core@^0.8.0": + version "0.8.0" + resolved "https://registry.yarnpkg.com/@chakra-ui/core/-/core-0.8.0.tgz#a377286becd86008448ec8cf29ceb8fc301ac2dc" + integrity sha512-il1I1nEWOmWJSspnC+WyArLHbHvs82hvKTNDd24wr6spa/7v2jaXFZeWDNenY35ay1NHV7Ya2StcBwQRGHMWYA== + dependencies: + "@reach/auto-id" "0.10.2" + "@styled-system/css" "5.1.5" + "@styled-system/should-forward-prop" "5.1.5" + "@types/styled-system" "5.1.9" + aria-hidden "^1.1.1" + body-scroll-lock "^3.0.1" + color "3.1.2" + copy-to-clipboard "3.3.1" + exenv "^1.2.2" + popper.js "^1.15.0" + react-animate-height "2.0.21" + react-focus-lock "^2.2.1" + react-spring "^8.0.27" + styled-system "5.1.5" + toasted-notes "3.2.0" + use-dark-mode "2.3.1" + "@date-io/core@^1.3.9": version "1.3.13" resolved "https://registry.yarnpkg.com/@date-io/core/-/core-1.3.13.tgz#90c71da493f20204b7a972929cc5c482d078b3fa" @@ -2442,6 +2464,41 @@ dependencies: "@types/node" ">= 8" +"@reach/alert@^0.1.2": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@reach/alert/-/alert-0.1.5.tgz#4da79add0055fa4295f51e5295ed3b80257e9153" + integrity sha512-Ow+SB7rokGWxmm+AdOpf4eo29OaEYDqlJ1Kc9qulVX2cKjYiHQqAvkiCkSaIPkQbbyNmEXJ0c/rVpzPVvCVIAw== + dependencies: + "@reach/component-component" "^0.1.3" + "@reach/visually-hidden" "^0.1.4" + +"@reach/auto-id@0.10.2": + version "0.10.2" + resolved "https://registry.yarnpkg.com/@reach/auto-id/-/auto-id-0.10.2.tgz#a447af67241123dcb701ecd61931a2c786ed111e" + integrity sha512-PWFZevkHshiJV/z0L/5WQkWhe9QRzdZqC7N/JHRCoYo+odvCz9izXVRsxJf7p4sCuOCvnc8zNzAokFk2E1ZzDg== + dependencies: + "@reach/utils" "^0.10.2" + tslib "^1.11.2" + +"@reach/component-component@^0.1.3": + version "0.1.3" + resolved "https://registry.yarnpkg.com/@reach/component-component/-/component-component-0.1.3.tgz#5d156319572dc38995b246f81878bc2577c517e5" + integrity sha512-a1USH7L3bEfDdPN4iNZGvMEFuBfkdG+QNybeyDv8RloVFgZYRoM+KGXyy2KOfEnTUM8QWDRSROwaL3+ts5Angg== + +"@reach/utils@^0.10.2": + version "0.10.5" + resolved "https://registry.yarnpkg.com/@reach/utils/-/utils-0.10.5.tgz#fbac944d29565f6dd7abd0e1b13950e99b1e470b" + integrity sha512-5E/xxQnUbmpI/LrufBAOXjunl96DnqX6B4zC2MO2KH/dRzLug5gM5VuOwV26egsp0jvsSPxojwciOhS43px3qw== + dependencies: + "@types/warning" "^3.0.0" + tslib "^2.0.0" + warning "^4.0.3" + +"@reach/visually-hidden@^0.1.4": + version "0.1.4" + resolved "https://registry.yarnpkg.com/@reach/visually-hidden/-/visually-hidden-0.1.4.tgz#0dc4ecedf523004337214187db70a46183bd945b" + integrity sha512-QHbzXjflSlCvDd6vJwdwx16mSB+vUCCQMiU/wK/CgVNPibtpEiIbisyxkpZc55DyDFNUIqP91rSUsNae+ogGDQ== + "@rollup/plugin-replace@^2.3.1", "@rollup/plugin-replace@^2.3.2": version "2.3.3" resolved "https://registry.yarnpkg.com/@rollup/plugin-replace/-/plugin-replace-2.3.3.tgz#cd6bae39444de119f5d905322b91ebd4078562e7" @@ -2533,7 +2590,7 @@ dependencies: object-assign "^4.1.1" -"@styled-system/css@^5.1.5": +"@styled-system/css@5.1.5", "@styled-system/css@^5.1.5": version "5.1.5" resolved "https://registry.yarnpkg.com/@styled-system/css/-/css-5.1.5.tgz#0460d5f3ff962fa649ea128ef58d9584f403bbbc" integrity sha512-XkORZdS5kypzcBotAMPBoeckDs9aSZVkvrAlq5K3xP8IMAUek+x2O4NtwoSgkYkWWzVBu6DGdFZLR790QWGG+A== @@ -2573,7 +2630,7 @@ dependencies: "@styled-system/core" "^5.1.2" -"@styled-system/should-forward-prop@^5.1.2": +"@styled-system/should-forward-prop@5.1.5", "@styled-system/should-forward-prop@^5.1.2": version "5.1.5" resolved "https://registry.yarnpkg.com/@styled-system/should-forward-prop/-/should-forward-prop-5.1.5.tgz#c392008c6ae14a6eb78bf1932733594f7f7e5c76" integrity sha512-+rPRomgCGYnUIaFabDoOgpSDc4UUJ1KsmlnzcEp0tu5lFrBQKgZclSo18Z1URhaZm7a6agGtS5Xif7tuC2s52Q== @@ -3046,7 +3103,7 @@ resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8" integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw== -"@types/react-dom@^16.9.1": +"@types/react-dom@^16.8.3", "@types/react-dom@^16.9.1": version "16.9.8" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.8.tgz#fe4c1e11dfc67155733dfa6aa65108b4971cb423" integrity sha512-ykkPQ+5nFknnlU6lDd947WbQ6TE3NNzbQAkInC2EKY1qeYdTKp7onFusmYZb+ityzx2YviqT6BXSu+LyWWJwcA== @@ -3145,6 +3202,14 @@ "@types/prop-types" "*" csstype "^3.0.2" +"@types/react@^16.8.10": + version "16.9.53" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.53.tgz#40cd4f8b8d6b9528aedd1fff8fcffe7a112a3d23" + integrity sha512-4nW60Sd4L7+WMXH1D6jCdVftuW7j4Za6zdp6tJ33Rqv0nk1ZAmQKML9ZLD4H0dehA3FZxXR/GM8gXplf82oNGw== + dependencies: + "@types/prop-types" "*" + csstype "^3.0.2" + "@types/recharts@^1.8.14": version "1.8.16" resolved "https://registry.yarnpkg.com/@types/recharts/-/recharts-1.8.16.tgz#3ac3f5513ed61152910f2e828157b21a2761df22" @@ -3194,6 +3259,13 @@ "@types/react-native" "*" csstype "^3.0.2" +"@types/styled-system@5.1.9": + version "5.1.9" + resolved "https://registry.yarnpkg.com/@types/styled-system/-/styled-system-5.1.9.tgz#8baac8f6eca9e0bd5768c175ca5ce1f2d6f61ade" + integrity sha512-QlWv6tmQV8dqk8s+LSLb9QAtmuQEnfv4f8lKKZkMgDqRFVmxJDBwEw0u4zhpxp56u0hdR+TCIk9dGfOw3TkCoQ== + dependencies: + csstype "^2.6.9" + "@types/tapable@*": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" @@ -3228,6 +3300,11 @@ resolved "https://registry.yarnpkg.com/@types/uuid/-/uuid-8.3.0.tgz#215c231dff736d5ba92410e6d602050cce7e273f" integrity sha512-eQ9qFW/fhfGJF8WKHGEHZEyVWfZxrT+6CLIJGBcZPfxUh/+BnEj+UCGYMlr9qZuX/2AltsvwrGqp0LhEW8D0zQ== +"@types/warning@^3.0.0": + version "3.0.0" + resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.0.tgz#0d2501268ad8f9962b740d387c4654f5f8e23e52" + integrity sha1-DSUBJorY+ZYrdA04fEZU9fjiPlI= + "@types/webpack-sources@*": version "1.4.2" resolved "https://registry.yarnpkg.com/@types/webpack-sources/-/webpack-sources-1.4.2.tgz#5d3d4dea04008a779a90135ff96fb5c0c9e6292c" @@ -3335,6 +3412,11 @@ dependencies: eslint-visitor-keys "^1.1.0" +"@use-it/event-listener@^0.1.2": + version "0.1.5" + resolved "https://registry.yarnpkg.com/@use-it/event-listener/-/event-listener-0.1.5.tgz#870456241bfef66acea6395c69b66fe516bee3cd" + integrity sha512-SWbhB0iFcoNL1BEldApGTqfB9aoGpU82iZUVTBtZaTFNrVKAGwuQTF15N9MzRvTgyuOASWf1pCKXbdVtKZgeRg== + "@webassemblyjs/ast@1.9.0": version "1.9.0" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964" @@ -3921,6 +4003,13 @@ argparse@^1.0.7: dependencies: sprintf-js "~1.0.2" +aria-hidden@^1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/aria-hidden/-/aria-hidden-1.1.1.tgz#0c356026d3f65e2bd487a3adb73f0c586be2c37e" + integrity sha512-M7zYxCcOQPOaxGHoMTKUFD2UNcVFTp9ycrdStLcTPLf8zgTXC3+YcGe+UuzSh5X1BX/0/PtS8xTNy4xyH/6xtw== + dependencies: + tslib "^1.0.0" + aria-query@^4.2.2: version "4.2.2" resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-4.2.2.tgz#0d2ca6c9aceb56b8977e9fed6aed7e15bbd2f83b" @@ -4624,6 +4713,11 @@ body-parser@1.19.0, body-parser@^1.19.0: raw-body "2.4.0" type-is "~1.6.17" +body-scroll-lock@^3.0.1: + version "3.1.5" + resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-3.1.5.tgz#c1392d9217ed2c3e237fee1e910f6cdd80b7aaec" + integrity sha512-Yi1Xaml0EvNA0OYWxXiYNqY24AfWkbA6w5vxE7GWxtKfzIbZM+Qw+aSmkgsbWzbHiy/RCSkUZBplVxTA+E4jJg== + boolbase@^1.0.0, boolbase@~1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e" @@ -5541,7 +5635,7 @@ color-string@^1.5.2: color-name "^1.0.0" simple-swizzle "^0.2.2" -color@^3.1.2: +color@3.1.2, color@^3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/color/-/color-3.1.2.tgz#68148e7f85d41ad7649c5fa8c8106f098d229e10" integrity sha512-vXTJhHebByxZn3lDvDJYw4lR5+uB3vuoHsuYA5AKuxRVn5wzzIfQKGLBmgdVRHKTJYeK5rvJcHnrd0Li49CFpg== @@ -5899,6 +5993,13 @@ copy-descriptor@^0.1.0: resolved "https://registry.yarnpkg.com/copy-descriptor/-/copy-descriptor-0.1.1.tgz#676f6eb3c39997c2ee1ac3a924fd6124748f578d" integrity sha1-Z29us8OZl8LuGsOpJP1hJHSPV40= +copy-to-clipboard@3.3.1: + version "3.3.1" + resolved "https://registry.yarnpkg.com/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz#115aa1a9998ffab6196f93076ad6da3b913662ae" + integrity sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw== + dependencies: + toggle-selection "^1.0.6" + core-js-compat@^3.6.2: version "3.6.4" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.6.4.tgz#938476569ebb6cda80d339bcf199fae4f16fff17" @@ -6301,6 +6402,11 @@ csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.11.tgz#452f4d024149ecf260a852b025e36562a253ffc5" integrity sha512-l8YyEC9NBkSm783PFTvh0FmJy7s5pFKrDp49ZL7zBGX3fWkO+N4EEyan1qqp8cwPLDcD0OSdyY6hAMoxp34JFw== +csstype@^2.6.9: + version "2.6.13" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.13.tgz#a6893015b90e84dd6e85d0e3b442a1e84f2dbe0f" + integrity sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A== + csstype@^3.0.2: version "3.0.3" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.3.tgz#2b410bbeba38ba9633353aff34b05d9755d065f8" @@ -6721,6 +6827,11 @@ detect-libc@^1.0.2, detect-libc@^1.0.3: resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b" integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups= +detect-node-es@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.0.0.tgz#c0318b9e539a5256ca780dd9575c9345af05b8ed" + integrity sha512-S4AHriUkTX9FoFvL4G8hXDcx6t3gp2HpfCza3Q0v6S78gul2hKWifLQbeW+ZF89+hSm2ZIc/uF3J97ZgytgTRg== + devtools-protocol@0.0.799653: version "0.0.799653" resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.799653.tgz#86fc95ce5bf4fdf4b77a58047ba9d2301078f119" @@ -7846,6 +7957,11 @@ execall@^2.0.0: dependencies: clone-regexp "^2.1.0" +exenv@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d" + integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50= + expand-brackets@^2.1.4: version "2.1.4" resolved "https://registry.yarnpkg.com/expand-brackets/-/expand-brackets-2.1.4.tgz#b77735e315ce30f6b6eff0f83b04151a22449622" @@ -8258,6 +8374,11 @@ flush-write-stream@^1.0.0: inherits "^2.0.3" readable-stream "^2.3.6" +focus-lock@^0.7.0: + version "0.7.0" + resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.7.0.tgz#b2bfb0ca7beacc8710a1ff74275fe0dc60a1d88a" + integrity sha512-LI7v2mH02R55SekHYdv9pRHR9RajVNyIJ2N5IEkWbg7FT5ZmJ9Hw4mWxHeEUcd+dJo0QmzztHvDvWcc7prVFsw== + follow-redirects@1.5.10: version "1.5.10" resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a" @@ -13361,6 +13482,11 @@ popper.js@1.16.1-lts: resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== +popper.js@^1.15.0: + version "1.16.1" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" + integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -13659,7 +13785,7 @@ prop-types-exact@^1.2.0: object.assign "^4.1.0" reflect.ownkeys "^0.2.0" -prop-types@15.7.2, prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2: +prop-types@15.7.2, prop-types@^15.0.0, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2: version "15.7.2" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5" integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ== @@ -13927,6 +14053,21 @@ rc@^1.2.7, rc@^1.2.8: minimist "^1.2.0" strip-json-comments "~2.0.1" +react-animate-height@2.0.21: + version "2.0.21" + resolved "https://registry.yarnpkg.com/react-animate-height/-/react-animate-height-2.0.21.tgz#da9223eb0e74457d52f72da477c8626550df2ce6" + integrity sha512-CZHdjMD8qqp10tYtWmauWYASXxxv9vYeljxFGFtbcrbNXhsUv0w3IjxVK+0yCnyfk7769WfMZKHra4vRcbMnQg== + dependencies: + classnames "^2.2.5" + prop-types "^15.6.1" + +react-clientside-effect@^1.2.2: + version "1.2.2" + resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837" + integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A== + dependencies: + "@babel/runtime" "^7.0.0" + react-display-name@^0.2.4: version "0.2.4" resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.4.tgz#e2a670b81d79a2204335510c01246f4c92ff12cf" @@ -13980,6 +14121,18 @@ react-final-form@^6.3.0: dependencies: "@babel/runtime" "^7.10.0" +react-focus-lock@^2.2.1: + version "2.4.1" + resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.4.1.tgz#e842cc93da736b5c5d331799012544295cbcee4f" + integrity sha512-c5ZP56KSpj9EAxzScTqQO7bQQNPltf/W1ZEBDqNDOV1XOIwvAyHX0O7db9ekiAtxyKgnqZjQlLppVg94fUeL9w== + dependencies: + "@babel/runtime" "^7.0.0" + focus-lock "^0.7.0" + prop-types "^15.6.2" + react-clientside-effect "^1.2.2" + use-callback-ref "^1.2.1" + use-sidecar "^1.0.1" + react-is@16.13.1, react-is@^16.12.0, react-is@^16.13.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6, react-is@^16.9.0: version "16.13.1" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" @@ -16113,7 +16266,7 @@ styled-jsx@3.3.0: stylis "3.5.4" stylis-rule-sheet "0.0.10" -styled-system@^5.1.2, styled-system@^5.1.5: +styled-system@5.1.5, styled-system@^5.1.2, styled-system@^5.1.5: version "5.1.5" resolved "https://registry.yarnpkg.com/styled-system/-/styled-system-5.1.5.tgz#e362d73e1dbb5641a2fd749a6eba1263dc85075e" integrity sha512-7VoD0o2R3RKzOzPK0jYrVnS8iJdfkKsQJNiLRDjikOpQVqQHns/DXWaPZOH4tIKkhAT7I6wIsy9FWTWh2X3q+A== @@ -16697,6 +16850,20 @@ to-regex@^3.0.1, to-regex@^3.0.2: regex-not "^1.0.2" safe-regex "^1.1.0" +toasted-notes@3.2.0: + version "3.2.0" + resolved "https://registry.yarnpkg.com/toasted-notes/-/toasted-notes-3.2.0.tgz#dc9bdc9d0083ba2af8bf26b2f71619d014acc089" + integrity sha512-PucSn+SUdFSYNaaL1eNw7wYkEMJ7LULCR6j1YXPlRySHgWVgf+bXjq4dYd3hdA4mvmGz9HANmI1RnzhZ8av52Q== + dependencies: + "@reach/alert" "^0.1.2" + "@types/react" "^16.8.10" + "@types/react-dom" "^16.8.3" + +toggle-selection@^1.0.6: + version "1.0.6" + resolved "https://registry.yarnpkg.com/toggle-selection/-/toggle-selection-1.0.6.tgz#6e45b1263f2017fa0acc7d89d78b15b8bf77da32" + integrity sha1-bkWxJj8gF/oKzH2J14sVuL932jI= + toidentifier@1.0.0: version "1.0.0" resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553" @@ -16798,11 +16965,21 @@ tsconfig-paths@^3.9.0: minimist "^1.2.0" strip-bom "^3.0.0" +tslib@^1.0.0, tslib@^1.11.2, tslib@^1.9.3: + version "1.14.1" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00" + integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg== + tslib@^1.10.0, tslib@^1.8.0, tslib@^1.8.1, tslib@^1.9.0: version "1.13.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043" integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q== +tslib@^2.0.0: + version "2.0.3" + resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c" + integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ== + tslib@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e" @@ -17251,6 +17428,34 @@ url@^0.11.0: punycode "1.3.2" querystring "0.2.0" +use-callback-ref@^1.2.1: + version "1.2.4" + resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c" + integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ== + +use-dark-mode@2.3.1: + version "2.3.1" + resolved "https://registry.yarnpkg.com/use-dark-mode/-/use-dark-mode-2.3.1.tgz#d506349c7b7e09e9977cb8a6ab4470896aa3779a" + integrity sha512-hmcdJR96tTustRQdaQwe6jMrZHnmPqXBxgy4jaQ4gsfhwajsCpjECuq9prgDe9XxMx/f9r96o2/md6O4Lwhwjg== + dependencies: + "@use-it/event-listener" "^0.1.2" + use-persisted-state "^0.3.0" + +use-persisted-state@^0.3.0: + version "0.3.0" + resolved "https://registry.yarnpkg.com/use-persisted-state/-/use-persisted-state-0.3.0.tgz#f8e3d2fd8eee67e0c86fd596c3ea3e8121c07402" + integrity sha512-UlWEq0JYg7NbvcRBZ1g6Bwe4SEbYfr1wr/D5mrmfCzSxXSwsPRYygGLlsxHcW58Rf7gGwRPBT23sNVvyVn4WYg== + dependencies: + "@use-it/event-listener" "^0.1.2" + +use-sidecar@^1.0.1: + version "1.0.3" + resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.3.tgz#17a4e567d4830c0c0ee100040e85a7fe68611e0f" + integrity sha512-ygJwGUBeQfWgDls7uTrlEDzJUUR67L8Rm14v/KfFtYCdHhtjHZx1Krb3DIQl3/Q5dJGfXLEQ02RY8BdNBv87SQ== + dependencies: + detect-node-es "^1.0.0" + tslib "^1.9.3" + use-subscription@1.4.1: version "1.4.1" resolved "https://registry.yarnpkg.com/use-subscription/-/use-subscription-1.4.1.tgz#edcbcc220f1adb2dd4fa0b2f61b6cc308e620069" @@ -17453,7 +17658,7 @@ w3c-xmlserializer@^2.0.0: dependencies: xml-name-validator "^3.0.0" -warning@^4.0.1: +warning@^4.0.1, warning@^4.0.3: version "4.0.3" resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3" integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w== From 15b118baf903543ec6072754efc4f83eb8026032 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 15:07:19 +0200 Subject: [PATCH 40/68] breakpoints more tests and fixes --- packages/material-ui/src/Box/styleFunction.js | 18 +++--------------- .../material-ui/src/Box/styleFunction.test.js | 13 ++++++++----- 2 files changed, 11 insertions(+), 20 deletions(-) diff --git a/packages/material-ui/src/Box/styleFunction.js b/packages/material-ui/src/Box/styleFunction.js index 5e68ec8b361d28..d28f342a5ea060 100644 --- a/packages/material-ui/src/Box/styleFunction.js +++ b/packages/material-ui/src/Box/styleFunction.js @@ -11,6 +11,7 @@ import { typography, handleBreakpoints, } from '@material-ui/system'; +import { deepmerge } from '@material-ui/utils'; function objectsHaveSameKeys(...objects) { const allKeys = objects.reduce((keys, object) => keys.concat(Object.keys(object)), []); @@ -88,10 +89,7 @@ const styleFunctionSx = (styles, theme) => { Object.keys(styles).forEach((styleKey) => { if (typeof styles[styleKey] === 'object') { if (filterProps.indexOf(styleKey) !== -1) { - css = { - ...css, - ...getThemeValue(styleKey, styles[styleKey], theme), - }; + css = deepmerge(css, getThemeValue(styleKey, styles[styleKey], theme)); } else { const breakpointsValues = handleBreakpoints({ theme }, styles[styleKey], (x) => ({ [styleKey]: x, @@ -101,17 +99,7 @@ const styleFunctionSx = (styles, theme) => { const transformedValue = styleFunctionSx(styles[styleKey], theme); css[styleKey] = transformedValue; } else { - const spread = {}; - Object.keys(breakpointsValues).forEach((breakpoint) => { - spread[breakpoint] = { - ...css[breakpoint], - ...breakpointsValues[breakpoint], - }; - }); - css = { - ...css, - ...spread, - }; + css = deepmerge(css, breakpointsValues); } } } else if (typeof styles[styleKey] === 'function') { diff --git a/packages/material-ui/src/Box/styleFunction.test.js b/packages/material-ui/src/Box/styleFunction.test.js index 28f1711b018806..f1c2dafdd55e72 100644 --- a/packages/material-ui/src/Box/styleFunction.test.js +++ b/packages/material-ui/src/Box/styleFunction.test.js @@ -152,7 +152,7 @@ describe('styleFunction', () => { }); }); - it('resolves non system CSS properties', () => { + it('resolves non system CSS properties if specified', () => { const result = styleFunction({ theme, sx: { @@ -165,7 +165,9 @@ describe('styleFunction', () => { md: 0.3, lg: 0.4, xl: 0.5 - } + }, + border: [1, 2, 3], + borderColor: t => t.palette.secondary.main, } } }); @@ -174,11 +176,12 @@ describe('styleFunction', () => { background: 'rgb(0, 0, 255)', ":hover": { backgroundColor: 'rgb(0, 0, 255)', - '@media (min-width:0px)': { opacity: 0.1 }, - '@media (min-width:600px)': { opacity: 0.2 }, - '@media (min-width:960px)': { opacity: 0.3 }, + '@media (min-width:0px)': { opacity: 0.1, border: '1px solid' }, + '@media (min-width:600px)': { opacity: 0.2, border: '2px solid' }, + '@media (min-width:960px)': { opacity: 0.3, border: '3px solid' }, '@media (min-width:1280px)': { opacity: 0.4 }, '@media (min-width:1920px)': { opacity: 0.5 }, + borderColor: 'rgb(0, 255, 0)', }, }); }); From b386b29fbfd531fe29ff2cf2497b2007c05275db Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 15:12:08 +0200 Subject: [PATCH 41/68] improved breakpoints checks --- packages/material-ui-system/src/breakpoints.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui-system/src/breakpoints.js b/packages/material-ui-system/src/breakpoints.js index 1cfeb9e111a408..acc180a04776ed 100644 --- a/packages/material-ui-system/src/breakpoints.js +++ b/packages/material-ui-system/src/breakpoints.js @@ -37,7 +37,7 @@ export function handleBreakpoints(props, propValue, styleFromPropValue) { const themeBreakpoints = props.theme.breakpoints || defaultBreakpoints; return Object.keys(propValue).reduce((acc, breakpoint) => { // key is breakpoint - if (themeBreakpoints.keys.indexOf(breakpoint) !== -1) { + if (Object.keys(themeBreakpoints.values).indexOf(breakpoint) !== -1) { acc[themeBreakpoints.up(breakpoint)] = styleFromPropValue(propValue[breakpoint]); } else { const cssKey = breakpoint; From e200326d954d39944905adab1a46015a55a04124 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 16:03:46 +0200 Subject: [PATCH 42/68] added more examples --- .../scenarios/box-material-ui-styles/index.js | 18 ++++++++--------- docs/src/pages/components/box/BoxSx.js | 18 +++++++++++++++++ docs/src/pages/components/box/BoxSx.tsx | 18 +++++++++++++++++ docs/src/pages/components/box/box.md | 5 ++++- .../material-ui/src/Box/styleFunction.test.js | 20 +++++++++---------- 5 files changed, 59 insertions(+), 20 deletions(-) create mode 100644 docs/src/pages/components/box/BoxSx.js create mode 100644 docs/src/pages/components/box/BoxSx.tsx diff --git a/benchmark/browser/scenarios/box-material-ui-styles/index.js b/benchmark/browser/scenarios/box-material-ui-styles/index.js index 2efc0a0fb4e6f4..f0a3fb213ee8a9 100644 --- a/benchmark/browser/scenarios/box-material-ui-styles/index.js +++ b/benchmark/browser/scenarios/box-material-ui-styles/index.js @@ -11,15 +11,15 @@ export default function BoxMaterialUIStyles() { {new Array(1000).fill().map(() => ( - - @material-ui/styles - + + @material-ui/styles + ))} diff --git a/docs/src/pages/components/box/BoxSx.js b/docs/src/pages/components/box/BoxSx.js new file mode 100644 index 00000000000000..ebe455fd5bc221 --- /dev/null +++ b/docs/src/pages/components/box/BoxSx.js @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function BoxSx() { + return ( + + ); +} diff --git a/docs/src/pages/components/box/BoxSx.tsx b/docs/src/pages/components/box/BoxSx.tsx new file mode 100644 index 00000000000000..ebe455fd5bc221 --- /dev/null +++ b/docs/src/pages/components/box/BoxSx.tsx @@ -0,0 +1,18 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; + +export default function BoxSx() { + return ( + + ); +} diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 58f09fb6cac841..bdf9e0914665cb 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -66,14 +66,17 @@ Sometimes, the props on the Box component are not enough to style the component. sx={{ width: 300, height: 300, - bgcolor: 'primary.light', + bgcolor: 'primary.dark', ':hover': { backgroundColor: 'primary.main', + opacity: [0.9, 0.8, 0.7], }, }} /> ``` +{{"demo": "pages/components/box/BoxSx.js"}} + ## API ```jsx diff --git a/packages/material-ui/src/Box/styleFunction.test.js b/packages/material-ui/src/Box/styleFunction.test.js index f1c2dafdd55e72..9fe1bff3692258 100644 --- a/packages/material-ui/src/Box/styleFunction.test.js +++ b/packages/material-ui/src/Box/styleFunction.test.js @@ -88,7 +88,7 @@ describe('styleFunction', () => { '@media (min-width:600px)': { border: '2px solid' }, '@media (min-width:960px)': { border: '3px solid' }, '@media (min-width:1280px)': { border: '4px solid' }, - '@media (min-width:1920px)': { border: '5px solid' } + '@media (min-width:1920px)': { border: '5px solid' }, }; it('resolves breakpoints array', () => { @@ -104,11 +104,11 @@ describe('styleFunction', () => { const result = styleFunction({ theme, border: { - xs: 1, + xs: 1, sm: 2, md: 3, - lg: 4, - xl: 5 + lg: 4, + xl: 5, }, }); @@ -130,7 +130,7 @@ describe('styleFunction', () => { fontSize: 'fontSize', displayPrint: 'block', border: [1, 2, 3, 4, 5], - } + }, }); expect(result).to.deep.equal({ @@ -164,17 +164,17 @@ describe('styleFunction', () => { sm: 0.2, md: 0.3, lg: 0.4, - xl: 0.5 + xl: 0.5, }, border: [1, 2, 3], - borderColor: t => t.palette.secondary.main, - } - } + borderColor: (t) => t.palette.secondary.main, + }, + }, }); expect(result).to.deep.equal({ background: 'rgb(0, 0, 255)', - ":hover": { + ':hover': { backgroundColor: 'rgb(0, 0, 255)', '@media (min-width:0px)': { opacity: 0.1, border: '1px solid' }, '@media (min-width:600px)': { opacity: 0.2, border: '2px solid' }, From e12c35f3aa7274a00cc74fc959bfccda5d6fcbac Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 20 Oct 2020 17:01:35 +0200 Subject: [PATCH 43/68] Added Box examples --- docs/src/pages/components/box/BoxClone.js | 11 +++++++ docs/src/pages/components/box/BoxClone.tsx | 11 +++++++ docs/src/pages/components/box/BoxComponent.js | 11 +++++++ .../src/pages/components/box/BoxComponent.tsx | 11 +++++++ .../pages/components/box/BoxRenderProps.js | 11 +++++++ .../pages/components/box/BoxRenderProps.tsx | 11 +++++++ docs/src/pages/components/box/box.md | 30 ++++--------------- packages/material-ui/src/Box/Box.d.ts | 1 + packages/material-ui/src/Box/Box.js | 2 +- 9 files changed, 73 insertions(+), 26 deletions(-) create mode 100644 docs/src/pages/components/box/BoxClone.js create mode 100644 docs/src/pages/components/box/BoxClone.tsx create mode 100644 docs/src/pages/components/box/BoxComponent.js create mode 100644 docs/src/pages/components/box/BoxComponent.tsx create mode 100644 docs/src/pages/components/box/BoxRenderProps.js create mode 100644 docs/src/pages/components/box/BoxRenderProps.tsx diff --git a/docs/src/pages/components/box/BoxClone.js b/docs/src/pages/components/box/BoxClone.js new file mode 100644 index 00000000000000..446d8fa4ab11b2 --- /dev/null +++ b/docs/src/pages/components/box/BoxClone.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; + +export default function BoxClone() { + return ( + + + + ); +} diff --git a/docs/src/pages/components/box/BoxClone.tsx b/docs/src/pages/components/box/BoxClone.tsx new file mode 100644 index 00000000000000..446d8fa4ab11b2 --- /dev/null +++ b/docs/src/pages/components/box/BoxClone.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; + +export default function BoxClone() { + return ( + + + + ); +} diff --git a/docs/src/pages/components/box/BoxComponent.js b/docs/src/pages/components/box/BoxComponent.js new file mode 100644 index 00000000000000..ce331b43e9e107 --- /dev/null +++ b/docs/src/pages/components/box/BoxComponent.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; + +export default function BoxComponent() { + return ( + + + + ); +} diff --git a/docs/src/pages/components/box/BoxComponent.tsx b/docs/src/pages/components/box/BoxComponent.tsx new file mode 100644 index 00000000000000..ce331b43e9e107 --- /dev/null +++ b/docs/src/pages/components/box/BoxComponent.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Box from '@material-ui/core/Box'; +import Button from '@material-ui/core/Button'; + +export default function BoxComponent() { + return ( + + + + ); +} diff --git a/docs/src/pages/components/box/BoxRenderProps.js b/docs/src/pages/components/box/BoxRenderProps.js new file mode 100644 index 00000000000000..071fe19fe50074 --- /dev/null +++ b/docs/src/pages/components/box/BoxRenderProps.js @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; + +export default function BoxClone() { + return ( + + {(props) => } + + ); +} diff --git a/docs/src/pages/components/box/BoxRenderProps.tsx b/docs/src/pages/components/box/BoxRenderProps.tsx new file mode 100644 index 00000000000000..6345cc4b077286 --- /dev/null +++ b/docs/src/pages/components/box/BoxRenderProps.tsx @@ -0,0 +1,11 @@ +import * as React from 'react'; +import Button from '@material-ui/core/Button'; +import Box from '@material-ui/core/Box'; + +export default function BoxClone() { + return ( + + {(props: { className: string }) => } + + ); +} diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index bdf9e0914665cb..aaf7db76e36101 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -22,11 +22,7 @@ The Box component wraps your component. It creates a new DOM element, a `
` by default that can be changed with the `component` prop. Let's say you want to use a `` instead: -```jsx - -