From b738d4219d1dbb50b2a166e73f6ebcecd37082e7 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 21 Dec 2023 12:31:31 +0700
Subject: [PATCH 1/8] add Link to material-nextjs
---
packages/mui-material-nextjs/package.json | 3 +
.../mui-material-nextjs/src/v13-Link/Link.tsx | 59 +++++++++++++++++++
.../src/v13-Link/index.tsx | 2 +
.../src/v14-Link/index.tsx | 2 +
4 files changed, 66 insertions(+)
create mode 100644 packages/mui-material-nextjs/src/v13-Link/Link.tsx
create mode 100644 packages/mui-material-nextjs/src/v13-Link/index.tsx
create mode 100644 packages/mui-material-nextjs/src/v14-Link/index.tsx
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index e75425a90b07a8..14d527f5bb9e99 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -37,6 +37,9 @@
"test": "cd ../../ && cross-env NODE_ENV=test mocha 'packages/mui-utils/**/*.test.{js,ts,tsx}'",
"typescript": "tsc -p tsconfig.json"
},
+ "dependencies": {
+ "clsx": "^2.0.0"
+ },
"peerDependencies": {
"@emotion/cache": "^11.11.0",
"@emotion/server": "^11.11.0",
diff --git a/packages/mui-material-nextjs/src/v13-Link/Link.tsx b/packages/mui-material-nextjs/src/v13-Link/Link.tsx
new file mode 100644
index 00000000000000..32b0c6d1371b1d
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-Link/Link.tsx
@@ -0,0 +1,59 @@
+'use client';
+import * as React from 'react';
+import clsx from 'clsx';
+import { useRouter } from 'next/router';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import MuiLink, { LinkOwnProps as MuiLinkProps } from '@mui/material/Link';
+
+export interface LinkProps
+ extends Omit<NextLinkProps, 'passHref' | 'legacyBehavior'>,
+ MuiLinkProps {
+ /**
+ * Extra class name to apply to the link.
+ */
+ className?: string;
+ /**
+ * The active class name to apply when the current page is the same as the link's href.
+ * @default 'Mui-active'
+ */
+ activeClassName?: string;
+}
+
+const Link = React.forwardRef(function Link({
+ href,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ locale,
+ as,
+ className: classNameProp,
+ activeClassName = 'Mui-active',
+ ...muiLinkProps
+}: LinkProps) {
+ const router = useRouter();
+ const pathname = typeof href === 'string' ? href : href.pathname;
+ const className = clsx(classNameProp, {
+ [activeClassName]: router.pathname === pathname && activeClassName,
+ });
+ return (
+ <NextLink
+ {...{
+ href,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ locale,
+ as,
+ }}
+ // below props are required for NextLink to work with MUI Link
+ passHref
+ legacyBehavior
+ >
+ <MuiLink className={className} {...muiLinkProps} />
+ </NextLink>
+ );
+});
+
+export default Link;
diff --git a/packages/mui-material-nextjs/src/v13-Link/index.tsx b/packages/mui-material-nextjs/src/v13-Link/index.tsx
new file mode 100644
index 00000000000000..33b07ea4f825db
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-Link/index.tsx
@@ -0,0 +1,2 @@
+export { default } from './Link';
+export type { LinkProps } from './Link';
diff --git a/packages/mui-material-nextjs/src/v14-Link/index.tsx b/packages/mui-material-nextjs/src/v14-Link/index.tsx
new file mode 100644
index 00000000000000..be219e76a2d9b4
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v14-Link/index.tsx
@@ -0,0 +1,2 @@
+export { default } from '../v13-Link';
+export type { LinkProps } from '../v13-Link';
From 1521d249be3967b0a3fcd3232db2dd9aec1ec58a Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Thu, 21 Dec 2023 12:41:37 +0700
Subject: [PATCH 2/8] add material-ui ref to tsconfig.build.json
---
packages/mui-material-nextjs/tsconfig.build.json | 3 ++-
1 file changed, 2 insertions(+), 1 deletion(-)
diff --git a/packages/mui-material-nextjs/tsconfig.build.json b/packages/mui-material-nextjs/tsconfig.build.json
index 405e223d9a9bad..e40d6e52ebaa3d 100644
--- a/packages/mui-material-nextjs/tsconfig.build.json
+++ b/packages/mui-material-nextjs/tsconfig.build.json
@@ -11,5 +11,6 @@
"rootDir": "./src"
},
"include": ["./src/**/*.ts*"],
- "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"]
+ "exclude": ["src/**/*.spec.ts*", "src/**/*.test.ts*"],
+ "references": [{ "path": "../mui-material/tsconfig.build.json" }]
}
From 1016743ca7729b33b07dc611c95562ecb92040c4 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 22 Dec 2023 13:53:38 +0700
Subject: [PATCH 3/8] add Link spec
---
babel.config.js | 1 +
.../src/v13-Link/Link.spec.tsx | 25 ++++++++++++++++++
.../mui-material-nextjs/src/v13-Link/Link.tsx | 3 ++-
.../src/v13-Link/index.tsx | 2 ++
.../src/v13-Link/linkClasses.ts | 26 +++++++++++++++++++
5 files changed, 56 insertions(+), 1 deletion(-)
create mode 100644 packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx
create mode 100644 packages/mui-material-nextjs/src/v13-Link/linkClasses.ts
diff --git a/babel.config.js b/babel.config.js
index 4b2db95b51a9b5..a2329e452977d4 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -31,6 +31,7 @@ module.exports = function getBabelConfig(api) {
'@mui/base': resolveAliasPath('./packages/mui-base/src'),
'@mui/utils': resolveAliasPath('./packages/mui-utils/src'),
'@mui/material-next': resolveAliasPath('./packages/mui-material-next/src'),
+ '@mui/material-nextjs': resolveAliasPath('./packages/mui-material-nextjs/src'),
'@mui/joy': resolveAliasPath('./packages/mui-joy/src'),
};
diff --git a/packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx b/packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx
new file mode 100644
index 00000000000000..cb7b7a89e4fd25
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import Link from '@mui/material-nextjs/v13-Link';
+
+// @ts-expect-error href is required by Next.js
+<Link />;
+<Link href="" />;
+<Link
+ href={{
+ pathname: '/about',
+ query: { name: 'test' },
+ }}
+/>;
+<Link href="/dashboard" replace>
+ Dashboard
+</Link>;
+<Link href="/dashboard" scroll={false}>
+ Dashboard
+</Link>;
+<Link href="/dashboard" prefetch={false}>
+ Dashboard
+</Link>;
+
+<Link href="" sx={{ color: 'secondary.dark' }} />;
+<Link href="" variant="caption" />;
+<Link href="" underline="always" />;
diff --git a/packages/mui-material-nextjs/src/v13-Link/Link.tsx b/packages/mui-material-nextjs/src/v13-Link/Link.tsx
index 32b0c6d1371b1d..b79574163afa5a 100644
--- a/packages/mui-material-nextjs/src/v13-Link/Link.tsx
+++ b/packages/mui-material-nextjs/src/v13-Link/Link.tsx
@@ -4,6 +4,7 @@ import clsx from 'clsx';
import { useRouter } from 'next/router';
import NextLink, { LinkProps as NextLinkProps } from 'next/link';
import MuiLink, { LinkOwnProps as MuiLinkProps } from '@mui/material/Link';
+import linkClasses from './linkClasses';
export interface LinkProps
extends Omit<NextLinkProps, 'passHref' | 'legacyBehavior'>,
@@ -28,7 +29,7 @@ const Link = React.forwardRef(function Link({
locale,
as,
className: classNameProp,
- activeClassName = 'Mui-active',
+ activeClassName = linkClasses.active,
...muiLinkProps
}: LinkProps) {
const router = useRouter();
diff --git a/packages/mui-material-nextjs/src/v13-Link/index.tsx b/packages/mui-material-nextjs/src/v13-Link/index.tsx
index 33b07ea4f825db..60fc3e41f75451 100644
--- a/packages/mui-material-nextjs/src/v13-Link/index.tsx
+++ b/packages/mui-material-nextjs/src/v13-Link/index.tsx
@@ -1,2 +1,4 @@
export { default } from './Link';
+export { default as linkClasses } from './linkClasses';
+export type { LinkClasses } from './linkClasses';
export type { LinkProps } from './Link';
diff --git a/packages/mui-material-nextjs/src/v13-Link/linkClasses.ts b/packages/mui-material-nextjs/src/v13-Link/linkClasses.ts
new file mode 100644
index 00000000000000..6c2438e043732a
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-Link/linkClasses.ts
@@ -0,0 +1,26 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { LinkClasses as MuiLinkClasses } from '@mui/material/Link';
+
+export interface LinkClasses extends MuiLinkClasses {
+ /**
+ * Styles applied to the root element when the link is active.
+ */
+ active: string;
+}
+
+export function getLinkUtilityClass(slot: string): string {
+ return generateUtilityClass('MuiLink', slot);
+}
+
+const linkClasses: LinkClasses = generateUtilityClasses('MuiLink', [
+ 'root',
+ 'underlineNone',
+ 'underlineHover',
+ 'underlineAlways',
+ 'button',
+ 'focusVisible',
+ 'active',
+]);
+
+export default linkClasses;
From 130cf098d59bfde5b5161b891e5792fcf7b2d227 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 22 Dec 2023 14:21:21 +0700
Subject: [PATCH 4/8] move Link to both App and Pages router
---
.../src/v13-Link/index.tsx | 4 --
.../{v13-Link => v13-appRouter}/Link.spec.tsx | 2 +-
.../src/v13-appRouter/Link.tsx | 60 +++++++++++++++++++
.../src/v13-appRouter/index.ts | 4 ++
.../linkClasses.ts | 0
.../src/v13-pagesRouter/Link.spec.tsx | 25 ++++++++
.../{v13-Link => v13-pagesRouter}/Link.tsx | 0
.../src/v13-pagesRouter/index.ts | 4 ++
.../src/v13-pagesRouter/linkClasses.ts | 26 ++++++++
.../src/v14-Link/index.tsx | 2 -
10 files changed, 120 insertions(+), 7 deletions(-)
delete mode 100644 packages/mui-material-nextjs/src/v13-Link/index.tsx
rename packages/mui-material-nextjs/src/{v13-Link => v13-appRouter}/Link.spec.tsx (88%)
create mode 100644 packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
rename packages/mui-material-nextjs/src/{v13-Link => v13-appRouter}/linkClasses.ts (100%)
create mode 100644 packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx
rename packages/mui-material-nextjs/src/{v13-Link => v13-pagesRouter}/Link.tsx (100%)
create mode 100644 packages/mui-material-nextjs/src/v13-pagesRouter/linkClasses.ts
delete mode 100644 packages/mui-material-nextjs/src/v14-Link/index.tsx
diff --git a/packages/mui-material-nextjs/src/v13-Link/index.tsx b/packages/mui-material-nextjs/src/v13-Link/index.tsx
deleted file mode 100644
index 60fc3e41f75451..00000000000000
--- a/packages/mui-material-nextjs/src/v13-Link/index.tsx
+++ /dev/null
@@ -1,4 +0,0 @@
-export { default } from './Link';
-export { default as linkClasses } from './linkClasses';
-export type { LinkClasses } from './linkClasses';
-export type { LinkProps } from './Link';
diff --git a/packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx b/packages/mui-material-nextjs/src/v13-appRouter/Link.spec.tsx
similarity index 88%
rename from packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx
rename to packages/mui-material-nextjs/src/v13-appRouter/Link.spec.tsx
index cb7b7a89e4fd25..da130376674539 100644
--- a/packages/mui-material-nextjs/src/v13-Link/Link.spec.tsx
+++ b/packages/mui-material-nextjs/src/v13-appRouter/Link.spec.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import Link from '@mui/material-nextjs/v13-Link';
+import { Link } from '@mui/material-nextjs/v13-pagesRouter';
// @ts-expect-error href is required by Next.js
<Link />;
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx b/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
new file mode 100644
index 00000000000000..f1010c2064c3d8
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
@@ -0,0 +1,60 @@
+'use client';
+import * as React from 'react';
+import clsx from 'clsx';
+import { usePathname } from 'next/navigation';
+import NextLink, { LinkProps as NextLinkProps } from 'next/link';
+import MuiLink, { LinkOwnProps as MuiLinkProps } from '@mui/material/Link';
+import linkClasses from './linkClasses';
+
+export interface LinkProps
+ extends Omit<NextLinkProps, 'passHref' | 'legacyBehavior'>,
+ MuiLinkProps {
+ /**
+ * Extra class name to apply to the link.
+ */
+ className?: string;
+ /**
+ * The active class name to apply when the current page is the same as the link's href.
+ * @default 'Mui-active'
+ */
+ activeClassName?: string;
+}
+
+const Link = React.forwardRef(function Link({
+ href,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ locale,
+ as,
+ className: classNameProp,
+ activeClassName = linkClasses.active,
+ ...muiLinkProps
+}: LinkProps) {
+ const nextPathname = usePathname();
+ const pathname = typeof href === 'string' ? href : href.pathname;
+ const className = clsx(classNameProp, {
+ [activeClassName]: nextPathname === pathname && activeClassName,
+ });
+ return (
+ <NextLink
+ {...{
+ href,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ locale,
+ as,
+ }}
+ // below props are required for NextLink to work with MUI Link
+ passHref
+ legacyBehavior
+ >
+ <MuiLink className={className} {...muiLinkProps} />
+ </NextLink>
+ );
+});
+
+export default Link;
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/index.ts b/packages/mui-material-nextjs/src/v13-appRouter/index.ts
index 3b153dde004ec4..4b80c2d2d6c9d3 100644
--- a/packages/mui-material-nextjs/src/v13-appRouter/index.ts
+++ b/packages/mui-material-nextjs/src/v13-appRouter/index.ts
@@ -1,3 +1,7 @@
'use client';
export { default as AppRouterCacheProvider } from './appRouterV13';
export * from './appRouterV13';
+export { default as Link } from './Link';
+export { default as linkClasses, getLinkUtilityClass } from './linkClasses';
+export type { LinkProps } from './Link';
+export type { LinkClasses } from './linkClasses';
diff --git a/packages/mui-material-nextjs/src/v13-Link/linkClasses.ts b/packages/mui-material-nextjs/src/v13-appRouter/linkClasses.ts
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-Link/linkClasses.ts
rename to packages/mui-material-nextjs/src/v13-appRouter/linkClasses.ts
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx
new file mode 100644
index 00000000000000..da130376674539
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx
@@ -0,0 +1,25 @@
+import * as React from 'react';
+import { Link } from '@mui/material-nextjs/v13-pagesRouter';
+
+// @ts-expect-error href is required by Next.js
+<Link />;
+<Link href="" />;
+<Link
+ href={{
+ pathname: '/about',
+ query: { name: 'test' },
+ }}
+/>;
+<Link href="/dashboard" replace>
+ Dashboard
+</Link>;
+<Link href="/dashboard" scroll={false}>
+ Dashboard
+</Link>;
+<Link href="/dashboard" prefetch={false}>
+ Dashboard
+</Link>;
+
+<Link href="" sx={{ color: 'secondary.dark' }} />;
+<Link href="" variant="caption" />;
+<Link href="" underline="always" />;
diff --git a/packages/mui-material-nextjs/src/v13-Link/Link.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-Link/Link.tsx
rename to packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
index d9e2732ece44e4..b8c2edab4ff338 100644
--- a/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/index.ts
@@ -1 +1,5 @@
export * from './pagesRouterV13';
+export { default as Link } from './Link';
+export { default as linkClasses, getLinkUtilityClass } from './linkClasses';
+export type { LinkProps } from './Link';
+export type { LinkClasses } from './linkClasses';
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/linkClasses.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/linkClasses.ts
new file mode 100644
index 00000000000000..6c2438e043732a
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/linkClasses.ts
@@ -0,0 +1,26 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { LinkClasses as MuiLinkClasses } from '@mui/material/Link';
+
+export interface LinkClasses extends MuiLinkClasses {
+ /**
+ * Styles applied to the root element when the link is active.
+ */
+ active: string;
+}
+
+export function getLinkUtilityClass(slot: string): string {
+ return generateUtilityClass('MuiLink', slot);
+}
+
+const linkClasses: LinkClasses = generateUtilityClasses('MuiLink', [
+ 'root',
+ 'underlineNone',
+ 'underlineHover',
+ 'underlineAlways',
+ 'button',
+ 'focusVisible',
+ 'active',
+]);
+
+export default linkClasses;
diff --git a/packages/mui-material-nextjs/src/v14-Link/index.tsx b/packages/mui-material-nextjs/src/v14-Link/index.tsx
deleted file mode 100644
index be219e76a2d9b4..00000000000000
--- a/packages/mui-material-nextjs/src/v14-Link/index.tsx
+++ /dev/null
@@ -1,2 +0,0 @@
-export { default } from '../v13-Link';
-export type { LinkProps } from '../v13-Link';
From 8c2f7d5c10f79624bfa9e2cf326195b087bd44ae Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 22 Dec 2023 15:03:46 +0700
Subject: [PATCH 5/8] add Link doc
---
docs/data/material/guides/nextjs/nextjs.md | 56 ++++++++++++++++++++++
1 file changed, 56 insertions(+)
diff --git a/docs/data/material/guides/nextjs/nextjs.md b/docs/data/material/guides/nextjs/nextjs.md
index 4be2f9de562051..f5eba7c197a086 100644
--- a/docs/data/material/guides/nextjs/nextjs.md
+++ b/docs/data/material/guides/nextjs/nextjs.md
@@ -59,6 +59,35 @@ This option ensures that the styles generated by Material UI will be wrapped in
To learn more about it, see [the MDN CSS layer documentation](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer).
+### Link
+
+The package provides a thin wrapper Link component that combines the functionality of the Next.js [Link](https://nextjs.org/docs/api-reference/next/link) and the styles of Material UI [Link](https://mui.com/components/links/).
+
+You can pass any props supported by both components to the Link.
+
+```js
+import { Link } from '@mui/material-nextjs/v13-appRouter'; // or `v14-appRouter` if you are using Next.js v14
+
+function Nav() {
+ return (
+ <div>
+ <Link href="/dashboard" variant="caption" sx={{ bgcolor: 'grey.100' }}>
+ Dashboard
+ </Link>
+ </div>
+ );
+}
+```
+
+To learn more about the supported props, visit:
+
+- Next.js related props: [Next.js Link](https://nextjs.org/docs/app/api-reference/components/link#props)
+- Material UI related props: [Material UI Link](/material-ui/react-link/)
+
+:::warning
+Do not use the Link from <b>`@mui/material-nextjs/*-pagesRouter`</b> for App Router.
+:::
+
## Pages Router
This section walks through the Material UI integration with the Next.js [Pages Router](https://nextjs.org/docs/pages/building-your-application), for both [Server Side Rendering](https://nextjs.org/docs/pages/building-your-application/rendering/server-side-rendering) (SSR) and [Static Site Generation](https://nextjs.org/docs/pages/building-your-application/rendering/static-site-generation) (SSG).
@@ -140,3 +169,30 @@ If you are using TypeScript, add `DocumentHeadTagsProps` to the Document's props
...
}
```
+
+### Link
+
+For pages router, use the Link only from `@mui/material-nextjs/*-pagesRouter`:
+
+```js
+import { Link } from '@mui/material-nextjs/v13-pagesRouter'; // or `v14-pagesRouter` if you are using Next.js v14
+
+function Nav() {
+ return (
+ <div>
+ <Link href="/dashboard" variant="caption" sx={{ bgcolor: 'grey.100' }}>
+ Dashboard
+ </Link>
+ </div>
+ );
+}
+```
+
+To learn more about the supported props, visit:
+
+- Next.js related props: [Next.js Link](https://nextjs.org/docs/pages/api-reference/components/link#props)
+- Material UI related props: [Material UI Link](/material-ui/react-link/)
+
+:::warning
+Do not use the Link from <b>`@mui/material-nextjs/*-appRouter`</b> for Pages Router.
+:::
From d390e383d3c8f84762ef12de2eaf10a255139e68 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Fri, 22 Dec 2023 15:19:35 +0700
Subject: [PATCH 6/8] forward ref
---
.../src/v13-appRouter/Link.tsx | 29 ++++++++++---------
.../src/v13-pagesRouter/Link.tsx | 29 ++++++++++---------
2 files changed, 32 insertions(+), 26 deletions(-)
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx b/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
index f1010c2064c3d8..9155fcffedfd53 100644
--- a/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
+++ b/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
@@ -20,18 +20,21 @@ export interface LinkProps
activeClassName?: string;
}
-const Link = React.forwardRef(function Link({
- href,
- replace,
- scroll,
- shallow,
- prefetch,
- locale,
- as,
- className: classNameProp,
- activeClassName = linkClasses.active,
- ...muiLinkProps
-}: LinkProps) {
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+ {
+ href,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ locale,
+ as,
+ className: classNameProp,
+ activeClassName = linkClasses.active,
+ ...muiLinkProps
+ },
+ ref,
+) {
const nextPathname = usePathname();
const pathname = typeof href === 'string' ? href : href.pathname;
const className = clsx(classNameProp, {
@@ -52,7 +55,7 @@ const Link = React.forwardRef(function Link({
passHref
legacyBehavior
>
- <MuiLink className={className} {...muiLinkProps} />
+ <MuiLink ref={ref} className={className} {...muiLinkProps} />
</NextLink>
);
});
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx
index b79574163afa5a..c6e947b810cf0a 100644
--- a/packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx
@@ -20,18 +20,21 @@ export interface LinkProps
activeClassName?: string;
}
-const Link = React.forwardRef(function Link({
- href,
- replace,
- scroll,
- shallow,
- prefetch,
- locale,
- as,
- className: classNameProp,
- activeClassName = linkClasses.active,
- ...muiLinkProps
-}: LinkProps) {
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+ {
+ href,
+ replace,
+ scroll,
+ shallow,
+ prefetch,
+ locale,
+ as,
+ className: classNameProp,
+ activeClassName = linkClasses.active,
+ ...muiLinkProps
+ },
+ ref,
+) {
const router = useRouter();
const pathname = typeof href === 'string' ? href : href.pathname;
const className = clsx(classNameProp, {
@@ -52,7 +55,7 @@ const Link = React.forwardRef(function Link({
passHref
legacyBehavior
>
- <MuiLink className={className} {...muiLinkProps} />
+ <MuiLink ref={ref} className={className} {...muiLinkProps} />
</NextLink>
);
});
From c0024f1e68550596877a5e329b93fe83b1a47570 Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 09:58:02 +0700
Subject: [PATCH 7/8] move to Link folder
---
.../{v13-pagesRouter => v13-appRouter/Link}/Link.spec.tsx | 2 +-
.../src/v13-appRouter/{ => Link}/Link.tsx | 0
packages/mui-material-nextjs/src/v13-appRouter/Link/index.ts | 4 ++++
.../src/v13-appRouter/{ => Link}/linkClasses.ts | 0
packages/mui-material-nextjs/src/v13-appRouter/index.ts | 5 +----
.../{v13-appRouter => v13-pagesRouter/Link}/Link.spec.tsx | 0
.../src/v13-pagesRouter/{ => Link}/Link.tsx | 0
.../mui-material-nextjs/src/v13-pagesRouter/Link/index.ts | 4 ++++
.../src/v13-pagesRouter/{ => Link}/linkClasses.ts | 0
9 files changed, 10 insertions(+), 5 deletions(-)
rename packages/mui-material-nextjs/src/{v13-pagesRouter => v13-appRouter/Link}/Link.spec.tsx (88%)
rename packages/mui-material-nextjs/src/v13-appRouter/{ => Link}/Link.tsx (100%)
create mode 100644 packages/mui-material-nextjs/src/v13-appRouter/Link/index.ts
rename packages/mui-material-nextjs/src/v13-appRouter/{ => Link}/linkClasses.ts (100%)
rename packages/mui-material-nextjs/src/{v13-appRouter => v13-pagesRouter/Link}/Link.spec.tsx (100%)
rename packages/mui-material-nextjs/src/v13-pagesRouter/{ => Link}/Link.tsx (100%)
create mode 100644 packages/mui-material-nextjs/src/v13-pagesRouter/Link/index.ts
rename packages/mui-material-nextjs/src/v13-pagesRouter/{ => Link}/linkClasses.ts (100%)
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx b/packages/mui-material-nextjs/src/v13-appRouter/Link/Link.spec.tsx
similarity index 88%
rename from packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx
rename to packages/mui-material-nextjs/src/v13-appRouter/Link/Link.spec.tsx
index da130376674539..7d581136f7df5f 100644
--- a/packages/mui-material-nextjs/src/v13-pagesRouter/Link.spec.tsx
+++ b/packages/mui-material-nextjs/src/v13-appRouter/Link/Link.spec.tsx
@@ -1,5 +1,5 @@
import * as React from 'react';
-import { Link } from '@mui/material-nextjs/v13-pagesRouter';
+import { Link } from '@mui/material-nextjs/v13-appRouter';
// @ts-expect-error href is required by Next.js
<Link />;
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/Link.tsx b/packages/mui-material-nextjs/src/v13-appRouter/Link/Link.tsx
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-appRouter/Link.tsx
rename to packages/mui-material-nextjs/src/v13-appRouter/Link/Link.tsx
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/Link/index.ts b/packages/mui-material-nextjs/src/v13-appRouter/Link/index.ts
new file mode 100644
index 00000000000000..b0958cdbcfbb49
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-appRouter/Link/index.ts
@@ -0,0 +1,4 @@
+export { default as Link } from './Link';
+export { default as linkClasses, getLinkUtilityClass } from './linkClasses';
+export type { LinkProps } from './Link';
+export type { LinkClasses } from './linkClasses';
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/linkClasses.ts b/packages/mui-material-nextjs/src/v13-appRouter/Link/linkClasses.ts
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-appRouter/linkClasses.ts
rename to packages/mui-material-nextjs/src/v13-appRouter/Link/linkClasses.ts
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/index.ts b/packages/mui-material-nextjs/src/v13-appRouter/index.ts
index 4b80c2d2d6c9d3..80eb6c9856903a 100644
--- a/packages/mui-material-nextjs/src/v13-appRouter/index.ts
+++ b/packages/mui-material-nextjs/src/v13-appRouter/index.ts
@@ -1,7 +1,4 @@
'use client';
export { default as AppRouterCacheProvider } from './appRouterV13';
export * from './appRouterV13';
-export { default as Link } from './Link';
-export { default as linkClasses, getLinkUtilityClass } from './linkClasses';
-export type { LinkProps } from './Link';
-export type { LinkClasses } from './linkClasses';
+export * from './Link';
diff --git a/packages/mui-material-nextjs/src/v13-appRouter/Link.spec.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/Link/Link.spec.tsx
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-appRouter/Link.spec.tsx
rename to packages/mui-material-nextjs/src/v13-pagesRouter/Link/Link.spec.tsx
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx b/packages/mui-material-nextjs/src/v13-pagesRouter/Link/Link.tsx
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-pagesRouter/Link.tsx
rename to packages/mui-material-nextjs/src/v13-pagesRouter/Link/Link.tsx
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/Link/index.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/Link/index.ts
new file mode 100644
index 00000000000000..b0958cdbcfbb49
--- /dev/null
+++ b/packages/mui-material-nextjs/src/v13-pagesRouter/Link/index.ts
@@ -0,0 +1,4 @@
+export { default as Link } from './Link';
+export { default as linkClasses, getLinkUtilityClass } from './linkClasses';
+export type { LinkProps } from './Link';
+export type { LinkClasses } from './linkClasses';
diff --git a/packages/mui-material-nextjs/src/v13-pagesRouter/linkClasses.ts b/packages/mui-material-nextjs/src/v13-pagesRouter/Link/linkClasses.ts
similarity index 100%
rename from packages/mui-material-nextjs/src/v13-pagesRouter/linkClasses.ts
rename to packages/mui-material-nextjs/src/v13-pagesRouter/Link/linkClasses.ts
From 2c4af10fa6aeeabe4fd62b9fc6913ed1ef7752ff Mon Sep 17 00:00:00 2001
From: siriwatknp <siriwatkunaporn@gmail.com>
Date: Mon, 8 Jan 2024 10:12:43 +0700
Subject: [PATCH 8/8] add clsx dep
---
packages/mui-material-nextjs/package.json | 10 +++++++++-
pnpm-lock.yaml | 3 +++
2 files changed, 12 insertions(+), 1 deletion(-)
diff --git a/packages/mui-material-nextjs/package.json b/packages/mui-material-nextjs/package.json
index 0199c517661263..75b17a20f12763 100644
--- a/packages/mui-material-nextjs/package.json
+++ b/packages/mui-material-nextjs/package.json
@@ -37,7 +37,15 @@
"typescript": "tsc -p tsconfig.json"
},
"dependencies": {
- "clsx": "^2.0.0"
+ "clsx": "^2.1.0"
+ },
+ "devDependencies": {
+ "@emotion/cache": "^11.11.0",
+ "@emotion/react": "^11.5.0",
+ "@emotion/server": "^11.11.0",
+ "@types/react": "^18.2.46",
+ "next": "13.4.19",
+ "react": "^18.2.0"
},
"peerDependencies": {
"@emotion/cache": "^11.11.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 899327c1ce4300..9737a65f0efd2e 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -1708,6 +1708,9 @@ importers:
'@mui/material':
specifier: ^5.0.0
version: link:../mui-material/build
+ clsx:
+ specifier: ^2.1.0
+ version: 2.1.0
devDependencies:
'@emotion/cache':
specifier: ^11.11.0