@graphcommerce/framer-scroller 1.0.3 → 1.1.2

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.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.1...@graphcommerce/framer-scroller@1.1.2) (2021-12-03)
+
+
+### Bug Fixes
+
+* height of scroller isn't correct ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
+
+
+
+
+
+# [1.1.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.0.4...@graphcommerce/framer-scroller@1.1.0) (2021-12-03)
+
+
+### Bug Fixes
+
+* **framer-scroller:** do not scroll in the direction that is not being scrolled when dragging and thus delaying the reset to snap ([3198eed](https://github.com/ho-nl/m2-pwa/commit/3198eed7977039f712784ee6c17031d7efb20c25))
+* **framer-scroller:** recursively find snapPoints for deeply nested children ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
+* **framer-scroller:** set the scrollTop when switching snap ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
+* make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
+* make sure the overlays are rendered correctly on mobile ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
+* make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
+
+
+### Features
+
+* **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
+* **framer-scroller:** find the direction of the scroller and set proper values ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
+* **framer-scroller:** get the scrollSnapAlign from the element instead of the body ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
+* **framer-scroller:** provide promise with scrollTo ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
+* **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
+
+
+
+
+
 ## [1.0.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.0.1...@graphcommerce/framer-scroller@1.0.2) (2021-11-03)
 
 

package/components/Scroller.tsx

@@ -3,7 +3,7 @@ import { forwardRef } from 'react'
 import { ScrollableProps, useScroller } from '../hooks/useScroller'
 
 const Scroller = forwardRef<HTMLDivElement, ScrollableProps>((props, forwardedRef) => {
-  const scroller = useScroller<'div'>(props, forwardedRef)
+  const scroller = useScroller<'div'>({ grid: true, ...props }, forwardedRef)
   return <m.div {...scroller} />
 })
 Scroller.displayName = 'Scroller'

package/components/ScrollerButton.tsx

@@ -2,9 +2,9 @@ import { UseStyles } from '@graphcommerce/next-ui'
 import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
 import { m, useMotionValue, useSpring } from 'framer-motion'
 import React from 'react'
-import { useWatchItems } from '..'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
+import { useWatchItems } from '../hooks/useWatchItems'
 import { SnapPositionDirection } from '../types'
 
 const useStyles = makeStyles((theme: Theme) => ({

package/components/ScrollerDots.tsx

@@ -55,6 +55,7 @@ const ScrollerDots = m(
             {...fabProps}
             onClick={() => {
               const positions = getScrollSnapPositions()
+              // eslint-disable-next-line @typescript-eslint/no-floating-promises
               scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
             }}
             className={clsx(dot, props.className)}

package/components/ScrollerProvider.tsx

@@ -16,26 +16,19 @@ import {
 
 export type ScrollerProviderProps = {
   children?: React.ReactNode | undefined
-  scrollSnapType?: ScrollSnapType
+  scrollSnapTypeSm?: ScrollSnapType
+  scrollSnapTypeMd?: ScrollSnapType
   scrollSnapAlign?: ScrollSnapAlign
   scrollSnapStop?: ScrollSnapStop
 }
 
-function useObserveItems(
-  scrollerRef: ReactHtmlRefObject,
-  items: MotionValue<ItemState[]>,
-  enableSnap: ScrollerContext['enableSnap'],
-) {
+function useObserveItems(scrollerRef: ReactHtmlRefObject, items: MotionValue<ItemState[]>) {
   const observe = useCallback(
     (itemsArr: ItemState[]) => {
       if (!scrollerRef.current) return () => {}
 
       const find = ({ target }: { target: Element }) => itemsArr.find((i) => i.el === target)
 
-      const resizeCallback = (entry: ResizeObserverEntry) => {
-        enableSnap()
-        find(entry)
-      }
       const intersectionCallback = (entry: IntersectionObserverEntry) => {
         const item = find(entry)
         item?.visibility.set(entry.intersectionRatio)
@@ -44,7 +37,6 @@ function useObserveItems(
         const scaled = (1 - 0.2) * entry.intersectionRatio + 0.2
         item?.opacity.set(scaled)
       }
-      const ro = new ResizeObserver((entries) => entries.forEach(resizeCallback))
       const io = new IntersectionObserver((entries) => entries.forEach(intersectionCallback), {
         root: scrollerRef.current,
         threshold: [0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1],
@@ -55,18 +47,12 @@ function useObserveItems(
       )
       itemsArr.forEach((value, idx) => {
         if (!value.el) value.el = htmlEls?.[idx]
-        if (value.el) {
-          ro.observe(value.el)
-          io.observe(value.el)
-        }
+        if (value.el) io.observe(value.el)
       })
 
-      return () => {
-        ro.disconnect()
-        io.disconnect()
-      }
+      return () => io.disconnect()
     },
-    [enableSnap, scrollerRef],
+    [scrollerRef],
   )
 
   useEffect(() => {
@@ -82,12 +68,14 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
   const {
     scrollSnapAlign = 'center center',
     scrollSnapStop = 'normal',
-    scrollSnapType = 'inline mandatory',
+    scrollSnapTypeSm = 'inline mandatory',
+    scrollSnapTypeMd = 'inline mandatory',
     ...providerProps
   } = props
+
   const scrollSnap = useMemo(
-    () => ({ scrollSnapType, scrollSnapStop, scrollSnapAlign }),
-    [scrollSnapAlign, scrollSnapStop, scrollSnapType],
+    () => ({ scrollSnapTypeMd, scrollSnapTypeSm, scrollSnapStop, scrollSnapAlign }),
+    [scrollSnapAlign, scrollSnapStop, scrollSnapTypeMd, scrollSnapTypeSm],
   )
 
   const snap = useMotionValue(true)
@@ -107,19 +95,25 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
   }, [])
 
   const disableSnap = useCallback(() => {
+    if (snap.get() === false) return
     stop()
     snap.set(false)
   }, [snap, stop])
 
   const enableSnap = useCallback(() => {
-    if (!scrollerRef.current) return
+    if (!scrollerRef.current || snap.get() === true) return
+
     stop()
-    const p = scrollerRef.current.scrollLeft
+
+    // We're setting the current scrollLeft to prevent resetting the scroll position on Safari
+    const l = scrollerRef.current.scrollLeft
+    const t = scrollerRef.current.scrollTop
     snap.set(true)
-    scrollerRef.current.scrollLeft = p
+    scrollerRef.current.scrollLeft = l
+    scrollerRef.current.scrollTop = t
   }, [snap, stop])
 
-  useObserveItems(scrollerRef, items, enableSnap)
+  useObserveItems(scrollerRef, items)
 
   const registerChildren = useCallback(
     (children: React.ReactNode) => {
@@ -152,6 +146,18 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
     )
   }
 
+  /** Finds all elements with scrollSnapAlign by using getComputedStyle */
+  function recursivelyFindElementsWithScrollSnapAlign(parent: HTMLElement) {
+    const elements: HTMLElement[] = []
+    ;[...parent.children].forEach((child) => {
+      if (!(child instanceof HTMLElement)) return
+
+      if (getComputedStyle(child).scrollSnapAlign !== 'none') elements.push(child)
+      elements.push(...recursivelyFindElementsWithScrollSnapAlign(child))
+    })
+    return elements
+  }
+
   function getSnapPositions(
     parent: HTMLElement,
     excludeOffAxis = true,
@@ -163,7 +169,7 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
       y: { start: [], center: [], end: [] },
     }
 
-    const descendants = [...parent.children]
+    const descendants = recursivelyFindElementsWithScrollSnapAlign(parent)
 
     for (const axis of ['x', 'y'] as Axis[]) {
       const orthogonalAxis = axis === 'x' ? 'y' : 'x'
@@ -176,16 +182,16 @@ export default function ScrollerProvider(props: ScrollerProviderProps) {
 
         // Skip child if it doesn't intersect the parent's opposite axis (it can never be in view)
         if (excludeOffAxis && !domRectIntersects(parentRect, childRect, orthogonalAxis)) {
+          // eslint-disable-next-line no-continue
           continue
         }
 
-        // eslint-disable-next-line prefer-const
-        let [childAlignY, childAlignX] = scrollSnap.scrollSnapAlign.split(
-          ' ',
-        ) as ScrollSnapAlignAxis[]
-        if (typeof childAlignX === 'undefined') {
-          childAlignX = childAlignY
-        }
+        const align = getComputedStyle(child).scrollSnapAlign
+        let [childAlignY, childAlignX] = align.split(' ') as [
+          ScrollSnapAlignAxis,
+          ScrollSnapAlignAxis | undefined,
+        ]
+        if (typeof childAlignX === 'undefined') childAlignX = childAlignY
 
         const childAlign = axis === 'x' ? childAlignX : childAlignY
         const childOffsetStart = childRect[axisStart] - parentRect[axisStart] + parent[axisScroll]

package/hooks/useScrollTo.ts

@@ -7,38 +7,50 @@ export function useScrollTo() {
   const { scrollerRef, register, disableSnap, enableSnap } = useScrollerContext()
   const scroll = useElementScroll(scrollerRef)
 
-  return (to: Point2D) => {
-    if (!scrollerRef.current) return
+  return async (to: Point2D) => {
+    const ref = scrollerRef.current
+    if (!ref) return
 
-    // const notCompletelyVisible = items.filter((item) => item.visibility.get() < 0.9)
-    // todo get the target element and move one right, keep the current velocity
+    const xDone = new Promise<void>((onComplete) => {
+      if (ref.scrollLeft !== to.x) {
+        disableSnap()
+        register(
+          animate({
+            from: ref.scrollLeft,
+            to: to.x,
+            velocity: scroll.x.getVelocity(),
+            onUpdate: (v) => {
+              ref.scrollLeft = v
+            },
+            onComplete,
+            onStop: onComplete,
+            bounce: 50,
+          }),
+        )
+      } else onComplete()
+    })
 
-    disableSnap()
-    register(
-      animate({
-        from: scrollerRef.current.scrollLeft,
-        to: to.x,
-        velocity: scroll.x.getVelocity(),
-        onUpdate: (v) => {
-          if (!scrollerRef.current) return
-          scrollerRef.current.scrollLeft = v
-        },
-        onComplete: enableSnap,
-        bounce: 50,
-      }),
-    )
-    register(
-      animate({
-        from: scrollerRef.current.scrollTop,
-        to: to.y,
-        velocity: scroll.y.getVelocity(),
-        onUpdate: (v) => {
-          if (!scrollerRef.current) return
-          scrollerRef.current.scrollTop = v
-        },
-        onComplete: enableSnap,
-        bounce: 50,
-      }),
-    )
+    const yDone = new Promise<void>((onComplete) => {
+      if (ref.scrollTop !== to.y) {
+        disableSnap()
+        register(
+          animate({
+            from: ref.scrollTop,
+            to: to.y,
+            velocity: scroll.y.getVelocity(),
+            onUpdate: (v) => {
+              ref.scrollTop = v
+            },
+            onComplete,
+            onStop: onComplete,
+            bounce: 50,
+          }),
+        )
+      } else onComplete()
+    })
+
+    await xDone
+    await yDone
+    enableSnap()
   }
 }

package/hooks/useScroller.ts

@@ -1,6 +1,6 @@
 import { useConstant, useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
+import { UseStyles, classesPicker } from '@graphcommerce/next-ui'
+import { makeStyles, Theme } from '@material-ui/core'
 import {
   HTMLMotionProps,
   motionValue,
@@ -11,52 +11,123 @@ import {
   useTransform,
 } from 'framer-motion'
 import React, { ReactHTML, useState } from 'react'
-import { ScrollSnapProps } from '../types'
+import { ScrollSnapProps, ScrollSnapType } from '../types'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
 import { useScrollerContext } from './useScrollerContext'
 import { useVelocitySnapTo } from './useVelocitySnapTo'
 
 const useStyles = makeStyles(
-  {
-    root: ({ scrollSnapAlign, scrollSnapStop }: ScrollSnapProps) => ({
+  (theme: Theme) => ({
+    root: {
+      '& *': {
+        userSelect: 'none',
+        userDrag: 'none',
+      },
+    },
+
+    rootSmSnapDirNone: {
+      [theme.breakpoints.down('sm')]: {
+        overflow: 'hidden',
+        overscrollBehavior: 'auto',
+      },
+    },
+    rootMdSnapDirNone: {
+      [theme.breakpoints.up('md')]: {
+        overflow: 'hidden',
+        overscrollBehavior: 'auto',
+      },
+    },
+    rootSmSnapDirBlock: {
+      [theme.breakpoints.down('sm')]: {
+        overflowY: 'auto',
+        overscrollBehaviorBlock: 'contain',
+      },
+    },
+    rootMdSnapDirBlock: {
+      [theme.breakpoints.up('md')]: {
+        overflowY: 'auto',
+        overscrollBehaviorBlock: 'contain',
+      },
+    },
+    rootSmSnapDirInline: {
+      [theme.breakpoints.down('sm')]: {
+        overflowX: 'auto',
+        overscrollBehaviorInline: 'contain',
+      },
+    },
+    rootMdSnapDirInline: {
+      [theme.breakpoints.up('md')]: {
+        overflowX: 'auto',
+        overscrollBehaviorInline: 'contain',
+      },
+    },
+    rootSmSnapDirBoth: {
+      [theme.breakpoints.down('sm')]: {
+        overflow: 'auto',
+        overscrollBehavior: 'contain',
+      },
+    },
+    rootMdSnapDirBoth: {
+      [theme.breakpoints.up('md')]: {
+        overflow: 'auto',
+        overscrollBehavior: 'contain',
+      },
+    },
+
+    rootSmGridDirBlock: ({ scrollSnapAlign, scrollSnapStop }) => ({
       display: 'grid',
-      gridAutoFlow: 'column',
+      gridAutoFlow: 'row',
       gridAutoColumns: `40%`,
-      overflow: `auto`,
-      overscrollBehaviorInline: `contain`,
       '& > *': {
         scrollSnapAlign,
         scrollSnapStop,
       },
-      '& *': {
-        userSelect: 'none',
-        userDrag: 'none',
+    }),
+    rootSmGridDirInline: ({ scrollSnapAlign, scrollSnapStop }) => ({
+      display: 'grid',
+      gridAutoFlow: 'column',
+      gridAutoRows: `40%`,
+      gridTemplateRows: 'auto',
+      '& > *': {
+        scrollSnapAlign,
+        scrollSnapStop,
       },
     }),
-    canGrab: {
+    rootCanGrab: {
       cursor: 'grab',
     },
-    snap: ({ scrollSnapType }: ScrollSnapProps) => ({
-      scrollSnapType,
+    rootIsSnap: ({ scrollSnapTypeSm, scrollSnapTypeMd }: ScrollSnapProps) => ({
+      [theme.breakpoints.down('sm')]: {
+        scrollSnapType: scrollSnapTypeSm,
+      },
+      [theme.breakpoints.up('md')]: {
+        scrollSnapType: scrollSnapTypeMd,
+      },
     }),
-    panning: {
+    rootIsPanning: {
       cursor: 'grabbing !important',
       '& > *': {
         pointerEvents: 'none',
       },
     },
-    hideScrollbar: {
+    rootHideScrollbar: {
       scrollbarWidth: 'none',
       '&::-webkit-scrollbar': {
         display: 'none',
       },
     },
-  },
+  }),
   { name: 'Scroller' },
 )
 
-export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = HTMLMotionProps<TagName> & {
-  hideScrollbar?: boolean
+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 */
@@ -64,10 +135,11 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
   props: ScrollableProps<TagName>,
   forwardedRef: React.ForwardedRef<any>,
 ) {
+  const { hideScrollbar = false, children, grid = false, ...divProps } = props
+
   const { scrollSnap, scrollerRef, enableSnap, disableSnap, snap, registerChildren } =
     useScrollerContext()
 
-  const { hideScrollbar, children, ...divProps } = props
   registerChildren(children)
 
   const scroll = useElementScroll(scrollerRef)
@@ -77,28 +149,28 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
       [scroll.xMax, scroll.yMax] as MotionValue<string | number>[],
       ([xMax, yMax]: number[]) => xMax || yMax,
     ),
-    (v) => v,
+    (v) => !!v,
   )
 
   const isSnap = useMotionValueValue(snap, (v) => v)
 
   const classes = useStyles(scrollSnap)
 
-  const animatePan = useVelocitySnapTo(scrollerRef)
+  const snapToVelocity = useVelocitySnapTo(scrollerRef)
+
   const [isPanning, setPanning] = useState(false)
 
+  /** If the scroller doesn't have snap enabled and the user is not panning, enable snap */
   useDomEvent(scrollerRef as React.RefObject<EventTarget>, 'wheel', (e) => {
     /**
      * Todo: this is actually incorrect because when enabling the snap points, the area jumps to the
      * nearest point a snap.
      *
-     * What we *should* do is wait for the scroll position to be set exactly like a snappoint and
-     * then enable it. However, to lazy to do that then we need to know the position of all elements
-     * at all time, we now are lazy :)
+     * What we SHOULD do is wait for the scroll position to be set exactly on a snappoint and then
+     * enable it. However, to do that then we need to know the position of all elements at all time,
+     * we now are lazy :)
      */
-    if (!snap.get() && !isPanning && e instanceof WheelEvent) {
-      enableSnap()
-    }
+    if (!snap.get() && !isPanning && e instanceof WheelEvent) enableSnap()
   })
 
   const scrollStart = useConstant(() => ({ x: motionValue(0), y: motionValue(0) }))
@@ -127,7 +199,8 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
     if (!isHTMLMousePointerEvent(event)) return
 
     setPanning(false)
-    animatePan(info, enableSnap)
+    // eslint-disable-next-line @typescript-eslint/no-floating-promises
+    snapToVelocity(info)
   }
 
   const ref: React.RefCallback<HTMLElement> = (el) => {
@@ -137,14 +210,22 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
     else if (forwardedRef) forwardedRef.current = el
   }
 
-  const className = clsx(
-    classes.root,
-    isSnap && classes.snap,
-    isPanning && classes.panning,
-    hideScrollbar && classes.hideScrollbar,
-    canGrab && classes.canGrab,
-    props.className,
-  )
+  const smSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
+  const mdSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
+
+  const smGridDir = grid && smSnapDir
+  const mdGridDir = grid && mdSnapDir
+
+  const className = classesPicker(classes, {
+    smSnapDir,
+    smGridDir,
+    mdSnapDir,
+    mdGridDir,
+    isSnap,
+    isPanning,
+    hideScrollbar,
+    canGrab,
+  })('root', props.className)
 
-  return { ...divProps, ref, onPanStart, onPan, onPanEnd, className, children }
+  return { ...divProps, ref, onPanStart, onPan, onPanEnd, children, ...className }
 }

package/hooks/useVelocitySnapTo.ts

@@ -17,7 +17,7 @@ const closest = (counts: number[], target: number) =>
 export const useVelocitySnapTo = (
   ref: React.RefObject<HTMLElement> | React.MutableRefObject<HTMLElement | undefined>,
 ) => {
-  const { disableSnap, register, getScrollSnapPositions, scrollSnap } = useScrollerContext()
+  const { disableSnap, enableSnap, register, getScrollSnapPositions } = useScrollerContext()
 
   const inertiaOptions: InertiaOptions = {
     power: 1,
@@ -28,42 +28,58 @@ export const useVelocitySnapTo = (
     // restSpeed: 1,
   }
 
-  const animatePan = (info: PanInfo, onComplete?: () => void) => {
+  const animatePan = async (info: PanInfo) => {
     const el = ref.current
     if (!el) throw Error(`Can't find html element`)
 
     const { scrollLeft, scrollTop } = el
-    disableSnap()
 
-    const targetX = clamp(info, 'x') * -1 + scrollLeft
-    const closestX = closest(getScrollSnapPositions().x, targetX)
+    const xDone = new Promise<void>((onComplete) => {
+      const targetX = clamp(info, 'x') * -1 + scrollLeft
+      const closestX = closest(getScrollSnapPositions().x, targetX)
 
-    const cancelX = inertia({
-      velocity: info.velocity.x * -1,
-      max: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
-      min: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
-      ...inertiaOptions,
-      onUpdate: (v: number) => {
-        el.scrollLeft = Math.round(v + scrollLeft)
-      },
-      onComplete,
+      if (closestX !== scrollLeft) {
+        disableSnap()
+        register(
+          inertia({
+            velocity: info.velocity.x * -1,
+            max: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
+            min: typeof closestX !== 'undefined' ? closestX - scrollLeft : undefined,
+            ...inertiaOptions,
+            onUpdate: (v: number) => (el.scrollLeft = Math.round(v + scrollLeft)),
+            onComplete,
+          }),
+        )
+      } else {
+        onComplete()
+      }
     })
-    register(cancelX)
 
-    const targetY = clamp(info, 'y') * -1 + scrollTop
-    const closestY = closest(getScrollSnapPositions().y, targetY)
-    const cancelY = inertia({
-      velocity: info.velocity.y * -1,
-      max: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
-      min: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
-      ...inertiaOptions,
-      onUpdate: (v: number) => {
-        el.scrollTop = v + scrollTop
-      },
+    const yDone = new Promise<void>((onComplete) => {
+      const targetY = clamp(info, 'y') * -1 + scrollTop
+      const closestY = closest(getScrollSnapPositions().y, targetY)
+
+      if (closestY !== scrollTop) {
+        disableSnap()
+        register(
+          inertia({
+            velocity: info.velocity.y * -1,
+            max: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
+            min: typeof closestY !== 'undefined' ? closestY - scrollTop : undefined,
+            ...inertiaOptions,
+            onUpdate: (v: number) => (el.scrollTop = Math.round(v + scrollTop)),
+            onComplete,
+          }),
+        )
+      } else {
+        onComplete()
+      }
     })
-    register(cancelY)
 
-    return () => {}
+    await xDone
+    await yDone
+    enableSnap()
   }
+
   return animatePan
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "1.0.3",
+  "version": "1.1.2",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,14 +16,15 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.14",
-    "@graphcommerce/image": "^2.105.3",
+    "@graphcommerce/framer-utils": "^2.103.16",
+    "@graphcommerce/image": "^2.105.5",
+    "@graphcommerce/next-ui": "^3.20.2",
     "@material-ui/core": "^4.12.3",
     "popmotion": "9.3.6"
   },
   "devDependencies": {
     "@graphcommerce/browserslist-config-pwa": "^3.0.2",
-    "@graphcommerce/eslint-config-pwa": "^3.1.4",
+    "@graphcommerce/eslint-config-pwa": "^3.1.6",
     "@graphcommerce/prettier-config-pwa": "^3.0.4",
     "@graphcommerce/typescript-config-pwa": "^3.1.1",
     "@playwright/test": "^1.16.2"
@@ -35,5 +36,5 @@
     "react-dom": "^17.0.2",
     "type-fest": "^2.5.1"
   },
-  "gitHead": "1099718b92d4d472f32aeb6379f6167c6b550ccf"
+  "gitHead": "688a7042901bf36f8ab8bbf8e1886570a5350b9e"
 }

package/types.ts

@@ -10,7 +10,8 @@ export type ItemState = {
 }
 
 export type ScrollSnapProps = {
-  scrollSnapType: ScrollSnapType
+  scrollSnapTypeSm: ScrollSnapType
+  scrollSnapTypeMd: ScrollSnapType
   scrollSnapAlign: ScrollSnapAlign
   scrollSnapStop: ScrollSnapStop
 }
@@ -43,14 +44,12 @@ export type ScrollerContext = {
   registerChildren(children: React.ReactNode): void
 }
 
+export type ScrollSnapTypeSingle = 'none' | 'block' | 'inline' | 'x' | 'y' | 'both'
+
 export type ScrollSnapType =
-  | 'none'
-  | 'block'
-  | 'inline'
-  | 'x'
-  | 'y'
-  | 'both'
-  | `${'block' | 'inline' | 'x' | 'y' | 'both'} ${'mandatory' | 'proximity'}`
+  | ScrollSnapTypeSingle
+  | `${ScrollSnapTypeSingle} ${'mandatory' | 'proximity'}`
+
 export type ScrollSnapAlignAxis = 'none' | 'center' | 'end' | 'start'
 
 export type ScrollSnapAlign = ScrollSnapAlignAxis | `${ScrollSnapAlignAxis} ${ScrollSnapAlignAxis}`