@graphcommerce/next-ui 4.2.0 → 4.2.3

package/CHANGELOG.md

@@ -1,5 +1,52 @@
 # Change Log
 
+## 4.2.3
+
+### Patch Changes
+
+- [#1299](https://github.com/ho-nl/m2-pwa/pull/1299)
+  [`e37caf437`](https://github.com/ho-nl/m2-pwa/commit/e37caf4376b304ab733d41f2b4fa8be2c35fd807)
+  Thanks [@paales](https://github.com/paales)! - Make sure Buttons and Fabs can have custom variants
+
+## 4.2.2
+
+### Patch Changes
+
+- [#1296](https://github.com/ho-nl/m2-pwa/pull/1296)
+  [`a9cff2ce6`](https://github.com/ho-nl/m2-pwa/commit/a9cff2ce63fce5b86e9fd6bf63c10c782326d50e)
+  Thanks [@paales](https://github.com/paales)! - Make sure the page is max height when no menuFab or
+  cartFab is present
+
+* [#1296](https://github.com/ho-nl/m2-pwa/pull/1296)
+  [`8473123fa`](https://github.com/ho-nl/m2-pwa/commit/8473123fa7d3f3eb1d282d9b4205c803a88010ea)
+  Thanks [@paales](https://github.com/paales)! - implement handling for canonical URLs based on
+  NEXT_PUBLIC_SITE_URL
+
+- [#1296](https://github.com/ho-nl/m2-pwa/pull/1296)
+  [`50e205c51`](https://github.com/ho-nl/m2-pwa/commit/50e205c51f4d0d67d41d22fd70e8ed9a0996489e)
+  Thanks [@paales](https://github.com/paales)! - make sure the scroll performance of galleries in
+  safari is better
+
+## 4.2.1
+
+### Patch Changes
+
+- [#1294](https://github.com/ho-nl/m2-pwa/pull/1294)
+  [`19f33e0aa`](https://github.com/ho-nl/m2-pwa/commit/19f33e0aaf4e3121edd444926d08b6459d3ef400)
+  Thanks [@paales](https://github.com/paales)! - Make sure the minHeight of overlays always have the
+  correct height, even if the content changes size
+
+* [#1294](https://github.com/ho-nl/m2-pwa/pull/1294)
+  [`aea787542`](https://github.com/ho-nl/m2-pwa/commit/aea787542484a0480a48031fcc4a9a5566c6bfc7)
+  Thanks [@paales](https://github.com/paales)! - Make sure the labels of LayoutHeaderBack/Close
+  aren’t rendered on mobile
+
+* Updated dependencies
+  [[`4e28c8afd`](https://github.com/ho-nl/m2-pwa/commit/4e28c8afd9cead3577dd0eff97b5c44ba4c1c862),
+  [`afb993244`](https://github.com/ho-nl/m2-pwa/commit/afb993244aabc8135ce54a79743cbf63bc5677d3)]:
+  - @graphcommerce/framer-scroller@2.0.5
+  - @graphcommerce/framer-next-pages@3.1.1
+
 ## 4.2.0
 
 ### Minor Changes

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,5 +1,6 @@
 import { useUp, usePrevUp, usePageContext } from '@graphcommerce/framer-next-pages'
 import { t } from '@lingui/macro'
+import { Box } from '@mui/material'
 import PageLink from 'next/link'
 import { useRouter } from 'next/router'
 import { LinkOrButton, LinkOrButtonProps } from '../../Button/LinkOrButton'
@@ -45,7 +46,9 @@ export default function LayoutHeaderBack(props: BackProps) {
         aria-label={label}
         {...props}
       >
-        {label}
+        <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+          {label}
+        </Box>
       </LinkOrButton>
     )
   }
@@ -60,7 +63,9 @@ export default function LayoutHeaderBack(props: BackProps) {
           color='inherit'
           {...props}
         >
-          {up.title}
+          <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+            {up.title}
+          </Box>
         </LinkOrButton>
       </PageLink>
     )

package/Layout/components/LayoutHeaderClose.tsx

@@ -1,5 +1,6 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { Trans } from '@lingui/macro'
+import { Box } from '@mui/material'
 import { LinkOrButton } from '../../Button/LinkOrButton'
 import { IconSvg } from '../../IconSvg'
 import { iconClose } from '../../icons'
@@ -19,10 +20,12 @@ export default function LayoutHeaderClose() {
       color='inherit'
       onClick={onClick}
       aria-label='Close'
-      startIcon={<IconSvg src={iconClose} />}
+      startIcon={<IconSvg src={iconClose} size='medium' />}
       // className={classes.close}
     >
-      <Trans>Close</Trans>
+      <Box component='span' sx={{ display: { xs: 'none', md: 'inline' } }}>
+        <Trans>Close</Trans>
+      </Box>
     </LinkOrButton>
   )
 }

package/LayoutDefault/components/LayoutDefault.tsx

@@ -86,7 +86,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         >
           {header}
         </Box>
-        {(menuFab || cartFab) && (
+        {menuFab || cartFab ? (
           <Box
             className={classes.fabs}
             sx={(theme) => ({
@@ -115,6 +115,8 @@ export function LayoutDefault(props: LayoutDefaultProps) {
             {menuFab}
             {cartFab}
           </Box>
+        ) : (
+          <div />
         )}
         <div className={classes.children}>{children}</div>
         <div className={classes.footer}>{footer}</div>

package/LayoutOverlay/components/LayoutOverlayBase.tsx

@@ -342,7 +342,9 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                  * can't change this value with JS as that causes much jank
                  */
                 '&.sizeSmFull, &.sizeSmMinimal': { paddingBottom: 56 },
-                '&.variantSmBottom.sizeSmFull': { minHeight: 'calc(100vh - 56px)' },
+                '&.variantSmBottom.sizeSmFull': {
+                  minHeight: `calc(100vh - ${theme.appShell.headerHeightSm} * 0.5)`,
+                },
 
                 '&.variantSmBottom': {
                   borderTopLeftRadius: `${theme.shape.borderRadius * 4}px`,
@@ -373,7 +375,7 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
                 },
 
                 '&.sizeMdFull.variantMdBottom': {
-                  minHeight: `calc(100vh - ${theme.appShell.headerHeightMd})`,
+                  minHeight: `calc(100vh + ${theme.appShell.headerHeightMd} - (${theme.appShell.appBarHeightMd} - ${theme.appShell.appBarInnerHeightMd}) * 0.5)`,
                 },
                 '&.sizeMdFull.variantMdLeft': {
                   paddingBottom: '1px',

package/LayoutParts/MenuFab.tsx

@@ -97,6 +97,7 @@ export function MenuFab(props: MenuFabProps) {
           open={!!openEl}
           onClose={() => setOpenEl(null)}
           disableScrollLock
+          disablePortal
           transitionDuration={{ appear: 175, enter: 175, exit: 175 }}
           PaperProps={{
             sx: (theme) => ({

package/PageMeta/index.tsx

@@ -1,5 +1,12 @@
 import { usePageContext } from '@graphcommerce/framer-next-pages'
+import {
+  resolveHref,
+  getDomainLocale,
+  addBasePath,
+  addLocale,
+} from 'next/dist/shared/lib/router/router'
 import Head from 'next/head'
+import { useRouter } from 'next/router'
 
 // https://developers.google.com/search/docs/advanced/robots/robots_meta_tag#directives
 export type MetaRobots =
@@ -15,19 +22,60 @@ export type MetaRobots =
   | `max-video-preview:${number}`
 type MetaRobotsAll = ['all' | 'none']
 
+type Canonical = `http://${string}` | `https://${string}` | `/${string}` | string
+
 export type PageMetaProps = {
   title: string
-  canonical?: `http://${string}` | `https://${string}` | string
+  canonical?: Canonical
   metaDescription?: string
   metaRobots?: MetaRobotsAll | MetaRobots[]
 }
 
+export function useCanonical(incomming?: Canonical) {
+  const router = useRouter()
+  let canonical = incomming
+
+  if (!canonical) return canonical
+
+  if (canonical?.startsWith('/')) {
+    if (!process.env.NEXT_PUBLIC_SITE_URL) {
+      if (process.env.NODE_ENV !== 'production') {
+        throw Error('NEXT_PUBLIC_SITE_URL is not defined in .env')
+      }
+    }
+
+    let [href, as] = resolveHref(router, canonical, true)
+
+    const curLocale = router.locale
+
+    // Copied from here https://github.com/vercel/next.js/blob/canary/packages/next/client/link.tsx#L313-L327
+    const localeDomain =
+      router &&
+      router.isLocaleDomain &&
+      getDomainLocale(as, curLocale, router && router.locales, router && router.domainLocales)
+
+    href = localeDomain || addBasePath(addLocale(as, curLocale, router && router.defaultLocale))
+
+    canonical = `${process.env.NEXT_PUBLIC_SITE_URL}${href}`
+  }
+
+  if (canonical && !(canonical ?? 'http').startsWith('http')) {
+    if (process.env.NODE_ENV !== 'production') {
+      throw new Error(
+        `canonical must start with '/', 'http://' or 'https://', '${canonical}' given`,
+      )
+    }
+    canonical = undefined
+  }
+
+  return canonical
+}
+
 export function PageMeta(props: PageMetaProps) {
   const { active } = usePageContext()
-  const { title, canonical, metaDescription, metaRobots = ['all'] } = props
+  const { title, canonical: canonicalBare, metaDescription, metaRobots = ['all'] } = props
 
-  if (!(canonical ?? 'http').startsWith('http'))
-    throw new Error(`canonical must start with http:// or https://, '${canonical}' given`)
+  const canonical = useCanonical(canonicalBare)
 
   if (!active) return null
   return (

package/Theme/MuiButton.ts

@@ -1,7 +1,7 @@
 import { ComponentsVariants } from '@mui/material'
 import { responsiveVal } from '../Styles/responsiveVal'
 
-declare module '@mui/material/Button' {
+declare module '@mui/material/Button/Button' {
   interface ButtonPropsVariantOverrides {
     pill: true
   }

package/Theme/MuiFab.ts

@@ -40,7 +40,7 @@ export const useFabSize = (size: FabSize) => {
   return fabSize(size, theme)
 }
 
-declare module '@mui/material/Fab' {
+declare module '@mui/material/Fab/Fab' {
   interface FabPropsSizeOverrides {
     responsive: true
   }

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.2.0",
+  "version": "4.2.3",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,8 +19,8 @@
     "@emotion/react": "^11.7.1",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.6.0",
-    "@graphcommerce/framer-next-pages": "^3.1.0",
-    "@graphcommerce/framer-scroller": "^2.0.4",
+    "@graphcommerce/framer-next-pages": "^3.1.1",
+    "@graphcommerce/framer-scroller": "^2.0.5",
     "@graphcommerce/framer-utils": "^3.0.3",
     "@graphcommerce/image": "^3.1.0",
     "react-is": "^17.0.2",