Merge branch 'master' into fix-number-input-44963

mui · Jan 7, 2025 · d27d34a · d27d34a
2 parents c424c72 + 0221d17
commit d27d34a
Show file tree

Hide file tree

Showing 30 changed files with 441 additions and 194 deletions.
diff --git a/benchmark/package.json b/benchmark/package.json
@@ -34,7 +34,7 @@
     "react-redux": "^9.2.0",
     "redux": "^5.0.1",
     "serve-handler": "^6.1.6",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.14",
     "styled-system": "^5.1.5",
     "theme-ui": "^0.17.1",
     "webpack": "^5.97.1"

diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md
@@ -49,7 +49,7 @@ Fontsource can be configured to load specific subsets, weights, and styles. Mate
 
 ### Google Web Fonts
 
-To install Roboto through the Google Web Fonts CDN, add the following code inside your project's <head /> tag:
+To install Roboto through the Google Web Fonts CDN, add the following code inside your project's `<head />` tag:
 
 ```html
 <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/docs/data/material/getting-started/design-resources/design-resources.md b/docs/data/material/getting-started/design-resources/design-resources.md
@@ -4,7 +4,7 @@
 
 ## Design Kits
 
-Material UI component designs are available for Figma, Sketch, and Adobe XD, providing accurate representations using shared terminology for all states, variants, and permutations of each component.
+Material UI component designs are available for Figma and Sketch, providing accurate representations using shared terminology for all states, variants, and permutations of each component.
 
 The design kits are composed of over 1,500 unique elements built to speed up the development process and ease communication for teams of designers and developers using the library.
 

diff --git a/docs/data/material/guides/composition/composition.md b/docs/data/material/guides/composition/composition.md
@@ -22,6 +22,49 @@ WrappedIcon.muiName = Icon.muiName;
 
 {{"demo": "Composition.js"}}
 
+### Forwarding slot props
+
+Use the `mergeSlotProps` utility function to merge custom props with the slot props.
+If the arguments are functions then they'll be resolved before merging, and the result from the first argument will override the second.
+
+```jsx
+import Tooltip, { TooltipProps } from '@mui/material/Tooltip';
+import { mergeSlotProps } from '@mui/material/utils';
+
+export const CustomTooltip = (props: TooltipProps) => {
+  const { children, title, sx: sxProps } = props;
+
+  return (
+    <Tooltip
+      {...props}
+      title={<Box sx={{ p: 4 }}>{title}</Box>}
+      slotProps={{
+        ...props.slotProps,
+        popper: mergeSlotProps(props.slotProps?.popper, {
+          className: 'custom-tooltip-popper',
+          disablePortal: true,
+          placement: 'top',
+        }),
+      }}
+    >
+      {children}
+    </Tooltip>
+  );
+};
+```
+
+:::info
+`className` values are concatenated rather than overriding one another.
+In the snippet above, the `custom-tooltip-popper` class is applied to the Tooltip's popper slot.
+If you added another `className` via the `slotProps` prop on the Custom Tooltip—as shown below—then both would be present on the rendered popper slot:
+
+```js
+<CustomTooltip slotProps={{ popper: { className: 'foo' } }} />
+```
+
+The popper slot in the original example would now have both classes applied to it, in addition to any others that may be present: `"[…] custom-tooltip-popper foo"`.
+:::
+
 ## Component prop
 
 Material UI allows you to change the root element that will be rendered via a prop called `component`.

diff --git a/docs/package.json b/docs/package.json
@@ -105,7 +105,7 @@
     "react-virtuoso": "^4.12.3",
     "react-window": "^1.8.11",
     "rimraf": "^6.0.1",
-    "styled-components": "^6.1.13",
+    "styled-components": "^6.1.14",
     "stylis": "4.2.0",
     "stylis-plugin-rtl": "^2.1.1",
     "use-count-up": "^3.0.1",
@@ -135,7 +135,7 @@
     "chai": "^4.5.0",
     "cross-fetch": "^4.1.0",
     "gm": "^1.25.0",
-    "marked": "^15.0.4",
+    "marked": "^15.0.5",
     "playwright": "^1.48.2",
     "prettier": "^3.4.2",
     "tailwindcss": "^3.4.17",

diff --git a/docs/public/static/branding/design-kits/adobexd-logo.svg b/docs/public/static/branding/design-kits/adobexd-logo.svg
diff --git a/docs/src/components/home/DesignKits.tsx b/docs/src/components/home/DesignKits.tsx
@@ -66,7 +66,7 @@ const Anchor = styled('a')(({ theme }) => [
 
 const DesignToolLink = React.forwardRef<
   HTMLAnchorElement,
-  React.PropsWithChildren<{ brand: 'figma' | 'sketch' | 'adobexd' }>
+  React.PropsWithChildren<{ brand: 'figma' | 'sketch' }>
 >(function DesignToolLink(props, ref) {
   const { brand, ...other } = props;
   return (
@@ -79,8 +79,6 @@ const DesignToolLink = React.forwardRef<
             'https://mui.com/store/items/figma-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
           sketch:
             'https://mui.com/store/items/sketch-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
-          adobexd:
-            'https://mui.com/store/items/adobe-xd-react/?utm_source=marketing&utm_medium=referral&utm_campaign=home-products',
         }[brand]
       }
       target="_blank"
@@ -91,7 +89,7 @@ const DesignToolLink = React.forwardRef<
 
 const DesignToolLogo = React.forwardRef<
   HTMLImageElement,
-  { brand: 'figma' | 'sketch' | 'adobexd' } & AvatarProps
+  { brand: 'figma' | 'sketch' } & AvatarProps
 >(function DesignToolLogo({ brand, ...props }, ref) {
   return (
     <Box
@@ -197,7 +195,7 @@ export function DesignKitImagesSet2({
 }
 
 export function DesignKitTools({ disableLink, ...props }: { disableLink?: boolean } & BoxProps) {
-  function renderTool(brand: 'figma' | 'sketch' | 'adobexd') {
+  function renderTool(brand: 'figma' | 'sketch') {
     if (disableLink) {
       return <DesignToolLogo brand={brand} />;
     }
@@ -229,7 +227,6 @@ export function DesignKitTools({ disableLink, ...props }: { disableLink?: boolea
     >
       <FadeDelay delay={200}>{renderTool('figma')}</FadeDelay>
       <FadeDelay delay={400}>{renderTool('sketch')}</FadeDelay>
-      <FadeDelay delay={600}>{renderTool('adobexd')}</FadeDelay>
     </Box>
   );
 }

diff --git a/docs/src/components/productDesignKit/DesignKitDemo.tsx b/docs/src/components/productDesignKit/DesignKitDemo.tsx
@@ -140,11 +140,6 @@ export function MaterialDesignKitInfo() {
             alt="Sketch logo."
             loading="lazy"
           />
-          <img
-            src="/static/branding/design-kits/adobexd-logo.svg"
-            alt="Adobe XD logo."
-            loading="lazy"
-          />
         </Box>
       </Box>
       <Typography variant="body2" sx={{ color: 'text.secondary', mb: 2 }}>

diff --git a/docs/src/components/productDesignKit/DesignKitFAQ.tsx b/docs/src/components/productDesignKit/DesignKitFAQ.tsx
@@ -68,11 +68,11 @@ const faqData = [
     ),
   },
   {
-    summary: 'Figma or Sketch or Adobe XD?',
+    summary: 'Figma or Sketch?',
     detail: (
       <React.Fragment>
-        We aim to keep feature parity between the Figma, Sketch, and Adobe XD kits where possible.
-        We have a 50% off coupon for past customers who want to switch between them.
+        We aim to keep feature parity between the Figma and Sketch kits where possible. We have a
+        50% off coupon for past customers who want to switch between them.
       </React.Fragment>
     ),
   },

diff --git a/docs/src/modules/components/AdobeXDIcon.js b/docs/src/modules/components/AdobeXDIcon.js
diff --git a/docs/src/modules/components/MaterialUIDesignResources.js b/docs/src/modules/components/MaterialUIDesignResources.js
@@ -29,26 +29,13 @@ const content = [
       />
     ),
   },
-  {
-    title: 'Material UI for Adobe XD',
-    link: 'https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=installation-adobe-xd',
-    svg: (
-      <img
-        src={`/static/branding/design-kits/adobexd-logo.svg`}
-        alt="Adobe XD logo"
-        loading="lazy"
-        width="36"
-        height="36"
-      />
-    ),
-  },
 ];
 
 export default function MaterialUIDesignResources() {
   return (
     <Grid container spacing={2}>
       {content.map(({ svg, title, link }) => (
-        <Grid key={title} size={{ xs: 12, sm: 4 }}>
+        <Grid key={title} size={{ xs: 12, sm: 6 }}>
           <InfoCard classNameTitle="algolia-lvl3" link={link} title={title} svg={svg} />
         </Grid>
       ))}

diff --git a/package.json b/package.json
@@ -129,7 +129,7 @@
     "@playwright/test": "1.48.2",
     "@types/babel__core": "^7.20.5",
     "@types/fs-extra": "^11.0.4",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.14",
     "@types/mocha": "^10.0.10",
     "@types/node": "^20.17.10",
     "@types/react": "^19.0.2",

diff --git a/packages-internal/scripts/package.json b/packages-internal/scripts/package.json
@@ -41,7 +41,7 @@
     "@types/babel__core": "^7.20.5",
     "@types/chai": "^4.3.20",
     "@types/doctrine": "^0.0.9",
-    "@types/lodash": "^4.17.13",
+    "@types/lodash": "^4.17.14",
     "@types/node": "^20.17.10",
     "@types/react": "^19.0.2",
     "@types/uuid": "^10.0.0",

diff --git a/packages/markdown/package.json b/packages/markdown/package.json
@@ -22,7 +22,7 @@
   "dependencies": {
     "@babel/runtime": "^7.26.0",
     "lodash": "^4.17.21",
-    "marked": "^15.0.4",
+    "marked": "^15.0.5",
     "prismjs": "^1.29.0"
   },
   "devDependencies": {

diff --git a/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx b/packages/mui-docs/src/ComponentLinkHeader/ComponentLinkHeader.tsx
@@ -7,7 +7,6 @@ import { styled } from '@mui/material/styles';
 import { MarkdownHeaders } from '@mui/internal-markdown';
 import SketchIcon from '../svgIcons/SketchIcon';
 import FigmaIcon from '../svgIcons/FigmaIcon';
-import AdobeXDIcon from '../svgIcons/AdobeXDIcon';
 import BundleSizeIcon from '../svgIcons/BundleSizeIcon';
 import W3CIcon from '../svgIcons/W3CIcon';
 import MaterialDesignIcon from '../svgIcons/MaterialDesignIcon';
@@ -176,42 +175,23 @@ export function ComponentLinkHeader(props: ComponentLinkHeaderProps) {
             />
           </li>
           {packageName === '@mui/joy' ? null : (
-            <React.Fragment>
-              <li>
-                <Chip
-                  clickable
-                  role={undefined}
-                  component="a"
-                  size="small"
-                  variant="outlined"
-                  rel="nofollow"
-                  href="https://mui.com/store/items/adobe-xd-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header"
-                  icon={<AdobeXDIcon />}
-                  data-ga-event-category="ComponentLinkHeader"
-                  data-ga-event-action="click"
-                  data-ga-event-label="Adobe XD"
-                  data-ga-event-split="0.1"
-                  label="Adobe"
-                />
-              </li>
-              <li>
-                <Chip
-                  clickable
-                  role={undefined}
-                  component="a"
-                  size="small"
-                  variant="outlined"
-                  rel="nofollow"
-                  href="https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header"
-                  icon={<SketchIcon />}
-                  data-ga-event-category="ComponentLinkHeader"
-                  data-ga-event-action="click"
-                  data-ga-event-label="Sketch"
-                  data-ga-event-split="0.1"
-                  label="Sketch"
-                />
-              </li>
-            </React.Fragment>
+            <li>
+              <Chip
+                clickable
+                role={undefined}
+                component="a"
+                size="small"
+                variant="outlined"
+                rel="nofollow"
+                href="https://mui.com/store/items/sketch-react/?utm_source=docs&utm_medium=referral&utm_campaign=component-link-header"
+                icon={<SketchIcon />}
+                data-ga-event-category="ComponentLinkHeader"
+                data-ga-event-action="click"
+                data-ga-event-label="Sketch"
+                data-ga-event-split="0.1"
+                label="Sketch"
+              />
+            </li>
           )}
         </React.Fragment>
       )}

diff --git a/packages/mui-docs/src/svgIcons/AdobeXDIcon.tsx b/packages/mui-docs/src/svgIcons/AdobeXDIcon.tsx
diff --git a/packages/mui-material/src/Link/getTextDecoration.test.js b/packages/mui-material/src/Link/getTextDecoration.test.js
@@ -36,6 +36,26 @@ describe('getTextDecoration', () => {
       );
       expect(() => getTextDecoration({ theme, ownerState: { color: 'yellow' } })).to.throw();
     });
+
+    it('work with a custom palette', () => {
+      const customTheme = createTheme({
+        colorSchemes: {
+          light: {
+            palette: {
+              myColor: theme.palette.augmentColor({ color: { main: '#bbbbbb' } }),
+            },
+          },
+          dark: {
+            palette: {
+              myColor: theme.palette.augmentColor({ color: { main: '#aaaaaa' } }),
+            },
+          },
+        },
+      });
+      expect(getTextDecoration({ theme: customTheme, ownerState: { color: 'myColor' } })).to.equal(
+        'rgba(187, 187, 187, 0.4)',
+      );
+    });
   });
 
   describe('CSS variables', () => {

diff --git a/packages/mui-material/src/Link/getTextDecoration.ts b/packages/mui-material/src/Link/getTextDecoration.ts
@@ -10,9 +10,12 @@ const getTextDecoration = <T extends Theme>({
   ownerState: { color: string };
 }) => {
   const transformedColor = ownerState.color;
-  const color = (getPath(theme, `palette.${transformedColor}`, false) ||
+  // check the `main` color first for a custom palette, then fallback to the color itself
+  const color = (getPath(theme, `palette.${transformedColor}.main`, false) ||
+    getPath(theme, `palette.${transformedColor}`, false) ||
     ownerState.color) as string;
-  const channelColor = getPath(theme, `palette.${transformedColor}Channel`) as string | null;
+  const channelColor = (getPath(theme, `palette.${transformedColor}.mainChannel`) ||
+    getPath(theme, `palette.${transformedColor}Channel`)) as string | null;
   if ('vars' in theme && channelColor) {
     return `rgba(${channelColor} / 0.4)`;
   }

diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
@@ -3,6 +3,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import deepmerge from '@mui/utils/deepmerge';
+import composeClasses from '@mui/utils/composeClasses';
 import getReactElementRef from '@mui/utils/getReactElementRef';
 import SelectInput from './SelectInput';
 import formControlState from '../FormControl/formControlState';
@@ -16,11 +17,18 @@ import { useDefaultProps } from '../DefaultPropsProvider';
 import useForkRef from '../utils/useForkRef';
 import { styled } from '../zero-styled';
 import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { getSelectUtilityClasses } from './selectClasses';
 
 const useUtilityClasses = (ownerState) => {
   const { classes } = ownerState;
 
-  return classes;
+  const slots = {
+    root: ['root'],
+  };
+
+  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
+
+  return { ...classes, ...composedClasses };
 };
 
 const styledRootConfig = {