Merge branch 'master' into modal-event-handlers

mui · Sep 14, 2024 · 662042f · 662042f
2 parents e116263 + 012c2e8
commit 662042f
Show file tree

Hide file tree

Showing 54 changed files with 320 additions and 129 deletions.
diff --git a/docs/data/joy/components/radio-button/ExampleAlignmentButtons.js b/docs/data/joy/components/radio-button/ExampleAlignmentButtons.js
@@ -17,6 +17,7 @@ export default function ExampleAlignmentButtons() {
       variant="outlined"
       value={alignment}
       onChange={(event) => setAlignment(event.target.value)}
+      sx={{ display: 'inline-flex' }}
     >
       {['left', 'center', 'right', 'justify'].map((item) => (
         <Box

diff --git a/docs/data/joy/components/radio-button/ExampleAlignmentButtons.tsx b/docs/data/joy/components/radio-button/ExampleAlignmentButtons.tsx
@@ -19,6 +19,7 @@ export default function ExampleAlignmentButtons() {
       onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
         setAlignment(event.target.value)
       }
+      sx={{ display: 'inline-flex' }}
     >
       {['left', 'center', 'right', 'justify'].map((item) => (
         <Box

diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.js b/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.js
@@ -22,7 +22,7 @@ export default function ToggleGroupToolbar() {
   return (
     <Sheet
       variant="outlined"
-      sx={{ borderRadius: 'md', display: 'flex', gap: 2, p: 0.5 }}
+      sx={{ borderRadius: 'md', display: 'inline-flex', gap: 2, p: 0.5 }}
     >
       <ToggleButtonGroup
         variant="plain"

diff --git a/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.tsx b/docs/data/joy/components/toggle-button-group/ToggleGroupToolbar.tsx
@@ -22,7 +22,7 @@ export default function ToggleGroupToolbar() {
   return (
     <Sheet
       variant="outlined"
-      sx={{ borderRadius: 'md', display: 'flex', gap: 2, p: 0.5 }}
+      sx={{ borderRadius: 'md', display: 'inline-flex', gap: 2, p: 0.5 }}
     >
       <ToggleButtonGroup
         variant="plain"

diff --git a/docs/data/joy/getting-started/templates/TemplateCollection.js b/docs/data/joy/getting-started/templates/TemplateCollection.js
@@ -88,7 +88,7 @@ const templates = [
     author: authors.MUI,
     design: {
       name: 'Frames X',
-      link: 'https://framesxdesign.com/product',
+      link: 'https://framesxdesign.com/',
     },
   },
 ];

diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.js b/docs/data/material/components/breadcrumbs/CondensedWithMenu.js
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+export default function CondensedWithMenu() {
+  const [anchorEl, setAnchorEl] = React.useState(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event) => {
+    if (event) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <React.Fragment>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="with-menu-demo-breadcrumbs"
+      >
+        <MenuItem onClick={handleClose}>Breadcrumb 2</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 3</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 4</MenuItem>
+      </Menu>
+      <Breadcrumbs aria-label="breadcrumbs">
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 1
+        </Link>
+        <IconButton color="primary" size="small" onClick={handleClick}>
+          <MoreHorizIcon />
+        </IconButton>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 5
+        </Link>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 6
+        </Link>
+      </Breadcrumbs>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx b/docs/data/material/components/breadcrumbs/CondensedWithMenu.tsx
@@ -0,0 +1,51 @@
+import * as React from 'react';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
+import Link from '@mui/material/Link';
+import Menu from '@mui/material/Menu';
+import MenuItem from '@mui/material/MenuItem';
+import IconButton from '@mui/material/IconButton';
+import MoreHorizIcon from '@mui/icons-material/MoreHoriz';
+
+export default function CondensedWithMenu() {
+  const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
+  const open = Boolean(anchorEl);
+
+  const handleClick = (event: React.MouseEvent<HTMLButtonElement> | null) => {
+    if (event) {
+      setAnchorEl(event.currentTarget);
+    }
+  };
+
+  const handleClose = () => {
+    setAnchorEl(null);
+  };
+
+  return (
+    <React.Fragment>
+      <Menu
+        anchorEl={anchorEl}
+        open={open}
+        onClose={handleClose}
+        aria-labelledby="with-menu-demo-breadcrumbs"
+      >
+        <MenuItem onClick={handleClose}>Breadcrumb 2</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 3</MenuItem>
+        <MenuItem onClick={handleClose}>Breadcrumb 4</MenuItem>
+      </Menu>
+      <Breadcrumbs aria-label="breadcrumbs">
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 1
+        </Link>
+        <IconButton color="primary" size="small" onClick={handleClick}>
+          <MoreHorizIcon />
+        </IconButton>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 5
+        </Link>
+        <Link color="primary" href="#condensed-with-menu">
+          Breadcrumb 6
+        </Link>
+      </Breadcrumbs>
+    </React.Fragment>
+  );
+}
diff --git a/docs/data/material/components/breadcrumbs/breadcrumbs.md b/docs/data/material/components/breadcrumbs/breadcrumbs.md
@@ -37,6 +37,12 @@ In the following examples, we are using two string separators and an SVG icon.
 
 {{"demo": "CollapsedBreadcrumbs.js"}}
 
+## Condensed with menu
+
+As an alternative, consider adding a Menu component to display the condensed links in a dropdown list:
+
+{{"demo": "CondensedWithMenu.js"}}
+
 ## Customization
 
 Here is an example of customizing the component.

diff --git a/docs/data/material/components/dividers/FlexDivider.js b/docs/data/material/components/dividers/FlexDivider.js
@@ -8,7 +8,7 @@ export default function FlexDivider() {
   return (
     <Box
       sx={{
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
         border: '1px solid',
         borderColor: 'divider',

diff --git a/docs/data/material/components/dividers/FlexDivider.tsx b/docs/data/material/components/dividers/FlexDivider.tsx
@@ -8,7 +8,7 @@ export default function FlexDivider() {
   return (
     <Box
       sx={{
-        display: 'flex',
+        display: 'inline-flex',
         alignItems: 'center',
         border: '1px solid',
         borderColor: 'divider',

diff --git a/docs/data/material/components/progress/CircularSize.js b/docs/data/material/components/progress/CircularSize.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CircularSize() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <CircularProgress size="30px" />
+      <CircularProgress size={40} />
+      <CircularProgress size="3rem" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/progress/CircularSize.tsx b/docs/data/material/components/progress/CircularSize.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import CircularProgress from '@mui/material/CircularProgress';
+
+export default function CircularSize() {
+  return (
+    <Stack spacing={2} direction="row" alignItems="center">
+      <CircularProgress size="30px" />
+      <CircularProgress size={40} />
+      <CircularProgress size="3rem" />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/progress/CircularSize.tsx.preview b/docs/data/material/components/progress/CircularSize.tsx.preview
@@ -0,0 +1,3 @@
+<CircularProgress size="30px" />
+<CircularProgress size={40} />
+<CircularProgress size="3rem" />
diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md
@@ -30,6 +30,10 @@ The animations of the components rely on CSS as much as possible to work even be
 
 {{"demo": "CircularColor.js"}}
 
+### Circular size
+
+{{"demo": "CircularSize.js"}}
+
 ### Circular determinate
 
 {{"demo": "CircularDeterminate.js"}}

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.js b/docs/data/material/components/slider/MusicPlayerSlider.js
@@ -89,7 +89,7 @@ export default function MusicPlayerSlider() {
     return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`;
   }
   return (
-    <Box sx={{ width: '100%', overflow: 'hidden' }}>
+    <Box sx={{ width: '100%', overflow: 'hidden', position: 'relative', p: 3 }}>
       <Widget>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <CoverImage>

diff --git a/docs/data/material/components/slider/MusicPlayerSlider.tsx b/docs/data/material/components/slider/MusicPlayerSlider.tsx
@@ -89,7 +89,7 @@ export default function MusicPlayerSlider() {
     return `${minute}:${secondLeft < 10 ? `0${secondLeft}` : secondLeft}`;
   }
   return (
-    <Box sx={{ width: '100%', overflow: 'hidden' }}>
+    <Box sx={{ width: '100%', overflow: 'hidden', position: 'relative', p: 3 }}>
       <Widget>
         <Box sx={{ display: 'flex', alignItems: 'center' }}>
           <CoverImage>

diff --git a/examples/material-ui-nextjs-ts/next-env.d.ts b/examples/material-ui-nextjs-ts/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/examples/material-ui-pigment-css-nextjs-ts/next-env.d.ts b/examples/material-ui-pigment-css-nextjs-ts/next-env.d.ts
@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/pages/building-your-application/configuring/typescript for more information.
diff --git a/packages-internal/babel-plugin-resolve-imports/package.json b/packages-internal/babel-plugin-resolve-imports/package.json
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages-internal/babel-plugin-resolve-imports"
   },
   "license": "MIT",

diff --git a/packages-internal/docs-utils/package.json b/packages-internal/docs-utils/package.json
@@ -10,7 +10,7 @@
   "types": "./build/index.d.ts",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages-internal/docs-utils"
   },
   "scripts": {

diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
@@ -12,7 +12,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages-internal/scripts"
   },
   "license": "MIT",

diff --git a/packages/eslint-plugin-material-ui/package.json b/packages/eslint-plugin-material-ui/package.json
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git"
+    "url": "git+https://github.com/mui/material-ui.git"
   },
   "license": "MIT"
 }
diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -12,7 +12,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/markdown"
   },
   "scripts": {

diff --git a/packages/markdown/parseMarkdown.js b/packages/markdown/parseMarkdown.js
@@ -275,12 +275,12 @@ const noSEOadvantage = [
   'https://heroicons.com/',
   'https://react-icons.github.io/',
   'https://fontawesome.com/',
-  'https://www.radix-ui.com/',
   'https://react-spectrum.adobe.com/',
   'https://headlessui.com/',
   'https://refine.dev/',
   'https://scaffoldhub.io/',
   'https://marmelab.com/',
+  'https://framesxdesign.com/',
 ];
 
 /**

diff --git a/packages/mui-babel-macros/package.json b/packages/mui-babel-macros/package.json
@@ -6,7 +6,7 @@
   "main": "./MuiError.macro.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-babel-macros"
   },
   "license": "MIT",

diff --git a/packages/mui-base/package.json b/packages/mui-base/package.json
@@ -14,7 +14,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-base"
   },
   "license": "MIT",

diff --git a/packages/mui-codemod/package.json b/packages/mui-codemod/package.json
@@ -20,7 +20,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-codemod"
   },
   "license": "MIT",

diff --git a/packages/mui-core-downloads-tracker/package.json b/packages/mui-core-downloads-tracker/package.json
@@ -7,7 +7,7 @@
   "files": [],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/core-downloads-tracker"
   },
   "license": "MIT",

diff --git a/packages/mui-docs/package.json b/packages/mui-docs/package.json
@@ -14,7 +14,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-docs"
   },
   "license": "MIT",

diff --git a/packages/mui-envinfo/package.json b/packages/mui-envinfo/package.json
@@ -7,7 +7,7 @@
   "bin": "./envinfo.js",
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui",
+    "url": "git+https://github.com/mui/material-ui",
     "directory": "packages/mui-envinfo"
   },
   "license": "MIT",

diff --git a/packages/mui-icons-material/package.json b/packages/mui-icons-material/package.json
@@ -15,7 +15,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-icons-material"
   },
   "license": "MIT",

diff --git a/packages/mui-joy/package.json b/packages/mui-joy/package.json
@@ -12,7 +12,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-joy"
   },
   "license": "MIT",

diff --git a/packages/mui-lab/package.json b/packages/mui-lab/package.json
@@ -15,7 +15,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/mui/material-ui.git",
+    "url": "git+https://github.com/mui/material-ui.git",
     "directory": "packages/mui-lab"
   },
   "license": "MIT",