@graphcommerce/next-ui 3.21.9 → 3.21.10

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.21.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.9...@graphcommerce/next-ui@3.21.10) (2021-12-22)
+
+
+### Bug Fixes
+
+* **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
+* safari hero banner didn't animate border radius ([7301bec](https://github.com/ho-nl/m2-pwa/commit/7301becf33a60f977546be1bcabc68e018f6c5cd))
+
+
+
+
+
 ## [3.21.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/next-ui@3.21.8...@graphcommerce/next-ui@3.21.9) (2021-12-21)
 
 

package/FramerScroller/components/SidebarGallery.tsx

@@ -1,7 +1,6 @@
 import { usePageRouter } from '@graphcommerce/framer-next-pages'
 import { usePrevPageRouter } from '@graphcommerce/framer-next-pages/hooks/usePrevPageRouter'
 import {
-  CenterSlide,
   MotionImageAspect,
   MotionImageAspectProps,
   Scroller,
@@ -29,6 +28,7 @@ type StyleProps = {
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
+      willChange: 'transform',
       display: 'grid',
       [theme.breakpoints.up('md')]: {
         gridTemplateColumns: '1fr auto',
@@ -57,6 +57,7 @@ const useStyles = makeStyles(
       const ratio = `calc(${height} / ${width} * 100%)`
 
       return {
+        willChange: 'transform',
         height: 0, // https://stackoverflow.com/questions/44770074/css-grid-row-height-safari-bug
         backgroundColor: theme.palette.background.image,
         position: 'relative',
@@ -71,6 +72,7 @@ const useStyles = makeStyles(
       paddingTop: clientHeight,
     }),
     scroller: {
+      willChange: 'transform',
       position: 'absolute',
       top: 0,
       width: '100%',
@@ -247,21 +249,20 @@ export default function SidebarGallery(props: SidebarGalleryProps) {
               onMouseUp={onMouseUpScroller}
             >
               {images.map((image, idx) => (
-                <CenterSlide key={typeof image.src === 'string' ? image.src : idx}>
-                  <MotionImageAspect
-                    layout
-                    src={image.src}
-                    width={image.width}
-                    height={image.height}
-                    loading={idx === 0 ? 'eager' : 'lazy'}
-                    sizes={{
-                      0: '100vw',
-                      [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
-                    }}
-                    alt={image.alt || `Product Image ${idx}` || undefined}
-                    dontReportWronglySizedImages
-                  />
-                </CenterSlide>
+                <MotionImageAspect
+                  key={typeof image.src === 'string' ? image.src : idx}
+                  layout
+                  src={image.src}
+                  width={image.width}
+                  height={image.height}
+                  loading={idx === 0 ? 'eager' : 'lazy'}
+                  sizes={{
+                    0: '100vw',
+                    [theme.breakpoints.values.md]: zoomed ? '100vw' : '60vw',
+                  }}
+                  alt={image.alt || `Product Image ${idx}` || undefined}
+                  dontReportWronglySizedImages
+                />
               ))}
             </Scroller>
             <m.div layout className={classes.topRight}>

package/Row/HeroBanner/index.tsx

@@ -60,6 +60,7 @@ const useStyles = makeStyles(
     animated: {
       borderRadius: responsiveVal(theme.shape.borderRadius * 2, theme.shape.borderRadius * 3),
       overflow: 'hidden',
+      transform: 'translateZ(0)',
     },
   }),
   { name: 'HeroBanner' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/next-ui",
-  "version": "3.21.9",
+  "version": "3.21.10",
   "author": "",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,7 @@
   "dependencies": {
     "@apollo/client": "^3.5.6",
     "@graphcommerce/framer-next-pages": "^2.108.9",
-    "@graphcommerce/framer-scroller": "^1.1.19",
+    "@graphcommerce/framer-scroller": "^1.1.20",
     "@graphcommerce/framer-utils": "^2.103.20",
     "@graphcommerce/graphql": "^2.105.12",
     "@graphcommerce/image": "^2.105.11",
@@ -52,5 +52,5 @@
       "project": "./tsconfig.json"
     }
   },
-  "gitHead": "fbca834579f81b45ee062e85146535eb6d7ab079"
+  "gitHead": "c8ce20cffa0bf8fe47fa75d98c97d8c5d684c485"
 }