@graphcommerce/framer-scroller 1.1.4 → 1.1.8

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.1.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.7...@graphcommerce/framer-scroller@1.1.8) (2021-12-15)
+
+
+### Bug Fixes
+
+* scroller should not snap to off-axis while dragging and direction isn't set to both ([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
+
+
+
+
+
+## [1.1.5](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.4...@graphcommerce/framer-scroller@1.1.5) (2021-12-06)
+
+
+### Bug Fixes
+
+* Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
+
+
+
+
+
 ## [1.1.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.1...@graphcommerce/framer-scroller@1.1.2) (2021-12-03)
 
 

package/components/ScrollerDots.tsx

@@ -13,16 +13,15 @@ const useStyles = makeStyles(
       width: 'fit-content',
       display: 'grid',
       gridAutoFlow: 'column',
-      padding: `0 7px`,
-      borderRadius: '20px',
+      padding: `0 6px`,
+      borderRadius: '99em',
     },
     dot: {
       boxShadow: 'none',
-      margin: `0 -7px`,
       background: 'transparent',
     },
     circle: {
-      borderRadius: '50%',
+      borderRadius: '99em',
       width: 10,
       height: 10,
       background: theme.palette.text.primary,

package/components/ScrollerProvider.tsx

@@ -1,4 +1,4 @@
-import { MotionValue, motionValue, Point2D, useMotionValue } from 'framer-motion'
+import { MotionValue, motionValue, Point, useMotionValue } from 'framer-motion'
 import { PlaybackControls } from 'popmotion'
 import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import { scrollerContext } from '../context/scrollerContext'
@@ -279,7 +279,7 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
     }
   }
 
-  function getSnapPosition(direction: 'left' | 'right' | 'up' | 'down'): Point2D {
+  function getSnapPosition(direction: 'left' | 'right' | 'up' | 'down'): Point {
     if (!scrollerRef.current) return { x: 0, y: 0 }
 
     const axis: Axis = direction === 'up' || direction === 'down' ? 'y' : 'x'

package/hooks/useScrollTo.ts

@@ -1,5 +1,5 @@
 import { useElementScroll } from '@graphcommerce/framer-utils'
-import { Point2D } from 'framer-motion'
+import { Point } from 'framer-motion'
 import { animate } from 'popmotion'
 import { useScrollerContext } from './useScrollerContext'
 
@@ -7,7 +7,7 @@ export function useScrollTo() {
   const { scrollerRef, register, disableSnap, enableSnap } = useScrollerContext()
   const scroll = useElementScroll(scrollerRef)
 
-  return async (to: Point2D) => {
+  return async (to: Point) => {
     const ref = scrollerRef.current
     if (!ref) return
 

package/hooks/useScroller.ts

@@ -13,6 +13,7 @@ import {
 import React, { ReactHTML, useState } from 'react'
 import { ScrollSnapProps, ScrollSnapType } from '../types'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
+import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 import { useVelocitySnapTo } from './useVelocitySnapTo'
 
@@ -123,13 +124,6 @@ const useStyles = makeStyles(
 export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = UseStyles<typeof useStyles> &
   HTMLMotionProps<TagName> & { hideScrollbar?: boolean; grid?: boolean }
 
-export function scrollSnapTypeDirection(scrollSnapType: ScrollSnapType) {
-  let smSnapDir = scrollSnapType.split(' ')[0]
-  smSnapDir = smSnapDir.replace('y', 'block')
-  smSnapDir = smSnapDir.replace('x', 'inline') as 'block' | 'inline' | 'both' | 'inline'
-  return smSnapDir
-}
-
 /** Make any HTML */
 export function useScroller<TagName extends keyof ReactHTML = 'div'>(
   props: ScrollableProps<TagName>,

package/hooks/useVelocitySnapTo.ts

@@ -1,5 +1,7 @@
+import { Theme, useMediaQuery } from '@material-ui/core'
 import { PanInfo } from 'framer-motion'
 import { inertia, InertiaOptions } from 'popmotion'
+import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 
 const clamp = ({ velocity, offset }: PanInfo, axis: 'x' | 'y') =>
@@ -17,7 +19,11 @@ const closest = (counts: number[], target: number) =>
 export const useVelocitySnapTo = (
   ref: React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement | undefined>,
 ) => {
-  const { disableSnap, enableSnap, register, getScrollSnapPositions } = useScrollerContext()
+  const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap } =
+    useScrollerContext()
+  const direction = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
+    ? scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
+    : scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
 
   const inertiaOptions: InertiaOptions = {
     power: 1,
@@ -36,7 +42,8 @@ export const useVelocitySnapTo = (
 
     const xDone = new Promise<void>((onComplete) => {
       const targetX = clamp(info, 'x') * -1 + scrollLeft
-      const closestX = closest(getScrollSnapPositions().x, targetX)
+      const closestX =
+        direction !== 'block' ? closest(getScrollSnapPositions().x, targetX) : undefined
 
       if (closestX !== scrollLeft) {
         disableSnap()
@@ -46,7 +53,9 @@ export const useVelocitySnapTo = (
             max: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
             min: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
             ...inertiaOptions,
-            onUpdate: (v: number) => (el.scrollLeft = Math.round(v + scrollLeft)),
+            onUpdate: (v: number) => {
+              el.scrollLeft = Math.round(v + scrollLeft)
+            },
             onComplete,
           }),
         )
@@ -57,7 +66,8 @@ export const useVelocitySnapTo = (
 
     const yDone = new Promise<void>((onComplete) => {
       const targetY = clamp(info, 'y') * -1 + scrollTop
-      const closestY = closest(getScrollSnapPositions().y, targetY)
+      const closestY =
+        direction !== 'inline' ? closest(getScrollSnapPositions().y, targetY) : undefined
 
       if (closestY !== scrollTop) {
         disableSnap()
@@ -67,7 +77,9 @@ export const useVelocitySnapTo = (
             max: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
             min: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
             ...inertiaOptions,
-            onUpdate: (v: number) => (el.scrollTop = Math.round(v + scrollTop)),
+            onUpdate: (v: number) => {
+              el.scrollTop = Math.round(v + scrollTop)
+            },
             onComplete,
           }),
         )

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "1.1.4",
+  "version": "1.1.8",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,25 +16,25 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.16",
-    "@graphcommerce/image": "^2.105.5",
-    "@graphcommerce/next-ui": "^3.20.4",
+    "@graphcommerce/framer-utils": "^2.103.19",
+    "@graphcommerce/image": "^2.105.8",
+    "@graphcommerce/next-ui": "^3.20.8",
     "@material-ui/core": "^4.12.3",
-    "popmotion": "9.3.6"
+    "popmotion": "11.0.3"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.6",
+    "@graphcommerce/eslint-config-pwa": "^3.1.8",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
-    "@playwright/test": "^1.16.2"
+    "@playwright/test": "^1.17.1"
   },
   "peerDependencies": {
     "clsx": "^1.1.1",
-    "framer-motion": "^4.1.3",
+    "framer-motion": "^5.4.5",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "type-fest": "^2.5.1"
+    "type-fest": "^2.8.0"
   },
-  "gitHead": "b992ac3fbe719310988edb8ad811366431509bc2"
+  "gitHead": "a69bd94ffdcca6ca9487eec1cafe9ade3fcdffa3"
 }

package/types.ts

@@ -1,6 +1,5 @@
-import { MotionValue } from 'framer-motion'
+import { MotionValue, Point } from 'framer-motion'
 import { PlaybackControls } from 'popmotion'
-import { Point2D } from 'popmotion/lib/types'
 import React from 'react'
 
 export type ItemState = {
@@ -37,7 +36,7 @@ export type ScrollerContext = {
   /** @private */
   stop(): void
   /** @private */
-  getSnapPosition(direction: SnapPositionDirection): Point2D
+  getSnapPosition(direction: SnapPositionDirection): Point
   /** @private */
   getScrollSnapPositions(): Record<Axis, number[]>
   /** @private */

package/utils/scrollSnapTypeDirection.ts

@@ -0,0 +1,9 @@
+import { ScrollSnapType } from '../types'
+
+type SnapTypeDirection = 'block' | 'inline' | 'both' | 'inline'
+export function scrollSnapTypeDirection(scrollSnapType: ScrollSnapType): SnapTypeDirection {
+  let snapDir = scrollSnapType.split(' ')[0]
+  snapDir = snapDir.replace('y', 'block')
+  snapDir = snapDir.replace('x', 'inline')
+  return snapDir as SnapTypeDirection
+}