Merge branch 'master' into fix/rating-test-with-user-event

mui · Jan 23, 2025 · 630b67d · 630b67d
2 parents b7804d9 + 44ba5f7
commit 630b67d
Show file tree

Hide file tree

Showing 185 changed files with 1,153 additions and 1,047 deletions.
diff --git a/.circleci/config.yml b/.circleci/config.yml
@@ -258,12 +258,6 @@ jobs:
       - run:
           name: '`pnpm proptypes` changes committed?'
           command: git add -A && git diff --exit-code --staged
-      - run:
-          name: 'Write "use client" directive'
-          command: pnpm rsc:build
-      - run:
-          name: '`pnpm rsc:build` changes committed?'
-          command: git add -A && git diff --exit-code --staged
       - run:
           name: Generate the documentation
           command: pnpm docs:api

diff --git a/.eslintrc.js b/.eslintrc.js
@@ -343,6 +343,7 @@ module.exports = /** @type {Config} */ ({
             patterns: NO_RESTRICTED_IMPORTS_PATTERNS_DEEPLY_NESTED,
           },
         ],
+        'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
       },
     },
     {
@@ -407,6 +408,21 @@ module.exports = /** @type {Config} */ ({
         'react/prop-types': 'off',
       },
     },
+    {
+      files: ['packages/*/src/*/*.?(c|m)[jt]s?(x)'],
+      excludedFiles: [
+        '*.spec.*',
+        '*.test.*',
+        // deprecated library
+        '**/mui-base/**/*',
+        '**/mui-joy/**/*',
+        // used internally, not used on app router yet
+        '**/mui-docs/**/*',
+      ],
+      rules: {
+        'material-ui/disallow-react-api-in-server-components': 'error',
+      },
+    },
     {
       files: ['packages/*/src/**/*.?(c|m)[jt]s?(x)'],
       excludedFiles: '*.spec.*',
@@ -519,6 +535,7 @@ module.exports = /** @type {Config} */ ({
         'import/no-default-export': 'error',
         'import/prefer-default-export': 'off',
         'react-compiler/react-compiler': 'off',
+        'no-irregular-whitespace': ['error', { skipComments: true }],
       },
     },
     {
@@ -544,6 +561,7 @@ module.exports = /** @type {Config} */ ({
         // 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',
+        'no-irregular-whitespace': ['error', { skipJSXText: true, skipStrings: true }],
       },
     },
     {

diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,47 @@
 # [Versions](https://mui.com/versions/)
 
+## 6.4.1
+
+<!-- generated comparing v6.4.0..master -->
+
+_Jan 21, 2025_
+
+A big thanks to the 9 contributors who made this release possible.
+
+### `@mui/material@6.4.1`
+
+- [ButtonBase] Export types used in ButtonBase props (#43530) @Janpot
+- [Dialog] Add slots and slotProps (#44792) @sai6855
+- [Drawer] Deprecate composed classes (#44870) @yash49
+- [IconButton] Set default loading to `null` (#45057) @siriwatknp
+- [ListItem] Add codemod for deprecated props (#45022) @sai6855
+- [Modal] Add migration guide and codemod for deprecated props (#45021) @sai6855
+- [TextField] Fix filled state to be synced with autofill (#44135) @DiegoAndai
+
+### `@mui/system@6.4.1`
+
+- Fix dark mode flicker using `useEnhancedEffect` (#44812) @siriwatknp
+
+### `@mui/utils@6.4.1`
+
+- Do not deep merge React component (#45058) @siriwatknp
+
+### Docs
+
+- Fix typo (#45070) @Fullchee
+- Improve Toolpad templates section (#44914) @bharatkashyap
+- Fix expand / collapse icons orientation (#44989) @zanivan
+- Rename "Base UI" to "MUI Base" in all text (#45060) @mj12albert
+- Add @mui/base deprecation callout (#45030) @mj12albert
+- Update @mui/base deprecation message (#45064) @mj12albert
+
+### Core
+
+- [code-infra] Add "use client" directive to files with React APIs (#45036) @Janpot
+- [docs] 301 redirect `/base-ui` to `base-ui.com` (#45061) @mj12albert
+
+All contributors of this release in alphabetical order: @bharatkashyap, @DiegoAndai, @Fullchee, @Janpot, @mj12albert, @sai6855, @siriwatknp, @yash49, @zanivan
+
 ## 6.4.0
 
 <!-- generated comparing v6.3.1..master -->

diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md
@@ -3151,7 +3151,7 @@ A big thanks to the 12 contributors who made this release possible. Here are som
 - [docs][base] Remove usage of `component` prop in docs (#37462) @sai6855
 - [docs] Fix docs redirections @oliviertassinari
 - [docs] Fix Fluent -> Fluent UI @oliviertassinari
-- [docs] Fix MUI Base -> Base UI @oliviertassinari
+- [docs] Fix MUI Base -> Base UI @oliviertassinari
 - [docs] Add base-vite-tailwind example repo (#36994) @mj12albert
 - [docs] Fix search bar layout shift (#37460) @oliviertassinari
 - [docs] Tweak Material UI's "Showcase" page design (#37259) @danilo-leal
@@ -3366,7 +3366,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som
 
 ### Core
 
-- [blog] Fix images using "MUI Base" instead of "Base UI" (#37044) @danilo-leal
+- [blog] Fix images using "MUI Base" instead of "Base UI" (#37044) @danilo-leal
 - [core] Add VS Code extensions recommendations (#37166) @michaldudak
 - [test] `e2e-website` related minor fixes (#37204) @ZeeshanTamboli
 
@@ -3671,7 +3671,7 @@ A big thanks to the 9 contributors who made this release possible. Here are some
 ### Core
 
 - [core] Increase margin to scroll @oliviertassinari
-- [core] Replace MUI Base with Base UI (#36716) @mnajdova
+- [core] Replace MUI Base with Base UI (#36716) @mnajdova
 
 All contributors of this release in alphabetical order: @alirezahekmati, @danilo-leal, @hbjORbj, @Lioness100, @mnajdova, @oliviertassinari, @sai6855, @siriwatknp, @ZeeshanTamboli
 
@@ -3711,7 +3711,7 @@ A big thanks to the 17 contributors who made this release possible. Here are som
 - [docs][base] Move styles to the bottom of demos code for `Menu` (#36582) @gitstart
 - [docs][base] Move styles code to bottom in the `Button` demos (#36590) @sai6855
 - [docs][base] Show components & hooks API on the components page (#35938) @mnajdova
-- [docs] Describe slotProps in MUI Base customization doc (#36206) @michaldudak
+- [docs] Describe slotProps in MUI Base customization doc (#36206) @michaldudak
 - [docs] Fix double API page redirection (#36743) @oliviertassinari
 - [docs] Remove hash property and leverage pathname (#36764) @siriwatknp
 - [docs] Introduce markdown permalink to source (#36729) @oliviertassinari

diff --git a/apps/pigment-css-vite-app/package.json b/apps/pigment-css-vite-app/package.json
@@ -34,7 +34,7 @@
     "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.4.49",
     "postcss-combine-media-query": "^1.0.1",
-    "vite": "5.4.11",
+    "vite": "5.4.12",
     "vite-plugin-node-polyfills": "0.22.0",
     "vite-plugin-pages": "^0.32.4"
   },

diff --git a/babel.config.js b/babel.config.js
@@ -149,7 +149,7 @@ module.exports = function getBabelConfig(api) {
     ignore: [/@babel[\\|/]runtime/], // Fix a Windows issue.
     overrides: [
       {
-        exclude: /\.test\.(js|ts|tsx)$/,
+        exclude: /\.test\.(m?js|ts|tsx)$/,
         plugins: ['@babel/plugin-transform-react-constant-elements'],
       },
       {

diff --git a/docs/README.md b/docs/README.md
@@ -1,6 +1,6 @@
 # Docs
 
-This is the website of the company (MUI), the documentation of Material UI, Base UI, MUI System, and Joy UI.
+This is the website of the company (MUI), the documentation of Material UI, MUI Base, MUI System, and Joy UI.
 
 To start the docs site in development mode, from the project root, run:
 

diff --git a/docs/config.d.ts b/docs/config.d.ts
diff --git a/docs/config.js → docs/config.ts b/docs/config.js → docs/config.ts
@@ -1,13 +1,13 @@
 // Valid languages to server-side render in production
-const LANGUAGES = ['en'];
+export const LANGUAGES = ['en'];
 
 // Server side rendered languages
-const LANGUAGES_SSR = ['en'];
+export const LANGUAGES_SSR = ['en'];
 
 // Work in progress
-const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
+export const LANGUAGES_IN_PROGRESS = LANGUAGES.slice();
 
-const LANGUAGES_IGNORE_PAGES = (pathname) => {
+export const LANGUAGES_IGNORE_PAGES = (pathname: string) => {
   // We don't have the bandwidth like Qt to translate our blog posts
   // https://www.qt.io/zh-cn/blog
   if (pathname === '/blog' || pathname.startsWith('/blog/')) {
@@ -20,10 +20,3 @@ const LANGUAGES_IGNORE_PAGES = (pathname) => {
 
   return false;
 };
-
-module.exports = {
-  LANGUAGES,
-  LANGUAGES_IN_PROGRESS,
-  LANGUAGES_SSR,
-  LANGUAGES_IGNORE_PAGES,
-};
diff --git a/docs/data/base/all-components/all-components.md b/docs/data/base/all-components/all-components.md
@@ -1,5 +1,5 @@
-# Base UI components
+# MUI Base components
 
-<p class="description">Every Base UI component available so far, sorted alphabetically.</p>
+<p class="description">Every MUI Base component available so far, sorted alphabetically.</p>
 
 {{"component": "modules/components/BaseUIComponents.js"}}
diff --git a/docs/data/base/components/accordion/accordion.md b/docs/data/base/components/accordion/accordion.md
@@ -3,12 +3,10 @@ productId: base-ui
 title: React Accordion component
 githubLabel: 'component: accordion'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+newUrl: https://base-ui.com/react/components/accordion
+newName: Accordion
 ---
 
-# Accordion 🚧
+# Accordion
 
 <p class="description">Accordions let users show and hide sections of related content on a page.</p>
-
-:::warning
-The Base UI Accordion component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/25) to see it arrive sooner.
-:::
diff --git a/docs/data/base/components/autocomplete/autocomplete.md b/docs/data/base/components/autocomplete/autocomplete.md
@@ -18,7 +18,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
 
 An autocomplete component is an enhanced text input that shows a list of suggested options as users type and lets them select an option from the list.
 
-Base UI provides the `useAutocomplete` hook for building a custom Autocomplete.
+MUI Base provides the `useAutocomplete` hook for building a custom Autocomplete.
 It implements the WAI-ARIA Combobox pattern and is typically used to assist users in completing form inputs or search queries faster.
 
 {{"demo": "AutocompleteIntroduction", "defaultCodeOpen": false, "bg": "gradient"}}
@@ -102,9 +102,9 @@ Learn more about controlled and uncontrolled components in the [React documentat
 
 React Portals can be used to render the listbox outside of the DOM hierarchy, making it easier to allow it to "float" above adjacent elements.
 
-Base UI provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal.
+MUI Base provides a [Popper](/base-ui/react-popper/) component built around React's `createPortal()` for exactly this purpose, and additionally helps you manage keyboard focus as it moves in and out of the portal.
 
-To render the listbox in Base UI's Popper, the `ref`s must be merged as follows:
+To render the listbox in MUI Base's Popper, the `ref`s must be merged as follows:
 
 ```jsx
 import { useAutocomplete } from '@mui/base/useAutocomplete';

diff --git a/docs/data/base/components/button/button.md b/docs/data/base/components/button/button.md
@@ -127,7 +127,7 @@ You can even use SVGs, as shown in the demo below:
 
 ### Using with links
 
-The following demo illustrates how to use the Button as a link, whether using the Base UI Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link):
+The following demo illustrates how to use the Button as a link, whether using the MUI Base Button itself for the `href`, or with the [Next.js Link component](https://nextjs.org/docs/pages/api-reference/components/link):
 
 {{"demo": "UnstyledLinkButton.js", "defaultCodeOpen": true}}
 
@@ -142,7 +142,7 @@ Instead, `aria-disabled` is used, which makes the Button focusable.
 
 This should be used whenever the disabled Button needs to be read by screen readers.
 
-Base UI uses this prop internally in [menu items](/base-ui/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)).
+MUI Base uses this prop internally in [menu items](/base-ui/react-menu/), making it possible to use the keyboard to navigate to disabled items (in compliance with [ARIA guidelines](https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/#focusabilityofdisabledcontrols)).
 
 The following demo shows how the `focusableWhenDisabled` prop works—use the <kbd class="key">Tab</kbd> key to navigate within this document to see that only the second Button accepts the focus:
 

diff --git a/docs/data/base/components/checkbox/checkbox.md b/docs/data/base/components/checkbox/checkbox.md
@@ -3,12 +3,10 @@ productId: base-ui
 title: React Checkbox component
 githubLabel: 'component: checkbox'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/
+newUrl: https://base-ui.com/react/components/checkbox
+newName: Checkbox
 ---
 
-# Checkbox 🚧
+# Checkbox
 
 <p class="description">Checkboxes give users binary choices when presented with multiple options in a series.</p>
-
-:::warning
-The Base UI Checkbox component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/24) to see it arrive sooner.
-:::
diff --git a/docs/data/base/components/drawer/drawer.md b/docs/data/base/components/drawer/drawer.md
@@ -4,10 +4,10 @@ title: React Drawer component
 githubLabel: 'component: drawer'
 ---
 
-# Drawer 🚧
+# Drawer
 
 <p class="description">Navigation drawers (also known as sidebars) provide ergonomic access to different destinations without taking the user out of context.</p>
 
-:::warning
-The Base UI Drawer component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/38) to see it arrive sooner.
+:::error
+@mui/base has been deprecated and replaced by MUI Base. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/38) to track the development of the Drawer component.
 :::
diff --git a/docs/data/base/components/form-control/form-control.md b/docs/data/base/components/form-control/form-control.md
@@ -4,6 +4,8 @@ title: React Form Control component and hook
 components: FormControl
 hooks: useFormControlContext
 githubLabel: 'component: FormControl'
+newUrl: https://base-ui.com/react/components/field
+newName: Field
 ---
 
 # Form Control

diff --git a/docs/data/base/components/input/input.md b/docs/data/base/components/input/input.md
@@ -4,6 +4,8 @@ title: React Input component and hook
 components: Input
 hooks: useInput
 githubLabel: 'component: input'
+newUrl: https://base-ui.com/react/components/input
+newName: Input
 ---
 
 # Input

diff --git a/docs/data/base/components/menu/menu.md b/docs/data/base/components/menu/menu.md
@@ -5,6 +5,8 @@ components: Menu, MenuItem, MenuButton, Dropdown
 hooks: useMenu, useMenuItem, useMenuButton, useDropdown, useMenuItemContextStabilizer
 githubLabel: 'component: menu'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
+newUrl: https://base-ui.com/react/components/menu
+newName: Menu
 ---
 
 # Menu
@@ -17,7 +19,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menu-button/
 
 ## Introduction
 
-The Base UI Dropdown Menu is implemented using a collection of related components:
+The MUI Base Dropdown Menu is implemented using a collection of related components:
 
 - Dropdown - The outermost container that houses all Menu components.
 - Menu Button - The button that toggles the visibility of the Menu.

diff --git a/docs/data/base/components/modal/modal.md b/docs/data/base/components/modal/modal.md
@@ -5,6 +5,8 @@ components: Modal
 hooks: useModal
 githubLabel: 'component: modal'
 waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/
+newUrl: https://base-ui.com/react/components/dialog
+newName: Dialog
 ---
 
 # Modal

diff --git a/docs/data/base/components/number-input/number-input.md b/docs/data/base/components/number-input/number-input.md
@@ -4,6 +4,8 @@ title: React Number Input component and hook
 components: NumberInput
 hooks: useNumberInput
 githubLabel: 'component: number input'
+newUrl: https://base-ui.com/react/components/number-field
+newName: Number Field
 ---
 
 # Number Input
@@ -17,7 +19,7 @@ githubLabel: 'component: number input'
 ## Introduction
 
 A number input is a UI element that accepts numeric values from the user.
-Base UI's Number Input component is a customizable replacement for the native HTML `<input type="number">` that solves common usability issues of its native counterpart, such as:
+MUI Base's Number Input component is a customizable replacement for the native HTML `<input type="number">` that solves common usability issues of its native counterpart, such as:
 
 - Inconsistencies across browsers in the appearance and behavior of the stepper buttons
 - Allowing certain non-numeric characters ('e', '+', '-', '.') and silently discarding others
@@ -41,7 +43,7 @@ The following demo shows how to create a Number Input component, apply some styl
 
 ### Anatomy
 
-The Base UI Number Input component consists of four slots:
+The MUI Base Number Input component consists of four slots:
 
 - `root`: an outer `<div>` containing the other interior slots
 - `input`: an `<input>` element
@@ -137,7 +139,7 @@ If you only define one or the other, the opposite end of the range will be open-
 
 ```
 
-The demo below shows a Number Input with a an accepted range of 1 to 99:
+The demo below shows a Number Input with an accepted range of 1 to 99:
 
 {{"demo": "QuantityInput.js", "defaultCodeOpen": false}}
 

diff --git a/docs/data/base/components/pagination/pagination.md b/docs/data/base/components/pagination/pagination.md
@@ -8,6 +8,6 @@ githubLabel: 'component: Pagination'
 
 <p class="description">The Pagination component lets the user select a specific page from a range of pages.</p>
 
-:::warning
-The Base UI Pagination component isn't available yet, but you can upvote [this GitHub issue](https://github.com/mui/base-ui/issues/29) to see it arrive sooner.
+:::error
+@mui/base has been deprecated and replaced by MUI Base. Please follow [this GitHub issue](https://github.com/mui/base-ui/issues/29) to track the development of the Pagination component.
 :::