Merge branch 'master' of https://github.com/mui/material-ui into move…

…-use-media-query-to-system
mui · Feb 21, 2024 · a184be6 · a184be6
2 parents 6a4b4a0 + b6bec6c
commit a184be6
Show file tree

Hide file tree

Showing 301 changed files with 1,564 additions and 782 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -166,17 +166,17 @@ jobs:
               echo "no changes"
             fi
       - run:
-          name: typescript-to-proptypes
+          name: internal-scripts
           command: |
             # latest commit
             LATEST_COMMIT=$(git rev-parse HEAD)
 
-            # latest commit where packages/typescript-to-proptypes was changed
-            FOLDER_COMMIT=$(git log -1 --format=format:%H --full-diff packages/typescript-to-proptypes)
+            # latest commit where internal-scripts was changed
+            FOLDER_COMMIT=$(git log -1 --format=format:%H --full-diff packages-internal/scripts)
 
             if [ $FOLDER_COMMIT = $LATEST_COMMIT ]; then
               echo "changes, let's run the tests"
-              pnpm --filter typescript-to-proptypes test
+              pnpm --filter @mui/internal-scripts test
             else
               echo "no changes"
             fi
@@ -260,6 +260,8 @@ jobs:
       - run:
           name: Tests TypeScript definitions
           command: pnpm typescript:ci
+          environment:
+            NODE_OPTIONS: --max-old-space-size=3072
       - run:
           name: Test module augmentation
           command: |

diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -20,7 +20,7 @@
     "packages/mui-types",
     "packages/mui-utils",
     "packages/docs-utils",
-    "packages/typescript-to-proptypes"
+    "packages-internal/scripts"
   ],
   "publishDirectory": {
     "@mui/base": "packages/mui-base/build",
@@ -40,7 +40,7 @@
     "@mui/types": "packages/mui-types/build",
     "@mui/utils": "packages/mui-utils/build",
     "@mui-internal/docs-utils": "packages/docs-utils",
-    "@mui-internal/typescript-to-proptypes": "packages/typescript-to-proptypes"
+    "@mui/internal-scripts": "packages-internal/scripts"
   },
   "sandboxes": [
     "/examples/material-ui-cra-ts",

diff --git a/.eslintignore b/.eslintignore
@@ -26,7 +26,7 @@
 /packages/zero-runtime/tests/fixtures/
 /packages/zero-next-plugin/loader.js
 # Ignore fixtures
-/packages/typescript-to-proptypes/test/*/*
+/packages-internal/scripts/typescript-to-proptypes/test/*/*
 /test/bundling/fixtures/**/*.fixture.js
 # just an import that reports eslint errors depending on whether the fixture (which is not checked in) exists
 /test/bundling/fixtures/create-react-app/src/index.js

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -413,7 +413,7 @@ module.exports = {
       },
     },
     {
-      files: ['packages/typescript-to-proptypes/src/**/*.ts'],
+      files: ['packages-internal/scripts/typescript-to-proptypes/src/**/*.ts'],
       rules: {
         // Working with flags is common in TypeScript compiler
         'no-bitwise': 'off',

diff --git a/apps/zero-runtime-next-app/next.config.js b/apps/zero-runtime-next-app/next.config.js
@@ -1,7 +1,7 @@
 /* eslint-env node */
 // eslint-ignore-next-line import/no-unresolved
 const { withZeroPlugin } = require('@mui/zero-next-plugin');
-const { extendTheme } = require('@mui/zero-runtime');
+const { experimental_extendTheme: extendTheme } = require('@mui/material/styles');
 
 /**
  * @typedef {import('@mui/zero-next-plugin').ZeroPluginConfig} ZeroPluginConfig
@@ -83,6 +83,10 @@ const theme = extendTheme({
   },
 });
 
+theme.getColorSchemeSelector = (key) => {
+  return `[data-mui-color-scheme="${key}"]`;
+};
+
 // { [theme.getColorSchemeSelector('dark')]: { color: 'black' } }
 
 /**

diff --git a/babel.config.js b/babel.config.js
@@ -138,7 +138,6 @@ module.exports = function getBabelConfig(api) {
               alias: {
                 ...defaultAlias,
                 modules: './modules',
-                'typescript-to-proptypes': './packages/typescript-to-proptypes/src',
               },
               root: ['./'],
             },

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.js
@@ -309,18 +309,18 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
 
-        &.base--focused,
-        &.base--focusVisible {
+        &.Mui-focused,
+        &.Mui-focusVisible {
           background-color: ${isDarkMode ? grey[800] : grey[100]};
           color: ${isDarkMode ? grey[300] : grey[900]};
         }
 
-        &.base--focusVisible {
+        &.Mui-focusVisible {
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         }
 
-        &[aria-selected=true].base--focused,
-        &[aria-selected=true].base--focusVisible {
+        &[aria-selected=true].Mui-focused,
+        &[aria-selected=true].Mui-focusVisible {
           background-color: ${isDarkMode ? cyan[900] : cyan[100]};
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/css/index.tsx
@@ -283,18 +283,18 @@ function Styles() {
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }
 
-        &.base--focused,
-        &.base--focusVisible {
+        &.Mui-focused,
+        &.Mui-focusVisible {
           background-color: ${isDarkMode ? grey[800] : grey[100]};
           color: ${isDarkMode ? grey[300] : grey[900]};
         }
 
-        &.base--focusVisible {
+        &.Mui-focusVisible {
           box-shadow: 0 0 0 3px ${isDarkMode ? cyan[500] : cyan[200]};
         }
 
-        &[aria-selected=true].base--focused,
-        &[aria-selected=true].base--focusVisible {
+        &[aria-selected=true].Mui-focused,
+        &[aria-selected=true].Mui-focusVisible {
           background-color: ${isDarkMode ? cyan[900] : cyan[100]};
           color: ${isDarkMode ? cyan[100] : cyan[900]};
         }

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.js
@@ -237,18 +237,18 @@ const StyledOption = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx b/docs/data/base/components/autocomplete/AutocompleteIntroduction/system/index.tsx
@@ -220,18 +220,18 @@ const StyledOption = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/ControlledStates.js b/docs/data/base/components/autocomplete/ControlledStates.js
@@ -171,18 +171,18 @@ const Option = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/ControlledStates.tsx b/docs/data/base/components/autocomplete/ControlledStates.tsx
@@ -171,18 +171,18 @@ const Option = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.js b/docs/data/base/components/autocomplete/UseAutocomplete.js
@@ -160,18 +160,18 @@ const Option = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/UseAutocomplete.tsx b/docs/data/base/components/autocomplete/UseAutocomplete.tsx
@@ -162,18 +162,18 @@ const Option = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.js b/docs/data/base/components/autocomplete/UseAutocompletePopper.js
@@ -184,18 +184,18 @@ const Option = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx b/docs/data/base/components/autocomplete/UseAutocompletePopper.tsx
@@ -192,18 +192,18 @@ const Option = styled('li')(
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }
 
-  &.base--focused,
-  &.base--focusVisible {
+  &.Mui-focused,
+  &.Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? grey[800] : grey[100]};
     color: ${theme.palette.mode === 'dark' ? grey[300] : grey[900]};
   }
 
-  &.base--focusVisible {
+  &.Mui-focusVisible {
     box-shadow: 0 0 0 3px ${theme.palette.mode === 'dark' ? blue[500] : blue[200]};
   }
 
-  &[aria-selected=true].base--focused,
-  &[aria-selected=true].base--focusVisible {
+  &[aria-selected=true].Mui-focused,
+  &[aria-selected=true].Mui-focusVisible {
     background-color: ${theme.palette.mode === 'dark' ? blue[900] : blue[100]};
     color: ${theme.palette.mode === 'dark' ? blue[100] : blue[900]};
   }

diff --git a/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js b/docs/data/joy/components/linear-progress/LinearProgressWithLabel.js
@@ -1,6 +1,7 @@
 import * as React from 'react';
 import LinearProgress from '@mui/joy/LinearProgress';
 import Typography from '@mui/joy/Typography';
+import Box from '@mui/joy/Box';
 
 export default function LinearProgressWithLabel() {
   const [progress, setProgress] = React.useState(0);
@@ -16,28 +17,35 @@ export default function LinearProgressWithLabel() {
   }, []);
 
   return (
-    <LinearProgress
-      determinate
-      variant="outlined"
-      color="neutral"
-      size="sm"
-      thickness={32}
-      value={progress}
+    <Box
       sx={{
-        '--LinearProgress-radius': '0px',
-        '--LinearProgress-progressThickness': '24px',
-        boxShadow: 'sm',
-        borderColor: 'neutral.500',
+        bgcolor: 'white',
+        width: '100%',
       }}
     >
-      <Typography
-        level="body-xs"
-        fontWeight="xl"
-        textColor="common.white"
-        sx={{ mixBlendMode: 'difference' }}
+      <LinearProgress
+        determinate
+        variant="outlined"
+        color="neutral"
+        size="sm"
+        thickness={32}
+        value={progress}
+        sx={{
+          '--LinearProgress-radius': '0px',
+          '--LinearProgress-progressThickness': '24px',
+          boxShadow: 'sm',
+          borderColor: 'neutral.500',
+        }}
       >
-        LOADING… {`${Math.round(progress)}%`}
-      </Typography>
-    </LinearProgress>
+        <Typography
+          level="body-xs"
+          fontWeight="xl"
+          textColor="common.white"
+          sx={{ mixBlendMode: 'difference' }}
+        >
+          LOADING… {`${Math.round(progress)}%`}
+        </Typography>
+      </LinearProgress>
+    </Box>
   );
 }