Merge branch 'master' of https://github.com/mui/material-ui into fix/…

…link-custom-palette

docs/package.json

@@ -5,7 +5,7 @@
   "author": "MUI Team",
   "license": "MIT",
   "scripts": {
-    "build": "rimraf docs/export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build && pnpm build-sw",
+    "build": "rimraf ./export && cross-env NODE_ENV=production NODE_OPTIONS=--max_old_space_size=8192 next build && pnpm build-sw",
     "build:clean": "rimraf .next && pnpm build",
     "build-sw": "node ./scripts/buildServiceWorker.js",
     "dev": "next dev",
@@ -44,13 +44,13 @@
     "@mui/types": "workspace:^",
     "@mui/utils": "workspace:^",
     "@mui/x-charts": "7.23.2",
-    "@mui/x-data-grid": "7.23.3",
-    "@mui/x-data-grid-generator": "7.23.3",
-    "@mui/x-data-grid-premium": "7.23.3",
-    "@mui/x-data-grid-pro": "7.23.3",
+    "@mui/x-data-grid": "7.23.5",
+    "@mui/x-data-grid-generator": "7.23.5",
+    "@mui/x-data-grid-premium": "7.23.5",
+    "@mui/x-data-grid-pro": "7.23.5",
     "@mui/x-date-pickers": "7.23.3",
     "@mui/x-date-pickers-pro": "7.23.3",
-    "@mui/x-license": "7.23.2",
+    "@mui/x-license": "7.23.5",
     "@mui/x-tree-view": "7.23.2",
     "@popperjs/core": "^2.11.8",
     "@react-spring/web": "^9.7.5",
@@ -82,7 +82,7 @@
     "lz-string": "^1.5.0",
     "markdown-to-jsx": "^7.7.2",
     "material-ui-popup-state": "^5.3.3",
-    "next": "^15.1.2",
+    "next": "^15.1.3",
     "notistack": "3.0.1",
     "nprogress": "^0.2.0",
     "postcss": "^8.4.49",
@@ -95,7 +95,7 @@
     "react-imask": "^7.6.1",
     "react-intersection-observer": "^9.13.1",
     "react-is": "^19.0.0",
-    "react-number-format": "^5.4.2",
+    "react-number-format": "^5.4.3",
     "react-router": "^7.0.2",
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.14.1",

docs/pages/material-ui/api/table-sort-label.json

@@ -9,6 +9,17 @@
     },
     "hideSortIcon": { "type": { "name": "bool" }, "default": "false" },
     "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDownwardIcon" },
+    "slotProps": {
+      "type": {
+        "name": "shape",
+        "description": "{ icon?: func<br>&#124;&nbsp;object, root?: func<br>&#124;&nbsp;object }"
+      },
+      "default": "{}"
+    },
+    "slots": {
+      "type": { "name": "shape", "description": "{ icon?: elementType, root?: elementType }" },
+      "default": "{}"
+    },
     "sx": {
       "type": {
         "name": "union",
@@ -22,6 +33,20 @@
     "import TableSortLabel from '@mui/material/TableSortLabel';",
     "import { TableSortLabel } from '@mui/material';"
   ],
+  "slots": [
+    {
+      "name": "root",
+      "description": "The component that renders the root slot.",
+      "default": "span",
+      "class": "MuiTableSortLabel-root"
+    },
+    {
+      "name": "icon",
+      "description": "The component that renders the icon slot.",
+      "default": "ArrowDownwardIcon",
+      "class": "MuiTableSortLabel-icon"
+    }
+  ],
   "classes": [
     {
       "key": "active",
@@ -41,12 +66,6 @@
       "description": "Styles applied to the root element if `direction=\"desc\"`.",
       "isGlobal": false
     },
-    {
-      "key": "icon",
-      "className": "MuiTableSortLabel-icon",
-      "description": "Styles applied to the icon component.",
-      "isGlobal": false
-    },
     {
       "key": "iconDirectionAsc",
       "className": "MuiTableSortLabel-iconDirectionAsc",
@@ -60,12 +79,6 @@
       "description": "Styles applied to the icon component if `direction=\"desc\"`.",
       "isGlobal": false,
       "isDeprecated": true
-    },
-    {
-      "key": "root",
-      "className": "MuiTableSortLabel-root",
-      "description": "Styles applied to the root element.",
-      "isGlobal": false
     }
   ],
   "spread": true,

docs/translations/api-docs/table-sort-label/table-sort-label.json

@@ -9,6 +9,8 @@
     "direction": { "description": "The current sort direction." },
     "hideSortIcon": { "description": "Hide sort icon when active is false." },
     "IconComponent": { "description": "Sort icon to use." },
+    "slotProps": { "description": "The props used for each slot inside." },
+    "slots": { "description": "The components used for each slot inside." },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     }
@@ -29,7 +31,6 @@
       "nodeName": "the root element",
       "conditions": "<code>direction=\"desc\"</code>"
     },
-    "icon": { "description": "Styles applied to {{nodeName}}.", "nodeName": "the icon component" },
     "iconDirectionAsc": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the icon component",
@@ -41,7 +42,10 @@
       "nodeName": "the icon component",
       "conditions": "<code>direction=\"desc\"</code>",
       "deprecationInfo": "Combine the <a href=\"/material-ui/api/table-sort-label/#table-sort-label-classes-icon\">.MuiTableSortLabel-icon</a> and <a href=\"/material-ui/api/table-sort-label/#table-sort-label-classes-direction-desc\">.MuiTableSortLabel-directionDesc</a> classes instead. See <a href=\"/material-ui/migration/migrating-from-deprecated-apis/\">Migrating from deprecated APIs</a> for more details."
-    },
-    "root": { "description": "Styles applied to the root element." }
+    }
+  },
+  "slotDescriptions": {
+    "icon": "The component that renders the icon slot.",
+    "root": "The component that renders the root slot."
   }
 }

package.json

@@ -123,7 +123,7 @@
     "@mui/joy": "workspace:*",
     "@mui/material": "workspace:^",
     "@mui/utils": "workspace:^",
-    "@next/eslint-plugin-next": "^15.1.2",
+    "@next/eslint-plugin-next": "^15.1.3",
     "@octokit/rest": "^21.0.2",
     "@pigment-css/react": "0.0.29",
     "@playwright/test": "1.48.2",
@@ -145,9 +145,9 @@
     "babel-plugin-react-remove-properties": "^0.3.0",
     "babel-plugin-transform-inline-environment-variables": "^0.4.4",
     "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
-    "chalk": "^5.3.0",
+    "chalk": "^5.4.1",
     "compression-webpack-plugin": "^11.1.0",
-    "concurrently": "^9.1.0",
+    "concurrently": "^9.1.2",
     "cpy-cli": "^5.0.0",
     "cross-env": "^7.0.3",
     "danger": "^12.3.3",
@@ -162,7 +162,7 @@
     "eslint-plugin-jsx-a11y": "^6.10.2",
     "eslint-plugin-material-ui": "workspace:^",
     "eslint-plugin-mocha": "^10.5.0",
-    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-compiler": "0.0.0-experimental-75b9fd4-20240912",
     "eslint-plugin-react-hooks": "^5.0.0",
     "fast-glob": "^3.3.2",

packages/mui-docs/package.json

@@ -48,7 +48,7 @@
     "@types/node": "^20.17.10",
     "@types/prop-types": "^15.7.14",
     "@types/react": "^19.0.2",
-    "next": "^15.1.2",
+    "next": "^15.1.3",
     "react": "^19.0.0"
   },
   "peerDependencies": {

packages/mui-icons-material/package.json

@@ -54,7 +54,7 @@
     "@types/chai": "^4.3.20",
     "@types/react": "^19.0.2",
     "chai": "^4.5.0",
-    "chalk": "^5.3.0",
+    "chalk": "^5.4.1",
     "cross-fetch": "^4.0.0",
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",

packages/mui-joy/package.json

@@ -58,7 +58,7 @@
     "chai": "^4.5.0",
     "fast-glob": "^3.3.2",
     "lodash": "^4.17.21",
-    "next": "^15.1.2",
+    "next": "^15.1.3",
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "sinon": "^19.0.2"

packages/mui-material-nextjs/package.json

@@ -43,7 +43,7 @@
     "@emotion/react": "^11.13.5",
     "@emotion/server": "^11.11.0",
     "@types/react": "^19.0.2",
-    "next": "^15.1.2",
+    "next": "^15.1.3",
     "react": "^19.0.0"
   },
   "peerDependencies": {

packages/mui-material/src/TableSortLabel/TableSortLabel.d.ts

@@ -4,6 +4,48 @@ import { Theme } from '..';
 import { ExtendButtonBase, ExtendButtonBaseTypeMap } from '../ButtonBase';
 import { OverrideProps } from '../OverridableComponent';
 import { TableSortLabelClasses } from './tableSortLabelClasses';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+
+export interface TableSortLabelRootSlotPropsOverrides {}
+
+export interface TableSortLabelIconSlotPropsOverrides {}
+
+export interface TableSortLabelSlots {
+  /**
+   * The component that renders the root slot.
+   * @default span
+   */
+  root?: React.ElementType;
+  /**
+   * The component that renders the icon slot.
+   * @default ArrowDownwardIcon
+   */
+  icon?: React.ElementType;
+}
+
+export type TableSortLabelSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  TableSortLabelSlots,
+  {
+    /**
+     * Props forwarded to the root slot.
+     */
+    root: SlotProps<
+      React.ElementType<React.HTMLAttributes<HTMLSpanElement>>,
+      TableSortLabelRootSlotPropsOverrides,
+      TableSortLabelOwnerState
+    >;
+    /**
+     * Props forwarded to the icon slot.
+     */
+    icon: SlotProps<
+      React.ElementType<React.SVGAttributes<SVGSVGElement>>,
+      TableSortLabelIconSlotPropsOverrides,
+      TableSortLabelOwnerState
+    >;
+  }
+>;
+
+export interface TableSortLabelOwnerState extends TableSortLabelOwnProps {}
 
 export interface TableSortLabelOwnProps {
   /**
@@ -46,7 +88,7 @@ export type TableSortLabelTypeMap<
   AdditionalProps = {},
   RootComponent extends React.ElementType = 'span',
 > = ExtendButtonBaseTypeMap<{
-  props: AdditionalProps & TableSortLabelOwnProps;
+  props: AdditionalProps & TableSortLabelOwnProps & TableSortLabelSlotsAndSlotProps;
   defaultComponent: RootComponent;
 }>;
 

packages/mui-material/src/TableSortLabel/TableSortLabel.js

@@ -10,6 +10,7 @@ import memoTheme from '../utils/memoTheme';
 import { useDefaultProps } from '../DefaultPropsProvider';
 import capitalize from '../utils/capitalize';
 import tableSortLabelClasses, { getTableSortLabelUtilityClass } from './tableSortLabelClasses';
+import useSlot from '../utils/useSlot';
 
 const useUtilityClasses = (ownerState) => {
   const { classes, direction, active } = ownerState;
@@ -107,6 +108,8 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
     direction = 'asc',
     hideSortIcon = false,
     IconComponent = ArrowDownwardIcon,
+    slots = {},
+    slotProps = {},
     ...other
   } = props;
 
@@ -120,24 +123,31 @@ const TableSortLabel = React.forwardRef(function TableSortLabel(inProps, ref) {
 
   const classes = useUtilityClasses(ownerState);
 
+  const externalForwardedProps = {
+    slots,
+    slotProps,
+  };
+
+  const [RootSlot, rootProps] = useSlot('root', {
+    elementType: TableSortLabelRoot,
+    externalForwardedProps,
+    ownerState,
+    className: clsx(classes.root, className),
+    ref,
+  });
+
+  const [IconSlot, iconProps] = useSlot('icon', {
+    elementType: TableSortLabelIcon,
+    externalForwardedProps,
+    ownerState,
+    className: classes.icon,
+  });
+
   return (
-    <TableSortLabelRoot
-      className={clsx(classes.root, className)}
-      component="span"
-      disableRipple
-      ownerState={ownerState}
-      ref={ref}
-      {...other}
-    >
+    <RootSlot disableRipple component="span" {...rootProps} {...other}>
       {children}
-      {hideSortIcon && !active ? null : (
-        <TableSortLabelIcon
-          as={IconComponent}
-          className={clsx(classes.icon)}
-          ownerState={ownerState}
-        />
-      )}
-    </TableSortLabelRoot>
+      {hideSortIcon && !active ? null : <IconSlot as={IconComponent} {...iconProps} />}
+    </RootSlot>
   );
 });
 
@@ -178,6 +188,22 @@ TableSortLabel.propTypes /* remove-proptypes */ = {
    * @default ArrowDownwardIcon
    */
   IconComponent: PropTypes.elementType,
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    icon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    icon: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */

packages/mui-material/src/TableSortLabel/TableSortLabel.test.js

@@ -20,6 +20,11 @@ describe('<TableSortLabel />', () => {
     testDeepOverrides: { slotName: 'icon', slotClassName: classes.icon },
     refInstanceof: window.HTMLSpanElement,
     skip: ['componentProp', 'componentsProp'],
+    slots: {
+      icon: {
+        expectedClassName: classes.icon,
+      },
+    },
   }));
 
   it('should set the active class when active', () => {