@graphcommerce/next-ui 5.2.0-canary.2 → 5.2.0-canary.3

package/Blog/BlogListItem/BlogListItem.tsx

@@ -1,5 +1,4 @@
 import { Box, Link, SxProps, Theme, Typography } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import { extendableComponent } from '../../Styles'
 import { breakpointVal } from '../../Styles/breakpointVal'
@@ -38,37 +37,35 @@ export function BlogListItem(props: BlogListItemProps) {
         ...(Array.isArray(sx) ? sx : [sx]),
       ]}
     >
-      <PageLink href={`/${url}`} passHref>
-        <Link color='inherit' underline='hover'>
-          <Box
-            className={classes.asset}
-            sx={(theme) => ({
-              display: 'grid',
-              alignContent: 'center',
-              overflow: 'hidden',
-              height: '100%',
-              width: '100%',
-              ...breakpointVal(
-                'borderRadius',
-                theme.shape.borderRadius * 2,
-                theme.shape.borderRadius * 3,
-                theme.breakpoints.values,
-              ),
-              '& img': {
-                height: '100% !important',
-                objectFit: 'cover',
-              },
-              '& p': {
-                alignSelf: 'center',
-                justifySelf: 'center',
-              },
-              background: theme.palette.background.paper,
-            })}
-          >
-            {asset}
-          </Box>
-        </Link>
-      </PageLink>
+      <Link href={`/${url}`} color='inherit' underline='hover'>
+        <Box
+          className={classes.asset}
+          sx={(theme) => ({
+            display: 'grid',
+            alignContent: 'center',
+            overflow: 'hidden',
+            height: '100%',
+            width: '100%',
+            ...breakpointVal(
+              'borderRadius',
+              theme.shape.borderRadius * 2,
+              theme.shape.borderRadius * 3,
+              theme.breakpoints.values,
+            ),
+            '& img': {
+              height: '100% !important',
+              objectFit: 'cover',
+            },
+            '& p': {
+              alignSelf: 'center',
+              justifySelf: 'center',
+            },
+            background: theme.palette.background.paper,
+          })}
+        >
+          {asset}
+        </Box>
+      </Link>
 
       <Box
         component='time'
@@ -83,13 +80,11 @@ export function BlogListItem(props: BlogListItemProps) {
         {formatter.format(new Date(date))}
       </Box>
 
-      <PageLink href={`/${url}`} passHref>
-        <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
-          <Typography component='h2' variant='h4'>
-            {title}
-          </Typography>
-        </Link>
-      </PageLink>
+      <Link href={`/${url}`} className={classes.title} color='inherit' underline='hover'>
+        <Typography component='h2' variant='h4'>
+          {title}
+        </Typography>
+      </Link>
     </Box>
   )
 }

package/Blog/BlogTags/BlogTag.tsx

@@ -1,5 +1,5 @@
 import { Chip, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
+import { NextLink } from '../../Theme'
 
 type BlogTagsProps = {
   url: string
@@ -10,17 +10,11 @@ type BlogTagsProps = {
 export function BlogTag(props: BlogTagsProps) {
   const { url, title, sx = [] } = props
   return (
-    <PageLink href={`/${url}`} passHref>
-      <Chip
-        label={title}
-        sx={[
-          {
-            marginRight: 3,
-            borderRadius: 2,
-          },
-          ...(Array.isArray(sx) ? sx : [sx]),
-        ]}
-      />
-    </PageLink>
+    <Chip
+      href={`/${url}`}
+      component={NextLink}
+      label={title}
+      sx={[{ marginRight: 3, borderRadius: 2 }, ...(Array.isArray(sx) ? sx : [sx])]}
+    />
   )
 }

package/CHANGELOG.md

@@ -1,5 +1,7 @@
 # Change Log
 
+## 5.2.0-canary.3
+
 ## 5.2.0-canary.2
 
 ### Patch Changes

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,7 +1,6 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { i18n } from '@lingui/core'
 import { Box, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
@@ -69,19 +68,18 @@ export function LayoutHeaderBack(props: BackProps) {
 
   if (up?.href && up.href !== path)
     return (
-      <PageLink href={up.href} passHref>
-        <LinkOrButton
-          button={{ variant: 'pill', sx: buttonSx }}
-          startIcon={backIcon}
-          aria-label={up.title}
-          color='inherit'
-          {...props}
-        >
-          <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
-            {up.title}
-          </Box>
-        </LinkOrButton>
-      </PageLink>
+      <LinkOrButton
+        href={up.href}
+        button={{ variant: 'pill', sx: buttonSx }}
+        startIcon={backIcon}
+        aria-label={up.title}
+        color='inherit'
+        {...props}
+      >
+        <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+          {up.title}
+        </Box>
+      </LinkOrButton>
     )
 
   return null

package/LayoutParts/DesktopNavBarItem.tsx

@@ -1,11 +1,10 @@
 import { Box, Link, LinkProps } from '@mui/material'
-import PageLink, { LinkProps as PageLinkProps } from 'next/link'
 import { useRouter } from 'next/router'
 import { extendableComponent } from '../Styles/extendableComponent'
 
 const { classes, selectors } = extendableComponent('DesktopNavItem', ['root', 'line'] as const)
 
-export type DesktopNavItemLinkProps = LinkProps<'a'> & Pick<PageLinkProps, 'href'>
+export type DesktopNavItemLinkProps = LinkProps<'a'>
 export type DesktopNavItemButtonProps = LinkProps<'div'> & {
   onClick: LinkProps<'button'>['onClick']
 }
@@ -43,36 +42,35 @@ export function DesktopNavItem(props: DesktopNavItemLinkProps | DesktopNavItemBu
 
   const { href, children, sx = [], ...linkProps } = props
 
-  const active = router.asPath.startsWith(href.toString())
+  const active = router.asPath.startsWith((href ?? '').toString())
 
   return (
-    <PageLink href={href} passHref>
-      <Link
-        className={classes.root}
-        variant='h6'
-        color='text.primary'
-        underline='none'
-        {...linkProps}
-        sx={[{ whiteSpace: 'nowrap', paddingTop: '6px' }, ...(Array.isArray(sx) ? sx : [sx])]}
-      >
-        <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
-        <Box
-          component='span'
-          className={classes.line}
-          sx={{
-            maxWidth: 40,
-            width: '100%',
-            display: 'flex',
-            justifyContent: 'center',
-            height: 2,
-            background: (theme) => theme.palette.primary.main,
-            margin: '0 auto',
-            marginTop: '6px',
-            opacity: active ? 1 : 0,
-          }}
-        />
-      </Link>
-    </PageLink>
+    <Link
+      href={href}
+      className={classes.root}
+      variant='h6'
+      color='text.primary'
+      underline='none'
+      {...linkProps}
+      sx={[{ whiteSpace: 'nowrap', paddingTop: '6px' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    >
+      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>{children}</Box>
+      <Box
+        component='span'
+        className={classes.line}
+        sx={{
+          maxWidth: 40,
+          width: '100%',
+          display: 'flex',
+          justifyContent: 'center',
+          height: 2,
+          background: (theme) => theme.palette.primary.main,
+          margin: '0 auto',
+          marginTop: '6px',
+          opacity: active ? 1 : 0,
+        }}
+      />
+    </Link>
   )
 }
 DesktopNavItem.selectors = selectors

package/LayoutParts/Logo.tsx

@@ -6,9 +6,9 @@ import {
   Theme,
   unstable_composeClasses as composeClasses,
 } from '@mui/material'
-import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { forwardRef } from 'react'
+import { NextLink } from '../Theme'
 
 /** We're creating some boilerplate */
 const name = 'GcLogo'
@@ -23,7 +23,7 @@ const useUtilityClasses = ({ classes }: LogoClassProps) =>
   composeClasses({ logo: ['logo'], parent: ['parent'] }, getLogoUtilityClass, classes)
 
 /** Creating styled components */
-const LogoContainer = styled('div', {
+const LogoContainer = styled(NextLink, {
   name,
   slot: 'parent',
   overridesResolver: (_props, styles) => styles.parent,
@@ -48,7 +48,7 @@ export type LogoProps = {
   sx?: SxProps<Theme>
 } & LogoClassProps
 
-export const Logo = forwardRef<HTMLDivElement, LogoProps>((props, ref) => {
+export const Logo = forwardRef<HTMLAnchorElement, LogoProps>((props, ref) => {
   const { href = '/', image, sx } = props
   const router = useRouter()
 
@@ -68,10 +68,8 @@ export const Logo = forwardRef<HTMLDivElement, LogoProps>((props, ref) => {
       {img}
     </LogoContainer>
   ) : (
-    <PageLink href={href} passHref>
-      <LogoContainer ref={ref} as='a' sx={sx} className={classes.parent}>
-        {img}
-      </LogoContainer>
-    </PageLink>
+    <LogoContainer href={href} ref={ref} sx={sx} className={classes.parent}>
+      {img}
+    </LogoContainer>
   )
 })

package/LayoutParts/MenuFabItem.tsx

@@ -1,9 +1,10 @@
 import { ListItemButton, ListItemButtonProps, ListItemText } from '@mui/material'
-import PageLink, { LinkProps as PageLinkProps } from 'next/link'
 import { useRouter } from 'next/router'
+import { NextLink } from '../Theme'
 
-export type MenuFabItemProps = Omit<ListItemButtonProps<'a'>, 'href' | 'button'> &
-  Pick<PageLinkProps, 'href'>
+export type MenuFabItemProps = Omit<ListItemButtonProps<'a'>, 'href' | 'button'> & {
+  href: NonNullable<ListItemButtonProps<'a'>['href']>
+}
 
 export function MenuFabItem(props: MenuFabItemProps) {
   const { href, children, sx = [], ...listItemProps } = props
@@ -12,14 +13,12 @@ export function MenuFabItem(props: MenuFabItemProps) {
   const active = hrefString === '/' ? path === hrefString : path.startsWith(hrefString)
 
   return (
-    <PageLink key={href.toString()} href={href} passHref>
-      <ListItemButton component='a' dense selected={active} {...listItemProps}>
-        <ListItemText
-          sx={[{ typography: 'h4', lineHeight: 1.1 }, ...(Array.isArray(sx) ? sx : [sx])]}
-          disableTypography
-          primary={children}
-        />
-      </ListItemButton>
-    </PageLink>
+    <ListItemButton href={href} component={NextLink} dense selected={active} {...listItemProps}>
+      <ListItemText
+        sx={[{ typography: 'h4', lineHeight: 1.1 }, ...(Array.isArray(sx) ? sx : [sx])]}
+        disableTypography
+        primary={children}
+      />
+    </ListItemButton>
   )
 }

package/LayoutParts/MenuFabSecondaryItem.tsx

@@ -1,5 +1,4 @@
 import { ListItemButton, ListItemIcon, ListItemText, SxProps, Theme } from '@mui/material'
-import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import React from 'react'
 import { extendableComponent } from '../Styles'
@@ -20,19 +19,18 @@ export function MenuFabSecondaryItem(props: FabMenuSecondaryItemProps) {
   const router = useRouter()
 
   return (
-    <PageLink href={href} passHref>
-      <ListItemButton
-        className={classes.root}
-        sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
-        component='a'
-        dense
-        selected={router.asPath.startsWith(href)}
-      >
-        <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
-          {icon}
-        </ListItemIcon>
-        <ListItemText className={classes.icon}>{children}</ListItemText>
-      </ListItemButton>
-    </PageLink>
+    <ListItemButton
+      href={href}
+      className={classes.root}
+      sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]}
+      component='a'
+      dense
+      selected={router.asPath.startsWith(href)}
+    >
+      <ListItemIcon className={classes.text} sx={{ paddingRight: '8px', minWidth: 'unset' }}>
+        {icon}
+      </ListItemIcon>
+      <ListItemText className={classes.icon}>{children}</ListItemText>
+    </ListItemButton>
   )
 }

package/Navigation/components/NavigationItem.tsx

@@ -1,7 +1,6 @@
 /* eslint-disable @typescript-eslint/no-use-before-define */
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
 import { alpha, Box, ListItemButton, styled, useEventCallback, useTheme } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
 import { extendableComponent } from '../../Styles/extendableComponent'
@@ -15,6 +14,7 @@ import {
   useNavigation,
 } from '../hooks/useNavigation'
 import type { NavigationList } from './NavigationList'
+import { NextLink } from '../../Theme'
 
 type OwnerState = {
   first?: boolean
@@ -160,30 +160,30 @@ export const NavigationItem = React.memo<NavigationItemProps>((props) => {
 
     return (
       <NavigationLI sx={[hideItem && { display: 'none' }]} className={classes.li}>
-        <PageLink href={href} passHref prefetch={false}>
-          <ListItemButton
-            className={classes.item}
-            component='a'
-            sx={(theme) => ({
-              gridRowStart: row,
-              gridColumnStart: column,
-              gap: theme.spacings.xxs,
-            })}
-            tabIndex={tabIndex}
-            onClick={onCloseHandler}
+        <ListItemButton
+          component={NextLink}
+          prefetch={false}
+          href={href}
+          className={classes.item}
+          sx={(theme) => ({
+            gridRowStart: row,
+            gridColumnStart: column,
+            gap: theme.spacings.xxs,
+          })}
+          tabIndex={tabIndex}
+          onClick={onCloseHandler}
+        >
+          <Box
+            component='span'
+            sx={{
+              whiteSpace: 'nowrap',
+              overflowX: 'hidden',
+              textOverflow: 'ellipsis',
+            }}
           >
-            <Box
-              component='span'
-              sx={{
-                whiteSpace: 'nowrap',
-                overflowX: 'hidden',
-                textOverflow: 'ellipsis',
-              }}
-            >
-              {name}
-            </Box>
-          </ListItemButton>
-        </PageLink>
+            {name}
+          </Box>
+        </ListItemButton>
       </NavigationLI>
     )
   }

package/PageMeta/PageMeta.tsx

@@ -54,7 +54,7 @@ export function canonicalize(router: PartialNextRouter, incomming?: Canonical) {
       }
     }
 
-    let [href, as] = resolveHref(router as NextRouter, canonical, true)
+    let [href, as = href] = resolveHref(router as NextRouter, canonical, true)
 
     const curLocale = router.locale
 

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,36 +1,29 @@
 import { ListItemButtonProps, ListItemButton, ListItemIcon, ListItemText } from '@mui/material'
-import PageLink from 'next/link'
 import React from 'react'
 import { IconSvg } from '../../IconSvg'
+import { NextLink } from '../../Theme'
 import { iconChevronRight } from '../../icons'
 
 export type ButtonLinkListItemProps = {
-  url: string
   endIcon?: React.ReactNode
-} & ListItemButtonProps
+  url: string
+} & Omit<ListItemButtonProps<typeof NextLink>, 'href'>
 
 export function ButtonLinkListItem(props: ButtonLinkListItemProps) {
-  const {
-    children,
-    url,
-    endIcon = <IconSvg src={iconChevronRight} />,
-    ...ButtonLinkListItemProps
-  } = props
+  const { children, endIcon = <IconSvg src={iconChevronRight} />, ...listItemButtonProps } = props
 
   return (
-    <PageLink href={url} passHref>
-      <ListItemButton
-        LinkComponent='a'
-        sx={(theme) => ({
-          padding: `${theme.spacings.xxs} 0`,
-          borderBottom: `1px solid ${theme.palette.divider}`,
-          justifyContent: 'space-between',
-        })}
-        {...ButtonLinkListItemProps}
-      >
-        <ListItemText>{children}</ListItemText>
-        <ListItemIcon>{endIcon}</ListItemIcon>
-      </ListItemButton>
-    </PageLink>
+    <ListItemButton
+      component={NextLink}
+      sx={(theme) => ({
+        padding: `${theme.spacings.xxs} 0`,
+        borderBottom: `1px solid ${theme.palette.divider}`,
+        justifyContent: 'space-between',
+      })}
+      {...listItemButtonProps}
+    >
+      <ListItemText>{children}</ListItemText>
+      <ListItemIcon>{endIcon}</ListItemIcon>
+    </ListItemButton>
   )
 }

package/Theme/NextLink.tsx

@@ -0,0 +1,41 @@
+import Link, { LinkProps as NextLinkProps } from 'next/link'
+import React, { forwardRef } from 'react'
+
+type LinkProps = Omit<NextLinkProps, 'legacyBehavior' | 'passHref' | 'as'>
+type AnchorWithoutLinkProps = Omit<React.AnchorHTMLAttributes<HTMLAnchorElement>, keyof LinkProps>
+type LinkProppies = AnchorWithoutLinkProps & Partial<LinkProps> & { relative?: boolean }
+
+/**
+ * This is a wrapper around the Next.js Link component which can be used with MUI's Link component
+ * or any ButtonBase derivative.
+ *
+ * By default you can use the the props provided by the Link or Button component, but you to pass
+ * any next/link specific props like `prefetch`, `replace`, `scroll`, `shallow`
+ *
+ * ```typescript
+ * const button = (
+ *   <Link href='/cart' component={NextLink} prefetch={false}>
+ *     Cart
+ *   </Link>
+ * )
+ * ```
+ */
+export const NextLink = forwardRef<HTMLAnchorElement, LinkProppies>((props, ref) => {
+  let { href, target, relative, ...rest } = props
+
+  // The href is optional in a MUI link, but required in a Next.js link
+  // eslint-disable-next-line jsx-a11y/anchor-has-content
+  if (!href) return <a {...rest} ref={ref} />
+
+  const hrefString = href.toString()
+  const isExternal = hrefString.includes(':') || hrefString.startsWith('//')
+  const isHash = hrefString.startsWith('#')
+
+  if (isExternal) target = target || '_blank'
+  target = typeof target === 'undefined' && isExternal ? '_blank' : target
+
+  // Relative URL's cause more pain than they're worth
+  if (!isExternal && !isHash && !hrefString.startsWith('/') && !relative) href = `/${href}`
+
+  return <Link href={href} {...rest} target={target} ref={ref} />
+})

package/Theme/index.ts

@@ -5,3 +5,4 @@ export * from './MuiFab'
 export * from './MuiSlider'
 export * from './MuiSnackbar'
 export * from './themeDefaults'
+export * from './NextLink'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "5.2.0-canary.2",
+  "version": "5.2.0-canary.3",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "@emotion/react": "^11.10.5",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.10.5",
-    "@graphcommerce/framer-next-pages": "5.2.0-canary.2",
-    "@graphcommerce/framer-scroller": "5.2.0-canary.2",
-    "@graphcommerce/framer-utils": "5.2.0-canary.2",
-    "@graphcommerce/image": "5.2.0-canary.2",
+    "@graphcommerce/framer-next-pages": "5.2.0-canary.3",
+    "@graphcommerce/framer-scroller": "5.2.0-canary.3",
+    "@graphcommerce/framer-utils": "5.2.0-canary.3",
+    "@graphcommerce/image": "5.2.0-canary.3",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.2",
-    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.2",
-    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.2",
+    "@graphcommerce/eslint-config-pwa": "5.2.0-canary.3",
+    "@graphcommerce/prettier-config-pwa": "5.2.0-canary.3",
+    "@graphcommerce/typescript-config-pwa": "5.2.0-canary.3",
     "@types/cookie": "^0.5.1",
     "@types/react-is": "^17.0.3",
     "typescript": "4.9.4"
@@ -40,7 +40,7 @@
     "@mui/lab": "^5.0.0-alpha.68",
     "@mui/material": "^5.10.16",
     "framer-motion": "^7.0.0",
-    "next": "^12.1.2",
+    "next": "^13.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }