@graphcommerce/framer-scroller 2.1.39 → 2.1.41

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Change Log
 
+## 2.1.41
+
+### Patch Changes
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`81f31d1e5`](https://github.com/graphcommerce-org/graphcommerce/commit/81f31d1e54397368088a4289aaddd29facfceeef) Thanks [@paales](https://github.com/paales)! - Make sure we can only drag in the current Scroller to prevent overscroll issues
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`a8905d263`](https://github.com/graphcommerce-org/graphcommerce/commit/a8905d263273cb9322583d5759a5fdc66eceb8e4) Thanks [@paales](https://github.com/paales)! - The duration of the animation should be based on the distance the animation has to go
+
+- [#1675](https://github.com/graphcommerce-org/graphcommerce/pull/1675) [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6) Thanks [@paales](https://github.com/paales)! - Added crosssel functionality
+
+- Updated dependencies [[`9e630670f`](https://github.com/graphcommerce-org/graphcommerce/commit/9e630670ff6c952ab7b938d890b5509804985cf3), [`2e9fa5984`](https://github.com/graphcommerce-org/graphcommerce/commit/2e9fa5984a07ff14fc1b3a4f62189a26e8e3ecdd), [`adf13069a`](https://github.com/graphcommerce-org/graphcommerce/commit/adf13069af6460c960276b402237371c12fc6dec), [`1b1504c9b`](https://github.com/graphcommerce-org/graphcommerce/commit/1b1504c9b0e51f2787bce91e1ff1940f540411d6), [`6c2e27b1b`](https://github.com/graphcommerce-org/graphcommerce/commit/6c2e27b1be4aaa888e65a2bd69eaeb467a54a023)]:
+  - @graphcommerce/next-ui@4.28.1
+  - @graphcommerce/framer-utils@3.2.1
+  - @graphcommerce/image@3.1.10
+
+## 2.1.40
+
+### Patch Changes
+
+- [#1662](https://github.com/graphcommerce-org/graphcommerce/pull/1662) [`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a) Thanks [@paales](https://github.com/paales)! - Move to useMatchMedia to have a simple boolean utility that allows to match to a certain breakpoint
+
+- Updated dependencies [[`0c21c5c23`](https://github.com/graphcommerce-org/graphcommerce/commit/0c21c5c233ebab15f6629c234e3de1cc8c0452e1), [`de8925aa9`](https://github.com/graphcommerce-org/graphcommerce/commit/de8925aa910b191c62041530c68c697a58a1e52d), [`f5eae0afd`](https://github.com/graphcommerce-org/graphcommerce/commit/f5eae0afdbd474b1f81c450425ffadf2d025187a)]:
+  - @graphcommerce/next-ui@4.28.0
+
 ## 2.1.39
 
 ### Patch Changes

package/components/ScrollerProvider.tsx

@@ -21,6 +21,9 @@ export type ScrollerProviderProps = {
   scrollSnapTypeMd?: ScrollSnapType
   scrollSnapAlign?: ScrollSnapAlign
   scrollSnapStop?: ScrollSnapStop
+
+  /** @private */
+  _inititalSnap?: boolean
 }
 
 function useObserveItems(scrollerRef: ReactHtmlRefObject, items: MotionValue<ItemState[]>) {
@@ -71,6 +74,7 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
     scrollSnapStop = 'normal',
     scrollSnapTypeSm = 'inline mandatory',
     scrollSnapTypeMd = 'inline mandatory',
+    _inititalSnap = true,
     ...providerProps
   } = props
 
@@ -79,7 +83,7 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
     [scrollSnapAlign, scrollSnapStop, scrollSnapTypeMd, scrollSnapTypeSm],
   )
 
-  const snap = useMotionValue(true)
+  const snap = useMotionValue(_inititalSnap)
 
   // Monitor the visbility of all elements and store them for later use.
   const items = useMotionValue<ItemState[]>([])
@@ -190,7 +194,9 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
           continue
         }
 
-        const align = getComputedStyle(child).scrollSnapAlign
+        const { scrollSnapAlign: align } = getComputedStyle(child)
+
+        // console.trace(scrollPaddingTop, scrollPaddingRight, scrollPaddingBottom, scrollPaddingLeft)
         let [childAlignY, childAlignX] = align.split(' ') as [
           ScrollSnapAlignAxis,
           ScrollSnapAlignAxis | undefined,
@@ -266,20 +272,32 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
     }
 
     const clamp = (min: number, max: number) => (value: number) =>
-      Math.max(min, Math.min(max, value))
+      Math.round(Math.max(min, Math.min(max, value)))
 
     return {
       x: [
-        ...snapPositions.x.start.map((v) => v - scrollPadding.x.before),
-        ...snapPositions.x.center.map((v) => v - rect.width / 2),
-        ...snapPositions.x.end.map((v) => v - rect.width + scrollPadding.x.after),
-      ].map(clamp(0, maxScroll.x)),
+        ...new Set(
+          [
+            ...snapPositions.x.start.map((v) => v - scrollPadding.x.before),
+            ...snapPositions.x.center.map((v) => v - rect.width / 2),
+            ...snapPositions.x.end.map((v) => v - rect.width + scrollPadding.x.after),
+          ]
+            .map(clamp(0, maxScroll.x))
+            .sort((a, b) => a - b),
+        ),
+      ],
 
       y: [
-        ...snapPositions.y.start.map((v) => v - scrollPadding.y.before),
-        ...snapPositions.y.center.map((v) => v - rect.height / 2),
-        ...snapPositions.y.end.map((v) => v - rect.height + scrollPadding.y.after),
-      ].map(clamp(0, maxScroll.y)),
+        ...new Set(
+          [
+            ...snapPositions.y.start.map((v) => v - scrollPadding.y.before),
+            ...snapPositions.y.center.map((v) => v - rect.height / 2),
+            ...snapPositions.y.end.map((v) => v - rect.height + scrollPadding.y.after),
+          ]
+            .map(clamp(0, maxScroll.y))
+            .sort((a, b) => a - b),
+        ),
+      ],
     }
   }
 

package/hooks/useScrollTo.ts

@@ -2,29 +2,20 @@ import { useElementScroll } from '@graphcommerce/framer-utils'
 import { MotionConfigContext, Point, Tween } from 'framer-motion'
 import { animate } from 'popmotion'
 import { useCallback, useContext } from 'react'
+import { distanceAnimationDuration } from '../utils/distanceAnimationDuration'
 import { useScrollerContext } from './useScrollerContext'
 
 export function useScrollTo() {
   const { scrollerRef, register, disableSnap, enableSnap } = useScrollerContext()
   const scroll = useElementScroll(scrollerRef)
 
-  const duration =
-    ((useContext(MotionConfigContext).transition as Tween | undefined)?.duration ?? 0.375) * 1000
+  const duration = (useContext(MotionConfigContext).transition as Tween | undefined)?.duration ?? 0
 
   const scrollTo = useCallback(
     async (to: Point) => {
       const ref = scrollerRef.current
       if (!ref) return
 
-      // In the future we want to move to browser native scrolling behavior, but since the animation timing isn't configurable we can't use it.
-      // if ('scrollBehavior' in document.documentElement.style) {
-      //   scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
-      //   await new Promise((onComplete) => {
-      //     setTimeout(onComplete, 2000)
-      //   })
-      //   return
-      // }
-
       // @ts-expect-error private api, but we're updating the animation value here manually instead of relying on the event listener.
       // eslint-disable-next-line @typescript-eslint/no-floating-promises
       scroll.scroll.start(() => () => {})
@@ -43,7 +34,7 @@ export function useScrollTo() {
               },
               onComplete,
               onStop: onComplete,
-              duration,
+              duration: duration * 1000 || distanceAnimationDuration(ref.scrollLeft, to.x),
             }),
           )
         } else onComplete()
@@ -63,7 +54,7 @@ export function useScrollTo() {
               },
               onComplete,
               onStop: onComplete,
-              duration,
+              duration: duration * 1000 || distanceAnimationDuration(ref.scrollTop, to.y),
             }),
           )
         } else {

package/hooks/useScroller.ts

@@ -83,6 +83,7 @@ export function useScroller<
   const onPanStart: PanHandlers['onPanStart'] = (event) => {
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
+    if (event.target.closest('.Scroller-root') !== scrollerRef.current) return
 
     scrollStart.x.set(scroll.x.get())
     scrollStart.y.set(scroll.y.get())
@@ -95,6 +96,7 @@ export function useScroller<
 
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
+    if (event.target.closest('.Scroller-root') !== scrollerRef.current) return
 
     scrollerRef.current.scrollLeft = scrollStart.x.get() - info.offset.x
     scrollerRef.current.scrollTop = scrollStart.y.get() - info.offset.y
@@ -103,6 +105,7 @@ export function useScroller<
   const onPanEnd: PanHandlers['onPanEnd'] = (event, info) => {
     // If we're not dealing with the mouse we don't need to do anything
     if (!isHTMLMousePointerEvent(event)) return
+    if (event.target.closest('.Scroller-root') !== scrollerRef.current) return
 
     setPanning(false)
     // eslint-disable-next-line @typescript-eslint/no-floating-promises

package/hooks/useVelocitySnapTo.ts

@@ -1,4 +1,5 @@
-import { Theme, useMediaQuery } from '@mui/material'
+import { useMatchMedia } from '@graphcommerce/next-ui'
+import { useTheme } from '@mui/material'
 import { PanInfo } from 'framer-motion'
 import { inertia, InertiaOptions } from 'popmotion'
 import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
@@ -21,9 +22,13 @@ export const useVelocitySnapTo = (
 ) => {
   const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap } =
     useScrollerContext()
-  const direction = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
-    ? scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
-    : scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
+
+  const matchMedia = useMatchMedia()
+
+  const direction = () =>
+    matchMedia.down('md')
+      ? scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
+      : scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
 
   const inertiaOptions: InertiaOptions = {
     power: 1,
@@ -43,7 +48,7 @@ export const useVelocitySnapTo = (
     const xDone = new Promise<void>((onComplete) => {
       const targetX = clamp(info, 'x') * -1 + scrollLeft
       const closestX =
-        direction !== 'block' ? closest(getScrollSnapPositions().x, targetX) : undefined
+        direction() !== 'block' ? closest(getScrollSnapPositions().x, targetX) : undefined
 
       if ((closestX ?? 0) !== scrollLeft) {
         disableSnap()
@@ -67,7 +72,7 @@ export const useVelocitySnapTo = (
     const yDone = new Promise<void>((onComplete) => {
       const targetY = clamp(info, 'y') * -1 + scrollTop
       const closestY =
-        direction !== 'inline' ? closest(getScrollSnapPositions().y, targetY) : undefined
+        direction() !== 'inline' ? closest(getScrollSnapPositions().y, targetY) : undefined
 
       if ((closestY ?? 0) !== scrollTop) {
         disableSnap()

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "2.1.39",
+  "version": "2.1.41",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -15,9 +15,9 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "3.2.0",
-    "@graphcommerce/image": "3.1.9",
-    "@graphcommerce/next-ui": "4.27.0"
+    "@graphcommerce/framer-utils": "3.2.1",
+    "@graphcommerce/image": "3.1.10",
+    "@graphcommerce/next-ui": "4.28.1"
   },
   "devDependencies": {
     "@graphcommerce/eslint-config-pwa": "^4.1.10",

package/utils/distanceAnimationDuration.ts

@@ -0,0 +1,8 @@
+/** Get the duration in ms of the animation depending upon the distance provided in pixels */
+export function distanceAnimationDuration(fromPx: number, toPx: number): number {
+  const height = Math.abs(fromPx - toPx)
+  if (!height) return 0
+
+  const constant = Math.abs(fromPx - toPx) / 36
+  return Math.round((4 + 15 * constant ** 0.25 + constant / 5) * 10)
+}

package/utils/isHTMLMousePointerEvent.ts

@@ -1,6 +1,6 @@
 export function isHTMLMousePointerEvent(
   event: MouseEvent | TouchEvent | PointerEvent,
-): event is PointerEvent {
+): event is PointerEvent & { target: HTMLElement } {
   return (
     event instanceof PointerEvent &&
     event.pointerType === 'mouse' &&

package/utils/scrollSnapTypeDirection.ts

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