Merge branch 'master' into deprecate-composed-classes

apps/pigment-css-next-app/package.json

@@ -24,7 +24,7 @@
   },
   "devDependencies": {
     "@pigment-css/nextjs-plugin": "0.0.29",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "eslint": "^8.57.1",

docs/data/material/guides/composition/composition.md

@@ -65,6 +65,10 @@ If you added another `className` via the `slotProps` prop on the Custom Tooltip
 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"`.
 :::
 
+:::info
+`style` object are shallow merged rather than replacing one another. The style keys from the first argument have higher priority.
+:::
+
 ## Component prop
 
 Material UI allows you to change the root element that will be rendered via a prop called `component`.

docs/package.json

@@ -124,7 +124,7 @@
     "@types/css-mediaquery": "^0.1.4",
     "@types/gtag.js": "^0.0.20",
     "@types/json2mq": "^0.2.2",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",

package.json

@@ -99,7 +99,7 @@
   },
   "dependencies": {
     "@googleapis/sheets": "^9.3.1",
-    "@netlify/functions": "^2.8.2",
+    "@netlify/functions": "^3.0.0",
     "@slack/bolt": "^4.2.0",
     "execa": "^9.5.2",
     "google-auth-library": "^9.15.0"
@@ -131,7 +131,7 @@
     "@types/fs-extra": "^11.0.4",
     "@types/lodash": "^4.17.14",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/react": "^19.0.2",
     "@types/yargs": "^17.0.33",
     "@typescript-eslint/eslint-plugin": "^7.18.0",
@@ -198,7 +198,7 @@
     "vitest-fail-on-console": "^0.7.1",
     "webpack": "^5.97.1",
     "webpack-bundle-analyzer": "^4.10.2",
-    "webpack-cli": "^5.1.4",
+    "webpack-cli": "^6.0.1",
     "yargs": "^17.7.2"
   },
   "packageManager": "[email protected]",
@@ -216,7 +216,7 @@
     "@definitelytyped/header-parser": "^0.2.16",
     "@definitelytyped/typescript-versions": "^0.1.6",
     "@definitelytyped/utils": "^0.1.8",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "cross-fetch": "^4.1.0",
     "@pigment-css/react": "0.0.29",
     "@pigment-css/unplugin": "0.0.29",

packages-internal/scripts/package.json

@@ -42,7 +42,7 @@
     "@types/chai": "^4.3.20",
     "@types/doctrine": "^0.0.9",
     "@types/lodash": "^4.17.14",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/react": "^19.0.2",
     "@types/uuid": "^10.0.0",
     "chai": "^4.5.0",

packages/api-docs-builder-core/package.json

@@ -17,7 +17,7 @@
   "devDependencies": {
     "@types/chai": "^4.3.20",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/sinon": "^17.0.3",
     "chai": "^4.5.0",
     "sinon": "^19.0.2",

packages/api-docs-builder/package.json

@@ -32,7 +32,7 @@
     "@types/doctrine": "^0.0.9",
     "@types/mdast": "4.0.4",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/react-docgen": "workspace:*",
     "@types/sinon": "^17.0.3",
     "chai": "^4.5.0",

packages/mui-docs/package.json

@@ -45,7 +45,7 @@
     "@mui/icons-material": "workspace:*",
     "@mui/material": "workspace:*",
     "@types/gtag.js": "^0.0.20",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.2",
     "next": "^15.1.3",

packages/mui-docs/src/MarkdownElement/MarkdownElement.tsx

@@ -559,6 +559,9 @@ const Root = styled('div')(
       transition: theme.transitions.create(['background', 'borderColor', 'display'], {
         duration: theme.transitions.duration.shortest,
       }),
+      '@media (max-width: 640px)': {
+        display: 'none',
+      },
       '& .MuiCode-copied-label': {
         display: 'none',
       },

packages/mui-material/src/utils/mergeSlotProps.test.ts

@@ -1,10 +1,12 @@
+import * as React from 'react';
 import { expect } from 'chai';
 
 import mergeSlotProps from './mergeSlotProps';
 
 type OwnerState = {
   className: string;
   'aria-label'?: string;
+  style?: React.CSSProperties;
 };
 
 describe('utils/index.js', () => {
@@ -21,6 +23,27 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge styles', () => {
+      expect(
+        mergeSlotProps<{ style: React.CSSProperties }>(
+          { style: { color: 'red' } },
+          { style: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        style: { color: 'red', backgroundColor: 'blue' },
+      });
+
+      // external styles should override
+      expect(
+        mergeSlotProps<{ style: React.CSSProperties }>(
+          { style: { backgroundColor: 'red' } },
+          { style: { backgroundColor: 'blue' } },
+        ),
+      ).to.deep.equal({
+        style: { backgroundColor: 'red' },
+      });
+    });
+
     it('external slot props should override', () => {
       expect(
         mergeSlotProps<OwnerState>(
@@ -78,6 +101,35 @@ describe('utils/index.js', () => {
       });
     });
 
+    it('merge styles for callbacks', () => {
+      expect(
+        mergeSlotProps(
+          () => ({
+            style: { color: 'red' },
+          }),
+          () => ({
+            style: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        style: { color: 'red', backgroundColor: 'blue' },
+      });
+
+      // external styles should override
+      expect(
+        mergeSlotProps(
+          () => ({
+            style: { backgroundColor: 'red' },
+          }),
+          () => ({
+            style: { backgroundColor: 'blue' },
+          }),
+        )(),
+      ).to.deep.equal({
+        style: { backgroundColor: 'red' },
+      });
+    });
+
     it('external callback should be called with default slot props', () => {
       expect(
         mergeSlotProps<(ownerState: OwnerState) => OwnerState>(

packages/mui-material/src/utils/mergeSlotProps.ts

@@ -28,6 +28,10 @@ export default function mergeSlotProps<
         ...defaultSlotPropsValue,
         ...externalSlotPropsValue,
         ...(!!className && { className }),
+        ...(defaultSlotPropsValue?.style &&
+          externalSlotPropsValue?.style && {
+            style: { ...defaultSlotPropsValue.style, ...externalSlotPropsValue.style },
+          }),
       };
     }) as U;
   }
@@ -39,5 +43,9 @@ export default function mergeSlotProps<
     ...defaultSlotProps,
     ...externalSlotProps,
     ...(!!className && { className }),
+    ...((defaultSlotProps as Record<string, any>)?.style &&
+      externalSlotProps?.style && {
+        style: { ...(defaultSlotProps as Record<string, any>).style, ...externalSlotProps.style },
+      }),
   } as U;
 }

packages/mui-utils/package.json

@@ -50,7 +50,7 @@
     "@mui/types": "workspace:^",
     "@types/chai": "^4.3.20",
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.10",
+    "@types/node": "^20.17.12",
     "@types/react": "^19.0.2",
     "@types/react-dom": "^19.0.2",
     "@types/react-is": "^19.0.0",

packages/rsc-builder/package.json

@@ -9,6 +9,6 @@
   },
   "devDependencies": {
     "@types/mocha": "^10.0.10",
-    "@types/node": "^20.17.10"
+    "@types/node": "^20.17.12"
   }
 }