Merge remote-tracking branch 'upstream/master' into renovate/eslint-p…

…lugin-react-7.x

.eslintrc.js

@@ -211,15 +211,6 @@ module.exports = {
       rules: {
         // does not work with wildcard imports. Mistakes will throw at runtime anyway
         'import/named': 'off',
-        'no-restricted-imports': [
-          'error',
-          {
-            // Use named import from `test/utils` instead.
-            // The other files are private.
-            patterns: ['test/utils/*'],
-          },
-        ],
-
         'material-ui/disallow-active-element-as-key-event-target': 'error',
 
         // upgraded level from recommended

.mocharc.js

@@ -10,7 +10,7 @@ module.exports = {
   recursive: true,
   timeout: (process.env.CIRCLECI === 'true' ? 5 : 2) * 1000, // Circle CI has low-performance CPUs.
   reporter: 'dot',
-  require: [require.resolve('./test/utils/setupBabel'), require.resolve('./test/utils/setupJSDOM')],
+  require: ['@mui-internal/test-utils/setupBabel', '@mui-internal/test-utils/setupJSDOM'],
   'watch-ignore': [
     // default
     '.git',

docs/data/joy/customization/default-theme-viewer/default-theme-viewer.md

@@ -1,15 +1,13 @@
 # Default theme viewer
 
-<p class="description">Here's what the theme object looks like with the default values.</p>
+<p class="description">Check out how the theme object looks like with the default values.</p>
 
 :::warning
 This is a work in progress. We're still iterating on Joy UI's default theme.
 :::
 
-## Explore
-
-Explore the default theme:
+:::info
+To create your own theme, start by customizing the [theme colors](/joy-ui/customization/theme-colors/).
+:::
 
 {{"demo": "JoyDefaultTheme.js", "hideToolbar": true, "bg": "inline"}}
-
-To create your own theme, starts with customizing the [theme colors](/joy-ui/customization/theme-colors/).

docs/data/material/components/skeleton/Facebook.js

@@ -18,7 +18,13 @@ function Media(props) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton animation="wave" variant="circular" width={40} height={40} />
+            <Skeleton
+              animation="wave"
+              size="box"
+              shape="circular"
+              width={40}
+              height={40}
+            />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -54,7 +60,12 @@ function Media(props) {
         }
       />
       {loading ? (
-        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
+        <Skeleton
+          sx={{ height: 190 }}
+          animation="wave"
+          size="box"
+          shape="rectangular"
+        />
       ) : (
         <CardMedia
           component="img"

docs/data/material/components/skeleton/Facebook.tsx

@@ -21,7 +21,13 @@ function Media(props: MediaProps) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton animation="wave" variant="circular" width={40} height={40} />
+            <Skeleton
+              animation="wave"
+              size="box"
+              shape="circular"
+              width={40}
+              height={40}
+            />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -57,7 +63,12 @@ function Media(props: MediaProps) {
         }
       />
       {loading ? (
-        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
+        <Skeleton
+          sx={{ height: 190 }}
+          animation="wave"
+          size="box"
+          shape="rectangular"
+        />
       ) : (
         <CardMedia
           component="img"

docs/data/material/components/skeleton/Shapes.js

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Shapes() {
+  return (
+    <Stack spacing={1}>
+      <Skeleton shape="circular" size="box" width={40} height={40} />
+      <Skeleton shape="rectangular" size="box" width={210} height={60} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
+    </Stack>
+  );
+}

docs/data/material/components/skeleton/Shapes.tsx

@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Shapes() {
+  return (
+    <Stack spacing={1}>
+      <Skeleton shape="circular" size="box" width={40} height={40} />
+      <Skeleton shape="rectangular" size="box" width={210} height={60} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
+    </Stack>
+  );
+}

docs/data/material/components/skeleton/Shapes.tsx.preview

@@ -0,0 +1,3 @@
+<Skeleton shape="circular" size="box" width={40} height={40} />
+<Skeleton shape="rectangular" size="box" width={210} height={60} />
+<Skeleton shape="rounded" size="box" width={210} height={60} />

docs/data/material/components/skeleton/Sizes.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <Stack spacing={1} width={210}>
+      {/* For size="text", adjust the height via font-size */}
+      <Skeleton size="text" sx={{ fontSize: '1rem' }} />
+      {/* For size="box", adjust height based on bounding box */}
+      <Skeleton size="box" height={40} />
+    </Stack>
+  );
+}

docs/data/material/components/skeleton/Sizes.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <Stack spacing={1} width={210}>
+      {/* For size="text", adjust the height via font-size */}
+      <Skeleton size="text" sx={{ fontSize: '1rem' }} />
+      {/* For size="box", adjust height based on bounding box */}
+      <Skeleton size="box" height={40} />
+    </Stack>
+  );
+}

docs/data/material/components/skeleton/Sizes.tsx.preview

@@ -0,0 +1,4 @@
+{/* For size="text", adjust the height via font-size */}
+<Skeleton size="text" sx={{ fontSize: '1rem' }} />
+{/* For size="box", adjust height based on bounding box */}
+<Skeleton size="box" height={40} />

docs/data/material/components/skeleton/SkeletonChildren.js

@@ -19,7 +19,7 @@ function SkeletonChildrenDemo(props) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton variant="circular">
+            <Skeleton size="box" shape="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -37,7 +37,7 @@ function SkeletonChildrenDemo(props) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rectangular" width="100%">
+        <Skeleton size="box" shape="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (

docs/data/material/components/skeleton/SkeletonChildren.tsx

@@ -18,7 +18,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton variant="circular">
+            <Skeleton size="box" shape="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -36,7 +36,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rectangular" width="100%">
+        <Skeleton size="box" shape="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (

docs/data/material/components/skeleton/SkeletonColor.js

@@ -15,7 +15,8 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        variant="rectangular"
+        shape="rectangular"
+        size="box"
         width={210}
         height={118}
       />

docs/data/material/components/skeleton/SkeletonColor.tsx

@@ -15,7 +15,8 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        variant="rectangular"
+        shape="rectangular"
+        size="box"
         width={210}
         height={118}
       />

docs/data/material/components/skeleton/SkeletonColor.tsx.preview

@@ -1,6 +1,7 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
-  variant="rectangular"
+  shape="rectangular"
+  size="box"
   width={210}
   height={118}
 />

docs/data/material/components/skeleton/YouTube.js

@@ -43,7 +43,7 @@ function Media(props) {
               src={item.src}
             />
           ) : (
-            <Skeleton variant="rectangular" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" width={210} height={118} />
           )}
 
           {item ? (

docs/data/material/components/skeleton/YouTube.tsx

@@ -46,7 +46,7 @@ function Media(props: MediaProps) {
               src={item.src}
             />
           ) : (
-            <Skeleton variant="rectangular" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" width={210} height={118} />
           )}
           {item ? (
             <Box sx={{ pr: 2 }}>

docs/data/material/components/skeleton/skeleton-pt.md

@@ -22,19 +22,27 @@ O componente é projetado para ser usado **diretamente em seus componentes**. Po
   item ? (
     <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
   ) : (
-    <Skeleton variant="rect" width={210} height={118} />
+    <Skeleton shape="rect" width={210} height={118} />
   );
 }
 ```
 
-## Variantes
+## Formas
 
-The component supports 4 shape variants:
+O componente suporta 3 formas:
 
-- `text` (default): represents a single line of text (you can adjust the height via font size).
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
+- `circular`, `rectangular`, e `rounded`: Venha com um raio de borda diferente para permitir que você assuma o controle da forma.
 
-{{"demo": "Variants.js"}}
+{{"demo": "Shapes.js"}}
+
+## Tamanhos
+
+Você pode usar os seguintes valores para especificar o tamanho do componente:
+
+- `text` (default): representa uma única linha de texto (você pode ajustar a altura por tamanho da fonte).
+- `box`: Escala o componente para o tamanho da caixa delimitadora.
+
+{{"demo": "Sizes.js"}}
 
 ## Animações
 

docs/data/material/components/skeleton/skeleton-zh.md

@@ -29,19 +29,27 @@ githubLabel: 'component: skeleton'
       src={item.src}
     />
   ) : (
-    <Skeleton variant="rectangular" width={210} height={118} />
+    <Skeleton shape="rectangular" width={210} height={118} />
   );
 }
 ```
 
-## 变体
+## 形状
 
-The component supports 4 shape variants:
+组件支持 3 种形状:
 
-- `text` (default): represents a single line of text (you can adjust the height via font size).
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
+- `circular`, `rectangular`, 和 `rounded`: 带有不同的边界半径，让您控制形状
 
-{{"demo": "Variants.js"}}
+{{"demo": "Shapes.js"}}
+
+## 尺寸
+
+您可以使用以下值来指定组件的大小:
+
+- `text` （默认值）：表示一行文本（您可以通过字体大小调整高度）。
+- `box`: 将组件扩展到边界框的大小。
+
+{{"demo": "Sizes.js"}}
 
 ## 动画
 
@@ -73,7 +81,7 @@ The component supports 4 shape variants:
 
 ```jsx
 loading ? (
-  <Skeleton variant="circular">
+  <Skeleton shape="circular">
     <Avatar />
   </Skeleton>
 ) : (