@graphcommerce/framer-scroller 1.1.16 → 1.1.20

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.20](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.19...@graphcommerce/framer-scroller@1.1.20) (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))
+* **framer-scroller:** offaxis scroll was allowed on safari ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
+
+
+
+
+
+## [1.1.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.16...@graphcommerce/framer-scroller@1.1.17) (2021-12-21)
+
+
+### Bug Fixes
+
+* **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
+
+
+
+
+
 ## [1.1.14](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.13...@graphcommerce/framer-scroller@1.1.14) (2021-12-20)
 
 

package/components/MotionImageAspect.tsx

@@ -6,13 +6,22 @@ import React, { forwardRef } from 'react'
 
 const useStyles = makeStyles(
   {
+    root: {
+      position: 'relative',
+    },
     picture: {
       display: 'block',
       '@supports (aspect-ratio: 1 / 1)': {
-        maxWidth: '100%',
-        maxHeight: '100%',
-        width: 'auto !important',
-        height: 'auto !important',
+        maxWidth: '99.6%',
+        maxHeight: '99.6%',
+        width: 'auto',
+        height: 'auto',
+
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+
         '&:after': {
           display: 'block',
           content: '""',
@@ -40,23 +49,24 @@ export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
  * - Renders an image with the given aspect ratio
  * - Supports framer motion layout transitions
  *
- * Note: We have a fallback for Safari which doesn't yet support aspect-ratio, this causes a problem
- * when the layout is animated. Should be fixed in Safari 15
+ * Note: We have a fallback for Safari 14 which doesn't yet support aspect-ratio, this causes a
+ * problem when the layout is animated. Should be fixed in Safari 15
  */
 const MotionImageAspect = m(
   forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => {
     const classes = useStyles()
     return (
-      <Image
-        {...props}
-        layout='fill'
-        ref={ref}
-        className={clsx(classes.image, props.className)}
-        pictureProps={{
-          className: clsx(classes.picture, props.pictureProps?.className),
-          style: { ...props.style, aspectRatio: `${props.width} / ${props.height}` },
-        }}
-      />
+      <div className={classes.root} ref={ref}>
+        <Image
+          {...props}
+          layout='fill'
+          className={clsx(classes.image, props.className)}
+          pictureProps={{
+            className: clsx(classes.picture, props.pictureProps?.className),
+            style: { ...props.style, aspectRatio: `${props.width} / ${props.height}` },
+          }}
+        />
+      </div>
     )
   }),
 )

package/hooks/useScrollTo.ts

@@ -1,6 +1,6 @@
 import { useElementScroll } from '@graphcommerce/framer-utils'
 import { Point } from 'framer-motion'
-import { animate, easeOut } from 'popmotion'
+import { animate } from 'popmotion'
 import { useScrollerContext } from './useScrollerContext'
 
 export function useScrollTo() {

package/hooks/useScroller.ts

@@ -20,13 +20,11 @@ import { useVelocitySnapTo } from './useVelocitySnapTo'
 const useStyles = makeStyles(
   (theme: Theme) => ({
     root: {
-      willChange: 'scroll-position',
       '& *': {
         userSelect: 'none',
         userDrag: 'none',
       },
     },
-
     rootSmSnapDirNone: {
       [theme.breakpoints.down('sm')]: {
         overflow: 'hidden',
@@ -42,24 +40,28 @@ const useStyles = makeStyles(
     rootSmSnapDirBlock: {
       [theme.breakpoints.down('sm')]: {
         overflowY: 'auto',
+        overflowX: 'hidden',
         overscrollBehaviorBlock: 'contain',
       },
     },
     rootMdSnapDirBlock: {
       [theme.breakpoints.up('md')]: {
         overflowY: 'auto',
+        overflowX: 'hidden',
         overscrollBehaviorBlock: 'contain',
       },
     },
     rootSmSnapDirInline: {
       [theme.breakpoints.down('sm')]: {
         overflowX: 'auto',
+        overflowY: 'hidden',
         overscrollBehaviorInline: 'contain',
       },
     },
     rootMdSnapDirInline: {
       [theme.breakpoints.up('md')]: {
         overflowX: 'auto',
+        overflowY: 'hidden',
         overscrollBehaviorInline: 'contain',
       },
     },
@@ -106,6 +108,9 @@ const useStyles = makeStyles(
         scrollSnapType: scrollSnapTypeMd,
       },
     }),
+    rootNoSnap: {
+      willChange: 'scroll-position',
+    },
     rootIsPanning: {
       cursor: 'grabbing !important',
       '& > *': {
@@ -217,6 +222,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
     mdSnapDir,
     mdGridDir,
     isSnap,
+    noSnap: !isSnap,
     isPanning,
     hideScrollbar,
     canGrab,

package/index.ts

@@ -4,7 +4,6 @@ export * from './components/MotionImageAspect'
 export { default as MotionImageAspect } from './components/MotionImageAspect'
 
 export { default as Scroller } from './components/Scroller'
-export { default as CenterSlide } from './components/CenterSlide'
 
 export * from './components/ScrollerButton'
 export { default as ScrollerButton } from './components/ScrollerButton'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "1.1.16",
+  "version": "1.1.20",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -18,7 +18,7 @@
   "dependencies": {
     "@graphcommerce/framer-utils": "^2.103.20",
     "@graphcommerce/image": "^2.105.11",
-    "@graphcommerce/next-ui": "^3.21.6",
+    "@graphcommerce/next-ui": "^3.21.10",
     "@material-ui/core": "^4.12.3",
     "popmotion": "11.0.3"
   },
@@ -36,5 +36,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.8.0"
   },
-  "gitHead": "fd199126afe4600f7ef105d2dd4e0f5ce001ff54"
+  "gitHead": "c8ce20cffa0bf8fe47fa75d98c97d8c5d684c485"
 }

package/components/CenterSlide.tsx

@@ -1,13 +0,0 @@
-import { styled } from '@material-ui/core'
-
-const CenterSlide = styled('div')(
-  {
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  { name: 'CenterSlide' },
-)
-CenterSlide.displayName = 'CenterSlide'
-
-export default CenterSlide