Merge branch 'master' into i43876

.circleci/config.yml

@@ -1,6 +1,6 @@
 version: 2.1
 orbs:
-  aws-cli: circleci/[email protected].1
+  aws-cli: circleci/[email protected].2
   aws-s3: circleci/[email protected]
 
 parameters:

.eslintrc.js

@@ -5,6 +5,12 @@
  */
 
 const path = require('path');
+const a11yBase = require('eslint-config-airbnb/rules/react-a11y');
+
+const controlHasAssociatedLabelConfig = a11yBase.rules['jsx-a11y/control-has-associated-label'];
+
+const controlHasAssociatedLabelOptions =
+  typeof controlHasAssociatedLabelConfig[1] === 'object' ? controlHasAssociatedLabelConfig[1] : {};
 
 const OneLevelImportMessage = [
   'Prefer one level nested imports to avoid bundling everything in dev mode or breaking CJS/ESM split.',
@@ -35,11 +41,13 @@ const NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED = [
     group: [
       '@mui/*/*/*',
       '@pigment-css/*/*/*',
-      '@base_ui/*/*/*',
+      '@base-ui/*/*/*',
       // Allow any import depth with any internal packages
       '!@mui/internal-*/**',
-      // TODO delete, @mui/docs should be @mui/internal-docs
-      '!@mui/docs/**',
+      // TODO delete
+      '@base-ui-components/*/*/*', // Wait for migration to @base-ui/
+      '@base_ui/*/*/*', // Legacy, moved to @base-ui-components/
+      '!@mui/docs/**', // @mui/docs should be @mui/internal-docs
     ],
     message: OneLevelImportMessage,
   },
@@ -158,6 +166,16 @@ module.exports = /** @type {Config} */ ({
     ],
     // We are a library, we need to support it too
     'jsx-a11y/no-autofocus': 'off',
+    // Remove when issues are fixed
+    // https://github.com/jsx-eslint/eslint-plugin-jsx-a11y/issues/959
+    // https://github.com/airbnb/javascript/issues/3069
+    'jsx-a11y/control-has-associated-label': [
+      'error',
+      {
+        ...controlHasAssociatedLabelOptions,
+        ignoreElements: [...(controlHasAssociatedLabelOptions.ignoreElements || []), 'th', 'td'],
+      },
+    ],
 
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/rules-of-use-theme-variants': 'error',
@@ -525,6 +543,7 @@ module.exports = /** @type {Config} */ ({
         'import/order': 'off',
         // Reset the default until https://github.com/jsx-eslint/eslint-plugin-react/issues/3672 is fixed.
         'react/jsx-no-target-blank': ['error', { allowReferrer: false }],
+        'react/prop-types': 'off',
       },
     },
     {

.github/workflows/codeql.yml

@@ -19,7 +19,7 @@ jobs:
         uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.2.2
       # Initializes the CodeQL tools for scanning.
       - name: Initialize CodeQL
-        uses: github/codeql-action/init@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
+        uses: github/codeql-action/init@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
         with:
           languages: typescript
           config-file: ./.github/codeql/codeql-config.yml
@@ -30,4 +30,4 @@ jobs:
           # Details on CodeQL's query packs refer to : https://docs.github.com/en/code-security/code-scanning/automatically-scanning-your-code-for-vulnerabilities-and-errors/configuring-code-scanning#using-queries-in-ql-packs
           # queries: security-extended,security-and-quality
       - name: Perform CodeQL Analysis
-        uses: github/codeql-action/analyze@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
+        uses: github/codeql-action/analyze@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9

.github/workflows/scorecards.yml

@@ -43,6 +43,6 @@ jobs:
 
       # Upload the results to GitHub's code scanning dashboard.
       - name: Upload to code-scanning
-        uses: github/codeql-action/upload-sarif@aa578102511db1f4524ed59b8cc2bae4f6e88195 # v3.27.6
+        uses: github/codeql-action/upload-sarif@df409f7d9260372bd5f19e5b04e83cb3c43714ae # v3.27.9
         with:
           sarif_file: results.sarif

CHANGELOG.md

@@ -1,5 +1,81 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.3.0
+
+<!-- generated comparing v6.2.1..master -->
+
+_Dec 23, 2024_
+
+A big thanks to the 11 contributors who made this release possible. Here are some highlights ✨:
+
+- Fix invalid HTML structure in the Accordion component (#44408) @ZeeshanTamboli
+  The HTML elements of the Accordion summary have been updated:
+  - the root element is now button (previously div).
+  - summary content and the icon wrapper are now span (previously div).
+    This will only impact you if you used the HTML element as selectors in your styles.
+
+### `@mui/[email protected]`
+
+- [Accordion] Fix invalid HTML inside heading (#44408) @ZeeshanTamboli
+- [useAutocomplete] Improve TS typing of `groupedOptions` prop (#44657) @lewxdev
+- Prevent `ownerState` propagation for transition slots (#44401) @ZeeshanTamboli
+- [StepContent] Add slots and slotProps (#44742) @sai6855
+- [TablePagination] Add the rest of `slots` and `slotProps`. (#44570) @siriwatknp
+
+### `@mui/[email protected]`
+
+- Set `before` directly without using prepend for global styles (#44648) @siriwatknp
+
+### Docs
+
+- [material-ui] Improve `theme.applyStyles()` docs (#44658) @DiegoAndai
+- [material-ui] Update MD callout (#43958) @aarongarciah
+
+### Core
+
+- Remove unnecessary conditional around `.muiName =` (#44071) @Janpot
+- [blog] Material UI: 2024 EOY updates blog post (#44722) @alelthomas
+- Fix quickstart command in pigment docs (#44806) @yash49
+- [docs-infra] Remove Next.js production profiler (#44823) @romgrk
+- [docs-infra] Remove no longer support `optimizeFonts` Next.js option (#44802) @LukasTy
+
+All contributors of this release in alphabetical order: @aarongarciah, @alelthomas, @DiegoAndai, @Janpot, @lewxdev, @LukasTy, @romgrk, @sai6855, @siriwatknp, @yash49, @ZeeshanTamboli
+
+## 6.2.1
+
+<!-- generated comparing v6.2.0..master -->
+
+_Dec 17, 2024_
+
+A big thanks to the 10 contributors who made this release possible.
+
+### `@mui/[email protected]`
+
+- Update `overridesResolver` return from object to array of styles (#44752) @siddhantantil39
+- [Pagination] Use correct `aria-current` value (#44753) @jacklaurencegaray
+- [Select] Set `aria-required` & `aria-invalid` on `combobox` instead of hidden input (#44731) @ben-pomelo
+
+### `@mui/[email protected]`
+
+- Warns if the hex color contains trailing space (#44538) @siriwatknp
+
+### Docs
+
+- [material-ui][Dialog] Fix crashing of DraggableDialog demo (#44747) @sai6855
+- [material-ui][TextField] Update `react-number-format` demo to use the recommended prop (#44743) @siriwatknp
+- [material-ui][TextField] Add size default prop to api docs (#44714) @sai6855
+- [material-ui][TextField] Add suffix shrink demo (#44744) @siriwatknp
+
+### Core
+
+- [api-docs-builder] Preserve multiline prop descriptions with `rawDescriptions` option (#44737) @vladmoroz
+- Fix running mocha related scripts on Windows locally (#44664) @ChristopherJamesL
+- Update `eslint-plugin-jsx-a11y` (#44701) @ZeeshanTamboli
+- Add documentation to `useThemeProps`, `deepmerge` and `composeClasses` functions (#44703) @JCQuintas
+- [examples] Add Theme Mode Switch to Next.js TS example (#43576) @TurtIeSocks
+
+All contributors of this release in alphabetical order: @ben-pomelo, @ChristopherJamesL, @jacklaurencegaray, @JCQuintas, @sai6855, @siddhantantil39, @siriwatknp, @TurtIeSocks, @vladmoroz, @ZeeshanTamboli
+
 ## 6.2.0
 
 <!-- generated comparing v6.1.10..master -->

CHANGELOG.old.md

@@ -3070,7 +3070,7 @@ A big thanks to the 25 contributors who made this release possible. Here are som
 - [docs-infra] Simplify product id handling (#37593) @oliviertassinari
 - [changelog] Add missing release date for v5.13.5 @oliviertassinari
 - [examples] Shell command fix in the readme file of material-next-ts example (#37675) @bablukpik
-- [examples] Next.js v13 app router with Material UI (#37315) @smo043
+- [examples] Next.js v13 App Router with Material UI (#37315) @smo043
 
 ### Core
 

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

@@ -23,10 +23,10 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.28",
-    "@types/node": "^20.17.9",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@pigment-css/nextjs-plugin": "0.0.29",
+    "@types/node": "^20.17.10",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "eslint": "^8.57.1",
     "typescript": "^5.7.2"
   },

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

@@ -21,15 +21,15 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "react-error-boundary": "^4.1.2",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "^6.28.1",
     "webfontloader": "^1.6.28"
   },
   "devDependencies": {
-    "@babel/preset-react": "^7.25.9",
+    "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.26.0",
-    "@pigment-css/vite-plugin": "0.0.28",
-    "@types/react": "^19.0.0",
-    "@types/react-dom": "^19.0.0",
+    "@pigment-css/vite-plugin": "0.0.29",
+    "@types/react": "^19.0.2",
+    "@types/react-dom": "^19.0.2",
     "@types/webfontloader": "^1.6.38",
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.4.49",

docs/data/about/teamMembers.json

@@ -245,7 +245,8 @@
     "title": "Talent & Culture Partner",
     "location": "Novi Sad, Serbia",
     "locationCountry": "rs",
-    "about": "🧠 Psychology geek, 🏂 amateur snowboarder, and 𐃡 pottery enthusiast."
+    "about": "🧠 Psychology geek, 🏂 amateur snowboarder, and 𐃡 pottery enthusiast.",
+    "github": "nadjakovacev"
   },
   {
     "name": "James Nelson",

docs/data/base/components/modal/SpringModal.js

@@ -80,6 +80,7 @@ const Fade = React.forwardRef(function Fade(props, ref) {
   });
 
   return (
+    // @ts-expect-error https://github.com/pmndrs/react-spring/issues/2341
     <animated.div ref={ref} style={style} {...other}>
       {children}
     </animated.div>

docs/data/base/components/modal/SpringModal.tsx

@@ -86,6 +86,7 @@ const Fade = React.forwardRef<HTMLDivElement, FadeProps>(function Fade(props, re
   });
 
   return (
+    // @ts-expect-error https://github.com/pmndrs/react-spring/issues/2341
     <animated.div ref={ref} style={style} {...other}>
       {children}
     </animated.div>

docs/data/base/components/transitions/ReactSpring.js

@@ -144,6 +144,7 @@ function ReactSpringTransition({ children }) {
     }
   }, [requestedEnter, api, onExited]);
 
+  // @ts-expect-error https://github.com/pmndrs/react-spring/issues/2341
   return <animated.div style={springs}>{children}</animated.div>;
 }
 

docs/data/base/components/transitions/ReactSpring.tsx

@@ -139,5 +139,6 @@ function ReactSpringTransition({ children }: React.PropsWithChildren<{}>) {
     }
   }, [requestedEnter, api, onExited]);
 
+  // @ts-expect-error https://github.com/pmndrs/react-spring/issues/2341
   return <animated.div style={springs}>{children}</animated.div>;
 }

docs/data/joy/customization/dark-mode/dark-mode.md

@@ -115,7 +115,7 @@ export default class MyDocument extends Document {
 
 ### Next.js App Router
 
-To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/building-your-application/routing/layouts-and-templates#root-layout-required) file in order to prevent flickering:
+To use the Joy UI API with a Next.js project with the App Router, add the following code to the [root layout](https://nextjs.org/docs/app/api-reference/file-conventions/layout#root-layouts) file in order to prevent flickering:
 
 ```jsx title="app/layout.js"
 import InitColorSchemeScript from '@mui/joy/InitColorSchemeScript';

docs/data/material/components/accordion/AccordionExpandDefault.js

@@ -14,7 +14,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Expanded by default</Typography>
+          <Typography component="span">Expanded by default</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -29,7 +29,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Header</Typography>
+          <Typography component="span">Header</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

docs/data/material/components/accordion/AccordionExpandDefault.tsx

@@ -14,7 +14,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Expanded by default</Typography>
+          <Typography component="span">Expanded by default</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -29,7 +29,7 @@ export default function AccordionExpandDefault() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Header</Typography>
+          <Typography component="span">Header</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

docs/data/material/components/accordion/AccordionExpandIcon.js

@@ -15,7 +15,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Accordion 1</Typography>
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -30,7 +30,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Accordion 2</Typography>
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

docs/data/material/components/accordion/AccordionExpandIcon.tsx

@@ -15,7 +15,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Accordion 1</Typography>
+          <Typography component="span">Accordion 1</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -30,7 +30,7 @@ export default function AccordionExpandIcon() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Accordion 2</Typography>
+          <Typography component="span">Accordion 2</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

docs/data/material/components/accordion/AccordionTransition.js

@@ -47,7 +47,7 @@ export default function AccordionTransition() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Custom transition using Fade</Typography>
+          <Typography component="span">Custom transition using Fade</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -62,7 +62,7 @@ export default function AccordionTransition() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Default transition using Collapse</Typography>
+          <Typography component="span">Default transition using Collapse</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>

docs/data/material/components/accordion/AccordionTransition.tsx

@@ -50,7 +50,7 @@ export default function AccordionTransition() {
           aria-controls="panel1-content"
           id="panel1-header"
         >
-          <Typography>Custom transition using Fade</Typography>
+          <Typography component="span">Custom transition using Fade</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>
@@ -65,7 +65,7 @@ export default function AccordionTransition() {
           aria-controls="panel2-content"
           id="panel2-header"
         >
-          <Typography>Default transition using Collapse</Typography>
+          <Typography component="span">Default transition using Collapse</Typography>
         </AccordionSummary>
         <AccordionDetails>
           <Typography>