@graphcommerce/framer-scroller 1.1.18 → 1.1.22

package/CHANGELOG.md

@@ -3,6 +3,42 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.22](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.21...@graphcommerce/framer-scroller@1.1.22) (2021-12-22)
+
+
+### Bug Fixes
+
+* **framer-scroller:** make sure the first gallery dot is selected initially ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
+
+
+
+
+
+## [1.1.21](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.20...@graphcommerce/framer-scroller@1.1.21) (2021-12-22)
+
+
+### Bug Fixes
+
+* **framer-scroller:** height of the gallery item isn't high enough ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
+* **framer-scroller:** make sure the actual image will scale instead of the container ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
+* **framer-scroller:** would throw ssr warning ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
+
+
+
+
+
+## [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)
 
 

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%',
+        maxWidth: '99.6%',
         maxHeight: '100%',
-        width: 'auto !important',
-        height: 'auto !important',
+        width: 'auto',
+        height: 'auto',
+
+        position: 'absolute',
+        top: '50%',
+        left: '50%',
+        transform: 'translate(-50%, -50%)',
+
         '&:after': {
           display: 'block',
           content: '""',
@@ -40,23 +49,25 @@ 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}>
+        <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>
     )
   }),
 )

package/components/ScrollerDots.tsx

@@ -37,7 +37,7 @@ export type DotsProps = {
 
 const ScrollerDots = m(
   React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
-    const { fabProps, ...containerProps } = props
+    const { fabProps, classes: _classes, ...containerProps } = props
     const { dots, dot, circle, ...classes } = useStyles(props)
     const { items, getScrollSnapPositions } = useScrollerContext()
     const itemsArr = useMotionValueValue(items, (v) => v)

package/components/ScrollerProvider.tsx

@@ -126,9 +126,9 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
       itemsArr.length = count
 
       items.set(
-        itemsArr.fill(undefined).map<ItemState>(() => ({
-          visibility: motionValue(0),
-          opacity: motionValue(0.2),
+        itemsArr.fill(undefined).map<ItemState>((_, i) => ({
+          visibility: motionValue(i === 0 ? 1 : 0),
+          opacity: motionValue(i === 0 ? 1 : 0.2),
         })),
       )
     },

package/hooks/useScroller.ts

@@ -40,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',
       },
     },

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.18",
+  "version": "1.1.22",
   "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.8",
+    "@graphcommerce/next-ui": "^3.21.12",
     "@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": "5ad26fe58ae85c8d776e3f571e96832f24811d5d"
+  "gitHead": "55abd5ec0f5821dc4bba8d0a82fd265ff1d6a024"
 }

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