@graphcommerce/next-ui 4.31.0-canary.5 → 4.31.0-canary.6

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 4.31.0-canary.6
+
+### Patch Changes
+
+- [`243d0dad2`](https://github.com/graphcommerce-org/graphcommerce/commit/243d0dad263f7b886a3d68e82729818c7df265bc) - Solve issue where the gallery of the product page would scroll obsessively ([@paales](https://github.com/paales))
+
+- [`0623f8ce7`](https://github.com/graphcommerce-org/graphcommerce/commit/0623f8ce738ace69aa44e55cf6a6ddb33cf0617a) - When clicking on a navigationlink it would animate on mobile ([@paales](https://github.com/paales))
+
 ## 4.31.0-canary.5
 
 ## 4.31.0-canary.4

package/FramerScroller/SidebarGallery.tsx

@@ -7,6 +7,7 @@ import {
   ScrollerDots,
   ScrollerProvider,
 } from '@graphcommerce/framer-scroller'
+import { clientSizeCssVar } from '@graphcommerce/framer-utils'
 import { Fab, useTheme, Box, styled, SxProps, Theme } from '@mui/material'
 import { m, useDomEvent, useMotionValue } from 'framer-motion'
 import { useRouter } from 'next/router'
@@ -113,21 +114,6 @@ export function SidebarGallery(props: SidebarGalleryProps) {
 
   const hasImages = images.length > 0
 
-  // sx={(theme) => ({
-  //   [SidebarGallery.selectors.scrollerContainer]: {
-  //     minHeight: 0,
-  //     [theme.breakpoints.up('md')]: {
-  //       position: 'sticky',
-  //       top: 0,
-  //     },
-  //     '&.zoomed': {
-  //       position: 'relative',
-  //       top: 0,
-  //       marginTop: 0,
-  //     },
-  //   },
-  // })}
-
   return (
     <ScrollerProvider scrollSnapAlign='center'>
       <Row maxWidth={false} disableGutters className={classes.row} sx={sx}>
@@ -173,17 +159,17 @@ export function SidebarGallery(props: SidebarGalleryProps) {
                 [theme.breakpoints.down('md')]: {
                   width: '100vw',
                 },
-                minHeight: 0,
                 [theme.breakpoints.up('md')]: {
+                  height: `calc(${clientSizeCssVar.y} - ${theme.appShell.headerHeightMd} - ${theme.spacings.lg})`,
                   position: 'sticky',
-                  top: 0,
+                  top: theme.appShell.headerHeightMd,
                 },
               },
               zoomed && {
                 position: 'relative',
                 top: 0,
                 marginTop: 0,
-                paddingTop: `var(--client-size-y)`,
+                paddingTop: clientSizeCssVar.y,
               },
             ]}
             onLayoutAnimationComplete={() => {

package/Navigation/components/NavigationOverlay.tsx

@@ -1,4 +1,9 @@
-import { useMotionValueValue, useMotionSelector } from '@graphcommerce/framer-utils'
+import { useTheme } from '@emotion/react'
+import {
+  useMotionValueValue,
+  useMotionSelector,
+  clientSizeCssVar,
+} from '@graphcommerce/framer-utils'
 import { i18n } from '@lingui/core'
 import { Box, Fab, SxProps, Theme, useEventCallback, styled } from '@mui/material'
 import { m } from 'framer-motion'
@@ -42,7 +47,7 @@ const componentName = 'Navigation'
 const parts = ['root', 'navigation', 'header', 'column'] as const
 const { classes } = extendableComponent(componentName, parts)
 
-export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
+export const NavigationOverlay = React.memo((props: NavigationOverlayProps) => {
   const {
     sx,
     stretchColumns,
@@ -52,16 +57,15 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
     justifySm,
     sizeMd,
     sizeSm,
-    itemWidthSm,
+    itemWidthSm = clientSizeCssVar.x,
     itemWidthMd,
     mouseEvent,
     itemPadding = 'md',
   } = props
   const { selection, items, animating, closing, serverRenderDepth } = useNavigation()
 
-  const fabSize = useFabSize('responsive')
-  const svgSize = useIconSvgSize('large')
-
+  const fabMarginY = `calc((${useFabSize('responsive')} - ${useIconSvgSize('large')}) * -0.5)`
+  const itemPad = useTheme().spacings[itemPadding] ?? itemPadding
   const matchMedia = useMatchMedia()
 
   const handleOnBack = useEventCallback(() => {
@@ -143,11 +147,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
                 <Fab
                   color='inherit'
                   onClick={handleOnBack}
-                  sx={{
-                    boxShadow: 'none',
-                    marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
-                    marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
-                  }}
+                  sx={{ boxShadow: 'none', my: fabMarginY }}
                   size='responsive'
                   aria-label={i18n._(/* i18n */ 'Back')}
                 >
@@ -159,11 +159,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
               <Fab
                 color='inherit'
                 onClick={handleClose}
-                sx={{
-                  boxShadow: 'none',
-                  marginLeft: `calc((${fabSize} - ${svgSize}) * -0.5)`,
-                  marginRight: `calc((${fabSize} - ${svgSize}) * -0.5)`,
-                }}
+                sx={{ boxShadow: 'none', my: fabMarginY }}
                 size='responsive'
                 aria-label={i18n._(/* i18n */ 'Close')}
               >
@@ -177,59 +173,46 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
           </LayoutHeaderContent>
         </Box>
       </MotionDiv>
-
       <MotionDiv layout='position' sx={{ display: 'grid' }}>
         <Box
           sx={[
             (theme) => ({
               display: 'grid',
               alignItems: !stretchColumns ? 'start' : undefined,
-              '& .NavigationItem-item': {
-                // eslint-disable-next-line no-nested-ternary
-                width: itemWidthMd
-                  ? selectedLevel >= 1
-                    ? `calc(${itemWidthMd} + 1px)`
-                    : itemWidthMd
-                  : 'stretch',
+              [theme.breakpoints.down('md')]: {
+                width:
+                  sizeSm !== 'floating'
+                    ? `calc(${itemWidthSm} + ${selectedLevel}px)`
+                    : `calc(${itemWidthSm} - (${theme.page.horizontal} * 2))`,
+                minWidth: 200,
+                overflow: 'hidden',
+                scrollSnapType: 'x mandatory',
+                '& .NavigationItem-item': {
+                  width:
+                    sizeSm !== 'floating'
+                      ? `calc(${itemWidthSm} - (${itemPad} * 2) + ${selectedLevel}px)`
+                      : `calc(${itemWidthSm} - (${itemPad} * 2) - (${theme.page.horizontal} * 2))`,
+                  minWidth: `calc(200px - (${itemPad} * 2))`,
+                },
+              },
+              [theme.breakpoints.up('md')]: {
+                '& .NavigationItem-item': {
+                  // eslint-disable-next-line no-nested-ternary
+                  width: itemWidthMd
+                    ? selectedLevel >= 1
+                      ? `calc(${itemWidthMd} + 1px)`
+                      : itemWidthMd
+                    : 'stretch',
+                },
               },
             }),
-            activeAndNotClosing
-              ? (theme) => ({
-                  [theme.breakpoints.down('md')]: {
-                    width:
-                      sizeSm !== 'floating'
-                        ? `calc(${itemWidthSm || '100vw'} + ${selectedLevel}px)`
-                        : `calc(${itemWidthSm || '100vw'} - ${theme.page.horizontal} - ${
-                            theme.page.horizontal
-                          })`,
-                    minWidth: 200,
-                    overflow: 'hidden',
-                    scrollSnapType: 'x mandatory',
-                    '& .NavigationItem-item': {
-                      width:
-                        sizeSm !== 'floating'
-                          ? `calc(${itemWidthSm || '100vw'} - ${
-                              theme.spacings[itemPadding] ?? itemPadding
-                            } - ${theme.spacings[itemPadding] ?? itemPadding} + ${selectedLevel}px)`
-                          : `calc(${itemWidthSm || '100vw'} - ${
-                              theme.spacings[itemPadding] ?? itemPadding
-                            } - ${theme.spacings[itemPadding] ?? itemPadding} - ${
-                              theme.page.horizontal
-                            } - ${theme.page.horizontal})`,
-                      minWidth: `calc(${200}px - ${theme.spacings[itemPadding] ?? itemPadding} - ${
-                        theme.spacings[itemPadding] ?? itemPadding
-                      })`,
-                    },
-                  },
-                })
-              : {},
           ]}
         >
           <Box
             className={classes.navigation}
             sx={[
-              (theme) => ({
-                py: theme.spacings[itemPadding] ?? itemPadding,
+              {
+                py: itemPad,
                 display: 'grid',
                 gridAutoFlow: 'column',
                 scrollSnapAlign: 'end',
@@ -241,7 +224,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
                 },
                 '& .Navigation-column': {},
                 '& .NavigationItem-item': {
-                  mx: theme.spacings[itemPadding] ?? itemPadding,
+                  mx: itemPad,
                   whiteSpace: 'nowrap',
                 },
                 '& .NavigationItem-item.first': {
@@ -250,7 +233,7 @@ export const NavigationOverlay = React.memo<NavigationOverlayProps>((props) => {
                 '& .Navigation-column:first-of-type': {
                   boxShadow: 'none',
                 },
-              }),
+              },
               ...(Array.isArray(sx) ? sx : [sx]),
             ]}
           >

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/next-ui",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "4.31.0-canary.5",
+  "version": "4.31.0-canary.6",
   "author": "",
   "license": "MIT",
   "sideEffects": false,
@@ -19,10 +19,10 @@
     "@emotion/react": "^11.9.3",
     "@emotion/server": "^11.4.0",
     "@emotion/styled": "^11.9.3",
-    "@graphcommerce/framer-next-pages": "4.31.0-canary.5",
-    "@graphcommerce/framer-scroller": "4.31.0-canary.5",
-    "@graphcommerce/framer-utils": "4.31.0-canary.5",
-    "@graphcommerce/image": "4.31.0-canary.5",
+    "@graphcommerce/framer-next-pages": "4.31.0-canary.6",
+    "@graphcommerce/framer-scroller": "4.31.0-canary.6",
+    "@graphcommerce/framer-utils": "4.31.0-canary.6",
+    "@graphcommerce/image": "4.31.0-canary.6",
     "cookie": "^0.5.0",
     "react-is": "^18.2.0",
     "schema-dts": "^1.1.0"