diff --git a/.circleci/config.yml b/.circleci/config.yml index e9cdfbe8937273..197a61b10fdeb1 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -72,7 +72,7 @@ commands: - run: name: Resolve react version command: | - node scripts/use-react-version + node scripts/useReactVersion.mjs # log a patch for maintainers who want to check out this change git --no-pager diff HEAD - restore_cache: @@ -286,7 +286,7 @@ jobs: - run: name: Any defect declaration files? - command: node scripts/testBuiltTypes.js + command: node scripts/testBuiltTypes.mjs - save_cache: name: Save generated declaration files key: typescript-declaration-files-{{ .Branch }}-{{ .Revision }} @@ -305,7 +305,7 @@ jobs: environment: TYPESCRIPT_DIST_TAG: next command: | - node scripts/use-typescript-dist-tag + node scripts/useTypescriptDistTag.mjs # log a patch for maintainers who want to check out this change git --no-pager diff HEAD - install_js @@ -342,7 +342,7 @@ jobs: # Fixing these takes some effort that isn't viable to merge in a single PR. # We'll simply monitor them for now. set +e - node scripts/testBuiltTypes.js + node scripts/testBuiltTypes.mjs exit 0 test_browser: <<: *defaults diff --git a/.eslintrc.js b/.eslintrc.js index 688076416ba460..69c22f8dab78b4 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -177,6 +177,7 @@ module.exports = { files: [ // matching the pattern of the test runner '*.test.js', + '*.test.mjs', '*.test.ts', '*.test.tsx', ], @@ -407,5 +408,11 @@ module.exports = { 'import/extensions': ['error', 'ignorePackages'], }, }, + { + files: ['scripts/**/*.mjs'], + rules: { + 'import/extensions': ['error', 'ignorePackages'], + }, + }, ], }; diff --git a/.github/codeql/codeql-config.yml b/.github/codeql/codeql-config.yml index c73a0591de2420..6a61f3dfc2adf5 100644 --- a/.github/codeql/codeql-config.yml +++ b/.github/codeql/codeql-config.yml @@ -1,4 +1,4 @@ name: CodeQL configuration paths-ignore: - - 'packages/mui-icons-material/lib/esm/**' + - 'packages/mui-icons-material/lib/**' diff --git a/.github/workflows/check-if-pr-has-label.yml b/.github/workflows/check-if-pr-has-label.yml index ac789010ee8754..8d8672f4a24f2c 100644 --- a/.github/workflows/check-if-pr-has-label.yml +++ b/.github/workflows/check-if-pr-has-label.yml @@ -13,7 +13,7 @@ jobs: permissions: contents: read steps: - - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # tag=v2.1 + - uses: mnajdova/github-action-required-labels@ca0df9249827e43aa4b4a0d25d9fe3e9b19b0705 # v2.1.0 with: mode: minimum count: 1 diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml deleted file mode 100644 index 3c1224143e0764..00000000000000 --- a/.github/workflows/ci-check.yml +++ /dev/null @@ -1,22 +0,0 @@ -# This workflow is a workaround to make the github check "Successful" -# for the ci.yml, otherwise the changes in `docs/**` or `examples/**` won't be considered completed for github checks. -# -# Ref: https://docs.github.com/en/repositories/configuring-branches-and-merges-in-your-repository/defining-the-mergeability-of-pull-requests/troubleshooting-required-status-checks#handling-skipped-but-required-checks -name: CI - -on: - push: - branches-ignore: - - 'renovate/**' - pull_request: - paths: - - 'docs/**' - - 'examples/**' - -permissions: {} - -jobs: - build: - runs-on: ubuntu-latest - steps: - - run: 'echo "No build required"' diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index b8ea6674c3b562..bb56112c3fcef5 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -7,9 +7,6 @@ on: # We don't need to run CI twice (push+pull_request) - 'renovate/**' pull_request: - paths-ignore: - - 'docs/**' - - 'examples/**' permissions: {} @@ -24,12 +21,12 @@ jobs: os: [macos-latest, windows-latest, ubuntu-latest] steps: - run: echo "${{ github.actor }}" - - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3 + - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0 with: # fetch all tags which are required for `yarn release:changelog` fetch-depth: 0 - name: Use Node.js 14.x - uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # tag=v3 + uses: actions/setup-node@8c91899e586c5b171469028077307d293428b516 # v3.5.1 with: node-version: 14 cache: 'yarn' # https://github.com/actions/setup-node/blob/main/docs/advanced-usage.md#caching-packages-dependencies diff --git a/.github/workflows/codeql.yml b/.github/workflows/codeql.yml index eb5304c638284c..e477d02eda1aa2 100644 --- a/.github/workflows/codeql.yml +++ b/.github/workflows/codeql.yml @@ -16,10 +16,10 @@ jobs: security-events: write steps: - name: Checkout repository - uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # tag=v3 + uses: actions/checkout@93ea575cb5d8a053eaa0ac8fa3b40d7e05a33cc8 # v3.1.0 # Initializes the CodeQL tools for scanning. - name: Initialize CodeQL - uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2 + uses: github/codeql-action/init@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13 with: languages: typescript config-file: ./.github/codeql/codeql-config.yml @@ -30,4 +30,4 @@ jobs: # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs # queries: security-extended,security-and-quality - name: Perform CodeQL Analysis - uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2 + uses: github/codeql-action/analyze@c3b6fce4ee2ca25bc1066aa3bf73962fda0e8898 # v2.1.13 diff --git a/.github/workflows/maintenance.yml b/.github/workflows/maintenance.yml index e731dac6c97830..97ccb36abb0008 100644 --- a/.github/workflows/maintenance.yml +++ b/.github/workflows/maintenance.yml @@ -1,7 +1,5 @@ name: Maintenance -permissions: {} - on: # So that PRs touching the same files as the push are updated push: @@ -17,6 +15,8 @@ on: - next types: [synchronize] +permissions: {} + jobs: main: # l10nbot creates a lot of commits at once which starves CI. @@ -29,7 +29,7 @@ jobs: steps: - run: echo "${{ github.actor }}" - name: check if prs are dirty - uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # tag=v2.1.0 + uses: eps1lon/actions-label-merge-conflict@fd1f295ee7443d13745804bc49fe158e240f6c6e # v2.1.0 with: dirtyLabel: 'PR: out-of-date' removeOnDirtyLabel: 'PR: ready to ship' diff --git a/.github/workflows/mark-duplicate.yml b/.github/workflows/mark-duplicate.yml index f5baca4679b8ed..ff7ae801060380 100644 --- a/.github/workflows/mark-duplicate.yml +++ b/.github/workflows/mark-duplicate.yml @@ -14,7 +14,7 @@ jobs: issues: write steps: - name: mark-duplicate - uses: actions-cool/issues-helper@02811b26b65e9c0da5f1d8a0095b53478d6591a2 # tag=v3 + uses: actions-cool/issues-helper@275328970dbc3bfc3bc43f5fe741bf3638300c0a # v3.3.3 with: actions: 'mark-duplicate' token: ${{ secrets.GITHUB_TOKEN }} diff --git a/.github/workflows/no-response.yml b/.github/workflows/no-response.yml index c964927e7883aa..5e00ade5d261d2 100644 --- a/.github/workflows/no-response.yml +++ b/.github/workflows/no-response.yml @@ -18,7 +18,7 @@ jobs: contents: read issues: write steps: - - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # tag=v0.5.0 + - uses: lee-dohm/no-response@9bb0a4b5e6a45046f00353d5de7d90fb8bd773bb # v0.5.0 with: token: ${{ secrets.GITHUB_TOKEN }} # Number of days of inactivity before an Issue is closed for lack of response diff --git a/.github/workflows/scorecards.yml b/.github/workflows/scorecards.yml index 878d62246feb18..15a52171bae294 100644 --- a/.github/workflows/scorecards.yml +++ b/.github/workflows/scorecards.yml @@ -27,7 +27,7 @@ jobs: persist-credentials: false - name: Run analysis - uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # renovate: tag=v2.0.6 + uses: ossf/scorecard-action@99c53751e09b9529366343771cc321ec74e9bd3d # v2.0.6 with: results_file: results.sarif results_format: sarif @@ -35,7 +35,7 @@ jobs: # - you want to enable the Branch-Protection check on a *public* repository, or # - you are installing Scorecards on a *private* repository # To create the PAT, follow the steps in https://github.com/ossf/scorecard-action#authentication-with-pat. - # repo_token: ${{ secrets.SCORECARD_READ_TOKEN }} + repo_token: ${{ secrets.SCORECARD_READ_TOKEN }} # Publish the results for public repositories to enable scorecard badges. For more details, see # https://github.com/ossf/scorecard-action#publishing-results. @@ -43,6 +43,6 @@ jobs: # Upload the results to GitHub's code scanning dashboard. - name: Upload to code-scanning - uses: github/codeql-action/upload-sarif@5f532563584d71fdef14ee64d17bafb34f751ce5 # renovate: tag=v1.0.26 + uses: github/codeql-action/upload-sarif@9e288b03632e540432812c08ffaef313da7fb1d9 # v1.1.31 with: sarif_file: results.sarif diff --git a/.github/workflows/support-stackoverflow.yml b/.github/workflows/support-stackoverflow.yml index 95625ac887bbd7..1182dbe3d48179 100644 --- a/.github/workflows/support-stackoverflow.yml +++ b/.github/workflows/support-stackoverflow.yml @@ -14,7 +14,7 @@ jobs: contents: read issues: write steps: - - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # tag=v2 + - uses: dessant/support-requests@876a4de3922dd57434a451e58ad679f986c5da97 # v2.1.2 with: github-token: ${{ secrets.GITHUB_TOKEN }} # Label used to mark issues as support requests diff --git a/.mocharc.js b/.mocharc.js index 1dc7bc11439562..83a5c747ad403f 100644 --- a/.mocharc.js +++ b/.mocharc.js @@ -1,5 +1,5 @@ module.exports = { - extension: ['js', 'ts', 'tsx'], + extension: ['js', 'mjs', 'ts', 'tsx'], ignore: [ '**/build/**', '**/node_modules/**', diff --git a/README.md b/README.md index 6176a9bf437447..3101f594233756 100644 --- a/README.md +++ b/README.md @@ -119,7 +119,7 @@ Visit our [`styled-engine` guide](https://mui.com/material-ui/guides/styled-engi ### Diamond 💎 -

+

octopus doit zesty.io @@ -131,7 +131,7 @@ Diamond Sponsors are those who have pledged \$1,500/month or more to MUI. via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari) -

+

tidelift.com bit.dev text-em-all.com @@ -141,6 +141,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww goread.io Icons8 ipinfo.ai + RIDI

Gold Sponsors are those who have pledged \$500/month or more to MUI. diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index cfd473cb8174a0..e3b3306f240d42 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -109,3 +109,11 @@ const primary = red[500]; // #f44336 const accent = purple['A200']; // #e040fb const accent = purple.A200; // #e040fb (alternative method) ``` + +### Accessibility + +[WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html) does recommend +that you have a minimum of a 4.5:1 contrast ratio for the visual presentation of text and images of text. +Material UI currently only enforces a 3:1 contrast ratio. If you would like to meet WCAG 2.1 AA compliance, +you can increase your minimum contrast ratio as described in the +[Theme customization](/material-ui/customization/palette/#accessibility) section. diff --git a/docs/data/material/customization/palette/palette.md b/docs/data/material/customization/palette/palette.md index 6042c7f8e2dcc7..b2f62b4e9af3fd 100644 --- a/docs/data/material/customization/palette/palette.md +++ b/docs/data/material/customization/palette/palette.md @@ -130,9 +130,24 @@ type PaletteTonalOffset = A higher value for "tonalOffset" will make calculated values for "light" lighter, and "dark" darker. A higher value for "contrastThreshold" increases the point at which a background color is considered -light, and given a dark "contrastText". +light, and given a dark "contrastText". Note that "contrastThreshold" follows a non-linear curve, and +starts with a value of 3 (requiring a minimum contrast ratio of 3:1). -Note that "contrastThreshold" follows a non-linear curve. +### Accessibility + +To meet the minimum contrast of at least 4.5:1 as defined in [WCAG 2.1 Rule 1.4.3](https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html), create a custom theme with `contrastThreshold: 4.5`. + +```js +import { createTheme } from '@mui/material/styles'; + +const theme = createTheme({ + palette: { + // Used by `getContrastText()` to maximize the contrast between + // the background and the text. + contrastThreshold: 4.5, + }, +}); +``` ### Example diff --git a/docs/data/material/discover-more/backers/backers.md b/docs/data/material/discover-more/backers/backers.md index a9eb9e4d2d696f..e72cbc091c4d02 100644 --- a/docs/data/material/discover-more/backers/backers.md +++ b/docs/data/material/discover-more/backers/backers.md @@ -8,7 +8,7 @@ The core of MUI is a crowd-funded open-source project, licensed under the permis ### Diamond 💎 -

+

octopus doit zesty.io @@ -24,7 +24,7 @@ Even when there are no more slots available, we accept higher bids. via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://www.patreon.com/oliviertassinari) -

+

tidelift.com bit.dev text-em-all.com @@ -34,6 +34,7 @@ via [OpenCollective](https://opencollective.com/mui) or via [Patreon](https://ww goread.io Icons8 ipinfo.ai + RIDI

Gold Sponsors are those who have pledged \$500/month or more to MUI. diff --git a/docs/package.json b/docs/package.json index 7cb5a7f4f65201..00284854a4a159 100644 --- a/docs/package.json +++ b/docs/package.json @@ -114,7 +114,7 @@ "react-virtualized": "^9.22.3", "react-window": "^1.8.8", "recast": "^0.21.5", - "recharts": "2.1.12", + "recharts": "2.1.16", "rimraf": "^3.0.2", "styled-components": "^5.3.6", "stylis": "^4.1.2", diff --git a/docs/pages/blog.tsx b/docs/pages/blog.tsx index 9e9cbd7f799ea8..5b0b65ad8c0e12 100644 --- a/docs/pages/blog.tsx +++ b/docs/pages/blog.tsx @@ -19,7 +19,7 @@ import Head from 'docs/src/modules/components/Head'; import AppHeader from 'docs/src/layouts/AppHeader'; import AppFooter from 'docs/src/layouts/AppFooter'; import GradientText from 'docs/src/components/typography/GradientText'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import { authors as AUTHORS } from 'docs/src/modules/components/TopLayoutBlog'; import HeroEnd from 'docs/src/components/home/HeroEnd'; import Link from 'docs/src/modules/components/Link'; @@ -40,21 +40,24 @@ function PostPreview(props: BlogPost) { key={tag} label={tag} size="small" - sx={{ - fontWeight: 500, - color: (theme) => - theme.palette.mode === 'dark' ? theme.palette.grey[50] : theme.palette.grey[700], - background: (theme) => - theme.palette.mode === 'dark' - ? alpha(theme.palette.grey[700], 0.5) - : theme.palette.grey[100], - '&:hover': { - background: (theme) => - theme.palette.mode === 'dark' - ? alpha(theme.palette.grey[700], 0.5) - : theme.palette.grey[100], - }, - }} + sx={[ + (theme) => ({ + fontWeight: 500, + color: (theme.vars || theme).palette.grey[700], + background: (theme.vars || theme).palette.grey[100], + '&:hover': { + background: (theme.vars || theme).palette.grey[100], + }, + }), + (theme) => + theme.applyDarkStyles({ + color: (theme.vars || theme).palette.grey[50], + background: alpha(theme.palette.grey[700], 0.5), + '&:hover': { + background: alpha(theme.palette.grey[700], 0.5), + }, + }), + ]} /> ))} @@ -84,30 +87,31 @@ function PostPreview(props: BlogPost) { {props.authors && ( - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[800] - : theme.palette.grey[100], - backgroundColor: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[100], - color: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[100] - : theme.palette.grey[800], - fontSize: (theme) => theme.typography.pxToRem(13), - fontWeight: 500, - }, - }} + sx={[ + (theme) => ({ + mt: 2, + mb: 1, + alignSelf: 'flex-start', + '& .MuiAvatar-circular': { + width: 28, + height: 28, + border: 3, + borderColor: (theme.vars || theme).palette.grey[100], + backgroundColor: (theme.vars || theme).palette.grey[100], + color: (theme.vars || theme).palette.grey[800], + fontSize: theme.typography.pxToRem(13), + fontWeight: 500, + }, + }), + (theme) => + theme.applyDarkStyles({ + '& .MuiAvatar-circular': { + borderColor: (theme.vars || theme).palette.primaryDark[800], + backgroundColor: (theme.vars || theme).palette.primaryDark[700], + color: (theme.vars || theme).palette.primaryDark[100], + }, + }), + ]} > {(props.authors as Array).map((author) => ( ({ mt: { xs: 1, md: 0 }, mb: { xs: -1, md: 0 }, - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[300] - : theme.palette.primary[600], + color: (theme.vars || theme).palette.primary[600], '& .MuiButton-endIcon': { ml: 0, }, + ...theme.applyDarkStyles({ + color: (theme.vars || theme).palette.primary[300], + }), })} > Read more @@ -242,7 +246,7 @@ export default function Blog(props: InferGetStaticPropsType + ({ - p: 2, - display: 'flex', - flexDirection: 'column', - position: 'relative', - transition: 'all ease 120ms', - '&:hover, &:focus-within': { - borderColor: theme.palette.mode === 'dark' ? 'primary.600' : 'grey.300', - boxShadow: `0px 4px 20px ${ - theme.palette.mode === 'dark' - ? 'rgba(0, 0, 0, 0.5)' - : 'rgba(170, 180, 190, 0.3)' - }`, - }, - '&:focus-within': { - '& a': { - outline: 'none', + sx={[ + { + p: 2, + display: 'flex', + flexDirection: 'column', + position: 'relative', + transition: 'all ease 120ms', + '&:hover, &:focus-within': { + borderColor: 'grey.300', + boxShadow: '0px 4px 20px rgba(170, 180, 190, 0.3)', + }, + '&:focus-within': { + '& a': { + outline: 'none', + }, }, }, - })} + (theme) => + theme.applyDarkStyles({ + '&:hover, &:focus-within': { + borderColor: 'primary.600', + boxShadow: '0px 4px 20px rgba(0, 0, 0, 0.5)', + }, + }), + ]} > {post.image && ( ({ position: 'sticky', top: 100, alignSelf: 'start', @@ -350,15 +359,13 @@ export default function Blog(props: InferGetStaticPropsType - theme.palette.mode === 'dark' - ? alpha(theme.palette.primaryDark[700], 0.2) - : 'rgba(255, 255, 255, 0.2)', - borderColor: (theme) => - theme.palette.mode === 'dark' - ? theme.palette.primaryDark[700] - : theme.palette.grey[200], - }} + background: 'rgba(255, 255, 255, 0.2)', + borderColor: (theme.vars || theme).palette.grey[200], + ...theme.applyDarkStyles({ + background: alpha(theme.palette.primaryDark[700], 0.2), + borderColor: (theme.vars || theme).palette.primaryDark[700], + }), + })} > Filter by tag @@ -442,6 +449,6 @@ export default function Blog(props: InferGetStaticPropsType - + ); } diff --git a/docs/pages/core.tsx b/docs/pages/core.tsx index 82aa560b8c30d2..5948f0dbaef11a 100644 --- a/docs/pages/core.tsx +++ b/docs/pages/core.tsx @@ -20,7 +20,7 @@ export default function Core() { card="/static/social-previews/core-preview.jpg" /> - +
diff --git a/docs/pages/design-kits.tsx b/docs/pages/design-kits.tsx index bb7e696f1512fc..6931105d34d36b 100644 --- a/docs/pages/design-kits.tsx +++ b/docs/pages/design-kits.tsx @@ -22,7 +22,7 @@ export default function DesignKits() { card="/static/social-previews/designkits-preview.jpg" /> - +
diff --git a/docs/pages/x.tsx b/docs/pages/x.tsx index e2cec876b2e0c4..51f0a6f1334408 100644 --- a/docs/pages/x.tsx +++ b/docs/pages/x.tsx @@ -21,7 +21,7 @@ export default function X() { card="/static/social-previews/x-preview.jpg" /> - +
diff --git a/docs/src/components/home/GetStartedButtons.tsx b/docs/src/components/home/GetStartedButtons.tsx index 952b82e54c3ab9..b52f6c90e85487 100644 --- a/docs/src/components/home/GetStartedButtons.tsx +++ b/docs/src/components/home/GetStartedButtons.tsx @@ -8,12 +8,18 @@ import CheckRounded from '@mui/icons-material/CheckRounded'; import ROUTES from 'docs/src/route'; import Link from 'docs/src/modules/components/Link'; -export default function GetStartedButtons({ - installation = 'npm install @mui/material @emotion/react @emotion/styled', - to = ROUTES.documentation, - ...props -}: { installation?: string; to?: string } & BoxProps) { +interface GetStartedButtonsProps extends BoxProps { + installation?: string; + to?: string; +} + +export default function GetStartedButtons(props: GetStartedButtonsProps) { const [copied, setCopied] = React.useState(false); + const { + installation = 'npm install @mui/material @emotion/react @emotion/styled', + to = ROUTES.documentation, + ...other + } = props; const handleCopy = () => { setCopied(true); copy(installation).then(() => { @@ -22,12 +28,14 @@ export default function GetStartedButtons({ }; return ( *': { minWidth: 'clamp(0px, (492px - 100%) * 999 ,100%)' }, - ...props.sx, + flexWrap: { xs: 'wrap', md: 'nowrap' }, + '&& > *': { + minWidth: { xs: '100%', md: '0%' }, + }, + ...other.sx, }} > @@ -464,7 +487,28 @@ export default function AppNavDrawer(props) { metadata="MUI X" versionSelector={renderVersionSelector([ // DATE_PICKERS_VERSION is set from the X repo - { text: `v${process.env.DATE_PICKERS_VERSION}`, current: true }, + { + ...(process.env.DATE_PICKERS_VERSION.startsWith('6') + ? { + text: `v${process.env.DATE_PICKERS_VERSION}`, + current: true, + } + : { + text: `v6-alpha`, + href: `https://next.mui.com${languagePrefix}/components/data-grid/`, + }), + }, + { + ...(process.env.DATE_PICKERS_VERSION.startsWith('5') + ? { + text: `v${process.env.DATE_PICKERS_VERSION}`, + current: true, + } + : { + text: `v5`, + href: `https://mui.com${languagePrefix}/components/data-grid/`, + }), + }, ])} /> )} diff --git a/docs/src/modules/components/Demo.js b/docs/src/modules/components/Demo.js index 2be1e42b13ad85..49d83c1f642422 100644 --- a/docs/src/modules/components/Demo.js +++ b/docs/src/modules/components/Demo.js @@ -94,13 +94,7 @@ function useDemoData(codeVariant, demo, githubLocation) { }, [canonicalAs, codeVariant, demo, githubLocation, userLanguage]); } -function useDemoElement({ - demoOptions, - demoData, - editorCode, - initialEditorCode, - setDebouncedError, -}) { +function useDemoElement({ demoOptions, demoData, editorCode, setDebouncedError }) { const debouncedSetError = React.useMemo( () => debounce(setDebouncedError, 300), [setDebouncedError], @@ -114,17 +108,9 @@ function useDemoElement({ // Memoize to avoid rendering the demo more than it needs to be. // For example, avoid a render when the demo is hovered. - return React.useMemo(() => { - if ( - // No need for a live environment if the code matches with the component rendered server-side. - editorCode.value === initialEditorCode || - // A limitation from https://github.com/nihgwu/react-runner, we can inject the `window` of the iframe - demoOptions.disableLiveEdit - ) { - return ; - } - - return ( + const BundledComponent = React.useMemo(() => , [demoData]); + const LiveComponent = React.useMemo( + () => ( - ); - }, [demoData, demoOptions.disableLiveEdit, editorCode, initialEditorCode, debouncedSetError]); + ), + [demoData, debouncedSetError, editorCode.isPreview, editorCode.value], + ); + + const renderBundledComponent = + // No need for a live environment if the code matches with the component rendered server-side. + editorCode.value === editorCode.initialEditorCode || + // A limitation from https://github.com/nihgwu/react-runner, we can inject the `window` of the iframe + demoOptions.disableLiveEdit; + + return renderBundledComponent ? BundledComponent : LiveComponent; } const Root = styled('div')(({ theme }) => ({ @@ -271,12 +266,17 @@ const DemoRootJoy = joyStyled('div', { }), })); -const DemoCodeViewer = styled(HighlightedCode)({ +const DemoCodeViewer = styled(HighlightedCode)(({ theme }) => ({ '& pre': { - margin: '0 auto', + margin: 0, maxHeight: 'min(68vh, 1000px)', + maxWidth: 'initial', + borderRadius: 0, + [theme.breakpoints.up('sm')]: { + borderRadius: theme.shape.borderRadius, + }, }, -}); +})); const AnchorLink = styled('div')({ marginTop: -64, // height of toolbar @@ -374,12 +374,14 @@ export default function Demo(props) { const [editorCode, setEditorCode] = React.useState({ value: initialEditorCode, isPreview, + initialEditorCode, }); const resetDemo = () => { setEditorCode({ value: initialEditorCode, isPreview, + initialEditorCode, }); setDemoKey(); }; @@ -388,6 +390,7 @@ export default function Demo(props) { setEditorCode({ value: initialEditorCode, isPreview, + initialEditorCode, }); }, [initialEditorCode, isPreview]); @@ -397,7 +400,6 @@ export default function Demo(props) { demoOptions, demoData, editorCode, - initialEditorCode, setDebouncedError, }); diff --git a/docs/src/modules/components/DemoEditor.tsx b/docs/src/modules/components/DemoEditor.tsx index 49f51845f16660..54058116f3aa63 100644 --- a/docs/src/modules/components/DemoEditor.tsx +++ b/docs/src/modules/components/DemoEditor.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import SimpleCodeEditor from 'react-simple-code-editor'; import Box from '@mui/material/Box'; import NoSsr from '@mui/base/NoSsr'; -import { styled } from '@mui/material/styles'; +import { styled, useTheme } from '@mui/material/styles'; import prism from '@mui/markdown/prism'; import MarkdownElement from 'docs/src/modules/components/MarkdownElement'; import CodeCopyButton from 'docs/src/modules/components/CodeCopyButton'; @@ -14,8 +14,7 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({ '& .scrollContainer': { maxHeight: 'min(68vh, 1000px)', overflow: 'auto', - backgroundColor: `${blueDark[800]} !important`, - borderRadius: theme.shape.borderRadius, + backgroundColor: blueDark[800], colorScheme: 'dark', '&:hover': { boxShadow: `0 0 0 3px ${ @@ -27,6 +26,15 @@ const StyledMarkdownElement = styled(MarkdownElement)(({ theme }) => ({ theme.palette.mode === 'dark' ? theme.palette.primaryDark.main : theme.palette.primary.main }`, }, + [theme.breakpoints.up('sm')]: { + borderRadius: theme.shape.borderRadius, + }, + }, + '& pre': { + // The scroll container needs to be the parent of the editor, overriding: + // https://github.com/mui/material-ui/blob/269c1d0c7572fcb6ae3b270a2622d16c7e40c848/docs/src/modules/components/MarkdownElement.js#L27-L26 + maxWidth: 'initial', + maxHeight: 'initial', }, })) as any; @@ -40,15 +48,11 @@ const StyledSimpleCodeEditor = styled(SimpleCodeEditor)(({ theme }) => ({ direction: 'ltr /*! @noflip */' as any, float: 'left', minWidth: '100%', - '& pre': { - // The scroll container needs to be the parent of the editor - maxHeight: 'initial', - maxWidth: 'initial', - }, '& textarea': { outline: 'none', }, '& > textarea, & > pre': { + // Override inline-style whiteSpace: 'pre !important', }, })); @@ -65,6 +69,7 @@ interface DemoEditorProps { export default function DemoEditor(props: DemoEditorProps) { const { language, value, onChange, copyButtonProps, children, id } = props; const t = useTranslate(); + const contextTheme = useTheme(); const wrapperRef = React.useRef(null); const enterRef = React.useRef(null); const handlers = useCodeCopy(); @@ -99,7 +104,7 @@ export default function DemoEditor(props: DemoEditorProps) {
`${prism(code, language)}` } diff --git a/docs/src/modules/components/MarkdownElement.js b/docs/src/modules/components/MarkdownElement.js index 92a32d45192824..b1802eb0c492cc 100644 --- a/docs/src/modules/components/MarkdownElement.js +++ b/docs/src/modules/components/MarkdownElement.js @@ -2,474 +2,524 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import clsx from 'clsx'; import { alpha, darken, styled } from '@mui/material/styles'; -import { blue, blueDark, brandingDarkTheme } from 'docs/src/modules/brandingTheme'; +import { + brandingDarkTheme as darkTheme, + brandingLightTheme as lightTheme, +} from 'docs/src/modules/brandingTheme'; -const Root = styled('div')(({ theme }) => ({ - ...theme.typography.body1, - color: theme.palette.text.primary, - '& strong': { - color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.text.primary, - }, - wordBreak: 'break-word', - '& pre': { - margin: theme.spacing(2, 'auto'), - padding: theme.spacing(2), - backgroundColor: blueDark[800], - color: '#f8f8f2', // fallback color until Prism's theme is loaded - colorScheme: 'dark', - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderColor: blueDark[700], - overflow: 'auto', - WebkitOverflowScrolling: 'touch', - fontSize: theme.typography.pxToRem(13), - maxWidth: 'calc(100vw - 32px)', - maxHeight: '400px', - [theme.breakpoints.up('md')]: { - maxWidth: 'calc(100vw - 32px - 16px)', +const Root = styled('div')( + ({ theme }) => ({ + ...lightTheme.typography.body1, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + '& strong': { + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, }, - }, - // Set the font for "inline" and "block" code elements - '& code': { - ...theme.typography.body2, - fontFamily: brandingDarkTheme.typography.fontFamilyCode, - fontWeight: 400, - WebkitFontSmoothing: 'subpixel-antialiased', - // Reset for Safari - // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102 - fontSize: '1em', - }, - // inline code block - '& :not(pre) > code': { - display: 'inline-block', - padding: '0 5px', - color: theme.palette.text.primary, - backgroundColor: alpha(theme.palette.primary.light, 0.15), - borderRadius: 5, - fontSize: theme.typography.pxToRem(13), - direction: 'ltr /*! @noflip */', - }, - '& h1': { - ...theme.typography.h3, - fontSize: theme.typography.pxToRem(36), - fontFamily: `"PlusJakartaSans-ExtraBold", ${theme.typography.fontFamilySystem}`, - margin: '10px 0', - color: theme.palette.mode === 'dark' ? theme.palette.grey[50] : blueDark[900], - fontWeight: 800, - }, - '& .description': { - ...theme.typography.subtitle1, - fontWeight: 400, - margin: '0 0 40px', - }, - '& h2': { - ...theme.typography.h5, - fontFamily: theme.typography.fontFamilySystem, - fontWeight: 700, - color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.grey[900], - margin: '40px 0 4px', - }, - '& h3': { - ...theme.typography.h6, - fontFamily: theme.typography.fontFamilySystem, - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.mode === 'dark' ? theme.palette.grey[200] : theme.palette.grey[900], - margin: '24px 0 8px', - }, - '& h4': { - ...theme.typography.subtitle1, - fontFamily: theme.typography.fontFamilySystem, - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900], - margin: '24px 0 8px', - }, - '& h5': { - ...theme.typography.subtitle2, - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900], - margin: '20px 0 8px', - }, - '& p, & ul, & ol': { - marginTop: 0, - marginBottom: 16, - color: theme.palette.mode === 'dark' ? theme.palette.grey[400] : theme.palette.grey[900], - }, - '& ul': { - paddingLeft: 30, - }, - '& h1, & h2, & h3, & h4': { - '& code': { - fontSize: 'inherit', - lineHeight: 'inherit', - // Remove scroll on small screens. - wordBreak: 'break-all', + wordBreak: 'break-word', + '& pre': { + margin: theme.spacing(2, 'auto'), + padding: theme.spacing(2), + backgroundColor: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`, + color: '#f8f8f2', + colorScheme: 'dark', + borderRadius: `var(--muidocs-shape-borderRadius, ${ + theme.shape?.borderRadius ?? lightTheme.shape.borderRadius + }px)`, + border: '1px solid', + borderColor: `var(--muidocs-palette-primaryDark-700, ${lightTheme.palette.primaryDark[700]})`, + overflow: 'auto', + WebkitOverflowScrolling: 'touch', + fontSize: lightTheme.typography.pxToRem(13), + maxWidth: 'calc(100vw - 32px)', + maxHeight: '400px', + [lightTheme.breakpoints.up('md')]: { + maxWidth: 'calc(100vw - 32px - 16px)', + }, }, - '& .anchor-link-style': { - // To prevent the link to get the focus. - display: 'none', + '& code': { + ...lightTheme.typography.body2, + fontFamily: lightTheme.typography.fontFamilyCode, + fontWeight: 400, + WebkitFontSmoothing: 'subpixel-antialiased', }, - '& a:not(.anchor-link-style):hover': { - color: 'currentColor', - borderBottom: '1px solid currentColor', - textDecoration: 'none', + '& pre > code': { + // Reset for Safari + // https://github.com/necolas/normalize.css/blob/master/normalize.css#L102 + fontSize: 'inherit', }, - '&:hover .anchor-link-style': { + // inline code block + '& :not(pre) > code': { display: 'inline-block', - textAlign: 'center', - lineHeight: '21.5px', - marginLeft: 10, - height: '26px', - width: '26px', - background: theme.palette.mode === 'dark' ? alpha(blue[800], 0.3) : theme.palette.primary[50], - border: '1px solid', - borderColor: theme.palette.mode === 'dark' ? blueDark[500] : theme.palette.grey[200], - borderRadius: 8, - color: theme.palette.text.secondary, - '&:hover': { - color: theme.palette.text.primary, - }, - '& svg': { - width: '0.875rem', - height: '0.875rem', - fill: 'currentColor', - }, + padding: '0 5px', + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + backgroundColor: alpha(lightTheme.palette.primary.light, 0.15), + borderRadius: 5, + fontSize: lightTheme.typography.pxToRem(13), + direction: 'ltr /*! @noflip */', }, - }, - '& h1 code': { - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.primary[900], - }, - '& h2 code': { - fontSize: theme.typography.pxToRem(24), - fontWeight: theme.typography.fontWeightSemiBold, - color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.primary[900], - }, - '& h3 code': { - fontSize: theme.typography.pxToRem(18), - color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.primary[900], - }, - '& table': { - // Trade display table for scroll overflow - display: 'block', - wordBreak: 'normal', - overflowX: 'auto', - WebkitOverflowScrolling: 'touch', - borderCollapse: 'collapse', - marginBottom: '20px', - borderSpacing: 0, - '& .prop-name, & .prop-type, & .prop-default': { + '& h1': { + ...lightTheme.typography.h3, + fontSize: lightTheme.typography.pxToRem(36), + fontFamily: `"PlusJakartaSans-ExtraBold", ${lightTheme.typography.fontFamilySystem}`, + margin: '10px 0', + color: `var(--muidocs-palette-primaryDark-900, ${lightTheme.palette.primaryDark[900]})`, + fontWeight: 800, + }, + '& .description': { + ...lightTheme.typography.subtitle1, fontWeight: 400, - fontFamily: theme.typography.fontFamilyCode, - WebkitFontSmoothing: 'subpixel-antialiased', - fontSize: theme.typography.pxToRem(13), + margin: '0 0 40px', }, - '& .required': { - color: theme.palette.mode === 'light' ? '#006500' : '#a5ffa5', + '& h2': { + ...lightTheme.typography.h5, + fontFamily: lightTheme.typography.fontFamilySystem, + fontWeight: 700, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + margin: '40px 0 4px', }, - '& .optional': { - color: theme.palette.mode === 'light' ? '#45529f' : '#a5b3ff', + '& h3': { + ...lightTheme.typography.h6, + fontFamily: lightTheme.typography.fontFamilySystem, + fontWeight: lightTheme.typography.fontWeightSemiBold, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + margin: '24px 0 8px', }, - '& .prop-type': { - color: theme.palette.mode === 'light' ? '#932981' : '#ffb6ec', + '& h4': { + ...lightTheme.typography.subtitle1, + fontFamily: lightTheme.typography.fontFamilySystem, + fontWeight: lightTheme.typography.fontWeightSemiBold, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + margin: '24px 0 8px', }, - '& .prop-default': { - borderBottom: `1px dotted ${theme.palette.divider}`, + '& h5': { + ...lightTheme.typography.subtitle2, + fontWeight: lightTheme.typography.fontWeightSemiBold, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + margin: '20px 0 8px', }, - }, - '& td': { - ...theme.typography.body2, - borderBottom: `1px solid ${theme.palette.divider}`, - paddingRight: 20, - paddingTop: 12, - paddingBottom: 12, - color: theme.palette.text.secondary, - }, - '& td code': { - lineHeight: 1.6, - }, - '& th': { - fontSize: theme.typography.pxToRem(14), - lineHeight: theme.typography.pxToRem(24), - fontWeight: 500, - color: theme.palette.text.primary, - whiteSpace: 'pre', - borderBottom: `1px solid ${theme.palette.divider}`, - paddingRight: 20, - paddingTop: 12, - paddingBottom: 12, - }, - '& blockquote': { - borderRadius: theme.shape.borderRadius, - border: '1px solid', - borderLeft: '8px solid', - borderColor: - theme.palette.mode === 'dark' - ? // Support Material Design theme - theme.palette.warning[500] ?? theme.palette.warning.dark - : theme.palette.warning[300] ?? theme.palette.warning.light, - backgroundColor: - theme.palette.mode === 'dark' - ? // Support Material Design theme - alpha(theme.palette.warning[900] ?? theme.palette.warning.dark, 0.2) - : theme.palette.warning[50] ?? theme.palette.warning.light, - padding: '10px 20px', - margin: '20px 0', - '& p': { - marginTop: 10, - color: theme.palette.mode === 'dark' ? theme.palette.grey[50] : blueDark[800], + '& p, & ul, & ol': { + marginTop: 0, + marginBottom: 16, + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, }, - }, - '& .MuiCallout-root': { - padding: '16px', - margin: '16px 0', - border: '1px solid', - borderRadius: theme.shape.borderRadius, - '& > p': { - color: 'inherit', - '&:last-child': { - margin: 0, - }, - }, - '& ul, li': { - color: 'inherit', - }, - '&.MuiCallout-error': { - color: - theme.palette.mode === 'dark' - ? theme.palette.error[50] ?? '#fff' - : theme.palette.error[900] ?? theme.palette.text.primary, - backgroundColor: - theme.palette.mode === 'dark' - ? // Support Material Design theme - alpha(theme.palette.error[900] ?? theme.palette.error.dark, 0.35) - : theme.palette.error[50] ?? theme.palette.error.light, - borderColor: - theme.palette.mode === 'dark' // Support Material Design theme - ? theme.palette.error[800] ?? theme.palette.error.dark - : theme.palette.error[200] ?? theme.palette.error.light, - '& strong': { - color: - theme.palette.mode === 'dark' - ? theme.palette.error[100] ?? '#fff' - : theme.palette.error[800] ?? theme.palette.text.primary, - }, - '& a': { - color: - theme.palette.mode === 'dark' - ? theme.palette.error[100] ?? '#fff' - : theme.palette.error[800] ?? theme.palette.text.primary, - textDecorationColor: alpha(theme.palette.error.main, 0.4), + '& ul': { + paddingLeft: 30, + }, + '& h1, & h2, & h3, & h4': { + '& code': { + fontSize: 'inherit', + lineHeight: 'inherit', + // Remove scroll on small screens. + wordBreak: 'break-all', + }, + '& .anchor-link-style': { + // To prevent the link to get the focus. + display: 'none', + }, + '& a:not(.anchor-link-style):hover': { + color: 'currentColor', + borderBottom: '1px solid currentColor', + textDecoration: 'none', + }, + '&:hover .anchor-link-style': { + display: 'inline-block', + textAlign: 'center', + lineHeight: '21.5px', + marginLeft: 10, + height: '26px', + width: '26px', + background: `var(--muidocs-palette-primary-50, ${lightTheme.palette.primary[50]})`, + border: '1px solid', + borderColor: `var(--muidocs-palette-grey-200, ${lightTheme.palette.grey[200]})`, + borderRadius: 8, + color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, '&:hover': { - textDecorationColor: 'inherit', + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + }, + '& svg': { + width: '0.875rem', + height: '0.875rem', + fill: 'currentColor', }, }, }, - '&.MuiCallout-info': { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[50] ?? '#fff' - : theme.palette.primary[900] ?? theme.palette.text.primary, - backgroundColor: - theme.palette.mode === 'dark' - ? // Support Material Design theme - alpha(theme.palette.primary[900] ?? theme.palette.primary.dark, 0.2) - : alpha(theme.palette.primary[50] ?? theme.palette.primary.dark, 0.8), - borderColor: - theme.palette.mode === 'dark' // Support Material Design theme - ? theme.palette.primary[800] ?? theme.palette.primary.dark - : theme.palette.primary[100] ?? theme.palette.primary.light, - '& strong': { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary[100] ?? '#fff' - : theme.palette.primary[800] ?? theme.palette.text.primary, - }, - }, - '&.MuiCallout-success': { - color: - theme.palette.mode === 'dark' - ? theme.palette.success[50] ?? '#fff' - : theme.palette.success[900] ?? theme.palette.text.primary, - backgroundColor: - theme.palette.mode === 'dark' - ? // Support Material Design theme - alpha(theme.palette.success[900] ?? theme.palette.success.dark, 0.35) - : theme.palette.success[50] ?? theme.palette.success.light, - borderColor: - theme.palette.mode === 'dark' // Support Material Design theme - ? theme.palette.success[800] ?? theme.palette.success.dark - : theme.palette.success[200] ?? theme.palette.success.light, - '& strong': { - color: - theme.palette.mode === 'dark' - ? theme.palette.success[100] ?? '#fff' - : theme.palette.success[900] ?? theme.palette.text.primary, - }, - '& a': { - color: - theme.palette.mode === 'dark' - ? theme.palette.success[100] ?? '#fff' - : theme.palette.success[900] ?? theme.palette.text.primary, - textDecorationColor: alpha(theme.palette.success.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', - }, + '& h1 code, & h2 code, & h3 code': { + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + }, + '& h1 code': { + fontWeight: lightTheme.typography.fontWeightSemiBold, + }, + '& h2 code': { + fontSize: lightTheme.typography.pxToRem(24), + fontWeight: lightTheme.typography.fontWeightSemiBold, + }, + '& h3 code': { + fontSize: lightTheme.typography.pxToRem(18), + }, + '& table': { + // Trade display table for scroll overflow + display: 'block', + wordBreak: 'normal', + overflowX: 'auto', + WebkitOverflowScrolling: 'touch', + borderCollapse: 'collapse', + marginBottom: '20px', + borderSpacing: 0, + '& .prop-name, & .prop-type, & .prop-default': { + fontWeight: 400, + fontFamily: lightTheme.typography.fontFamilyCode, + WebkitFontSmoothing: 'subpixel-antialiased', + fontSize: lightTheme.typography.pxToRem(13), + }, + '& .required': { + color: '#006500', + }, + '& .optional': { + color: '#45529f', + }, + '& .prop-type': { + color: '#932981', + }, + '& .prop-default': { + borderBottom: `1px dotted var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, }, }, - '&.MuiCallout-warning': { - color: - theme.palette.mode === 'dark' - ? theme.palette.warning[50] ?? '#fff' - : theme.palette.grey[900] ?? theme.palette.text.primary, - backgroundColor: - theme.palette.mode === 'dark' - ? // Support Material Design theme - alpha(theme.palette.warning[900] ?? theme.palette.warning.dark, 0.35) - : alpha(theme.palette.warning[50] ?? theme.palette.warning.light, 0.6), - borderColor: - theme.palette.mode === 'dark' // Support Material Design theme - ? theme.palette.warning[800] ?? theme.palette.warning.dark - : theme.palette.warning[300] ?? theme.palette.warning.light, - '& strong': { - color: - theme.palette.mode === 'dark' - ? theme.palette.warning[100] ?? '#fff' - : theme.palette.warning[800] ?? theme.palette.text.primary, - }, - '& a': { - color: - theme.palette.mode === 'dark' - ? theme.palette.warning[100] ?? '#fff' - : theme.palette.warning[800] ?? theme.palette.text.primary, - textDecorationColor: alpha(theme.palette.warning.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', + '& td': { + ...theme.typography.body2, + borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, + paddingRight: 20, + paddingTop: 12, + paddingBottom: 12, + color: `var(--muidocs-palette-text-secondary, ${lightTheme.palette.text.secondary})`, + }, + '& td code': { + lineHeight: 1.6, + }, + '& th': { + fontSize: theme.typography.pxToRem(14), + lineHeight: theme.typography.pxToRem(24), + fontWeight: 500, + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + whiteSpace: 'pre', + borderBottom: `1px solid var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, + paddingRight: 20, + paddingTop: 12, + paddingBottom: 12, + }, + '& blockquote': { + borderRadius: `var(--muidocs-shape-borderRadius, ${ + theme.shape?.borderRadius ?? lightTheme.shape.borderRadius + }px)`, + border: '1px solid', + borderLeft: '8px solid', + borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`, + backgroundColor: `var(--muidocs-palette-warning-50, ${lightTheme.palette.warning[50]})`, + padding: '10px 20px', + margin: '20px 0', + '& p': { + marginTop: 10, + color: `var(--muidocs-palette-primaryDark-800, ${lightTheme.palette.primaryDark[800]})`, + }, + }, + '& .MuiCallout-root': { + padding: '16px', + margin: '16px 0', + border: '1px solid', + borderRadius: `var(--muidocs-shape-borderRadius, ${ + theme.shape?.borderRadius ?? lightTheme.shape.borderRadius + }px)`, + '& > p': { + color: 'inherit', + '&:last-child': { + margin: 0, + }, + }, + '& ul, li': { + color: 'inherit', + }, + '&.MuiCallout-error': { + color: `var(--muidocs-palette-error-900, ${lightTheme.palette.error[900]})`, + backgroundColor: `var(--muidocs-palette-error-50, ${lightTheme.palette.error[50]})`, + borderColor: `var(--muidocs-palette-error-200, ${lightTheme.palette.error[200]})`, + '& strong': { + color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`, + }, + '& a': { + color: `var(--muidocs-palette-error-800, ${lightTheme.palette.error[800]})`, + textDecorationColor: alpha(lightTheme.palette.error.main, 0.4), + '&:hover': { + textDecorationColor: 'inherit', + }, + }, + }, + '&.MuiCallout-info': { + color: `var(--muidocs-palette-primary-900, ${lightTheme.palette.primary[900]})`, + backgroundColor: alpha(lightTheme.palette.primary[50], 0.8), + borderColor: `var(--muidocs-palette-primary-100, ${lightTheme.palette.primary[100]})`, + '& strong': { + color: `var(--muidocs-palette-primary-800, ${lightTheme.palette.primary[800]})`, + }, + }, + '&.MuiCallout-success': { + color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, + backgroundColor: `var(--muidocs-palette-success-50, ${lightTheme.palette.success[50]})`, + borderColor: `var(--muidocs-palette-success-200, ${lightTheme.palette.success[200]})`, + '& strong': { + color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, + }, + '& a': { + color: `var(--muidocs-palette-success-900, ${lightTheme.palette.success[900]})`, + textDecorationColor: alpha(lightTheme.palette.success.main, 0.4), + '&:hover': { + textDecorationColor: 'inherit', + }, + }, + }, + '&.MuiCallout-warning': { + color: `var(--muidocs-palette-grey-900, ${lightTheme.palette.grey[900]})`, + backgroundColor: alpha(lightTheme.palette.warning[50], 0.6), + borderColor: `var(--muidocs-palette-warning-300, ${lightTheme.palette.warning[300]})`, + '& strong': { + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + }, + '& a': { + color: `var(--muidocs-palette-warning-800, ${lightTheme.palette.warning[800]})`, + textDecorationColor: alpha(lightTheme.palette.warning.main, 0.4), + '&:hover': { + textDecorationColor: 'inherit', + }, }, }, }, - }, - '& a, & a code': { - // Style taken from the Link component - color: theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[600], - textDecoration: 'underline', - textDecorationColor: alpha(theme.palette.primary.main, 0.4), - '&:hover': { - textDecorationColor: 'inherit', + '& a, & a code': { + // Style taken from the Link component + color: `var(--muidocs-palette-primary-600, ${lightTheme.palette.primary[600]})`, + textDecoration: 'underline', + textDecorationColor: alpha(lightTheme.palette.primary.main, 0.4), + '&:hover': { + textDecorationColor: 'inherit', + }, }, - }, - '& a code': { - color: - theme.palette.mode === 'dark' - ? theme.palette.primary.light - : darken(theme.palette.primary.main, 0.04), - }, - '& img, video': { - maxWidth: '100%', - }, - '& img': { - // Avoid layout jump - display: 'inline-block', - }, - '& hr': { - height: 1, - margin: theme.spacing(6, 0), - border: 0, - flexShrink: 0, - backgroundColor: theme.palette.divider, - }, - '& kbd.key': { - padding: '5px', - display: 'inline-block', - whiteSpace: 'nowrap', - margin: '0 1px', - font: '11px Consolas,Liberation Mono,Menlo,monospace', - lineHeight: '10px', - color: theme.palette.text.primary, - verticalAlign: 'middle', - backgroundColor: theme.palette.mode === 'dark' ? blueDark[900] : theme.palette.grey[50], - border: `1px solid ${theme.palette.mode === 'dark' ? blueDark[500] : theme.palette.grey[300]}`, - borderRadius: 5, - boxShadow: `inset 0 -1px 0 ${ - theme.palette.mode === 'dark' ? blueDark[700] : theme.palette.grey[300] - }`, - }, - '& details': { - marginBottom: theme.spacing(1.5), - padding: theme.spacing(0.5, 0, 0.5, 1), - '& pre': { - marginTop: theme.spacing(1), + '& a code': { + color: darken(lightTheme.palette.primary.main, 0.04), }, - }, - '& summary': { - cursor: 'pointer', - }, - '& .MuiCode-root': { - direction: 'ltr /*! @noflip */', - position: 'relative', - '&:hover': { - '& .MuiCode-copy': { - display: 'block', + '& img, video': { + maxWidth: '100%', + }, + '& img': { + // Avoid layout jump + display: 'inline-block', + }, + '& hr': { + height: 1, + margin: theme.spacing(6, 0), + border: 0, + flexShrink: 0, + backgroundColor: `var(--muidocs-palette-divider, ${lightTheme.palette.divider})`, + }, + '& kbd.key': { + padding: '5px', + display: 'inline-block', + whiteSpace: 'nowrap', + margin: '0 1px', + font: '11px Consolas,Liberation Mono,Menlo,monospace', + lineHeight: '10px', + color: `var(--muidocs-palette-text-primary, ${lightTheme.palette.text.primary})`, + verticalAlign: 'middle', + backgroundColor: `var(--muidocs-palette-grey-50, ${lightTheme.palette.grey[50]})`, + border: `1px solid var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`, + borderRadius: 5, + boxShadow: `inset 0 -1px 0 var(--muidocs-palette-grey-300, ${lightTheme.palette.grey[300]})`, + }, + '& details': { + marginBottom: theme.spacing(1.5), + padding: theme.spacing(0.5, 0, 0.5, 1), + '& pre': { + marginTop: theme.spacing(1), }, }, - }, - '& .MuiCode-copy': { - minWidth: 64, - display: 'none', - backgroundColor: alpha(blueDark[600], 0.5), - cursor: 'pointer', - position: 'absolute', - top: theme.spacing(1), - right: `${theme.spacing(1)} /*! @noflip */`, - fontFamily: 'inherit', - fontSize: theme.typography.pxToRem(13), - fontWeight: 500, - padding: theme.spacing(0.5, 1), - borderRadius: 4, - border: `1px solid`, - borderColor: blueDark[500], - color: blueDark[50], - '&:hover, &:focus': { - opacity: 1, - color: '#fff', - backgroundColor: alpha(blueDark[600], 0.7), - borderColor: blueDark[500], - '& .MuiCode-copyKeypress': { - opacity: 1, + '& summary': { + cursor: 'pointer', + }, + '& .MuiCode-root': { + direction: 'ltr /*! @noflip */', + position: 'relative', + // Font size reset to fix a bug with Safari 16.0 when letterSpacing is set + fontSize: 10, + '&:hover': { + '& .MuiCode-copy': { + display: 'block', + }, }, }, - '&[data-copied]': { - // style of the button when it is in copied state. - borderColor: blue[700], - color: '#fff', - backgroundColor: blueDark[600], + '& .MuiCode-copy': { + minWidth: 64, + display: 'none', + backgroundColor: alpha(lightTheme.palette.primaryDark[600], 0.5), + cursor: 'pointer', + position: 'absolute', + top: theme.spacing(1), + right: theme.spacing(1), + fontFamily: 'inherit', + fontSize: lightTheme.typography.pxToRem(13), + fontWeight: 500, + padding: theme.spacing(0.5, 1), + borderRadius: 4, + border: `1px solid`, + borderColor: lightTheme.palette.primaryDark[500], + color: lightTheme.palette.primaryDark[50], + '&:hover, &:focus': { + opacity: 1, + color: '#fff', + backgroundColor: alpha(lightTheme.palette.primaryDark[600], 0.7), + borderColor: lightTheme.palette.primaryDark[500], + '& .MuiCode-copyKeypress': { + opacity: 1, + }, + }, + '&[data-copied]': { + // style of the button when it is in copied state. + borderColor: lightTheme.palette.primary[700], + color: '#fff', + backgroundColor: lightTheme.palette.primaryDark[600], + }, + '&:focus-visible': { + outline: '2px solid', + outlineOffset: 2, + outlineColor: lightTheme.palette.primaryDark[500], + }, }, - '&:focus-visible': { - outline: '2px solid', - outlineOffset: 2, - outlineColor: blueDark[500], + '& .MuiCode-copyKeypress': { + pointerEvents: 'none', + userSelect: 'none', + opacity: 0, + position: 'absolute', + left: '50%', + top: '100%', + minWidth: '100%', + marginTop: theme.spacing(0.5), + whiteSpace: 'nowrap', + transform: 'translateX(-50%)', + '& > span': { + opacity: 0.72, + }, }, - }, - '& .MuiCode-copyKeypress': { - pointerEvents: 'none', - userSelect: 'none', - opacity: 0, - position: 'absolute', - left: '50%', - top: '100%', - minWidth: '100%', - marginTop: theme.spacing(0.5), - whiteSpace: 'nowrap', - transform: 'translateX(-50%)', - '& > span': { - opacity: 0.72, + '& li': { + '& pre': { + marginTop: theme.spacing(1), + }, }, - }, - '& li': { - '& pre': { - marginTop: theme.spacing(1), + }), + { + ':where(.mode-dark) &': { + '& :not(pre) > code': { + // inline code block + color: '#fff', + }, + '& strong': { + color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`, + }, + '& h1': { + color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, + }, + '& h2': { + color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`, + }, + '& h3': { + color: `var(--muidocs-palette-grey-200, ${darkTheme.palette.grey[200]})`, + }, + '& h4': { + color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`, + }, + '& h5': { + color: `var(--muidocs-palette-grey-300, ${darkTheme.palette.grey[300]})`, + }, + '& p, & ul, & ol': { + color: `var(--muidocs-palette-grey-400, ${darkTheme.palette.grey[400]})`, + }, + '& h1, & h2, & h3, & h4': { + '&:hover .anchor-link-style': { + background: alpha(darkTheme.palette.primaryDark[800], 0.3), + borderColor: `var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, + }, + }, + '& h1 code, & h2 code, & h3 code': { + color: `var(--muidocs-palette-grey-100, ${darkTheme.palette.grey[100]})`, + }, + '& table': { + '& .required': { + color: '#a5ffa5', + }, + '& .optional': { + color: '#a5b3ff', + }, + '& .prop-type': { + color: '#ffb6ec', + }, + }, + '& blockquote': { + borderColor: `var(--muidocs-palette-warning-500, ${darkTheme.palette.warning[500]})`, + backgroundColor: alpha(darkTheme.palette.warning[900], 0.2), + '& p': { + color: `var(--muidocs-palette-grey-50, ${darkTheme.palette.grey[50]})`, + }, + }, + '& .MuiCallout-root': { + '&.MuiCallout-error': { + color: `var(--muidocs-palette-error-50, ${darkTheme.palette.error[50]})`, + backgroundColor: alpha(darkTheme.palette.error[900], 0.35), + borderColor: `var(--muidocs-palette-error-800, ${darkTheme.palette.error[800]})`, + '& strong': { + color: `var(--muidocs-palette-error-100, ${darkTheme.palette.error[100]})`, + }, + '& a': { + color: `var(--muidocs-palette-error-100, ${darkTheme.palette.error[100]})`, + }, + }, + '&.MuiCallout-info': { + color: `var(--muidocs-palette-primary-50, ${darkTheme.palette.primary[50]})`, + backgroundColor: alpha(darkTheme.palette.primary[900], 0.2), + borderColor: `var(--muidocs-palette-primary-800, ${darkTheme.palette.primary[800]})`, + '& strong': { + color: `var(--muidocs-palette-primary-100, ${darkTheme.palette.primary[100]})`, + }, + }, + '&.MuiCallout-success': { + color: `var(--muidocs-palette-success-50, ${darkTheme.palette.success[50]})`, + backgroundColor: alpha(darkTheme.palette.success[900], 0.35), + borderColor: `var(--muidocs-palette-success-800, ${darkTheme.palette.success[800]})`, + '& strong': { + color: `var(--muidocs-palette-success-100, ${darkTheme.palette.success[100]})`, + }, + '& a': { + color: `var(--muidocs-palette-success-100, ${darkTheme.palette.success[100]})`, + }, + }, + '&.MuiCallout-warning': { + color: `var(--muidocs-palette-warning-50, ${darkTheme.palette.warning[50]})`, + backgroundColor: alpha(darkTheme.palette.warning[900], 0.35), + '& strong': { + color: `var(--muidocs-palette-warning-800, ${darkTheme.palette.warning[800]})`, + }, + '& a': { + color: `var(--muidocs-palette-warning-100, ${darkTheme.palette.warning[100]})`, + }, + }, + }, + '& a, & a code': { + color: `var(--muidocs-palette-primary-300, ${darkTheme.palette.primary[300]})`, + }, + '& a code': { + color: `var(--muidocs-palette-primary-light, ${darkTheme.palette.primary.light})`, + }, + '& kbd.key': { + color: '#fff', + backgroundColor: `var(--muidocs-palette-primaryDark-900, ${darkTheme.palette.primaryDark[900]})`, + border: `1px solid var(--muidocs-palette-primaryDark-500, ${darkTheme.palette.primaryDark[500]})`, + boxShadow: `inset 0 -1px 0 var(--muidocs-palette-primaryDark-700, ${darkTheme.palette.primaryDark[700]})`, + }, }, }, -})); +); const MarkdownElement = React.forwardRef(function MarkdownElement(props, ref) { const { className, renderedMarkdown, ...other } = props; diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index b22ac51628c605..f5c097bd38fb8b 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -8,7 +8,7 @@ import Divider from '@mui/material/Divider'; import Typography from '@mui/material/Typography'; import Avatar from '@mui/material/Avatar'; import Head from 'docs/src/modules/components/Head'; -import BrandingProvider from 'docs/src/BrandingProvider'; +import BrandingCssVarsProvider from 'docs/src/BrandingCssVarsProvider'; import AppHeader from 'docs/src/layouts/AppHeader'; import AppContainer from 'docs/src/modules/components/AppContainer'; import AppFooter from 'docs/src/layouts/AppFooter'; @@ -100,95 +100,6 @@ const classes = { // Replicate the value used by https://medium.com/, a trusted reference. const BLOG_MAX_WIDTH = 692; -const styles = ({ theme }) => ({ - flexGrow: 1, - background: - theme.palette.mode === 'dark' - ? `linear-gradient(180deg, ${theme.palette.primaryDark[900]} 0%, #001E3C 100%)` - : `linear-gradient(180deg, ${theme.palette.grey[50]} 0%, #FFFFFF 100%)`, - backgroundSize: '100% 300px', - backgroundRepeat: 'no-repeat', - [`& .${classes.back}`]: { - display: 'flex', - alignItems: 'center', - marginBottom: theme.spacing(2), - marginLeft: theme.spacing(-1), - }, - [`& .${classes.container}`]: { - paddingTop: 60 + 20, - marginBottom: theme.spacing(12), - maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(2 * 2)})`, - [theme.breakpoints.up('md')]: { - maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(3 * 2)})`, - }, - [theme.breakpoints.up('lg')]: { - maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(8 * 2)})`, - }, - '& h1': { - marginBottom: theme.spacing(3), - }, - '& .markdown-body': { - fontSize: theme.typography.pxToRem(16), - lineHeight: 1.7, - }, - '& img, & video': { - display: 'block', - margin: 'auto', - }, - '& strong': { - color: theme.palette.mode === 'dark' ? theme.palette.grey[100] : theme.palette.grey[900], - }, - '& summary': { - padding: 8, - fontSize: theme.typography.pxToRem(14), - fontWeight: theme.typography.fontWeightMedium, - color: theme.palette.mode === 'dark' ? theme.palette.grey[300] : theme.palette.grey[900], - }, - '& details': { - paddingLeft: 16, - paddingRight: 16, - background: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primary[900], 0.3) - : alpha(theme.palette.grey[50], 0.5), - border: '1px solid', - borderRadius: 10, - borderColor: - theme.palette.mode === 'dark' ? theme.palette.primaryDark[700] : theme.palette.grey[200], - transitionProperty: 'all', - transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)', - transitionDuration: '200ms', - '&:hover, &:focus-visible': { - background: - theme.palette.mode === 'dark' - ? alpha(theme.palette.primary[900], 0.4) - : theme.palette.grey[50], - borderColor: - theme.palette.mode === 'dark' ? theme.palette.primaryDark[500] : theme.palette.grey[300], - }, - }, - '& th': { - textAlign: 'left', - borderBottom: `3px solid rgba(62, 80, 96, 0.2) !important`, - }, - '& .blog-description': { - fontSize: theme.typography.pxToRem(13), - textAlign: 'left', - color: theme.palette.grey[600], - '& a': { - color: - theme.palette.mode === 'dark' ? theme.palette.primary[300] : theme.palette.primary[600], - textDecoration: 'underline', - }, - }, - }, - [`& .${classes.time}`]: { - color: theme.palette.text.secondary, - ...theme.typography.caption, - fontWeight: 500, - }, -}); - const AuthorsContainer = styled('div')(({ theme }) => ({ display: 'flex', flexWrap: 'wrap', @@ -204,7 +115,113 @@ const AuthorsContainer = styled('div')(({ theme }) => ({ }, })); -const Root = styled('div')(styles); +const Root = styled('div')( + ({ theme }) => ({ + flexGrow: 1, + background: `linear-gradient(180deg, ${ + (theme.vars || theme).palette.grey[50] + } 0%, #FFFFFF 100%)`, + backgroundSize: '100% 300px', + backgroundRepeat: 'no-repeat', + [`& .${classes.back}`]: { + display: 'flex', + alignItems: 'center', + marginBottom: theme.spacing(2), + marginLeft: theme.spacing(-1), + }, + [`& .${classes.container}`]: { + paddingTop: 60 + 20, + marginBottom: theme.spacing(12), + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(2 * 2)})`, + [theme.breakpoints.up('md')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(3 * 2)})`, + }, + [theme.breakpoints.up('lg')]: { + maxWidth: `calc(${BLOG_MAX_WIDTH}px + ${theme.spacing(8 * 2)})`, + }, + '& h1': { + marginBottom: theme.spacing(3), + }, + '& .markdown-body': { + fontSize: theme.typography.pxToRem(16), + lineHeight: 1.7, + }, + '& img, & video': { + display: 'block', + margin: 'auto', + }, + '& strong': { + color: (theme.vars || theme).palette.grey[900], + }, + '& summary': { + padding: 8, + fontSize: theme.typography.pxToRem(14), + fontWeight: theme.typography.fontWeightMedium, + color: (theme.vars || theme).palette.grey[900], + }, + '& details': { + paddingLeft: 16, + paddingRight: 16, + background: alpha(theme.palette.grey[50], 0.5), + border: '1px solid', + borderRadius: 10, + borderColor: (theme.vars || theme).palette.grey[200], + transitionProperty: 'all', + transitionTiming: 'cubic-bezier(0.4, 0, 0.2, 1)', + transitionDuration: '200ms', + '&:hover, &:focus-visible': { + background: (theme.vars || theme).palette.grey[50], + borderColor: (theme.vars || theme).palette.grey[300], + }, + }, + '& th': { + textAlign: 'left', + borderBottom: `3px solid rgba(62, 80, 96, 0.2) !important`, + }, + '& .blog-description': { + fontSize: theme.typography.pxToRem(13), + textAlign: 'left', + color: (theme.vars || theme).palette.grey[600], + '& a': { + color: (theme.vars || theme).palette.primary[600], + textDecoration: 'underline', + }, + }, + }, + [`& .${classes.time}`]: { + color: (theme.vars || theme).palette.text.secondary, + ...theme.typography.caption, + fontWeight: 500, + }, + }), + ({ theme }) => + theme.applyDarkStyles({ + background: `linear-gradient(180deg, ${ + (theme.vars || theme).palette.primaryDark[900] + } 0%, #001E3C 100%)`, + [`& .${classes.container}`]: { + '& strong': { + color: (theme.vars || theme).palette.grey[100], + }, + '& summary': { + color: (theme.vars || theme).palette.grey[300], + }, + '& details': { + background: alpha(theme.palette.primary[900], 0.3), + borderColor: (theme.vars || theme).palette.primaryDark[700], + '&:hover, &:focus-visible': { + background: alpha(theme.palette.primary[900], 0.4), + borderColor: (theme.vars || theme).palette.primaryDark[500], + }, + }, + '& .blog-description': { + '& a': { + color: (theme.vars || theme).palette.primary[300], + }, + }, + }, + }), +); function TopLayoutBlog(props) { const { className, docs } = props; @@ -219,7 +236,7 @@ function TopLayoutBlog(props) { : 'https://mui.com/static/logo.png'; return ( - + - + ); } diff --git a/docs/src/modules/components/ad.styles.js b/docs/src/modules/components/ad.styles.js index 85bd1223776ddf..6a655746989c6b 100644 --- a/docs/src/modules/components/ad.styles.js +++ b/docs/src/modules/components/ad.styles.js @@ -46,6 +46,7 @@ const adBodyInlineStyles = (theme) => { ...baseline, root: { display: 'block', + paddingTop: 8, }, imgWrapper: { display: 'none', diff --git a/package.json b/package.json index 77bb97104c8bef..03ae93db735b18 100644 --- a/package.json +++ b/package.json @@ -4,15 +4,15 @@ "private": true, "scripts": { "proptypes": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./scripts/generateProptypes.ts", - "deduplicate": "node scripts/deduplicate.js", + "deduplicate": "node scripts/deduplicate.mjs", "benchmark:browser": "yarn workspace benchmark browser", "build:codesandbox": "lerna run --parallel --scope \"@mui/*\" build", "release:version": "lerna version --no-changelog --no-push --no-git-tag-version --force-publish=@mui/core-downloads-tracker", "release:build": "lerna run --parallel --scope \"@mui/*\" build", - "release:changelog": "node scripts/releaseChangelog", + "release:changelog": "node scripts/releaseChangelog.mjs", "release:publish": "lerna publish from-package --dist-tag latest --contents build", "release:publish:dry-run": "lerna publish from-package --dist-tag latest --contents build --registry=\"http://localhost:4873/\"", - "release:tag": "node scripts/releaseTag", + "release:tag": "node scripts/releaseTag.mjs", "docs:api": "rimraf ./docs/pages/**/api-docs ./docs/pages/**/api && yarn docs:api:build", "docs:api:build": "cross-env BABEL_ENV=development __NEXT_EXPORT_TRAILING_SLASH=true babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/buildApi.ts", "docs:build": "yarn workspace docs build", @@ -34,13 +34,13 @@ "extract-error-codes": "cross-env MUI_EXTRACT_ERROR_CODES=true lerna run --parallel build:modern", "template:screenshot": "cross-env BABEL_ENV=development babel-node --extensions \".tsx,.ts,.js\" ./docs/scripts/generateTemplateScreenshots", "install:codesandbox": "PLAYWRIGHT_SKIP_BROWSER_DOWNLOAD=1 yarn install --ignore-engines", - "jsonlint": "node ./scripts/jsonlint.js", + "jsonlint": "node ./scripts/jsonlint.mjs", "lint": "eslint . --cache --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "lint:ci": "eslint . --report-unused-disable-directives --ext .js,.ts,.tsx --max-warnings 0", "stylelint": "stylelint --reportInvalidScopeDisables --reportNeedlessDisables docs/**/*.{js,ts,tsx}", "markdownlint": "markdownlint-cli2 \"**/*.md\"", - "prettier": "node ./scripts/prettier.js", - "prettier:all": "node ./scripts/prettier.js write", + "prettier": "node ./scripts/prettier.mjs", + "prettier:all": "node ./scripts/prettier.mjs write", "size:snapshot": "node --max-old-space-size=4096 ./scripts/sizeSnapshot/create", "size:why": "yarn size:snapshot --analyze", "start": "yarn && yarn docs:dev", @@ -65,7 +65,7 @@ "test:regressions:server": "serve test/regressions", "test:umd": "node packages/mui-material/test/umd/run.js", "test:unit": "cross-env NODE_ENV=test mocha 'packages/**/*.test.{js,ts,tsx}' 'docs/**/*.test.{js,ts,tsx}' 'scripts/**/*.test.{js,ts,tsx}' 'test/utils/**/*.test.{js,ts,tsx}'", - "test:argos": "node ./scripts/pushArgos.js", + "test:argos": "node ./scripts/pushArgos.mjs", "typescript": "lerna run --no-bail --parallel typescript", "typescript:ci": "lerna run --concurrency 7 --no-bail --no-sort typescript", "validate-declarations": "babel-node --extensions \".ts\" scripts/validateTypescriptDeclarations.ts", @@ -98,7 +98,7 @@ "@types/format-util": "^1.0.2", "@types/fs-extra": "^9.0.13", "@types/jsdom": "^20.0.1", - "@types/lodash": "^4.14.186", + "@types/lodash": "^4.14.188", "@types/mocha": "^10.0.0", "@types/prettier": "^2.7.1", "@types/react": "^18.0.21", diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json index 6a0cb46f70d765..b9411501c6a10c 100644 --- a/packages/mui-base/package.json +++ b/packages/mui-base/package.json @@ -28,12 +28,12 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-base/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json index 51495bf81e3fc8..cbd7335b0abae1 100644 --- a/packages/mui-codemod/package.json +++ b/packages/mui-codemod/package.json @@ -15,7 +15,7 @@ "scripts": { "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-codemod/**/*.test.js'", "prebuild": "rimraf build", - "build": "node ../../scripts/build node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build", + "build": "node ../../scripts/build.mjs node --out-dir ./build && cpy README.md build && cpy package.json build && cpy codemod.js build", "release": "yarn build && npm publish" }, "repository": { diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json index 2c184311c27749..1f93195449c57f 100644 --- a/packages/mui-core-downloads-tracker/package.json +++ b/packages/mui-core-downloads-tracker/package.json @@ -21,7 +21,7 @@ }, "scripts": { "build": "mkdir build && yarn build:copy-files", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build" }, diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json index 5e65cc16e88397..b42fb7139a212d 100644 --- a/packages/mui-docs/package.json +++ b/packages/mui-docs/package.json @@ -24,11 +24,11 @@ "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-docs", "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", + "build:legacy": "node ../../scripts/build.mjs legacy", "build:modern": "echo 'Skip modern build'", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build", "test": "exit 0" diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json index 4d2d3f590f2fbe..358de2cb9e0815 100644 --- a/packages/mui-icons-material/package.json +++ b/packages/mui-icons-material/package.json @@ -33,9 +33,9 @@ "build:lib:clean": "rimraf lib/ && yarn build:lib", "build:legacy": "echo 'Skip legacy build'", "build:modern": "echo 'Skip modern build'", - "build:node": "node ../../scripts/build node --largeFiles --outDir lib", - "build:stable": "node ../../scripts/build stable --largeFiles --outDir lib", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:node": "node ../../scripts/build.mjs node --largeFiles --outDir lib", + "build:stable": "node ../../scripts/build.mjs stable --largeFiles --outDir lib", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "build:typings": "babel-node --config-file ../../babel.config.js ./scripts/create-typings.js", "prebuild": "rimraf build", "release": "yarn build && npm publish build", diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json index dea6e9cd252278..5ccfd973433d95 100644 --- a/packages/mui-joy/package.json +++ b/packages/mui-joy/package.json @@ -26,11 +26,11 @@ }, "scripts": { "build": "yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-joy/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-joy/src/index.ts b/packages/mui-joy/src/index.ts index 44683a37040474..d7a3b68d67d1d7 100644 --- a/packages/mui-joy/src/index.ts +++ b/packages/mui-joy/src/index.ts @@ -3,12 +3,12 @@ export * from './styles'; export { default as GlobalStyles } from './GlobalStyles'; -export { default as AspectRatio } from './AspectRatio'; -export * from './AspectRatio'; - export { default as Alert } from './Alert'; export * from './Alert'; +export { default as AspectRatio } from './AspectRatio'; +export * from './AspectRatio'; + export { default as Avatar } from './Avatar'; export * from './Avatar'; @@ -27,9 +27,6 @@ export * from './Breadcrumbs'; export { default as Button } from './Button'; export * from './Button'; -export { default as CircularProgress } from './CircularProgress'; -export * from './CircularProgress'; - export { default as Card } from './Card'; export * from './Card'; @@ -51,6 +48,9 @@ export * from './Chip'; export { default as ChipDelete } from './ChipDelete'; export * from './ChipDelete'; +export { default as CircularProgress } from './CircularProgress'; +export * from './CircularProgress'; + export { default as Container } from './Container'; export * from './Container'; @@ -63,6 +63,9 @@ export * from './ScopedCssBaseline'; export { default as Divider } from './Divider'; export * from './Divider'; +export { default as FormControl } from './FormControl'; +export * from './FormControl'; + export { default as FormHelperText } from './FormHelperText'; export * from './FormHelperText'; @@ -78,6 +81,9 @@ export * from './IconButton'; export { default as Input } from './Input'; export * from './Input'; +export { default as LinearProgress } from './LinearProgress'; +export * from './LinearProgress'; + export { default as Link } from './Link'; export * from './Link'; @@ -99,6 +105,9 @@ export * from './ListItemContent'; export { default as ListItemDecorator } from './ListItemDecorator'; export * from './ListItemDecorator'; +export { default as ListSubheader } from './ListSubheader'; +export * from './ListSubheader'; + export { default as Menu } from './Menu'; export * from './Menu'; @@ -156,12 +165,12 @@ export * from './TabPanel'; export { default as Tabs } from './Tabs'; export * from './Tabs'; -export { default as TextField } from './TextField'; -export * from './TextField'; - export { default as Textarea } from './Textarea'; export * from './Textarea'; +export { default as TextField } from './TextField'; +export * from './TextField'; + export { default as Tooltip } from './Tooltip'; export * from './Tooltip'; diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json index 36b5c1dbe063c1..c57462ce8613aa 100644 --- a/packages/mui-lab/package.json +++ b/packages/mui-lab/package.json @@ -29,12 +29,12 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files ", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-lab/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-material-next/package.json b/packages/mui-material-next/package.json index 13b2653a3f4902..c37c0c2a005d75 100644 --- a/packages/mui-material-next/package.json +++ b/packages/mui-material-next/package.json @@ -28,11 +28,11 @@ }, "scripts": { "build": "yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material-next/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json index 03d283030180be..6b1d91500433ce 100644 --- a/packages/mui-material/package.json +++ b/packages/mui-material/package.json @@ -28,13 +28,13 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:umd && yarn build:types && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", "build:umd": "cross-env BABEL_ENV=stable rollup -c scripts/rollup.config.js", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-material/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-material/src/IconButton/IconButton.js b/packages/mui-material/src/IconButton/IconButton.js index 1ada0bca32feae..76b63dcbf4504b 100644 --- a/packages/mui-material/src/IconButton/IconButton.js +++ b/packages/mui-material/src/IconButton/IconButton.js @@ -69,40 +69,43 @@ const IconButtonRoot = styled(ButtonBase, { marginRight: ownerState.size === 'small' ? -3 : -12, }), }), - ({ theme, ownerState }) => ({ - ...(ownerState.color === 'inherit' && { - color: 'inherit', - }), - ...(ownerState.color !== 'inherit' && - ownerState.color !== 'default' && { - color: (theme.vars || theme).palette[ownerState.color].main, - ...(!ownerState.disableRipple && { - '&:hover': { - backgroundColor: theme.vars - ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${ - theme.vars.palette.action.hoverOpacity - })` - : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity), - // Reset on touch devices, it doesn't add specificity - '@media (hover: none)': { - backgroundColor: 'transparent', + ({ theme, ownerState }) => { + const palette = (theme.vars || theme).palette?.[ownerState.color]; + return { + ...(ownerState.color === 'inherit' && { + color: 'inherit', + }), + ...(ownerState.color !== 'inherit' && + ownerState.color !== 'default' && { + color: palette?.main, + ...(!ownerState.disableRipple && { + '&:hover': { + ...(palette && { + backgroundColor: theme.vars + ? `rgba(${palette.mainChannel} / ${theme.vars.palette.action.hoverOpacity})` + : alpha(palette.main, theme.palette.action.hoverOpacity), + }), + // Reset on touch devices, it doesn't add specificity + '@media (hover: none)': { + backgroundColor: 'transparent', + }, }, - }, + }), }), + ...(ownerState.size === 'small' && { + padding: 5, + fontSize: theme.typography.pxToRem(18), }), - ...(ownerState.size === 'small' && { - padding: 5, - fontSize: theme.typography.pxToRem(18), - }), - ...(ownerState.size === 'large' && { - padding: 12, - fontSize: theme.typography.pxToRem(28), - }), - [`&.${iconButtonClasses.disabled}`]: { - backgroundColor: 'transparent', - color: (theme.vars || theme).palette.action.disabled, - }, - }), + ...(ownerState.size === 'large' && { + padding: 12, + fontSize: theme.typography.pxToRem(28), + }), + [`&.${iconButtonClasses.disabled}`]: { + backgroundColor: 'transparent', + color: (theme.vars || theme).palette.action.disabled, + }, + }; + }, ); /** diff --git a/packages/mui-material/src/IconButton/IconButton.test.js b/packages/mui-material/src/IconButton/IconButton.test.js index f57b847f0ca388..18ecfdf197b7cd 100644 --- a/packages/mui-material/src/IconButton/IconButton.test.js +++ b/packages/mui-material/src/IconButton/IconButton.test.js @@ -2,6 +2,7 @@ import * as React from 'react'; import { expect } from 'chai'; import PropTypes from 'prop-types'; import { createRenderer, describeConformance } from 'test/utils'; +import { ThemeProvider, createTheme } from '@mui/material/styles'; import IconButton, { iconButtonClasses as classes } from '@mui/material/IconButton'; import Icon from '@mui/material/Icon'; import ButtonBase from '@mui/material/ButtonBase'; @@ -100,4 +101,22 @@ describe('', () => { ); }).toErrorDev(['MUI: You are providing an onClick event listener']); }); + + it('should not throw error for a custom color', () => { + expect(() => ( + + + + )).not.to.throw(); + }); }); diff --git a/packages/mui-private-theming/package.json b/packages/mui-private-theming/package.json index 6b31d7df0cba36..4cc065cb3b0631 100644 --- a/packages/mui-private-theming/package.json +++ b/packages/mui-private-theming/package.json @@ -27,11 +27,11 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-private-theming/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-styled-engine-sc/package.json b/packages/mui-styled-engine-sc/package.json index dd00602e17b540..7da437a7735fd7 100644 --- a/packages/mui-styled-engine-sc/package.json +++ b/packages/mui-styled-engine-sc/package.json @@ -27,11 +27,11 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine-sc/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-styled-engine/package.json b/packages/mui-styled-engine/package.json index 9584ba162c1387..ae647298ccd267 100644 --- a/packages/mui-styled-engine/package.json +++ b/packages/mui-styled-engine/package.json @@ -27,11 +27,11 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styled-engine/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-styles/package.json b/packages/mui-styles/package.json index 2f5d233df704e9..48bfc6004d6023 100644 --- a/packages/mui-styles/package.json +++ b/packages/mui-styles/package.json @@ -27,11 +27,11 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-styles/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-system/package.json b/packages/mui-system/package.json index 14a5c87c65059a..8ed077f069b314 100644 --- a/packages/mui-system/package.json +++ b/packages/mui-system/package.json @@ -27,12 +27,12 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-system/**/*.test.{js,ts,tsx}'", diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js index b3f7e523ed309b..21dfe67b5ed89c 100644 --- a/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js +++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.test.js @@ -13,6 +13,7 @@ import { generateSizeClassNames, generateSpacingClassNames, generateDirectionClasses, + filterBreakpointKeys, } from './gridGenerator'; const spacing = createSpacing(); @@ -101,6 +102,12 @@ describe('grid generator', () => { }); }); + it('filters out breakpoints keys based on responsize keys', () => { + const styles = { sm: 6, md: 3, xl: 2, xs: 1 }; + const filteredKeys = filterBreakpointKeys(breakpoints.keys, Object.keys(styles)); + expect(filteredKeys).to.deep.equal(['xs', 'sm', 'md', 'xl']); + }); + describe('custom breakpoints', () => { const customBreakpoints = createBreakpoints({ values: { xxs: 0, xs: 400, sm: 600, md: 768 }, diff --git a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts index d609047c0d59b2..148057c105a734 100644 --- a/packages/mui-system/src/Unstable_Grid/gridGenerator.ts +++ b/packages/mui-system/src/Unstable_Grid/gridGenerator.ts @@ -9,55 +9,59 @@ interface Props { } interface Iterator { - (appendStyle: (responsizeStyles: Record, style: object) => void, value: T): void; + (appendStyle: (responsiveStyles: Record, style: object) => void, value: T): void; } +export const filterBreakpointKeys = (breakpointsKeys: Breakpoint[], responsiveKeys: string[]) => + breakpointsKeys.filter((key: string) => responsiveKeys.includes(key)); + export const traverseBreakpoints = ( breakpoints: Breakpoints, - responsize: T | T[] | Record | undefined, + responsive: T | T[] | Record | undefined, iterator: Iterator, ) => { const smallestBreakpoint = breakpoints.keys[0]; // the keys is sorted from smallest to largest by `createBreakpoints`. - if (Array.isArray(responsize)) { - responsize.forEach((breakpointValue, index) => { - iterator((responsizeStyles, style) => { + if (Array.isArray(responsive)) { + responsive.forEach((breakpointValue, index) => { + iterator((responsiveStyles, style) => { if (index <= breakpoints.keys.length - 1) { if (index === 0) { - Object.assign(responsizeStyles, style); + Object.assign(responsiveStyles, style); } else { - responsizeStyles[breakpoints.up(breakpoints.keys[index])] = style; + responsiveStyles[breakpoints.up(breakpoints.keys[index])] = style; } } }, breakpointValue as T); }); - } else if (responsize && typeof responsize === 'object') { + } else if (responsive && typeof responsive === 'object') { // prevent null - // responsize could be a very big object, pick the smallest responsive values + // responsive could be a very big object, pick the smallest responsive values + const keys = - Object.keys(responsize).length > breakpoints.keys.length + Object.keys(responsive).length > breakpoints.keys.length ? breakpoints.keys - : Object.keys(responsize); + : filterBreakpointKeys(breakpoints.keys, Object.keys(responsive)); keys.forEach((key) => { if (breakpoints.keys.indexOf(key as Breakpoint) !== -1) { - // @ts-ignore already checked that responsize is an object - const breakpointValue: T = responsize[key]; + // @ts-ignore already checked that responsive is an object + const breakpointValue: T = responsive[key]; if (breakpointValue !== undefined) { - iterator((responsizeStyles, style) => { + iterator((responsiveStyles, style) => { if (smallestBreakpoint === key) { - Object.assign(responsizeStyles, style); + Object.assign(responsiveStyles, style); } else { - responsizeStyles[breakpoints.up(key as Breakpoint)] = style; + responsiveStyles[breakpoints.up(key as Breakpoint)] = style; } }, breakpointValue); } } }); - } else if (typeof responsize === 'number' || typeof responsize === 'string') { - iterator((responsizeStyles, style) => { - Object.assign(responsizeStyles, style); - }, responsize); + } else if (typeof responsive === 'number' || typeof responsive === 'string') { + iterator((responsiveStyles, style) => { + Object.assign(responsiveStyles, style); + }, responsive); } }; diff --git a/packages/mui-types/package.json b/packages/mui-types/package.json index 714056d91e2a7b..625c6d57cd2466 100644 --- a/packages/mui-types/package.json +++ b/packages/mui-types/package.json @@ -27,7 +27,7 @@ "homepage": "https://github.com/mui/material-ui/tree/master/packages/mui-types", "scripts": { "build": "mkdir build && cpy index.d.ts build/ && cpy OverridableComponentAugmentation.ts build/ && yarn build:copy-files", - "build:copy-files": "node ../../scripts/copy-files.js", + "build:copy-files": "node ../../scripts/copyFiles.mjs", "prebuild": "rimraf build", "release": "yarn build && npm publish build", "test": "echo 'No runtime test. Type tests are run with the `typescript` script.'", diff --git a/packages/mui-utils/package.json b/packages/mui-utils/package.json index 5aa22a2852af59..b446ff3b4e3a3a 100644 --- a/packages/mui-utils/package.json +++ b/packages/mui-utils/package.json @@ -27,12 +27,12 @@ }, "scripts": { "build": "yarn build:legacy && yarn build:modern && yarn build:node && yarn build:stable && yarn build:types && yarn build:copy-files", - "build:legacy": "node ../../scripts/build legacy", - "build:modern": "node ../../scripts/build modern", - "build:node": "node ../../scripts/build node", - "build:stable": "node ../../scripts/build stable", - "build:copy-files": "node ../../scripts/copy-files.js", - "build:types": "node ../../scripts/buildTypes", + "build:legacy": "node ../../scripts/build.mjs legacy", + "build:modern": "node ../../scripts/build.mjs modern", + "build:node": "node ../../scripts/build.mjs node", + "build:stable": "node ../../scripts/build.mjs stable", + "build:copy-files": "node ../../scripts/copyFiles.mjs", + "build:types": "node ../../scripts/buildTypes.mjs", "prebuild": "rimraf build tsconfig.build.tsbuildinfo", "release": "yarn build && npm publish build", "test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.{js,ts,tsx}'", diff --git a/packages/typescript-to-proptypes/package.json b/packages/typescript-to-proptypes/package.json index f0bc9227114533..436b894bb2d873 100644 --- a/packages/typescript-to-proptypes/package.json +++ b/packages/typescript-to-proptypes/package.json @@ -22,7 +22,7 @@ "devDependencies": { "@types/babel__core": "^7.1.19", "@types/doctrine": "^0.0.5", - "@types/lodash": "^4.14.186", + "@types/lodash": "^4.14.188", "@types/node": "^16.18.3", "@types/prettier": "^2.7.1", "@types/react": "^18.0.21", diff --git a/scripts/build.js b/scripts/build.mjs similarity index 91% rename from scripts/build.js rename to scripts/build.mjs index 331416b866d8fa..cc7b843b9e1a07 100644 --- a/scripts/build.js +++ b/scripts/build.mjs @@ -1,8 +1,9 @@ -const childProcess = require('child_process'); -const glob = require('fast-glob'); -const path = require('path'); -const { promisify } = require('util'); -const yargs = require('yargs'); +import childProcess from 'child_process'; +import glob from 'fast-glob'; +import path from 'path'; +import { promisify } from 'util'; +import yargs from 'yargs'; +import { getWorkspaceRoot } from './utils.mjs'; const exec = promisify(childProcess.exec); @@ -31,7 +32,7 @@ async function run(argv) { BABEL_ENV: bundle, MUI_BUILD_VERBOSE: verbose, }; - const babelConfigPath = path.resolve(__dirname, '../babel.config.js'); + const babelConfigPath = path.resolve(getWorkspaceRoot(), 'babel.config.js'); const srcDir = path.resolve('./src'); const extensions = ['.js', '.ts', '.tsx']; const ignore = [ @@ -101,7 +102,7 @@ async function run(argv) { } } -yargs +yargs(process.argv.slice(2)) .command({ command: '$0 ', description: 'build package', diff --git a/scripts/buildTypes.js b/scripts/buildTypes.mjs similarity index 95% rename from scripts/buildTypes.js rename to scripts/buildTypes.mjs index 7627c5a0eeb03d..d8d3c1977f69a9 100644 --- a/scripts/buildTypes.js +++ b/scripts/buildTypes.mjs @@ -1,10 +1,10 @@ -const chalk = require('chalk'); -const childProcess = require('child_process'); -const glob = require('fast-glob'); -const fse = require('fs-extra'); -const path = require('path'); -const { promisify } = require('util'); -const yargs = require('yargs'); +import chalk from 'chalk'; +import childProcess from 'child_process'; +import glob from 'fast-glob'; +import fse from 'fs-extra'; +import path from 'path'; +import { promisify } from 'util'; +import yargs from 'yargs'; const exec = promisify(childProcess.exec); @@ -129,7 +129,7 @@ async function main() { console.log(`Fixed: ${rewrittenTally}\nFailed: ${errorTally}\nTotal: ${declarationFiles.length}`); } -yargs +yargs(process.argv.slice(2)) .command({ command: '$0', description: diff --git a/scripts/copy-files.js b/scripts/copyFiles.mjs similarity index 98% rename from scripts/copy-files.js rename to scripts/copyFiles.mjs index cd2ca72afbcd0d..6a7e6dea99708f 100644 --- a/scripts/copy-files.js +++ b/scripts/copyFiles.mjs @@ -1,7 +1,7 @@ /* eslint-disable no-console */ -const path = require('path'); -const fse = require('fs-extra'); -const glob = require('fast-glob'); +import path from 'path'; +import fse from 'fs-extra'; +import glob from 'fast-glob'; const packagePath = process.cwd(); const buildPath = path.join(packagePath, './build'); diff --git a/scripts/deduplicate.js b/scripts/deduplicate.mjs similarity index 75% rename from scripts/deduplicate.js rename to scripts/deduplicate.mjs index 67e61f756496de..db7b4acec482e1 100644 --- a/scripts/deduplicate.js +++ b/scripts/deduplicate.mjs @@ -1,10 +1,11 @@ /* eslint-disable no-console */ -const { spawn } = require('child_process'); -const path = require('path'); -const fs = require('fs'); -const deduplicate = require('yarn-deduplicate'); +import { spawn } from 'child_process'; +import path from 'path'; +import fs from 'fs'; +import deduplicate from 'yarn-deduplicate'; +import { getWorkspaceRoot } from './utils.mjs'; -const lockFile = path.resolve(__dirname, '../yarn.lock'); +const lockFile = path.resolve(getWorkspaceRoot(), 'yarn.lock'); const yarnlock = fs.readFileSync(lockFile, 'utf8'); const duplicates = deduplicate.listDuplicates(yarnlock); @@ -33,7 +34,7 @@ fs.writeFileSync(lockFile, deduplicate.fixDuplicates(yarnlock)); const yarn = spawn('yarn', { shell: true, stdio: 'inherit', - cwd: path.resolve(__dirname, '..'), + cwd: getWorkspaceRoot(), }); yarn.on('close', (code) => { diff --git a/scripts/jsonlint.js b/scripts/jsonlint.mjs similarity index 85% rename from scripts/jsonlint.js rename to scripts/jsonlint.mjs index 33b7318fc15288..59db2e1c889750 100644 --- a/scripts/jsonlint.js +++ b/scripts/jsonlint.mjs @@ -1,14 +1,15 @@ /* eslint-disable no-console */ -const chalk = require('chalk'); -const fse = require('fs-extra'); -const glob = require('globby'); -const path = require('path'); +import chalk from 'chalk'; +import fse from 'fs-extra'; +import glob from 'globby'; +import path from 'path'; +import { getWorkspaceRoot } from './utils.mjs'; const passMessage = (message) => `✓ ${chalk.gray(message)}`; const failMessage = (message) => `✗ ${chalk.whiteBright(message)}`; async function run() { - const workspaceRoot = path.resolve(__dirname, '..'); + const workspaceRoot = getWorkspaceRoot(); const eslintignoreContent = await fse.readFile(path.join(workspaceRoot, '.eslintignore'), { encoding: 'utf8', diff --git a/scripts/listChangedFiles.js b/scripts/listChangedFiles.mjs similarity index 89% rename from scripts/listChangedFiles.js rename to scripts/listChangedFiles.mjs index a16a545b6f9541..d1621870e230ba 100644 --- a/scripts/listChangedFiles.js +++ b/scripts/listChangedFiles.mjs @@ -1,8 +1,8 @@ // Based on similar script in React // https://github.com/facebook/react/blob/b87aabdfe1b7461e7331abb3601d9e6bb27544bc/scripts/shared/listChangedFiles.js -const util = require('util'); -const childProcess = require('child_process'); +import util from 'util'; +import childProcess from 'child_process'; const execFile = util.promisify(childProcess.execFile); @@ -26,4 +26,4 @@ async function listChangedFiles({ branch }) { return new Set([...gitDiff, ...gitLs]); } -module.exports = listChangedFiles; +export default listChangedFiles; diff --git a/scripts/listChangedFiles.test.js b/scripts/listChangedFiles.test.mjs similarity index 88% rename from scripts/listChangedFiles.test.js rename to scripts/listChangedFiles.test.mjs index 69cac60bc8f07c..4d12d04b854f82 100644 --- a/scripts/listChangedFiles.test.js +++ b/scripts/listChangedFiles.test.mjs @@ -1,8 +1,8 @@ -const fs = require('fs'); -const rimraf = require('rimraf'); -const { promisify } = require('util'); -const { expect } = require('chai'); -const listChangedFiles = require('./listChangedFiles'); +import fs from 'fs'; +import rimraf from 'rimraf'; +import { promisify } from 'util'; +import { expect } from 'chai'; +import listChangedFiles from './listChangedFiles.mjs'; const writeFileAsync = promisify(fs.writeFile); const rimrafAsync = promisify(rimraf); diff --git a/scripts/prettier.js b/scripts/prettier.mjs similarity index 91% rename from scripts/prettier.js rename to scripts/prettier.mjs index 1b2ece4decb94e..f8276f96ae8641 100644 --- a/scripts/prettier.js +++ b/scripts/prettier.mjs @@ -4,16 +4,16 @@ // supported modes = check, check-changed, write, write-changed -const glob = require('globby'); -const prettier = require('prettier'); -const fs = require('fs'); -const path = require('path'); -const yargs = require('yargs'); -const { LANGUAGES } = require('docs/src/modules/constants'); -const listChangedFiles = require('./listChangedFiles'); +import glob from 'globby'; +import prettier from 'prettier'; +import fs from 'fs'; +import path from 'path'; +import yargs from 'yargs'; +import { LANGUAGES } from 'docs/src/modules/constants.js'; +import listChangedFiles from './listChangedFiles.mjs'; +import { getWorkspaceRoot } from './utils.mjs'; -// FIXME: Incorrect assumption -const workspaceRoot = process.cwd(); +const workspaceRoot = getWorkspaceRoot(); function isTranslatedDocument(filename) { // markdown files from crowdin end with a 2 letter locale @@ -127,7 +127,7 @@ async function run(argv) { runPrettier({ changedFiles, shouldWrite, branch }); } -yargs +yargs(process.argv.slice(2)) .command({ command: '$0 [mode]', description: 'formats codebase', diff --git a/scripts/pushArgos.js b/scripts/pushArgos.mjs similarity index 85% rename from scripts/pushArgos.js rename to scripts/pushArgos.mjs index b40fd94cee8908..b9a43853f6da25 100644 --- a/scripts/pushArgos.js +++ b/scripts/pushArgos.mjs @@ -1,8 +1,8 @@ /* eslint-disable no-console */ -const glob = require('fast-glob'); -const fse = require('fs-extra'); -const lodashChunk = require('lodash/chunk'); -const argos = require('@argos-ci/core'); +import glob from 'fast-glob'; +import fse from 'fs-extra'; +import lodashChunk from 'lodash/chunk.js'; +import { upload } from '@argos-ci/core'; const screenshotsBase = 'test/regressions/screenshots/chrome'; const screenshotsTmp = 'test/regressions/screenshots/argos'; @@ -27,7 +27,7 @@ async function run() { for (let i = 0; i < chunks.length; i += 1) { // eslint-disable-next-line no-await-in-loop - const result = await argos.upload({ + const result = await upload({ root: `${screenshotsTmp}/${i}`, commit: process.env.CIRCLE_SHA1, branch: process.env.CIRCLE_BRANCH, diff --git a/scripts/releaseChangelog.js b/scripts/releaseChangelog.mjs similarity index 97% rename from scripts/releaseChangelog.js rename to scripts/releaseChangelog.mjs index 2bce795d50bc74..230fc3b6416c24 100644 --- a/scripts/releaseChangelog.js +++ b/scripts/releaseChangelog.mjs @@ -1,8 +1,8 @@ /* eslint-disable no-restricted-syntax */ -const { Octokit } = require('@octokit/rest'); -const childProcess = require('child_process'); -const { promisify } = require('util'); -const yargs = require('yargs'); +import { Octokit } from '@octokit/rest'; +import childProcess from 'child_process'; +import { promisify } from 'util'; +import yargs from 'yargs'; const exec = promisify(childProcess.exec); @@ -156,7 +156,7 @@ All contributors of this release in alphabetical order: ${contributorHandles} console.log(changelog); } -yargs +yargs(process.argv.slice(2)) .command({ command: '$0', description: 'Creates a changelog', diff --git a/scripts/releaseTag.js b/scripts/releaseTag.mjs similarity index 91% rename from scripts/releaseTag.js rename to scripts/releaseTag.mjs index edf7bd52a91151..11814fface58e4 100644 --- a/scripts/releaseTag.js +++ b/scripts/releaseTag.mjs @@ -1,8 +1,9 @@ -const childProcess = require('child_process'); -const fse = require('fs-extra'); -const path = require('path'); -const { promisify } = require('util'); -const yargs = require('yargs'); +import childProcess from 'child_process'; +import fse from 'fs-extra'; +import path from 'path'; +import { promisify } from 'util'; +import yargs from 'yargs'; +import { getWorkspaceRoot } from './utils.mjs'; /** * Only directly call it with side-effect free commands. @@ -48,7 +49,7 @@ async function main(argv) { const exec = dryRun ? execDry : execActual; - const rootWorkspace = path.resolve(__dirname, '..'); + const rootWorkspace = getWorkspaceRoot(); const rootWorkspaceManifest = await fse.readJSON(path.join(rootWorkspace, 'package.json')); const tag = `v${rootWorkspaceManifest.version}`; @@ -75,7 +76,7 @@ async function main(argv) { ); } -yargs +yargs(process.argv.slice(2)) .command({ command: '$0', description: 'Tags the current release and pushes these changes to mui/material-ui.', diff --git a/scripts/testBuiltTypes.js b/scripts/testBuiltTypes.mjs similarity index 84% rename from scripts/testBuiltTypes.js rename to scripts/testBuiltTypes.mjs index 7f5097dfeda58b..5e7d29655995d6 100644 --- a/scripts/testBuiltTypes.js +++ b/scripts/testBuiltTypes.mjs @@ -1,9 +1,10 @@ -const glob = require('fast-glob'); -const fse = require('fs-extra'); -const path = require('path'); +import glob from 'fast-glob'; +import fse from 'fs-extra'; +import path from 'path'; +import { getWorkspaceRoot } from './utils.mjs'; async function main() { - const workspaceRoot = path.resolve(__dirname, '..'); + const workspaceRoot = getWorkspaceRoot(); const declarationFiles = await glob('**/build/**/*.d.ts', { absolute: true, diff --git a/scripts/use-react-version.js b/scripts/useReactVersion.mjs similarity index 93% rename from scripts/use-react-version.js rename to scripts/useReactVersion.mjs index d909666c2b89c7..4c7b07d67276ab 100644 --- a/scripts/use-react-version.js +++ b/scripts/useReactVersion.mjs @@ -7,11 +7,12 @@ * WARNING: This script can only use built-in modules since it has to run before * `yarn install` */ -const childProcess = require('child_process'); -const fs = require('fs'); -const os = require('os'); -const path = require('path'); -const { promisify } = require('util'); +import childProcess from 'child_process'; +import fs from 'fs'; +import os from 'os'; +import path from 'path'; +import { promisify } from 'util'; +import { getWorkspaceRoot } from './utils.mjs'; const exec = promisify(childProcess.exec); @@ -37,7 +38,7 @@ async function main(version) { return; } - const packageJsonPath = path.resolve(__dirname, '../package.json'); + const packageJsonPath = path.resolve(getWorkspaceRoot(), 'package.json'); const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf8' })); // the version is something in format: "17.0.0" diff --git a/scripts/use-typescript-dist-tag.js b/scripts/useTypescriptDistTag.mjs similarity index 85% rename from scripts/use-typescript-dist-tag.js rename to scripts/useTypescriptDistTag.mjs index 4dd4af99c7c564..04dd874907285f 100644 --- a/scripts/use-typescript-dist-tag.js +++ b/scripts/useTypescriptDistTag.mjs @@ -9,11 +9,12 @@ * WARNING: This script can only use built-in modules since it has to run before * `yarn install` */ -const childProcess = require('child_process'); -const fs = require('fs'); -const os = require('os'); -const path = require('path'); -const { promisify } = require('util'); +import childProcess from 'child_process'; +import fs from 'fs'; +import os from 'os'; +import path from 'path'; +import { promisify } from 'util'; +import { getWorkspaceRoot } from './utils.mjs'; const exec = promisify(childProcess.exec); @@ -38,7 +39,7 @@ async function main(distTag) { const version = tagMapping.replace(`${distTag}: `, ''); - const packageJsonPath = path.resolve(__dirname, '../package.json'); + const packageJsonPath = path.resolve(getWorkspaceRoot(), 'package.json'); const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, { encoding: 'utf8' })); packageJson.devDependencies.typescript = version; diff --git a/scripts/utils.mjs b/scripts/utils.mjs new file mode 100644 index 00000000000000..7a62fe6c4ad054 --- /dev/null +++ b/scripts/utils.mjs @@ -0,0 +1,12 @@ +import path from 'path'; +import url from 'url'; + +/** + * Returns the full path of the root directory of this repository. + */ +// eslint-disable-next-line import/prefer-default-export +export function getWorkspaceRoot() { + const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url)); + const workspaceRoot = path.resolve(currentDirectory, '..'); + return workspaceRoot; +} diff --git a/test/README.md b/test/README.md index 83861a554f1a9c..8946498e28e0fb 100644 --- a/test/README.md +++ b/test/README.md @@ -242,7 +242,7 @@ For example, in https://app.circleci.com/pipelines/github/mui/material-ui/32796/ ### Testing multiple versions of React -You can check integration of different versions of React (e.g. different [release channels](https://reactjs.org/docs/release-channels.html) or PRs to React) by running `node scripts/use-react-version `. +You can check integration of different versions of React (e.g. different [release channels](https://reactjs.org/docs/release-channels.html) or PRs to React) by running `node scripts/useReactVersion.mjs `. Possible values for `version`: diff --git a/test/karma.conf.js b/test/karma.conf.js index 7f55dddf8aa866..7ce26ebb41a963 100644 --- a/test/karma.conf.js +++ b/test/karma.conf.js @@ -126,7 +126,7 @@ module.exports = function setKarmaConfig(config) { module: { rules: [ { - test: /\.(js|ts|tsx)$/, + test: /\.(js|mjs|ts|tsx)$/, loader: 'babel-loader', exclude: /node_modules/, options: { @@ -171,7 +171,7 @@ module.exports = function setKarmaConfig(config) { }, }, { - test: /\.(js|ts|tsx)$/, + test: /\.(js|mjs|ts|tsx)$/, use: { loader: 'babel-loader', options: { @@ -184,7 +184,7 @@ module.exports = function setKarmaConfig(config) { ], }, resolve: { - extensions: ['.js', '.ts', '.tsx'], + extensions: ['.js', '.mjs', '.ts', '.tsx'], fallback: { // needed by sourcemap fs: false, diff --git a/yarn.lock b/yarn.lock index 7872d56e19f6e9..066186aee46a71 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3456,41 +3456,41 @@ resolved "https://registry.yarnpkg.com/@types/css-mediaquery/-/css-mediaquery-0.1.1.tgz#0902ee5849b89a45390c2c9dccbb536a75a88511" integrity sha512-JQ+sPiPlRUHmlL4e3DBUNbxVEb6p7dis78/uSDbQpkeCKVoepChZMWGPIVA2JIH0ylfkA9S+TZUdShlgDpFKrw== -"@types/d3-color@*": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-3.1.0.tgz#6594da178ded6c7c3842f3cc0ac84b156f12f2d4" - integrity sha512-HKuicPHJuvPgCD+np6Se9MQvS6OCbJmOjGvylzMJRlDwUXjKTTXs6Pwgk79O09Vj/ho3u1ofXnhFOaEWWPrlwA== +"@types/d3-color@^2": + version "2.0.3" + resolved "https://registry.yarnpkg.com/@types/d3-color/-/d3-color-2.0.3.tgz#8bc4589073c80e33d126345542f588056511fe82" + integrity sha512-+0EtEjBfKEDtH9Rk3u3kLOUXM5F+iZK+WvASPb0MhIZl8J8NUvGeZRwKCXl+P3HkYx5TdU4YtcibpqHkSR9n7w== -"@types/d3-interpolate@^3.0.1": - version "3.0.1" - resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-3.0.1.tgz#e7d17fa4a5830ad56fe22ce3b4fac8541a9572dc" - integrity sha512-jx5leotSeac3jr0RePOH1KdR9rISG91QIE4Q2PYTu4OymLTZfA3SrnURSLzKH48HmXVUru50b8nje4E79oQSQw== +"@types/d3-interpolate@^2.0.0": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-interpolate/-/d3-interpolate-2.0.2.tgz#78eddf7278b19e48e8652603045528d46897aba0" + integrity sha512-lElyqlUfIPyWG/cD475vl6msPL4aMU7eJvx1//Q177L8mdXoVPFl1djIESF2FKnc0NyaHvQlJpWwKJYwAhUoCw== dependencies: - "@types/d3-color" "*" + "@types/d3-color" "^2" -"@types/d3-path@*": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-3.0.0.tgz#939e3a784ae4f80b1fde8098b91af1776ff1312b" - integrity sha512-0g/A+mZXgFkQxN3HniRDbXMN79K3CdTpLsevj+PXiTcb2hVyvkZUBg37StmgCQkaD84cUJ4uaDAWq7UJOQy2Tg== +"@types/d3-path@^2": + version "2.0.2" + resolved "https://registry.yarnpkg.com/@types/d3-path/-/d3-path-2.0.2.tgz#6052f38f6186319769dfabab61b5514b0e02c75c" + integrity sha512-3YHpvDw9LzONaJzejXLOwZ3LqwwkoXb9LI2YN7Hbd6pkGo5nIlJ09ul4bQhBN4hQZJKmUpX8HkVqbzgUKY48cg== -"@types/d3-scale@^4.0.2": - version "4.0.2" - resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-4.0.2.tgz#41be241126af4630524ead9cb1008ab2f0f26e69" - integrity sha512-Yk4htunhPAwN0XGlIwArRomOjdoBFXC3+kCxK2Ubg7I9shQlVSJy/pG/Ht5ASN+gdMIalpk8TJ5xV74jFsetLA== +"@types/d3-scale@^3.0.0": + version "3.3.2" + resolved "https://registry.yarnpkg.com/@types/d3-scale/-/d3-scale-3.3.2.tgz#18c94e90f4f1c6b1ee14a70f14bfca2bd1c61d06" + integrity sha512-gGqr7x1ost9px3FvIfUMi5XA/F/yAf4UkUDtdQhpH92XCT0Oa7zkkRzY61gPVJq+DxpHn/btouw5ohWkbBsCzQ== dependencies: - "@types/d3-time" "*" + "@types/d3-time" "^2" -"@types/d3-shape@^3.1.0": - version "3.1.0" - resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-3.1.0.tgz#1d87a6ddcf28285ef1e5c278ca4bdbc0658f3505" - integrity sha512-jYIYxFFA9vrJ8Hd4Se83YI6XF+gzDL1aC5DCsldai4XYYiVNdhtpGbA/GM6iyQ8ayhSp3a148LY34hy7A4TxZA== +"@types/d3-shape@^2.0.0": + version "2.1.3" + resolved "https://registry.yarnpkg.com/@types/d3-shape/-/d3-shape-2.1.3.tgz#35d397b9e687abaa0de82343b250b9897b8cacf3" + integrity sha512-HAhCel3wP93kh4/rq+7atLdybcESZ5bRHDEZUojClyZWsRuEMo3A52NGYJSh48SxfxEU6RZIVbZL2YFZ2OAlzQ== dependencies: - "@types/d3-path" "*" + "@types/d3-path" "^2" -"@types/d3-time@*": - version "3.0.0" - resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-3.0.0.tgz#e1ac0f3e9e195135361fa1a1d62f795d87e6e819" - integrity sha512-sZLCdHvBUcNby1cB6Fd3ZBrABbjz3v1Vm90nysCQ6Vt7vd6e/h9Lt7SiJUoEX0l4Dzc7P5llKyhqSi1ycSf1Hg== +"@types/d3-time@^2": + version "2.1.1" + resolved "https://registry.yarnpkg.com/@types/d3-time/-/d3-time-2.1.1.tgz#743fdc821c81f86537cbfece07093ac39b4bc342" + integrity sha512-9MVYlmIgmRR31C5b4FVSWtuMmBHh2mOWQYfl7XAYOa8dsnb7iEmUmRSWSFgXFtkjxO65d7hTUHQC+RhR/9IWFg== "@types/doctrine@^0.0.5": version "0.0.5" @@ -3612,10 +3612,10 @@ dependencies: "@types/lodash" "*" -"@types/lodash@*", "@types/lodash@^4.14.186": - version "4.14.186" - resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.186.tgz#862e5514dd7bd66ada6c70ee5fce844b06c8ee97" - integrity sha512-eHcVlLXP0c2FlMPm56ITode2AgLMSa6aJ05JTTbYbI+7EMkCEE5qk2E41d5g2lCVTqRe0GnnRFurmlCsDODrPw== +"@types/lodash@*", "@types/lodash@^4.14.188": + version "4.14.188" + resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.188.tgz#e4990c4c81f7c9b00c5ff8eae389c10f27980da5" + integrity sha512-zmEmF5OIM3rb7SbLCFYoQhO4dGt2FRM9AMkxvA3LaADOF1n8in/zGJlWji9fmafLoNyz+FoL6FE0SLtGIArD7w== "@types/markdown-to-jsx@^7.0.1": version "7.0.1" @@ -6436,33 +6436,16 @@ d3-array@2, d3-array@^2.3.0: dependencies: internmap "^1.0.0" -"d3-array@2 - 3", "d3-array@2.10.0 - 3": - version "3.2.0" - resolved "https://registry.yarnpkg.com/d3-array/-/d3-array-3.2.0.tgz#15bf96cd9b7333e02eb8de8053d78962eafcff14" - integrity sha512-3yXFQo0oG3QCxbF06rMPFyGRMGJNS7NvsV1+2joOjbBE+9xvWQ8+GcMJAjRCzw06zQ3/arXeJgbPYcjUCuC+3g== - dependencies: - internmap "1 - 2" - "d3-color@1 - 2": version "2.0.0" resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-2.0.0.tgz#8d625cab42ed9b8f601a1760a389f7ea9189d62e" integrity sha512-SPXi0TSKPD4g9tw0NMZFnR95XVgUZiBH+uUTqQuDu1OsE2zomHU7ho0FISciaPvosimixwHFl3WHLGabv6dDgQ== -"d3-color@1 - 3": - version "3.1.0" - resolved "https://registry.yarnpkg.com/d3-color/-/d3-color-3.1.0.tgz#395b2833dfac71507f12ac2f7af23bf819de24e2" - integrity sha512-zg/chbXyeBtMQ1LbD/WSoW2DpC3I0mpmPdW+ynRTj/x2DAWYrIY7qeZIHidozwV24m4iavr15lNwIwLxRmOxhA== - "d3-format@1 - 2": version "2.0.0" resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-2.0.0.tgz#a10bcc0f986c372b729ba447382413aabf5b0767" integrity sha512-Ab3S6XuE/Q+flY96HXT0jOXcM4EAClYFnRGY5zsjRGNy6qCYrQsMffs7cV5Q9xejb35zxW5hf/guKw34kvIKsA== -"d3-format@1 - 3": - version "3.1.0" - resolved "https://registry.yarnpkg.com/d3-format/-/d3-format-3.1.0.tgz#9260e23a28ea5cb109e93b21a06e24e2ebd55641" - integrity sha512-YyUI6AEuY/Wpt8KWLgZHsIU86atmikuoOmCfommt0LYHiQSPjvX2AcFc38PX0CBpr2RCyZhjex+NS/LPOv6YqA== - "d3-interpolate@1.2.0 - 2", d3-interpolate@^2.0.0: version "2.0.1" resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-2.0.1.tgz#98be499cfb8a3b94d4ff616900501a64abc91163" @@ -6470,23 +6453,11 @@ d3-array@2, d3-array@^2.3.0: dependencies: d3-color "1 - 2" -"d3-interpolate@1.2.0 - 3", d3-interpolate@^3.0.1: - version "3.0.1" - resolved "https://registry.yarnpkg.com/d3-interpolate/-/d3-interpolate-3.0.1.tgz#3c47aa5b32c5b3dfb56ef3fd4342078a632b400d" - integrity sha512-3bYs1rOD33uo8aqJfKP3JWPAibgw8Zm2+L9vBKEHJ2Rg+viTR7o5Mmv5mZcieN+FRYaAOWX5SJATX6k1PWz72g== - dependencies: - d3-color "1 - 3" - "d3-path@1 - 2": version "2.0.0" resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-2.0.0.tgz#55d86ac131a0548adae241eebfb56b4582dd09d8" integrity sha512-ZwZQxKhBnv9yHaiWd6ZU4x5BtCQ7pXszEV9CU6kRgwIQVQGLMv1oiL4M+MK/n79sYzsj+gcgpPQSctJUsLN7fA== -"d3-path@1 - 3": - version "3.0.1" - resolved "https://registry.yarnpkg.com/d3-path/-/d3-path-3.0.1.tgz#f09dec0aaffd770b7995f1a399152bf93052321e" - integrity sha512-gq6gZom9AFZby0YLduxT1qmrp4xpBA1YZr19OI717WIdKE2OM5ETq5qrHLb301IgxhLwcuxvGZVLeeWc/k1I6w== - d3-scale@^3.0.0: version "3.3.0" resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-3.3.0.tgz#28c600b29f47e5b9cd2df9749c206727966203f3" @@ -6498,17 +6469,6 @@ d3-scale@^3.0.0: d3-time "^2.1.1" d3-time-format "2 - 3" -d3-scale@^4.0.2: - version "4.0.2" - resolved "https://registry.yarnpkg.com/d3-scale/-/d3-scale-4.0.2.tgz#82b38e8e8ff7080764f8dcec77bd4be393689396" - integrity sha512-GZW464g1SH7ag3Y7hXjf8RoUuAFIqklOAq3MRl4OaWabTFJY9PN/E1YklhXLh+OQ3fM9yS2nOkCoS+WLZ6kvxQ== - dependencies: - d3-array "2.10.0 - 3" - d3-format "1 - 3" - d3-interpolate "1.2.0 - 3" - d3-time "2.1.1 - 3" - d3-time-format "2 - 4" - d3-shape@^2.0.0: version "2.1.0" resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-2.1.0.tgz#3b6a82ccafbc45de55b57fcf956c584ded3b666f" @@ -6516,13 +6476,6 @@ d3-shape@^2.0.0: dependencies: d3-path "1 - 2" -d3-shape@^3.1.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/d3-shape/-/d3-shape-3.1.0.tgz#c8a495652d83ea6f524e482fca57aa3f8bc32556" - integrity sha512-tGDh1Muf8kWjEDT/LswZJ8WF85yDZLvVJpYU9Nq+8+yW1Z5enxrmXOhTArlkaElU+CTn0OTVNli+/i+HP45QEQ== - dependencies: - d3-path "1 - 3" - "d3-time-format@2 - 3": version "3.0.0" resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-3.0.0.tgz#df8056c83659e01f20ac5da5fdeae7c08d5f1bb6" @@ -6530,13 +6483,6 @@ d3-shape@^3.1.0: dependencies: d3-time "1 - 2" -"d3-time-format@2 - 4": - version "4.1.0" - resolved "https://registry.yarnpkg.com/d3-time-format/-/d3-time-format-4.1.0.tgz#7ab5257a5041d11ecb4fe70a5c7d16a195bb408a" - integrity sha512-dJxPBlzC7NugB2PDLwo9Q8JiTR3M3e4/XANkreKSUxF8vvXKqm1Yfq4Q5dl8budlunRVlUUaDUgFt7eA8D6NLg== - dependencies: - d3-time "1 - 3" - "d3-time@1 - 2", d3-time@^2.1.1: version "2.1.1" resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-2.1.1.tgz#e9d8a8a88691f4548e68ca085e5ff956724a6682" @@ -6544,13 +6490,6 @@ d3-shape@^3.1.0: dependencies: d3-array "2" -"d3-time@1 - 3", "d3-time@2.1.1 - 3": - version "3.0.0" - resolved "https://registry.yarnpkg.com/d3-time/-/d3-time-3.0.0.tgz#65972cb98ae2d4954ef5c932e8704061335d4975" - integrity sha512-zmV3lRnlaLI08y9IMRXSDshQb5Nj77smnfpnd2LrBa/2K281Jijactokeak14QacHs/kKq0AQ121nidNYlarbQ== - dependencies: - d3-array "2 - 3" - damerau-levenshtein@^1.0.8: version "1.0.8" resolved "https://registry.yarnpkg.com/damerau-levenshtein/-/damerau-levenshtein-1.0.8.tgz#b43d286ccbd36bc5b2f7ed41caf2d0aba1f8a6e7" @@ -9265,11 +9204,6 @@ internal-slot@^1.0.3: has "^1.0.3" side-channel "^1.0.4" -"internmap@1 - 2": - version "2.0.3" - resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009" - integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg== - internmap@^1.0.0: version "1.0.1" resolved "https://registry.yarnpkg.com/internmap/-/internmap-1.0.1.tgz#0017cc8a3b99605f0302f2b198d272e015e5df95" @@ -13574,31 +13508,14 @@ recharts-scale@^0.4.4: dependencies: decimal.js-light "^2.4.1" -recharts@*: - version "2.1.14" - resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.14.tgz#177259b4d423a287a9284420fe2208bdb45311e7" - integrity sha512-GDmDDPEmRhGb6O41OfJUKh/RFYh3QMtEdaNuXOnVtJN8wiifo41MvIHHzrjf7Vp7/yJYFsGaXnCElzM5H7SPmQ== - dependencies: - "@types/d3-interpolate" "^3.0.1" - "@types/d3-scale" "^4.0.2" - "@types/d3-shape" "^3.1.0" - classnames "^2.2.5" - d3-interpolate "^3.0.1" - d3-scale "^4.0.2" - d3-shape "^3.1.0" - eventemitter3 "^4.0.1" - lodash "^4.17.19" - react-is "^16.10.2" - react-resize-detector "^7.1.2" - react-smooth "^2.0.1" - recharts-scale "^0.4.4" - reduce-css-calc "^2.1.8" - -recharts@2.1.12: - version "2.1.12" - resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.12.tgz#2cbc87b0ed386a1328e9bab2b808a5fbce22e59f" - integrity sha512-dAzEuc9AjM+IF0A33QzEdBEUnyGKJcGUPa0MYm0vd38P3WouQjrj2egBrCNInE7ZcQwN+z3MoT7Rw03u8nP9HA== +recharts@*, recharts@2.1.16: + version "2.1.16" + resolved "https://registry.yarnpkg.com/recharts/-/recharts-2.1.16.tgz#f1448175dbce1988421276b0655c8a74d8a1e0a7" + integrity sha512-aYn1plTjYzRCo3UGxtWsduslwYd+Cuww3h/YAAEoRdGe0LRnBgYgaXSlVrNFkWOOSXrBavpmnli9h7pvRuk5wg== dependencies: + "@types/d3-interpolate" "^2.0.0" + "@types/d3-scale" "^3.0.0" + "@types/d3-shape" "^2.0.0" classnames "^2.2.5" d3-interpolate "^2.0.0" d3-scale "^3.0.0"