Merge branch 'master' into enterprise

mui · Nov 18, 2024 · 90a24ce · 90a24ce
2 parents b672f8d + aef2bf2
commit 90a24ce
Show file tree

Hide file tree

Showing 110 changed files with 2,044 additions and 1,674 deletions.
diff --git a/README.md b/README.md
@@ -17,7 +17,7 @@
 [![Renovate status](https://img.shields.io/badge/renovate-enabled-brightgreen.svg)](https://github.com/mui/material-ui/issues/27062)
 [![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui/material-ui.svg)](https://isitmaintained.com/project/mui/material-ui 'Average time to resolve an issue')
 [![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/mui-org)](https://opencollective.com/mui-org)
-[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320)
+[![OpenSSF Best Practices](https://www.bestpractices.dev/projects/1320/badge)](https://www.bestpractices.dev/projects/1320)
 
 </div>
 

diff --git a/docs/data/material/components/autocomplete/Virtualize.js b/docs/data/material/components/autocomplete/Virtualize.js
@@ -149,7 +149,11 @@ export default function Virtualize() {
       renderGroup={(params) => params}
       slots={{
         popper: StyledPopper,
-        listbox: ListboxComponent,
+      }}
+      slotProps={{
+        listbox: {
+          component: ListboxComponent,
+        },
       }}
     />
   );

diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx b/docs/data/material/components/autocomplete/Virtualize.tsx
@@ -155,7 +155,11 @@ export default function Virtualize() {
       renderGroup={(params) => params as any}
       slots={{
         popper: StyledPopper,
-        listbox: ListboxComponent,
+      }}
+      slotProps={{
+        listbox: {
+          component: ListboxComponent,
+        },
       }}
     />
   );

diff --git a/docs/data/material/components/autocomplete/Virtualize.tsx.preview b/docs/data/material/components/autocomplete/Virtualize.tsx.preview
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.js b/docs/data/material/components/button-group/LoadingButtonGroup.js
@@ -1,17 +1,16 @@
 import * as React from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
   return (
     <ButtonGroup variant="outlined" aria-label="Loading button group">
       <Button>Submit</Button>
-      <LoadingButton>Fetch data</LoadingButton>
-      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+      <Button>Fetch data</Button>
+      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
         Save
-      </LoadingButton>
+      </Button>
     </ButtonGroup>
   );
 }
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx b/docs/data/material/components/button-group/LoadingButtonGroup.tsx
@@ -1,17 +1,16 @@
 import * as React from 'react';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
-import LoadingButton from '@mui/lab/LoadingButton';
 import SaveIcon from '@mui/icons-material/Save';
 
 export default function LoadingButtonGroup() {
   return (
     <ButtonGroup variant="outlined" aria-label="Loading button group">
       <Button>Submit</Button>
-      <LoadingButton>Fetch data</LoadingButton>
-      <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+      <Button>Fetch data</Button>
+      <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
         Save
-      </LoadingButton>
+      </Button>
     </ButtonGroup>
   );
 }
diff --git a/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview b/docs/data/material/components/button-group/LoadingButtonGroup.tsx.preview
@@ -1,7 +1,7 @@
 <ButtonGroup variant="outlined" aria-label="Loading button group">
   <Button>Submit</Button>
-  <LoadingButton>Fetch data</LoadingButton>
-  <LoadingButton loading loadingPosition="start" startIcon={<SaveIcon />}>
+  <Button>Fetch data</Button>
+  <Button loading loadingPosition="start" startIcon={<SaveIcon />}>
     Save
-  </LoadingButton>
+  </Button>
 </ButtonGroup>
diff --git a/docs/data/material/components/button-group/button-group.md b/docs/data/material/components/button-group/button-group.md
@@ -1,7 +1,7 @@
 ---
 productId: material-ui
 title: React Button Group component
-components: Button, ButtonGroup, LoadingButton
+components: Button, ButtonGroup
 githubLabel: 'component: ButtonGroup'
 githubSource: packages/mui-material/src/ButtonGroup
 ---
@@ -49,10 +49,8 @@ You can remove the elevation with the `disableElevation` prop.
 
 {{"demo": "DisableElevation.js"}}
 
-## Experimental APIs
+## Loading
 
-### Loading button
-
-You can use the [`<LoadingButton />`](/material-ui/react-button/#loading-button) from [`@mui/lab`](/material-ui/about-the-lab/) in the button group.
+Use the `loading` prop from `Button` to set buttons in a loading state and disable interactions.
 
 {{"demo": "LoadingButtonGroup.js"}}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.js b/docs/data/material/components/buttons/IconButtonWithBadge.js
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Badge, { badgeClasses } from '@mui/material/Badge';
+import Stack from '@mui/material/Stack';
+import SaveIcon from '@mui/icons-material/Save';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
+
+const CartBadge = styled(Badge)`
+  .${badgeClasses.badge} {
+    top: -12px;
+    right: -6px;
+  }
+`;
+
+export default function IconButtonWithBadge() {
+  const [loading, setLoading] = React.useState(false);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  });
+  return (
+    <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
+      <IconButton loading>
+        <Badge badgeContent={4} color="primary">
+          <SaveIcon />
+        </Badge>
+      </IconButton>
+      <IconButton loading={loading} onClick={() => setLoading(true)}>
+        <ShoppingCartIcon fontSize="small" />
+        <CartBadge badgeContent={2} color="primary" overlap="circular" />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx b/docs/data/material/components/buttons/IconButtonWithBadge.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { styled } from '@mui/material/styles';
+import IconButton from '@mui/material/IconButton';
+import Badge, { badgeClasses } from '@mui/material/Badge';
+import Stack from '@mui/material/Stack';
+import SaveIcon from '@mui/icons-material/Save';
+import ShoppingCartIcon from '@mui/icons-material/ShoppingCartOutlined';
+
+const CartBadge = styled(Badge)`
+  .${badgeClasses.badge} {
+    top: -12px;
+    right: -6px;
+  }
+`;
+
+export default function IconButtonWithBadge() {
+  const [loading, setLoading] = React.useState(false);
+  React.useEffect(() => {
+    const timeout = setTimeout(() => {
+      setLoading(false);
+    }, 2000);
+    return () => clearTimeout(timeout);
+  });
+  return (
+    <Stack spacing={2} direction="row" sx={{ alignItems: 'center' }}>
+      <IconButton loading>
+        <Badge badgeContent={4} color="primary">
+          <SaveIcon />
+        </Badge>
+      </IconButton>
+      <IconButton loading={loading} onClick={() => setLoading(true)}>
+        <ShoppingCartIcon fontSize="small" />
+        <CartBadge badgeContent={2} color="primary" overlap="circular" />
+      </IconButton>
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview b/docs/data/material/components/buttons/IconButtonWithBadge.tsx.preview
@@ -0,0 +1,9 @@
+<IconButton loading>
+  <Badge badgeContent={4} color="primary">
+    <SaveIcon />
+  </Badge>
+</IconButton>
+<IconButton loading={loading} onClick={() => setLoading(true)}>
+  <ShoppingCartIcon fontSize="small" />
+  <CartBadge badgeContent={2} color="primary" overlap="circular" />
+</IconButton>
diff --git a/docs/data/material/components/buttons/LoadingButtons.js b/docs/data/material/components/buttons/LoadingButtons.js
@@ -1,25 +1,45 @@
 import * as React from 'react';
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
 
 export default function LoadingButtons() {
   return (
-    <Stack direction="row" spacing={2}>
-      <LoadingButton loading variant="outlined">
-        Submit
-      </LoadingButton>
-      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
-      </LoadingButton>
-      <LoadingButton
+    <Stack spacing={2}>
+      <Stack direction="row" spacing={2}>
+        <Button loading variant="outlined">
+          Submit
+        </Button>
+        <Button loading loadingIndicator="Loading…" variant="outlined">
+          Fetch data
+        </Button>
+        <Button
+          loading
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="outlined"
+        >
+          Save
+        </Button>
+      </Stack>
+      <Button
+        fullWidth
         loading
         loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >
-        Save
-      </LoadingButton>
+        Full width
+      </Button>
+      <Button
+        fullWidth
+        loading
+        loadingPosition="end"
+        endIcon={<SaveIcon />}
+        variant="outlined"
+      >
+        Full width
+      </Button>
     </Stack>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx b/docs/data/material/components/buttons/LoadingButtons.tsx
@@ -1,25 +1,45 @@
 import * as React from 'react';
-import LoadingButton from '@mui/lab/LoadingButton';
+import Button from '@mui/material/Button';
 import SaveIcon from '@mui/icons-material/Save';
 import Stack from '@mui/material/Stack';
 
 export default function LoadingButtons() {
   return (
-    <Stack direction="row" spacing={2}>
-      <LoadingButton loading variant="outlined">
-        Submit
-      </LoadingButton>
-      <LoadingButton loading loadingIndicator="Loading…" variant="outlined">
-        Fetch data
-      </LoadingButton>
-      <LoadingButton
+    <Stack spacing={2}>
+      <Stack direction="row" spacing={2}>
+        <Button loading variant="outlined">
+          Submit
+        </Button>
+        <Button loading loadingIndicator="Loading…" variant="outlined">
+          Fetch data
+        </Button>
+        <Button
+          loading
+          loadingPosition="start"
+          startIcon={<SaveIcon />}
+          variant="outlined"
+        >
+          Save
+        </Button>
+      </Stack>
+      <Button
+        fullWidth
         loading
         loadingPosition="start"
         startIcon={<SaveIcon />}
         variant="outlined"
       >
-        Save
-      </LoadingButton>
+        Full width
+      </Button>
+      <Button
+        fullWidth
+        loading
+        loadingPosition="end"
+        endIcon={<SaveIcon />}
+        variant="outlined"
+      >
+        Full width
+      </Button>
     </Stack>
   );
 }
diff --git a/docs/data/material/components/buttons/LoadingButtons.tsx.preview b/docs/data/material/components/buttons/LoadingButtons.tsx.preview