Merge branch 'master' into create-palette-ts

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

@@ -23,8 +23,8 @@
     "react-dom": "^18.3.1"
   },
   "devDependencies": {
-    "@pigment-css/nextjs-plugin": "0.0.27",
-    "@types/node": "^20.17.7",
+    "@pigment-css/nextjs-plugin": "0.0.28",
+    "@types/node": "^20.17.9",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "eslint": "^8.57.1",

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

@@ -27,16 +27,16 @@
   "devDependencies": {
     "@babel/preset-react": "^7.25.9",
     "@babel/preset-typescript": "^7.26.0",
-    "@pigment-css/vite-plugin": "0.0.27",
+    "@pigment-css/vite-plugin": "0.0.28",
     "@types/react": "^18.3.12",
     "@types/react-dom": "^18.3.1",
     "@types/webfontloader": "^1.6.38",
-    "@vitejs/plugin-react": "^4.3.3",
+    "@vitejs/plugin-react": "^4.3.4",
     "postcss": "^8.4.49",
     "postcss-combine-media-query": "^1.0.1",
     "vite": "5.4.11",
     "vite-plugin-node-polyfills": "0.22.0",
-    "vite-plugin-pages": "^0.32.3"
+    "vite-plugin-pages": "^0.32.4"
   },
   "nx": {
     "targets": {

docs/data/base/components/tabs/UnstyledTabsRouting.js

@@ -5,13 +5,13 @@ import { Tab as BaseTab, tabClasses } from '@mui/base/Tab';
 import { TabsList as BaseTabsList } from '@mui/base/TabsList';
 import {
   MemoryRouter,
+  StaticRouter,
   Route,
   Routes,
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+} from 'react-router';
 import { styled } from '@mui/system';
 
 function Router(props) {

docs/data/base/components/tabs/UnstyledTabsRouting.tsx

@@ -4,13 +4,13 @@ import { Tab as BaseTab, TabRootSlotProps, tabClasses } from '@mui/base/Tab';
 import { TabsList as BaseTabsList } from '@mui/base/TabsList';
 import {
   MemoryRouter,
+  StaticRouter,
   Route,
   Routes,
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+} from 'react-router';
 import { styled } from '@mui/system';
 
 function Router(props: { children?: React.ReactNode }) {

docs/data/joy/components/link/link.md

@@ -125,12 +125,12 @@ import Link from '@mui/joy/Link';
 </NextLink>;
 ```
 
-### React Router
+### React Router
 
-Here is an example with the [Link component](https://reactrouter.com/en/main/components/link) of React Router:
+Here is a demo with the [Link component](https://reactrouter.com/start/library/navigating#link) of [React Router](https://github.com/remix-run/react-router).
 
 ```js
-import { Link as RouterLink } from 'react-router-dom';
+import { Link as RouterLink } from 'react-router';
 import Link from '@mui/joy/Link';
 
 <Link component={RouterLink} to="/docs">

docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js

@@ -17,7 +17,7 @@ import {
   Routes,
   MemoryRouter,
   useLocation,
-} from 'react-router-dom';
+} from 'react-router';
 
 const breadcrumbNameMap = {
   '/inbox': 'Inbox',

docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx

@@ -16,7 +16,7 @@ import {
   Routes,
   MemoryRouter,
   useLocation,
-} from 'react-router-dom';
+} from 'react-router';
 
 interface ListItemLinkProps extends ListItemProps {
   to: string;

docs/data/material/components/pagination/PaginationLink.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 

docs/data/material/components/pagination/PaginationLink.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router-dom';
+import { Link, MemoryRouter, Route, Routes, useLocation } from 'react-router';
 import Pagination from '@mui/material/Pagination';
 import PaginationItem from '@mui/material/PaginationItem';
 

docs/data/material/components/text-fields/text-fields.md

@@ -242,7 +242,7 @@ In some circumstances, we can't determine the "shrink" state (number input, date
 To workaround the issue, you can force the "shrink" state of the label.
 
 ```jsx
-<TextField InputLabelProps={{ shrink: true }} />
+<TextField slotProps={{ inputLabel: { shrink: true } }} />
 ```
 
 or

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

@@ -49,10 +49,10 @@ This pattern is very powerful and allows for great flexibility, as well as a way
 
 ### Passing other React components
 
-You can pass any other React component to `component` prop. For example, you can pass `Link` component from `react-router-dom`:
+You can pass any other React component to `component` prop. For example, you can pass `Link` component from `react-router`:
 
 ```tsx
-import { Link } from 'react-router-dom';
+import { Link } from 'react-router';
 import Button from '@mui/material/Button';
 
 function Demo() {
@@ -84,7 +84,7 @@ Now the `CustomComponent` can be used with a `component` prop which should be se
 In addition, the `CustomComponent` will have all props of a `<a>` HTML element.
 The other props of the `Typography` component will also be present in props of the `CustomComponent`.
 
-You can find a code example with the Button and react-router-dom in [these demos](/material-ui/integrations/routing/#component-prop).
+You can find a code example with the Button and react-router in [these demos](/material-ui/integrations/routing/#component-prop).
 
 ### Generic
 

docs/data/material/integrations/routing/ButtonRouter.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router';
 import Button from '@mui/material/Button';
 
 const LinkBehavior = React.forwardRef((props, ref) => (

docs/data/material/integrations/routing/ButtonRouter.tsx

@@ -3,8 +3,8 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
   MemoryRouter,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 import Button from '@mui/material/Button';
 
 const LinkBehavior = React.forwardRef<any, Omit<RouterLinkProps, 'to'>>(

docs/data/material/integrations/routing/LinkRouter.js

@@ -1,8 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 

docs/data/material/integrations/routing/LinkRouter.tsx

@@ -4,8 +4,8 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
   MemoryRouter,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 import Link from '@mui/material/Link';
 import Box from '@mui/material/Box';
 

docs/data/material/integrations/routing/LinkRouterWithTheme.js

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Link as RouterLink, MemoryRouter } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import { Link as RouterLink, MemoryRouter, StaticRouter } from 'react-router';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';

docs/data/material/integrations/routing/LinkRouterWithTheme.tsx

@@ -3,8 +3,8 @@ import {
   Link as RouterLink,
   LinkProps as RouterLinkProps,
   MemoryRouter,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
 import Button from '@mui/material/Button';
 import Stack from '@mui/material/Stack';

docs/data/material/integrations/routing/ListRouter.js

@@ -11,8 +11,14 @@ import Divider from '@mui/material/Divider';
 import InboxIcon from '@mui/icons-material/Inbox';
 import DraftsIcon from '@mui/icons-material/Drafts';
 import Typography from '@mui/material/Typography';
-import { Link, Route, Routes, MemoryRouter, useLocation } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import {
+  Link,
+  Route,
+  Routes,
+  MemoryRouter,
+  useLocation,
+  StaticRouter,
+} from 'react-router';
 
 function Router(props) {
   const { children } = props;

docs/data/material/integrations/routing/ListRouter.tsx

@@ -10,8 +10,14 @@ import Divider from '@mui/material/Divider';
 import InboxIcon from '@mui/icons-material/Inbox';
 import DraftsIcon from '@mui/icons-material/Drafts';
 import Typography from '@mui/material/Typography';
-import { Link, Route, Routes, MemoryRouter, useLocation } from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+import {
+  Link,
+  Route,
+  Routes,
+  MemoryRouter,
+  useLocation,
+  StaticRouter,
+} from 'react-router';
 
 function Router(props: { children?: React.ReactNode }) {
   const { children } = props;

docs/data/material/integrations/routing/TabsRouter.js

@@ -11,8 +11,8 @@ import {
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 
 function Router(props) {
   const { children } = props;

docs/data/material/integrations/routing/TabsRouter.tsx

@@ -10,8 +10,8 @@ import {
   Link,
   matchPath,
   useLocation,
-} from 'react-router-dom';
-import { StaticRouter } from 'react-router-dom/server';
+  StaticRouter,
+} from 'react-router';
 
 function Router(props: { children?: React.ReactNode }) {
   const { children } = props;

docs/data/material/integrations/routing/routing.md

@@ -24,7 +24,7 @@ The Material UI theme lets you configure this component once.
 For instance, with react-router:
 
 ```tsx
-import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router-dom';
+import { Link as RouterLink, LinkProps as RouterLinkProps } from 'react-router';
 import { LinkProps } from '@mui/material/Link';
 
 const LinkBehavior = React.forwardRef<
@@ -65,9 +65,9 @@ In the event you need to provide a richer structure, see the next section.
 You can achieve the integration with third-party routing libraries with the `component` prop.
 You can learn more about this prop in the **[composition guide](/material-ui/guides/composition/#component-prop)**.
 
-## react-router examples
+## React Router examples
 
-Here are a few demos with [react-router](https://github.com/remix-run/react-router).
+Here are a few demos with the [Link component](https://reactrouter.com/start/library/navigating#link) of [React Router](https://github.com/remix-run/react-router).
 You can apply the same strategy with all the components: BottomNavigation, Card, etc.
 
 ### Link

docs/data/material/migration/migrating-from-deprecated-apis/migrating-from-deprecated-apis.md

@@ -176,8 +176,8 @@ The Alert's `componentsProps` prop was deprecated in favor of `slotProps`:
 
 ```diff
  <Alert
--  componentsProps={{ closeButton: { testid: 'test-id' } }}
-+  slotProps={{ closeButton: { testid: 'test-id' } }}
+-  componentsProps={{ closeButton: { id: 'close-id' } }}
++  slotProps={{ closeButton: { id: 'close-id' } }}
  />
 ```
 
@@ -451,8 +451,8 @@ The Backdrop's `componentsProps` prop was deprecated in favor of `slotProps`:
 
 ```diff
  <Backdrop
--  componentsProps={{ root: { testid: 'test-id' } }}
-+  slotProps={{ root: { testid: 'test-id' } }}
+-  componentsProps={{ root: { id: 'root-id' } }}
++  slotProps={{ root: { id: 'root-id' } }}
  />
 ```
 
@@ -491,8 +491,8 @@ The Badge's `componentsProps` prop was deprecated in favor of `slotProps`:
 
 ```diff
  <Badge
--  componentsProps={{ root: { testid: 'test-id' } }}
-+  slotProps={{ root: { testid: 'test-id' } }}
+-  componentsProps={{ root: { id: 'root-id' } }}
++  slotProps={{ root: { id: 'root-id' } }}
  >
 ```
 
@@ -1238,19 +1238,33 @@ The ListItem's `componentsProps` prop was deprecated in favor of `slotProps`:
 
 ```diff
  <ListItem
--  componentsProps={{ root: { testid: 'test-id' } }}
-+  slotProps={{ root: { testid: 'test-id' } }}
+-  componentsProps={{ root: { id: 'root-id' } }}
++  slotProps={{ root: { id: 'root-id' } }}
  />
 ```
 
 ### ContainerComponent
 
 The ListItem's `ContainerComponent` prop was deprecated in favor of `slots.root` or `component` instead.
 
+```diff
+ <ListItem
+-  ContainerComponent={CustomContainer}
++  slots={{ root: CustomContainer }}
+ />
+```
+
 ### ContainerProps
 
 The ListItem's `ContainerProps` prop was deprecated in favor of `slotProps.root` instead.
 
+```diff
+ <ListItem
+-  ContainerProps={{ id: 'container-id' }}
++  slotProps={{ root: { id: 'container-id' } }}
+ />
+```
+
 ## ListItemSecondaryAction
 
 ### Deprecated component
@@ -1356,8 +1370,8 @@ The Modal's `componentsProps` prop was deprecated in favor of `slotProps`:
 
 ```diff
  <Modal
--  componentsProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
-+  slotProps={{ root: { testid: 'root-id' }, backdrop: { testid: 'backdrop-id' } }}
+-  componentsProps={{ root: { id: 'root-id' }, backdrop: { id: 'backdrop-id' } }}
++  slotProps={{ root: { id: 'root-id' }, backdrop: { id: 'backdrop-id' } }}
  >
 ```
 
@@ -1479,8 +1493,8 @@ The Popper's prop `componentsProps` was deprecated in favor of `slotProps`:
 
 ```diff
  <Popper
--  componentsProps={{ root: { testid: 'test-id' } }}
-+  slotProps={{ root: { testid: 'test-id' } }}
+-  componentsProps={{ root: { id: 'root-id' } }}
++  slotProps={{ root: { id: 'root-id' } }}
  />
 ```
 
@@ -1509,8 +1523,8 @@ The Slider's `componentsProps` prop was deprecated in favor of `slotProps`:
 
 ```diff
  <Slider
--  componentsProps={{ track: { testid: 'test-id' } }}
-+  slotProps={{ track: { testid: 'test-id' } }}
+-  componentsProps={{ track: { id: 'track-id' } }}
++  slotProps={{ track: { id: 'track-id' } }}
  />
 ```
 
@@ -1682,8 +1696,8 @@ The Tooltip's prop `componentsProps` was deprecated in favor of `slotProps`:
 
 ```diff
  <Tooltip
--  componentsProps={{ arrow: { testid: 'test-id' } }}
-+  slotProps={{ arrow: { testid: 'test-id' } }}
+-  componentsProps={{ arrow: { id: 'arrow-id' } }}
++  slotProps={{ arrow: { id: 'arrow-id' } }}
  />
 ```