Merge remote-tracking branch 'upstream/master' into base/number-input-reducer

mj12albert · mj12albert · commit 49fc3e76e53d · 2023-09-02T11:19:11.000+08:00
diff --git a/docs/data/joy/components/link/LinkCard.js b/docs/data/joy/components/link/LinkCard.js
@@ -1,35 +1,22 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import Link from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
-import CenterFocusWeak from '@mui/icons-material/CenterFocusWeak';
 
 export default function LinkCard() {
   return (
-    <Card>
-      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-        <Avatar size="lg" src="/static/images/avatar/1.jpg" />
-        <div>
-          {/* This could be a heading (eg. h2) depends on your use case. */}
-          <Typography component="div">
-            <Link
-              overlay
-              href="#with-card"
-              textColor="inherit"
-              underline="none"
-              fontWeight="md"
-            >
-              Joy UI
-            </Link>
-          </Typography>
-          <Typography level="body-sm">Components that spark joy!</Typography>
-        </div>
-      </Box>
-      <Typography level="body-sm" display="flex" alignItems="center" gap={0.5}>
-        Click the <CenterFocusWeak /> and <kbd>TAB</kbd> to test the focus
-      </Typography>
+    <Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
+      <Avatar size="lg" src="/static/images/avatar/1.jpg" />
+      <Link
+        overlay
+        href="#introduction"
+        underline="none"
+        sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
+      >
+        <Typography level="body-md">Joy UI</Typography>
+        <Typography level="body-sm">Components that spark joy!</Typography>
+      </Link>
     </Card>
   );
 }
diff --git a/docs/data/joy/components/link/LinkCard.tsx b/docs/data/joy/components/link/LinkCard.tsx
@@ -1,35 +1,22 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
 import Card from '@mui/joy/Card';
 import Link from '@mui/joy/Link';
 import Typography from '@mui/joy/Typography';
-import CenterFocusWeak from '@mui/icons-material/CenterFocusWeak';
 
 export default function LinkCard() {
   return (
-    <Card>
-      <Box sx={{ display: 'flex', gap: 2, mb: 2 }}>
-        <Avatar size="lg" src="/static/images/avatar/1.jpg" />
-        <div>
-          {/* This could be a heading (eg. h2) depends on your use case. */}
-          <Typography component="div">
-            <Link
-              overlay
-              href="#with-card"
-              textColor="inherit"
-              underline="none"
-              fontWeight="md"
-            >
-              Joy UI
-            </Link>
-          </Typography>
-          <Typography level="body-sm">Components that spark joy!</Typography>
-        </div>
-      </Box>
-      <Typography level="body-sm" display="flex" alignItems="center" gap={0.5}>
-        Click the <CenterFocusWeak /> and <kbd>TAB</kbd> to test the focus
-      </Typography>
+    <Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
+      <Avatar size="lg" src="/static/images/avatar/1.jpg" />
+      <Link
+        overlay
+        href="#introduction"
+        underline="none"
+        sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
+      >
+        <Typography level="body-md">Joy UI</Typography>
+        <Typography level="body-sm">Components that spark joy!</Typography>
+      </Link>
     </Card>
   );
 }
diff --git a/docs/data/joy/components/link/LinkCard.tsx.preview b/docs/data/joy/components/link/LinkCard.tsx.preview
@@ -0,0 +1,12 @@
+<Card variant="outlined" sx={{ display: 'flex', gap: 2 }}>
+  <Avatar size="lg" src="/static/images/avatar/1.jpg" />
+  <Link
+    overlay
+    href="#introduction"
+    underline="none"
+    sx={{ display: 'flex', flexDirection: 'column', alignItems: 'start' }}
+  >
+    <Typography level="body-md">Joy UI</Typography>
+    <Typography level="body-sm">Components that spark joy!</Typography>
+  </Link>
+</Card>
diff --git a/docs/data/material/components/material-icons/SearchIcons.js b/docs/data/material/components/material-icons/SearchIcons.js
@@ -132,22 +132,10 @@ const Icons = React.memo(function Icons(props) {
 
   const handleIconClick = (icon) => () => {
     if (Math.random() < 0.1) {
-      window.ga('send', {
-        hitType: 'event',
-        eventCategory: 'material-icons',
-        eventAction: 'click',
-        eventLabel: icon.name,
-      });
       window.gtag('event', 'material-icons', {
         eventAction: 'click',
         eventLabel: icon.name,
       });
-      window.ga('send', {
-        hitType: 'event',
-        eventCategory: 'material-icons-theme',
-        eventAction: 'click',
-        eventLabel: icon.theme,
-      });
       window.gtag('event', 'material-icons-theme', {
         eventAction: 'click',
         eventLabel: icon.theme,
@@ -505,12 +493,6 @@ export default function SearchIcons() {
 
             // Keep track of the no results so we can add synonyms in the future.
             if (value.length >= 4 && results.length === 0) {
-              window.ga('send', {
-                hitType: 'event',
-                eventCategory: 'material-icons',
-                eventAction: 'no-results',
-                eventLabel: value,
-              });
               window.gtag('event', 'material-icons', {
                 eventAction: 'no-results',
                 eventLabel: value,
diff --git a/docs/data/material/guides/routing/routing.md b/docs/data/material/guides/routing/routing.md
@@ -101,7 +101,7 @@ const LinkBehavior = React.forwardRef((props, ref) => (
 
 ### Next.js Pages Router
 
-The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.
+The [example folder](https://github.com/mui/material-ui/tree/HEAD/examples/material-ui-nextjs-pages-router-ts) provides an adapter for the use of [Next.js's Link component](https://nextjs.org/docs/api-reference/next/link) with Material UI.
 
 - The first version of the adapter is the [`NextLinkComposed`](https://github.com/mui/material-ui/blob/-/examples/material-ui-nextjs-pages-router-ts/src/Link.tsx) component.
   This component is unstyled and only responsible for handling the navigation.
diff --git a/docs/pages/_app.js b/docs/pages/_app.js
@@ -359,13 +359,6 @@ export function reportWebVitals({ id, name, label, delta, value }) {
     return;
   }
 
-  window.ga('send', 'event', {
-    eventCategory: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
-    eventAction: name,
-    eventValue: Math.round(name === 'CLS' ? value * 1000 : value), // values must be integers
-    eventLabel: id, // id unique to current page load
-    nonInteraction: true, // avoids affecting bounce rate.
-  });
   window.gtag('event', name, {
     value: delta,
     metric_label: label === 'web-vital' ? 'Web Vitals' : 'Next.js custom metric',
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
@@ -34,9 +34,6 @@ if (process.env.NODE_ENV === 'production') {
 const PRODUCTION_GA =
   process.env.DEPLOY_ENV === 'production' || process.env.DEPLOY_ENV === 'staging';
 
-// TODO remove https://support.google.com/analytics/answer/11986666
-const GOOGLE_ANALYTICS_ID = PRODUCTION_GA ? 'UA-106598593-2' : 'UA-106598593-3';
-
 const GOOGLE_ANALYTICS_ID_V4 = PRODUCTION_GA ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';
 
 export default class MyDocument extends Document {
@@ -176,11 +173,6 @@ export default class MyDocument extends Document {
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: `
-window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-window.ga('create','${GOOGLE_ANALYTICS_ID}',{
-  sampleRate: ${PRODUCTION_GA ? 80 : 100},
-});
-
 window.dataLayer = window.dataLayer || [];
 function gtag(){dataLayer.push(arguments);}
 window.gtag = gtag;
diff --git a/docs/src/components/header/HeaderNavDropdown.tsx b/docs/src/components/header/HeaderNavDropdown.tsx
@@ -113,7 +113,7 @@ const DOCS = [
     name: 'MUI Toolpad',
     description: 'Low-code admin builder.',
     href: ROUTES.toolpadDocs,
-    chip: 'Alpha',
+    chip: 'Beta',
   },
 ];
 
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
@@ -88,12 +88,7 @@ class AdErrorBoundary extends React.Component {
     // send explicit `'null'`
     const eventLabel = String(this.props.eventLabel);
     // TODO: Use proper error monitoring service (e.g. Sentry) instead
-    window.ga('send', {
-      hitType: 'event',
-      eventCategory: 'ad',
-      eventAction: 'crash',
-      eventLabel,
-    });
+
     window.gtag('event', 'ad', {
       eventAction: 'crash',
       eventLabel,
@@ -199,12 +194,6 @@ export default function Ad() {
     }
 
     const delay = setTimeout(() => {
-      window.ga('send', {
-        hitType: 'event',
-        eventCategory: 'ad',
-        eventAction: 'display',
-        eventLabel,
-      });
       window.gtag('event', 'ad', {
         eventAction: 'display',
         eventLabel,
diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
@@ -2,7 +2,6 @@ import * as React from 'react';
 import { useTheme } from '@mui/material/styles';
 import useMediaQuery from '@mui/material/useMediaQuery';
 import { useRouter } from 'next/router';
-import loadScript from 'docs/src/modules/utils/loadScript';
 import { useNoSsrCodeVariant } from 'docs/src/modules/utils/codeVariant';
 import { useNoSsrCodeStyling } from 'docs/src/modules/utils/codeStylingSolution';
 import { useUserLanguage } from 'docs/src/modules/utils/i18n';
@@ -30,12 +29,6 @@ function handleClick(event) {
         return;
       }
 
-      window.ga('send', {
-        hitType: 'event',
-        eventCategory: category,
-        eventAction: element.getAttribute('data-ga-event-action'),
-        eventLabel: element.getAttribute('data-ga-event-label'),
-      });
       window.gtag('event', category, {
         eventAction: element.getAttribute('data-ga-event-action'),
         eventLabel: element.getAttribute('data-ga-event-label'),
@@ -56,14 +49,11 @@ let boundDataGaListener = false;
  */
 function GoogleAnalytics() {
   React.useEffect(() => {
-    loadScript('https://www.google-analytics.com/analytics.js', document.querySelector('head'));
-
     if (!boundDataGaListener) {
       boundDataGaListener = true;
       document.addEventListener('click', handleClick);
     }
   }, []);
-
   const router = useRouter();
   const timeout = React.useRef();
 
@@ -73,8 +63,6 @@ function GoogleAnalytics() {
     clearTimeout(timeout.current);
     timeout.current = setTimeout(() => {
       const { canonicalAsServer } = pathnameToLanguage(window.location.pathname);
-      window.ga('set', { page: canonicalAsServer });
-      window.ga('send', { hitType: 'pageview' });
 
       // https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag
       window.gtag('event', 'page_view', {
@@ -88,15 +76,13 @@ function GoogleAnalytics() {
 
   const codeVariant = useNoSsrCodeVariant();
   React.useEffect(() => {
-    window.ga('set', 'dimension1', codeVariant);
     window.gtag('set', 'user_properties', {
       codeVariant,
     });
   }, [codeVariant]);
 
   const userLanguage = useUserLanguage();
   React.useEffect(() => {
-    window.ga('set', 'dimension2', userLanguage);
     window.gtag('set', 'user_properties', {
       userLanguage,
     });
@@ -109,7 +95,6 @@ function GoogleAnalytics() {
      */
     function trackDevicePixelRation() {
       const devicePixelRatio = Math.round(window.devicePixelRatio * 10) / 10;
-      window.ga('set', 'dimension3', devicePixelRatio);
       window.gtag('set', 'user_properties', {
         devicePixelRatio,
       });
@@ -135,14 +120,12 @@ function GoogleAnalytics() {
   const colorScheme = theme.palette.mode;
 
   React.useEffect(() => {
-    window.ga('set', 'dimension4', colorSchemeOS);
     window.gtag('set', 'user_properties', {
       colorSchemeOS,
     });
   }, [colorSchemeOS]);
 
   React.useEffect(() => {
-    window.ga('set', 'dimension5', colorScheme);
     window.gtag('set', 'user_properties', {
       colorScheme,
     });
diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.js b/packages/mui-material/src/ImageListItem/ImageListItem.js
@@ -101,6 +101,7 @@ const ImageListItem = React.forwardRef(function ImageListItem(inProps, ref) {
         gridColumnEnd: variant !== 'masonry' ? `span ${cols}` : undefined,
         gridRowEnd: variant !== 'masonry' ? `span ${rows}` : undefined,
         marginBottom: variant === 'masonry' ? gap : undefined,
+        breakInside: variant === 'masonry' ? 'avoid' : undefined,
         ...style,
       }}
       ownerState={ownerState}
diff --git a/packages/mui-system/src/Box/Box.test.js b/packages/mui-system/src/Box/Box.test.js
@@ -2,7 +2,7 @@
 import * as React from 'react';
 import { expect } from 'chai';
 import { createRenderer, describeConformance } from 'test/utils';
-import { Box } from '@mui/system';
+import { Box, createTheme, ThemeProvider } from '@mui/system';
 
 describe('<Box />', () => {
   const { render } = createRenderer();
@@ -279,4 +279,34 @@ describe('<Box />', () => {
 
     expect(getByTestId('regular-box')).to.have.class('MuiBox-root');
   });
+
+  describe('prop: maxWidth', () => {
+    it('should resolve breakpoints with custom units', function test() {
+      const isJSDOM = /jsdom/.test(window.navigator.userAgent);
+
+      if (isJSDOM) {
+        this.skip();
+      }
+
+      const theme = createTheme({
+        breakpoints: {
+          unit: 'rem',
+          values: {
+            xs: 10,
+          },
+        },
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Box maxWidth="xs" />,
+        </ThemeProvider>,
+      );
+
+      expect(container.firstChild).toHaveComputedStyle({
+        // 10rem x 16px = 160px
+        maxWidth: '160px',
+      });
+    });
+  });
 });
diff --git a/packages/mui-system/src/sizing.js b/packages/mui-system/src/sizing.js
@@ -16,8 +16,21 @@ export const maxWidth = (props) => {
     const styleFromPropValue = (propValue) => {
       const breakpoint =
         props.theme?.breakpoints?.values?.[propValue] || breakpointsValues[propValue];
+
+      if (!breakpoint) {
+        return {
+          maxWidth: sizingTransform(propValue),
+        };
+      }
+
+      if (props.theme?.breakpoints?.unit !== 'px') {
+        return {
+          maxWidth: `${breakpoint}${props.theme.breakpoints.unit}`,
+        };
+      }
+
       return {
-        maxWidth: breakpoint || sizingTransform(propValue),
+        maxWidth: breakpoint,
       };
     };
     return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
diff --git a/packages/mui-system/src/sizing.test.js b/packages/mui-system/src/sizing.test.js
diff --git a/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/mui-system/src/styleFunctionSx/styleFunctionSx.test.js
