From c2d31cc5a68a171548064198c16c34cc64b59995 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 25 Sep 2020 17:15:54 +0200 Subject: [PATCH 01/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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/64] 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 - -
); + it('warns if system props are used directly on the Box component', () => { + expect(() => { + render( + , + ); + }).toWarnDev('Material-UI: You are using deprecated propreties directly on the Box component.\n' + + 'You should move the properties inside the `sx` prop. For example:\n' + + ' should become ' + ); + }); + it('renders children and box content', () => { const { container, getByTestId } = render( From 2dd4913dfd58e2aee59f50d4f5bf36c4894dc03f Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 12:55:13 +0200 Subject: [PATCH 56/64] removed duplicated example --- docs/src/pages/components/box/box.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index 354df44b9abc56..45d3bf682592f3 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -44,8 +44,6 @@ The Box children accepts a render props function. You can pull out the `classNam {{"demo": "pages/components/box/BoxRenderProps.js", "defaultCodeOpen": true }} -{{"demo": "pages/components/box/BoxRenderProps.js", "defaultCodeOpen": true }} - > ⚠️ 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. From a722e51e1c7e885a203739bb1bce3284f38b8638 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 13:22:22 +0200 Subject: [PATCH 57/64] prettier --- packages/material-ui/src/Box/Box.js | 9 +++++---- packages/material-ui/src/Box/Box.test.js | 7 ++++--- 2 files changed, 9 insertions(+), 7 deletions(-) diff --git a/packages/material-ui/src/Box/Box.js b/packages/material-ui/src/Box/Box.js index de2053c63b1523..203efd155c5363 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -27,11 +27,12 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { const spread = omit(other, styleFunction.filterProps); if (process.env.NODE_ENV !== 'production') { - if(!warnedOnce && Object.keys(spread).length !== Object.keys(other).length) { + if (!warnedOnce && Object.keys(spread).length !== Object.keys(other).length) { warnedOnce = true; - console.warn('Material-UI: You are using deprecated propreties directly on the Box component.\n' + - 'You should move the properties inside the `sx` prop. For example:\n' + - ' should become ' + console.warn( + 'Material-UI: You are using deprecated propreties directly on the Box component.\n' + + 'You should move the properties inside the `sx` prop. For example:\n' + + ' should become ', ); } } diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js index 1b50dacb513e00..c7b16ce531f6ac 100644 --- a/packages/material-ui/src/Box/Box.test.js +++ b/packages/material-ui/src/Box/Box.test.js @@ -28,9 +28,10 @@ describe('', () => { fontSize={{ xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' }} />, ); - }).toWarnDev('Material-UI: You are using deprecated propreties directly on the Box component.\n' + - 'You should move the properties inside the `sx` prop. For example:\n' + - ' should become ' + }).toWarnDev( + 'Material-UI: You are using deprecated propreties directly on the Box component.\n' + + 'You should move the properties inside the `sx` prop. For example:\n' + + ' should become ', ); }); From 2a24e55d85a3b955e693b4c9d59981e631b19e5d Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 15:27:01 +0200 Subject: [PATCH 58/64] 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 203efd155c5363..6bbdc356513e2b 100644 --- a/packages/material-ui/src/Box/Box.js +++ b/packages/material-ui/src/Box/Box.js @@ -30,7 +30,7 @@ const BoxRoot = React.forwardRef(function StyledComponent(props, ref) { if (!warnedOnce && Object.keys(spread).length !== Object.keys(other).length) { warnedOnce = true; console.warn( - 'Material-UI: You are using deprecated propreties directly on the Box component.\n' + + 'Material-UI: You are using deprecated props on the Box component.\n' + 'You should move the properties inside the `sx` prop. For example:\n' + ' should become ', ); From 21f217dd08a443fc7e115bc99b3bd519d9df8541 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 15:27:15 +0200 Subject: [PATCH 59/64] Update packages/material-ui/src/Box/Box.test.js Co-authored-by: Olivier Tassinari --- packages/material-ui/src/Box/Box.test.js | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js index c7b16ce531f6ac..1b53852d095095 100644 --- a/packages/material-ui/src/Box/Box.test.js +++ b/packages/material-ui/src/Box/Box.test.js @@ -30,8 +30,6 @@ describe('', () => { ); }).toWarnDev( 'Material-UI: You are using deprecated propreties directly on the Box component.\n' + - 'You should move the properties inside the `sx` prop. For example:\n' + - ' should become ', ); }); From 06ac444e2fd95dde86ba8196cfcbb366ee7d7589 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 15:28:15 +0200 Subject: [PATCH 60/64] Update packages/material-ui/src/Box/Box.test.js --- packages/material-ui/src/Box/Box.test.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js index 1b53852d095095..9cb19db37beb85 100644 --- a/packages/material-ui/src/Box/Box.test.js +++ b/packages/material-ui/src/Box/Box.test.js @@ -29,7 +29,7 @@ describe('', () => { />, ); }).toWarnDev( - 'Material-UI: You are using deprecated propreties directly on the Box component.\n' + + 'Material-UI: You are using deprecated props on the Box component.\n' ); }); From 66d4e8eaa4cc4f2e395c2cc9216123b5ece1fe36 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 16:11:23 +0200 Subject: [PATCH 61/64] prettier --- packages/material-ui/src/Box/Box.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/material-ui/src/Box/Box.test.js b/packages/material-ui/src/Box/Box.test.js index 9cb19db37beb85..309b68593d36eb 100644 --- a/packages/material-ui/src/Box/Box.test.js +++ b/packages/material-ui/src/Box/Box.test.js @@ -28,9 +28,7 @@ describe('', () => { fontSize={{ xs: 'h6.fontSize', sm: 'h4.fontSize', md: 'h3.fontSize' }} />, ); - }).toWarnDev( - 'Material-UI: You are using deprecated props on the Box component.\n' - ); + }).toWarnDev('Material-UI: You are using deprecated props on the Box component.\n'); }); it('renders children and box content', () => { From 615cb4746e1c2c3181888c3e67a78a732f3e7225 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Thu, 22 Oct 2020 21:19:06 +0200 Subject: [PATCH 62/64] changed box examples and improved docs --- docs/src/pages/components/box/BoxClone.js | 2 +- docs/src/pages/components/box/BoxClone.tsx | 2 +- docs/src/pages/components/box/BoxComponent.js | 2 +- docs/src/pages/components/box/BoxComponent.tsx | 2 +- docs/src/pages/components/box/BoxRenderProps.js | 2 +- docs/src/pages/components/box/BoxRenderProps.tsx | 2 +- docs/src/pages/components/box/box.md | 9 ++++----- 7 files changed, 10 insertions(+), 11 deletions(-) diff --git a/docs/src/pages/components/box/BoxClone.js b/docs/src/pages/components/box/BoxClone.js index 446d8fa4ab11b2..a101300568bcd9 100644 --- a/docs/src/pages/components/box/BoxClone.js +++ b/docs/src/pages/components/box/BoxClone.js @@ -4,7 +4,7 @@ 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 index 446d8fa4ab11b2..a101300568bcd9 100644 --- a/docs/src/pages/components/box/BoxClone.tsx +++ b/docs/src/pages/components/box/BoxClone.tsx @@ -4,7 +4,7 @@ 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 index ce331b43e9e107..539477349a51ea 100644 --- a/docs/src/pages/components/box/BoxComponent.js +++ b/docs/src/pages/components/box/BoxComponent.js @@ -4,7 +4,7 @@ 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 index ce331b43e9e107..539477349a51ea 100644 --- a/docs/src/pages/components/box/BoxComponent.tsx +++ b/docs/src/pages/components/box/BoxComponent.tsx @@ -4,7 +4,7 @@ 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 index 071fe19fe50074..e3dd1724a136d4 100644 --- a/docs/src/pages/components/box/BoxRenderProps.js +++ b/docs/src/pages/components/box/BoxRenderProps.js @@ -4,7 +4,7 @@ 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 index 6345cc4b077286..759a4c44d4b5ee 100644 --- a/docs/src/pages/components/box/BoxRenderProps.tsx +++ b/docs/src/pages/components/box/BoxRenderProps.tsx @@ -4,7 +4,7 @@ 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 45d3bf682592f3..e7ae7805322511 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -28,8 +28,8 @@ This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way. However, sometimes you have to target the underlying DOM element. -For instance, you want to change the text color of the button. -The Button component defines its own color. CSS inheritance doesn't help. +For instance, you want to change the border of the button. +The Button component defines its own styles. CSS inheritance doesn't help. To workaround the problem, you have two options: 1. Use [`React.cloneElement()`](https://reactjs.org/docs/react-api.html#cloneelement) @@ -49,7 +49,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 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: +All system props, are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} @@ -64,5 +64,4 @@ import Box from '@material-ui/core/Box'; | children \* | union: node |
 func
 | | Box render function or node. | | clone | bool | false | If `true`, the box will recycle its children DOM element. It's using `React.cloneElement` internally. | | component | union: string |
 func |
 object
 | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | - -Any other props supplied will be used by [the style functions](/system/basics/#all-inclusive) or spread to the root element. +| sx | object | {} | Accepts all system properties, as well as any valid CSS properties. | From 783ff53ba62b3fd71652d53f31854b2102064b41 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 23 Oct 2020 12:20:07 +0200 Subject: [PATCH 63/64] restructure a bit the docs page for the Box --- docs/src/pages/components/box/box.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index e7ae7805322511..196b1ff76fd958 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -16,6 +16,12 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty [The palette](/system/palette/) style function. +## The sx prop + +All system properties, are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: + +{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} + ## Overriding Material-UI components The Box component wraps your component. @@ -28,7 +34,7 @@ This works great when the changes can be isolated to a new DOM element. For instance, you can change the margin this way. However, sometimes you have to target the underlying DOM element. -For instance, you want to change the border of the button. +For instance, you want to change the border of the Button. The Button component defines its own styles. CSS inheritance doesn't help. To workaround the problem, you have two options: @@ -47,12 +53,6 @@ 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 - -All system props, are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - ## API ```jsx From 874d7819de3ecb04fec48a3643e7e44c0a76dc49 Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Fri, 23 Oct 2020 12:20:54 +0200 Subject: [PATCH 64/64] comma removed --- 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 196b1ff76fd958..065574e08f03dd 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -18,7 +18,7 @@ It's created using the `experimentalStyled()` function of `@material-ui/core/sty ## The sx prop -All system properties, are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: +All system properties are available via the `sx` prop. This property allows you to specify any CSS rules you may need, in addition to the ones already available as part of the system. Here is an example of how you can use it: {{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }}