@graphcommerce/framer-scroller 1.1.7 → 1.1.11

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.10](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.9...@graphcommerce/framer-scroller@1.1.10) (2021-12-17)
+
+
+### Bug Fixes
+
+* **framer-scroller:** make sure we're not throwing only warning when there are no children ([001c7d9](https://github.com/ho-nl/m2-pwa/commit/001c7d9a00e447d44134c00bd77505e52cf0f9d4))
+
+
+
+
+
+## [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)
 
 

package/components/ScrollerProvider.tsx

@@ -118,7 +118,8 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
   const registerChildren = useCallback(
     (children: React.ReactNode) => {
       const count = React.Children.count(children)
-      if (!count) throw Error('[@graphcommerce/framer-scroller]: Can not find children')
+      if (!count && process.env.NODE_ENV !== 'production')
+        console.warn('[@graphcommerce/framer-scroller]: Can not find children')
       if (count === items.get().length) return
 
       const itemsArr: unknown[] = items.get().slice()

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.7",
+  "version": "1.1.11",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,15 +16,15 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.18",
-    "@graphcommerce/image": "^2.105.7",
-    "@graphcommerce/next-ui": "^3.20.7",
+    "@graphcommerce/framer-utils": "^2.103.19",
+    "@graphcommerce/image": "^2.105.8",
+    "@graphcommerce/next-ui": "^3.21.1",
     "@material-ui/core": "^4.12.3",
     "popmotion": "11.0.3"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.7",
+    "@graphcommerce/eslint-config-pwa": "^3.1.8",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.17.1"
@@ -36,5 +36,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.8.0"
   },
-  "gitHead": "f8974380ace982793000e5b181b5bb314a1945fb"
+  "gitHead": "6cab980582a62a8eee8d5f9bd77583cabc32c6f8"
 }

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
+}