Merge branch 'master' into docs/toolpad-core-template

bharatkashyap · Dec 3, 2024 · b4bc25d · b4bc25d
2 parents 80ae9a8 + 11cf1ba
commit b4bc25d
Show file tree

Hide file tree

Showing 29 changed files with 126 additions and 66 deletions.
diff --git a/docs/data/base/components/tabs/UnstyledTabsRouting.js b/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) {

diff --git a/docs/data/base/components/tabs/UnstyledTabsRouting.tsx b/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 }) {

diff --git a/docs/data/joy/components/link/link.md b/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">

diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.js b/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',

diff --git a/docs/data/material/components/breadcrumbs/RouterBreadcrumbs.tsx b/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;

diff --git a/docs/data/material/components/pagination/PaginationLink.js b/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';
 

diff --git a/docs/data/material/components/pagination/PaginationLink.tsx b/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';
 

diff --git a/docs/data/material/guides/composition/composition.md b/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
 

diff --git a/docs/data/material/integrations/routing/ButtonRouter.js b/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) => (

diff --git a/docs/data/material/integrations/routing/ButtonRouter.tsx b/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'>>(

diff --git a/docs/data/material/integrations/routing/LinkRouter.js b/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';
 

diff --git a/docs/data/material/integrations/routing/LinkRouter.tsx b/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';
 

diff --git a/docs/data/material/integrations/routing/LinkRouterWithTheme.js b/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';

diff --git a/docs/data/material/integrations/routing/LinkRouterWithTheme.tsx b/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';

diff --git a/docs/data/material/integrations/routing/ListRouter.js b/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;

diff --git a/docs/data/material/integrations/routing/ListRouter.tsx b/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;

diff --git a/docs/data/material/integrations/routing/TabsRouter.js b/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;

diff --git a/docs/data/material/integrations/routing/TabsRouter.tsx b/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;

diff --git a/docs/data/material/integrations/routing/routing.md b/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

diff --git a/docs/notifications.json b/docs/notifications.json
@@ -15,8 +15,8 @@
     "text": "This major release includes CSS variables support, experimental opt-in CSS extraction, and many more improvements. Check out the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"material-ui-v6\" href=\"https://mui.com/blog/material-ui-v6-is-out/\">announcement blog post</a>."
   },
   {
-    "id": 84,
-    "title": "Black Friday is here!",
-    "text": "Don&#39;t miss out on the best deals of the year—Mega Bundles with up to 90% off. Available for a limited time. <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"black-friday\" href=\"https://mui.com/store/bundles/\">Check the offers</a>!"
+    "id": 85,
+    "title": "MUI X v8 alpha",
+    "text": "Check our plans for the upcoming stable in the <a style=\"color: inherit;\" data-ga-event-category=\"Announcement\" data-ga-event-action=\"notification\" data-ga-event-label=\"mui-x-v8-alpha-zero\" href=\"https://mui.com/blog/mui-x-v8-alpha-zero/\">announcement blog post</a>."
   }
 ]
diff --git a/docs/package.json b/docs/package.json
@@ -96,7 +96,7 @@
     "react-intersection-observer": "^9.13.1",
     "react-is": "^18.3.1",
     "react-number-format": "^5.4.2",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "react-runner": "^1.0.5",
     "react-simple-code-editor": "^0.14.1",
     "react-spring": "^9.7.4",

diff --git a/docs/src/components/banner/AppFrameBanner.tsx b/docs/src/components/banner/AppFrameBanner.tsx
@@ -5,6 +5,15 @@ import FEATURE_TOGGLE from 'docs/src/featureToggle';
 import PageContext from 'docs/src/modules/components/PageContext';
 import { convertProductIdToName } from 'docs/src/modules/components/AppSearch';
 
+const showSurveyMessage = false;
+
+function isBlackFriday() {
+  const today = Date.now();
+  const start = new Date('2024-11-25').getTime();
+  const end = new Date('2024-12-07T23:59:59Z').getTime();
+  return today > start && today < end;
+}
+
 export default function AppFrameBanner() {
   if (!FEATURE_TOGGLE.enable_docsnav_banner) {
     return null;
@@ -14,11 +23,17 @@ export default function AppFrameBanner() {
   // eslint-disable-next-line react-hooks/rules-of-hooks -- FEATURE_TOGGLE never changes
   const pageContext = React.useContext(PageContext);
   const productName = convertProductIdToName(pageContext) || 'MUI';
-  const surveyMessage = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
-  const blackFridayMessage = `Black Friday is here! Don't miss out on the best offers of the year.`;
 
-  const showSurveyMessage = false;
-  const message = showSurveyMessage ? surveyMessage : blackFridayMessage;
+  let message = '';
+  let href = '';
+
+  if (showSurveyMessage) {
+    message = `Influence ${productName}'s 2024 roadmap! Participate in the latest Developer Survey`;
+    href = 'https://tally.so/r/3Ex4PN?source=website';
+  } else if (isBlackFriday()) {
+    message = `Black Friday is here! Don't miss out on the best offers of the year.`;
+    href = 'https://mui.com/store/bundles/?deal=black-friday&from=docs';
+  }
 
   if (process.env.NODE_ENV !== 'production') {
     if (message.length > 100) {
@@ -28,18 +43,18 @@ export default function AppFrameBanner() {
     }
   }
 
+  if (message === '' || href === '') {
+    return null;
+  }
+
   return (
     <Link
-      href={
-        showSurveyMessage
-          ? 'https://tally.so/r/3Ex4PN?source=website'
-          : 'https://mui.com/store/bundles/?deal=black-friday&from=docs'
-      }
+      href={href}
       target="_blank"
       variant="caption"
       sx={[
         (theme) => ({
-          padding: theme.spacing('7px', 1.5, '8px', 1.5),
+          padding: theme.spacing('6px', 1.5),
           display: { xs: 'none', md: 'block' },
           fontWeight: 'medium',
           textWrap: 'nowrap',

diff --git a/packages/mui-material/package.json b/packages/mui-material/package.json
@@ -70,7 +70,7 @@
     "playwright": "^1.48.2",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.28.0",
+    "react-router": "^7.0.1",
     "sinon": "^19.0.2"
   },
   "peerDependencies": {

diff --git a/packages/mui-material/src/Button/Button.spec.tsx b/packages/mui-material/src/Button/Button.spec.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link as ReactRouterLink, LinkProps } from 'react-router-dom';
+import { Link as ReactRouterLink, LinkProps } from 'react-router';
 import { expectType } from '@mui/types';
 import Button, { ButtonProps } from '@mui/material/Button';
 import MaterialUiLink, { LinkProps as MaterialUiLinkProps } from '@mui/material/Link';