@graphcommerce/next-ui 4.1.5 → 4.2.2

package/CHANGELOG.md

@@ -1,5 +1,64 @@
 # Change Log
 
+## 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
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`63f9b56eb`](https://github.com/ho-nl/m2-pwa/commit/63f9b56eb68ba790567ff1427e599fd2c3c8f1ee)
+  Thanks [@paales](https://github.com/paales)! - added responsive size to the Fab component
+
+### Patch Changes
+
+- [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`5a1ba9e66`](https://github.com/ho-nl/m2-pwa/commit/5a1ba9e664abbac89c4f5f71f7d6d6ed1aefa5c0)
+  Thanks [@paales](https://github.com/paales)! - Renamed SvgIcon to IconSvg to prevent collisions
+  with MUI
+
+* [#1292](https://github.com/ho-nl/m2-pwa/pull/1292)
+  [`990df655b`](https://github.com/ho-nl/m2-pwa/commit/990df655b73b469718d6cb5837ee65dfe2ad6a1d)
+  Thanks [@paales](https://github.com/paales)! - `<SearchLink />` a more lightweight (less js)
+  alternative for `<SearchButton />`
+
 ## 4.1.5
 
 ### Patch Changes

package/ChipMenu/index.tsx

@@ -1,9 +1,9 @@
 import { Chip, ChipProps, Menu, MenuProps, menuClasses, SxProps, Theme } from '@mui/material'
 import React, { PropsWithChildren, useState } from 'react'
+import { IconSvg } from '../IconSvg'
 import { SectionHeader } from '../SectionHeader'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronDown, iconChevronUp, iconCancelAlt } from '../icons'
 
 const { classes, selectors } = extendableComponent('FilterEqual', ['chip'] as const)
@@ -32,9 +32,9 @@ export function ChipMenu(props: ChipMenuProps) {
 
   const [openEl, setOpenEl] = useState<null | HTMLElement>(null)
 
-  let deleteIcon = <SvgIcon src={iconChevronDown} size='medium' />
-  if (selected) deleteIcon = <SvgIcon src={iconCancelAlt} size='medium' fillIcon />
-  if (openEl) deleteIcon = <SvgIcon src={iconChevronUp} size='medium' />
+  let deleteIcon = <IconSvg src={iconChevronDown} size='medium' />
+  if (selected) deleteIcon = <IconSvg src={iconCancelAlt} size='medium' fillIcon />
+  if (openEl) deleteIcon = <IconSvg src={iconChevronUp} size='medium' />
 
   const selectedAndMenuHidden = selected && !openEl && !!selectedLabel
 

package/Form/InputCheckmark.tsx

@@ -1,8 +1,11 @@
-import { SvgIconProps } from '@mui/material'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { iconCheckmark } from '../icons'
 
-export type InputCheckmarkProps = { show?: boolean; select?: boolean } & Omit<SvgIconProps, 'src'>
+export type InputCheckmarkProps = {
+  show?: boolean
+  select?: boolean
+  children?: React.ReactNode
+} & Omit<IconSvgProps, 'src'>
 
 /**
  * When the `valid` prop is passed it will render a CheckIcon, else it will render children.
@@ -16,7 +19,7 @@ export function InputCheckmark(props: InputCheckmarkProps) {
 
   if (!show) return <>{children}</>
   return (
-    <SvgIcon
+    <IconSvg
       src={iconCheckmark}
       className='InputCheckmark'
       sx={[{ stroke: '#01D26A' }, select && { marginRight: '15px' }]}

package/FramerScroller/SidebarGallery.tsx

@@ -12,10 +12,10 @@ import { Fab, useTheme, alpha, Box, styled, SxProps, Theme } from '@mui/material
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect, useRef } from 'react'
+import { IconSvg } from '../IconSvg'
 import { Row } from '../Row'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight, iconFullscreen, iconFullscreenExit } from '../icons'
 
 const MotionBox = styled(m.div)({})
@@ -227,7 +227,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                   boxShadow: theme.shadows[6],
                 }}
               >
-                {!zoomed ? <SvgIcon src={iconFullscreen} /> : <SvgIcon src={iconFullscreenExit} />}
+                {!zoomed ? <IconSvg src={iconFullscreen} /> : <IconSvg src={iconFullscreenExit} />}
               </Fab>
             </MotionBox>
             <Box
@@ -247,7 +247,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 size='small'
                 className={classes.sliderButtons}
               >
-                <SvgIcon src={iconChevronLeft} />
+                <IconSvg src={iconChevronLeft} />
               </ScrollerButton>
             </Box>
             <Box
@@ -266,7 +266,7 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 size='small'
                 className={classes.sliderButtons}
               >
-                <SvgIcon src={iconChevronRight} />
+                <IconSvg src={iconChevronRight} />
               </ScrollerButton>
             </Box>
 

package/FramerScroller/SidebarSlider.tsx

@@ -7,10 +7,10 @@ import {
 } from '@graphcommerce/framer-scroller'
 import { Box, SxProps, Theme } from '@mui/material'
 import { ReactNode } from 'react'
+import { IconSvg } from '../IconSvg'
 import { Row } from '../Row'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 const { classes, selectors } = extendableComponent('SidebarSlider', [
@@ -87,7 +87,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 sx={{ display: { xs: 'none', md: 'flex' } }}
                 size={buttonSize}
               >
-                <SvgIcon src={iconChevronLeft} />
+                <IconSvg src={iconChevronLeft} />
               </ScrollerButton>
             </Box>
             <Box
@@ -106,7 +106,7 @@ export function SidebarSlider(props: SidebarSliderProps) {
                 sx={{ display: { xs: 'none', md: 'flex' } }}
                 size={buttonSize}
               >
-                <SvgIcon src={iconChevronRight} />
+                <IconSvg src={iconChevronRight} />
               </ScrollerButton>
             </Box>
           </Box>

package/IconHeader/index.tsx

@@ -1,6 +1,6 @@
 import { Box, SxProps, Theme, Typography } from '@mui/material'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon, SvgIconProps } from '../SvgIcon/SvgIcon'
 
 // TODO: remove all occurrences. deprecated component
 
@@ -13,7 +13,7 @@ type IconHeaderProps = {
   stayInline?: boolean
   ellipsis?: boolean
   sx?: SxProps<Theme>
-} & Pick<SvgIconProps, 'src'>
+} & Pick<IconSvgProps, 'src'>
 
 type IconHeaderHeadings = 'h2' | 'h4' | 'h5'
 
@@ -71,7 +71,7 @@ export function IconHeader(props: IconHeaderProps) {
           },
         ]}
       >
-        <SvgIcon src={src} />
+        <IconSvg src={src} />
         <Typography
           variant={variants[size]}
           component='h2'

package/{SvgIcon/SvgIcon.tsx → IconSvg/IconSvg.tsx}

@@ -1,11 +1,11 @@
 import { ImageProps, srcToString, StaticImport } from '@graphcommerce/image'
-import { styled, SxProps, Theme, useTheme } from '@mui/material'
+import { styled, SxProps, Theme, useTheme, useThemeProps } from '@mui/material'
 import { ComponentProps, forwardRef } from 'react'
 import { extendableComponent, ExtendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal as rv } from '../Styles/responsiveVal'
 import { svgIconStrokeWidth } from './svgIconStrokeWidth'
 
-const name = 'SvgIcon'
+const name = 'IconSvg'
 const parts = ['root'] as const
 type StyleProps = {
   size?: 'default' | 'inherit' | 'xxl' | 'xl' | 'large' | 'medium' | 'small' | 'xs'
@@ -16,7 +16,7 @@ const { withState } = extendableComponent<StyleProps, typeof name, typeof parts>
 /** Expose the component to be exendable in your theme.components */
 declare module '@mui/material/styles/components' {
   interface Components {
-    SvgIcon?: ExtendableComponent<StyleProps> & {
+    IconSvg?: ExtendableComponent<StyleProps> & {
       /**
        * To override an icon with your own icon, provide the original src and the replacement src.
        *
@@ -36,7 +36,7 @@ declare module '@mui/material/styles/components' {
   }
 }
 
-export type SvgIconProps = StyleProps &
+export type IconSvgProps = StyleProps &
   Pick<ImageProps, 'src'> &
   Pick<ComponentProps<'svg'>, 'className' | 'style'> & { sx?: SxProps<Theme> }
 
@@ -73,15 +73,15 @@ const Svg = styled('svg', { name, target: name })(() => [
 ])
 
 /**
- * SvgIcon component is supposed to be used in combination with `icons`
+ * IconSvg component is supposed to be used in combination with `icons`
  *
  * @see https://graphcommerce-docs.vercel.app/framework/icons
  */
-export const SvgIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
-  const { src, size, fillIcon, className, ...svgProps } = props
+export const IconSvg = forwardRef<SVGSVGElement, IconSvgProps>((props, ref) => {
+  const { src, size, fillIcon, className, ...svgProps } = useThemeProps({ props, name })
 
   const srcWithOverride =
-    (useTheme().components?.SvgIcon?.overrides ?? []).find(
+    (useTheme().components?.IconSvg?.overrides ?? []).find(
       ([overrideSrc]) => overrideSrc === src,
     )?.[1] ?? src
 
@@ -98,4 +98,7 @@ export const SvgIcon = forwardRef<SVGSVGElement, SvgIconProps>((props, ref) => {
     </Svg>
   )
 })
-SvgIcon.displayName = 'SvgIcon'
+IconSvg.displayName = 'IconSvg'
+
+/** @deprecated SvgIcon is renamed to IconSvg, no API changes */
+export const SvgIcon = IconSvg

package/{SvgIcon → IconSvg}/index.ts

@@ -1,2 +1,2 @@
-export * from './SvgIcon'
+export * from './IconSvg'
 export * from './svgIconStrokeWidth'

package/Layout/components/LayoutHeaderBack.tsx

@@ -1,9 +1,10 @@
 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'
-import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { IconSvg } from '../../IconSvg'
 import { iconChevronLeft } from '../../icons'
 
 export type BackProps = Omit<LinkOrButtonProps, 'onClick' | 'children'>
@@ -28,7 +29,7 @@ export default function LayoutHeaderBack(props: BackProps) {
   const prevUp = usePrevUp()
   const { backSteps } = usePageContext()
 
-  const backIcon = <SvgIcon src={iconChevronLeft} size='medium' />
+  const backIcon = <IconSvg src={iconChevronLeft} size='medium' />
   const canClickBack = backSteps > 0 && path !== prevUp?.href
 
   let label = t`Back`
@@ -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,7 +1,8 @@
 import { useGo, usePageContext } from '@graphcommerce/framer-next-pages'
 import { Trans } from '@lingui/macro'
+import { Box } from '@mui/material'
 import { LinkOrButton } from '../../Button/LinkOrButton'
-import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { IconSvg } from '../../IconSvg'
 import { iconClose } from '../../icons'
 
 export function useShowClose() {
@@ -19,10 +20,12 @@ export default function LayoutHeaderClose() {
       color='inherit'
       onClick={onClick}
       aria-label='Close'
-      startIcon={<SvgIcon 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/Layout/components/LayoutTitle.tsx

@@ -1,7 +1,7 @@
 import { Box, SxProps, Theme, Typography, TypographyProps } from '@mui/material'
 import React from 'react'
+import { IconSvg, IconSvgProps } from '../../IconSvg'
 import { extendableComponent, responsiveVal } from '../../Styles'
-import { SvgIcon, SvgIconProps } from '../../SvgIcon/SvgIcon'
 
 type OwnerState = {
   size?: 'small' | 'medium'
@@ -17,7 +17,7 @@ const { withState } = extendableComponent<OwnerState, 'LayoutTitle', typeof part
 
 export type TitleProps = {
   children: React.ReactNode
-  icon?: SvgIconProps['src']
+  icon?: IconSvgProps['src']
   variant?: TypographyProps['variant']
   component?: React.ElementType
   sx?: SxProps<Theme>
@@ -69,7 +69,7 @@ export const LayoutTitle = React.forwardRef<HTMLDivElement, TitleProps>((props,
       ]}
     >
       {icon && (
-        <SvgIcon src={icon} size={size === 'small' ? 'large' : 'xl'} className={classes.icon} />
+        <IconSvg src={icon} size={size === 'small' ? 'large' : 'xl'} className={classes.icon} />
       )}
       <Typography
         ref={ref}

package/LayoutDefault/components/LayoutDefault.tsx

@@ -3,6 +3,7 @@ import { Box, SxProps, Theme } from '@mui/material'
 import { useTransform, useViewportScroll } from 'framer-motion'
 import LayoutProvider from '../../Layout/components/LayoutProvider'
 import { extendableComponent, responsiveVal } from '../../Styles'
+import { useFabSize } from '../../Theme'
 
 export type LayoutDefaultProps = {
   className?: string
@@ -32,7 +33,8 @@ export function LayoutDefault(props: LayoutDefaultProps) {
   const scrollWithOffset = useTransform(useViewportScroll().scrollY, (y) => y + offset)
 
   const classes = withState({ noSticky })
-  const fabIconSize = responsiveVal(42, 56) // @todo generalize this
+
+  const fabIconSize = useFabSize('responsive')
 
   return (
     <Box
@@ -84,7 +86,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
         >
           {header}
         </Box>
-        {(menuFab || cartFab) && (
+        {menuFab || cartFab ? (
           <Box
             className={classes.fabs}
             sx={(theme) => ({
@@ -97,10 +99,7 @@ export function LayoutDefault(props: LayoutDefaultProps) {
                 padding: `0 ${theme.page.horizontal}`,
                 position: 'sticky',
                 marginTop: `calc(${theme.appShell.headerHeightMd} * -1 + calc(${fabIconSize} / 2))`,
-                top: `calc(${theme.appShell.headerHeightMd} / 2 - ${responsiveVal(
-                  42 / 2,
-                  56 / 2,
-                )})`,
+                top: `calc(${theme.appShell.headerHeightMd} / 2 - (${fabIconSize} / 2))`,
               },
               [theme.breakpoints.down('md')]: {
                 position: 'fixed',
@@ -116,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

@@ -336,9 +336,15 @@ export function LayoutOverlayBase(props: LayoutOverlayBaseProps) {
               [theme.breakpoints.down('md')]: {
                 minWidth: '80vw',
 
+                /**
+                 * The top bar on Google Chrome is about 56 pixels high. If we do not provide this
+                 * padding we'll run into the issue that the user can't scroll to the bottom. We
+                 * 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`,
@@ -369,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/DesktopNavBar.tsx

@@ -1,14 +1,14 @@
 import { Scroller, ScrollerButton, ScrollerProvider } from '@graphcommerce/framer-scroller'
 import { Box, BoxProps } from '@mui/material'
 import React from 'react'
+import { IconSvg, IconSvgProps } from '../IconSvg'
 import { extendableComponent } from '../Styles/extendableComponent'
-import { SvgIcon, SvgIconProps } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type MenuTabsProps = {
   children: React.ReactNode
-  iconLeft?: SvgIconProps['src']
-  iconRight?: SvgIconProps['src']
+  iconLeft?: IconSvgProps['src']
+  iconRight?: IconSvgProps['src']
 } & Pick<BoxProps, 'sx'>
 
 const { classes, selectors } = extendableComponent('DesktopNavBar', [
@@ -74,7 +74,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
             size='small'
             className={classes.left}
           >
-            <SvgIcon src={iconLeft ?? iconChevronLeft} />
+            <IconSvg src={iconLeft ?? iconChevronLeft} />
           </ScrollerButton>
         </Box>
 
@@ -103,7 +103,7 @@ export function DesktopNavBar(props: MenuTabsProps) {
             size='small'
             className={classes.right}
           >
-            <SvgIcon src={iconRight ?? iconChevronRight} />
+            <IconSvg src={iconRight ?? iconChevronRight} />
           </ScrollerButton>
         </Box>
       </Box>

package/LayoutParts/MenuFab.tsx

@@ -2,9 +2,10 @@ import { Divider, Fab, ListItem, Menu, styled, Box, SxProps, Theme } from '@mui/
 import { m } from 'framer-motion'
 import { useRouter } from 'next/router'
 import React, { useEffect } from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles/extendableComponent'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { useFabSize } from '../Theme'
 import { iconMenu, iconClose } from '../icons'
 import { useFabAnimation } from './useFabAnimation'
 
@@ -26,8 +27,6 @@ const { classes, selectors } = extendableComponent('MenuFab', [
   'menu',
 ] as const)
 
-const fabIconSize = responsiveVal(42, 56) // @todo generalize this
-
 export function MenuFab(props: MenuFabProps) {
   const { children, secondary, search, menuIcon, closeIcon, sx = [] } = props
   const router = useRouter()
@@ -40,6 +39,7 @@ export function MenuFab(props: MenuFabProps) {
     router.events.on('routeChangeStart', clear)
     return () => router.events.off('routeChangeStart', clear)
   }, [router])
+  const fabIconSize = useFabSize('responsive')
 
   return (
     <Box sx={[{ width: fabIconSize, height: fabIconSize }, ...(Array.isArray(sx) ? sx : [sx])]}>
@@ -57,6 +57,7 @@ export function MenuFab(props: MenuFabProps) {
           color='inherit'
           aria-label='Open Menu'
           onClick={(event) => setOpenEl(event.currentTarget)}
+          size='responsive'
           sx={(theme) => ({
             boxShadow: 'none',
             '&:hover, &:focus': {
@@ -64,18 +65,16 @@ export function MenuFab(props: MenuFabProps) {
               background: theme.palette.text.primary,
             },
             background: theme.palette.text.primary,
-            width: fabIconSize,
-            height: fabIconSize,
             pointerEvents: 'all',
             color: theme.palette.background.paper,
           })}
           className={classes.fab}
         >
           {closeIcon ?? (
-            <SvgIcon src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
+            <IconSvg src={iconClose} size='large' sx={{ display: openEl ? 'block' : 'none' }} />
           )}
           {menuIcon ?? (
-            <SvgIcon src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
+            <IconSvg src={iconMenu} size='large' sx={{ display: openEl ? 'none' : 'block' }} />
           )}
         </Fab>
         <MotionDiv

package/LayoutParts/PlaceholderFab.tsx

@@ -1,8 +1,12 @@
-import { Fab, FabProps, styled } from '@mui/material'
+import { Fab, FabProps } from '@mui/material'
 
-export const PlaceholderFab = styled((props: Omit<FabProps, 'children'>) => (
-  <Fab {...props}>
-    {/* eslint-disable-next-line react/jsx-no-useless-fragment */}
-    <></>
-  </Fab>
-))({ visibility: 'hidden', pointerEvents: 'none' })
+export function PlaceholderFab(props: Omit<FabProps, 'children'>) {
+  const { sx = [] } = props
+  return (
+    <Fab
+      size='responsive'
+      {...props}
+      sx={[{ visibility: 'hidden', pointerEvents: 'none' }, ...(Array.isArray(sx) ? sx : [sx])]}
+    />
+  )
+}

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/Pagination/index.tsx

@@ -1,8 +1,8 @@
 import { PaginationProps, Box, SxProps, Theme, IconButton } from '@mui/material'
 import usePagination, { UsePaginationItem } from '@mui/material/usePagination'
 import React from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconChevronLeft, iconChevronRight } from '../icons'
 
 export type PagePaginationProps = {
@@ -41,7 +41,7 @@ export function Pagination(props: PagePaginationProps) {
       aria-label='Previous page'
       className={classes.button}
     >
-      <SvgIcon src={iconChevronLeft} className={classes.icon} size='medium' />
+      <IconSvg src={iconChevronLeft} className={classes.icon} size='medium' />
     </IconButton>
   )
 
@@ -53,7 +53,7 @@ export function Pagination(props: PagePaginationProps) {
       aria-label='Next page'
       className={classes.button}
     >
-      <SvgIcon src={iconChevronRight} className={classes.icon} size='medium' />
+      <IconSvg src={iconChevronRight} className={classes.icon} size='medium' />
     </IconButton>
   )
 

package/Row/ButtonLinkList/ButtonLinkListItem.tsx

@@ -1,7 +1,7 @@
 import { Button, ButtonProps, styled } from '@mui/material'
 import PageLink from 'next/link'
 import React from 'react'
-import { SvgIcon } from '../../SvgIcon/SvgIcon'
+import { IconSvg } from '../../IconSvg'
 import { iconChevronRight } from '../../icons'
 
 export type ButtonLinkProps = { url: string; endIcon?: React.ReactNode } & ButtonProps
@@ -17,7 +17,7 @@ const ButtonItem = styled(Button)(({ theme }) => ({
 }))
 
 export function ButtonLinkListItem(props: ButtonLinkProps) {
-  const { children, url, endIcon = <SvgIcon src={iconChevronRight} />, ...buttonProps } = props
+  const { children, url, endIcon = <IconSvg src={iconChevronRight} />, ...buttonProps } = props
 
   return (
     <PageLink href={url} passHref>

package/Snackbar/MessageSnackbarImpl.tsx

@@ -10,8 +10,8 @@ import {
   Theme,
 } from '@mui/material'
 import React, { useEffect, useState } from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconClose, iconCheckmark, iconSadFace } from '../icons'
 
 type Size = 'normal' | 'wide'
@@ -110,14 +110,14 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                 md: 'min-content 1fr max-content auto',
               },
               typography: 'subtitle1',
-              '&.SvgIcon': {
+              '&.IconSvg': {
                 gridArea: 'children',
               },
             },
           })}
           message={
             <>
-              <SvgIcon src={icon} size='large' />
+              <IconSvg src={icon} size='large' />
               <Box gridArea='children'>{children}</Box>
               {/* </Box> */}
               {action && (
@@ -134,7 +134,7 @@ export default function MessageSnackbarImpl(props: MessageSnackbarImplProps) {
                   backgroundColor: lighten(theme.palette.background.paper, 0.1),
                 })}
               >
-                <SvgIcon src={iconClose} />
+                <IconSvg src={iconClose} />
               </Fab>
             </>
           }

package/StarRatingField/index.tsx

@@ -1,6 +1,6 @@
 import { RatingProps, Rating } from '@mui/material'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconStar } from '../icons'
 
 export type StarRatingFieldProps = {
@@ -22,7 +22,7 @@ export function StarRatingField(props: StarRatingFieldProps) {
       max={5}
       size='small'
       emptyIcon={
-        <SvgIcon
+        <IconSvg
           src={iconStar}
           size='large'
           className={classes.startEmpty}
@@ -30,7 +30,7 @@ export function StarRatingField(props: StarRatingFieldProps) {
         />
       }
       icon={
-        <SvgIcon
+        <IconSvg
           src={iconStar}
           size='large'
           className={classes.starFull}

package/TextInputNumber/index.tsx

@@ -9,9 +9,9 @@ import {
   Theme,
 } from '@mui/material'
 import { ChangeEvent, Ref, useCallback, useEffect, useRef, useState } from 'react'
+import { IconSvg } from '../IconSvg'
 import { extendableComponent } from '../Styles'
 import { responsiveVal } from '../Styles/responsiveVal'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
 import { iconMin, iconPlus } from '../icons'
 
 export type IconButtonPropsOmit = Omit<
@@ -123,7 +123,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
             {...DownProps}
             className={`${classes.button} ${DownProps.className ?? ''}`}
           >
-            {DownProps.children ?? <SvgIcon src={iconMin} size='small' />}
+            {DownProps.children ?? <IconSvg src={iconMin} size='small' />}
           </IconButton>
         ),
         endAdornment: (
@@ -139,7 +139,7 @@ export function TextInputNumber(props: TextInputNumberProps) {
             {...UpProps}
             className={`${classes.button} ${UpProps.className ?? ''}`}
           >
-            {UpProps.children ?? <SvgIcon src={iconPlus} size='small' />}
+            {UpProps.children ?? <IconSvg src={iconPlus} size='small' />}
           </IconButton>
         ),
       }}

package/Theme/DarkLightModeThemeProvider.tsx

@@ -12,7 +12,7 @@ import {
 } from '@mui/material'
 import { useRouter } from 'next/router'
 import { createContext, useContext, useEffect, useMemo, useState } from 'react'
-import { SvgIcon } from '../SvgIcon/SvgIcon'
+import { IconSvg } from '../IconSvg'
 import { iconMoon, iconSun } from '../icons'
 
 type Mode = 'dark' | 'light'
@@ -88,7 +88,7 @@ export function DarkLightModeToggleFab(props: Omit<FabProps, 'onClick'>) {
   const { currentMode, toggle } = useColorMode()
   return (
     <Fab size='large' color='inherit' onClick={toggle} {...props}>
-      <SvgIcon src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
+      <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='large' />
     </Fab>
   )
 }
@@ -105,7 +105,7 @@ export function DarkLightModeMenuSecondaryItem(props: ListItemButtonProps) {
   return (
     <ListItemButton {...props} sx={[{}, ...(Array.isArray(sx) ? sx : [sx])]} dense onClick={toggle}>
       <ListItemIcon sx={{ minWidth: 'unset', paddingRight: '8px' }}>
-        <SvgIcon src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
+        <IconSvg src={currentMode === 'light' ? iconMoon : iconSun} size='medium' />
       </ListItemIcon>
       <ListItemText>
         {currentMode === 'light' ? (

package/Theme/MuiFab.ts

@@ -0,0 +1,69 @@
+import { ComponentsVariants, FabProps, Theme, useTheme } from '@mui/material'
+import { responsiveVal } from '../Styles'
+
+type FabSize = NonNullable<FabProps['size']>
+
+type FabSizes = {
+  [key in FabSize]: string
+}
+
+/** Expose the component to be exendable in your theme.components */
+declare module '@mui/material/styles/components' {
+  interface Components {
+    /**
+     * @todo We would rather use MuiFab to override these fields, but I can't get it to work,
+     *   getting 'Subsequent property declarations must have the same type.'
+     */
+    MuiFabExtra?: {
+      sizes?: Partial<FabSizes>
+    }
+  }
+}
+
+const defaultSizes: FabSizes = {
+  /**
+   * Default values picked from MUI:
+   * https://github.com/mui/material-ui/blob/master/packages/mui-material/src/Fab/Fab.js
+   */
+  small: '40px',
+  medium: '48px',
+  large: '56px',
+  responsive: responsiveVal(40, 56),
+}
+
+function fabSize(size: FabSize, theme: Theme) {
+  return theme.components?.MuiFabExtra?.sizes?.[size] ?? defaultSizes[size]
+}
+
+export const useFabSize = (size: FabSize) => {
+  const theme = useTheme()
+  return fabSize(size, theme)
+}
+
+declare module '@mui/material/Fab' {
+  interface FabPropsSizeOverrides {
+    responsive: true
+  }
+}
+
+function fabWidthHeight(size: FabSize, theme: Theme) {
+  return {
+    width: fabSize(size, theme),
+    height: fabSize(size, theme),
+  }
+}
+
+type FabVariants = NonNullable<ComponentsVariants['MuiFab']>
+
+const sizes: FabSize[] = ['small', 'medium', 'large', 'responsive']
+
+/**
+ * This defines the sizes for the added responsive variant.
+ *
+ * To override the sizes, please do not add variant declarations direcly, but modify
+ * `yourTheme.components.MuiFabExtra.sizes` instead.
+ */
+export const MuiFabSizes: FabVariants = sizes.map((size) => ({
+  props: { size },
+  style: ({ theme }) => fabWidthHeight(size, theme),
+}))

package/Theme/index.ts

@@ -1,5 +1,6 @@
 export * from './MuiSlider'
 export * from './MuiButton'
 export * from './MuiSnackbar'
+export * from './MuiFab'
 export * from './themeDefaults'
 export * from './DarkLightModeThemeProvider'

package/index.ts

@@ -58,7 +58,7 @@ export * from './Snackbar/MessageSnackbarImpl'
 export * from './StarRatingField'
 export * from './Stepper/Stepper'
 export * from './Styles'
-export * from './SvgIcon'
+export * from './IconSvg'
 export * from './TextInputNumber'
 export * from './Theme'
 export * from './TimeAgo'

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.1.5",
+  "version": "4.2.2",
   "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",