@graphcommerce/framer-scroller 7.0.0-canary.21 → 7.0.0

package/CHANGELOG.md

@@ -1,8 +1,208 @@
 # Change Log
 
-## 7.0.0-canary.21
+## 7.0.0
 
-### Major Changes
+### Minor Changes
+
+- [#1996](https://github.com/graphcommerce-org/graphcommerce/pull/1996) [`3ed66a849`](https://github.com/graphcommerce-org/graphcommerce/commit/3ed66a849430d6ad1c46d20828eb988283da0c4a) - SidebarGallery now has a disableZoom prop to disable all zoom functionality ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#1937](https://github.com/graphcommerce-org/graphcommerce/pull/1937) [`a98e23e3a`](https://github.com/graphcommerce-org/graphcommerce/commit/a98e23e3a250157b9d3756b656f1a4c3c52b0ec0) - Assign correct scroll-snap-type type, to prevent error on firefox ([@mikekeehnen](https://github.com/mikekeehnen))
+
+### Patch Changes
+
+- [#1993](https://github.com/graphcommerce-org/graphcommerce/pull/1993) [`f9bd75108`](https://github.com/graphcommerce-org/graphcommerce/commit/f9bd75108ecef583ecd32e701c10d70537cb8a89) - Scrollers would not working properly in Firefox, it would drag elements instead of the scroller. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+- [#2031](https://github.com/graphcommerce-org/graphcommerce/pull/2031) [`4d8fc9e99`](https://github.com/graphcommerce-org/graphcommerce/commit/4d8fc9e998fc9361282833316ec9564da0644ed6) - Eslint fixes and suppress accepted warnings ([@paales](https://github.com/paales))
+
+- [#1954](https://github.com/graphcommerce-org/graphcommerce/pull/1954) [`ec82fe49c`](https://github.com/graphcommerce-org/graphcommerce/commit/ec82fe49cd9aa0865b6c21eb405f05d8596748f6) - Prevent overlays from auto-closing on iOS 14 ([@FrankHarland](https://github.com/FrankHarland))
+
+- [#1998](https://github.com/graphcommerce-org/graphcommerce/pull/1998) [`a788baaeb`](https://github.com/graphcommerce-org/graphcommerce/commit/a788baaeb9646c5a30b55998697d38a6093b6c44) - Added option to useScrollTo to allow/disallow stopping the scroll animation on user scroll interaction ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.98
+
+## 6.2.0-canary.97
+
+## 6.2.0-canary.96
+
+## 6.2.0-canary.95
+
+## 6.2.0-canary.94
+
+## 6.2.0-canary.93
+
+## 6.2.0-canary.92
+
+## 6.2.0-canary.91
+
+## 6.2.0-canary.90
+
+## 6.2.0-canary.89
+
+### Patch Changes
+
+- [#2031](https://github.com/graphcommerce-org/graphcommerce/pull/2031) [`4d8fc9e99`](https://github.com/graphcommerce-org/graphcommerce/commit/4d8fc9e998fc9361282833316ec9564da0644ed6) - Eslint fixes and suppress accepted warnings ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.88
+
+## 6.2.0-canary.87
+
+## 6.2.0-canary.86
+
+## 6.2.0-canary.85
+
+## 6.2.0-canary.84
+
+## 6.2.0-canary.83
+
+## 6.2.0-canary.82
+
+## 6.2.0-canary.81
+
+## 6.2.0-canary.80
+
+## 6.2.0-canary.79
+
+### Patch Changes
+
+- [#2013](https://github.com/graphcommerce-org/graphcommerce/pull/2013) [`c57bdf8a4`](https://github.com/graphcommerce-org/graphcommerce/commit/c57bdf8a4ce936c3eedc4dfada3a464a113ac68a) - Updated @mui and framer-motion packages to latest versions ([@paales](https://github.com/paales))
+
+## 6.2.0-canary.78
+
+## 6.2.0-canary.77
+
+## 6.2.0-canary.76
+
+## 6.2.0-canary.75
+
+## 6.2.0-canary.74
+
+## 6.2.0-canary.73
+
+## 6.2.0-canary.72
+
+## 6.2.0-canary.71
+
+## 6.2.0-canary.70
+
+### Patch Changes
+
+- [#2010](https://github.com/graphcommerce-org/graphcommerce/pull/2010) [`236471e8c`](https://github.com/graphcommerce-org/graphcommerce/commit/236471e8ca892be337de31bd3d654f2ddddf8695) - Fixed bug which caused the sign in field to not be focusable ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.69
+
+## 6.2.0-canary.68
+
+## 6.2.0-canary.67
+
+## 6.2.0-canary.66
+
+### Patch Changes
+
+- [#1993](https://github.com/graphcommerce-org/graphcommerce/pull/1993) [`f9bd75108`](https://github.com/graphcommerce-org/graphcommerce/commit/f9bd75108ecef583ecd32e701c10d70537cb8a89) - Fixed scrollers not working properly in Firefox due to the `draggable` html property being handled differently. Added event.preventDefault() onMouseDown to useScroller to prevent drag and drop functionality inside scrollers. ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.65
+
+### Minor Changes
+
+- [#1996](https://github.com/graphcommerce-org/graphcommerce/pull/1996) [`3ed66a849`](https://github.com/graphcommerce-org/graphcommerce/commit/3ed66a849430d6ad1c46d20828eb988283da0c4a) - Added a disableZoom prop to SidebarGallery to disable all zoom functionality ([@Jessevdpoel](https://github.com/Jessevdpoel))
+
+## 6.2.0-canary.64
+
+### Patch Changes
+
+- [#1998](https://github.com/graphcommerce-org/graphcommerce/pull/1998) [`a788baaeb`](https://github.com/graphcommerce-org/graphcommerce/commit/a788baaeb9646c5a30b55998697d38a6093b6c44) - Added option to useScrollTo to allow/disallow stopping the scroll animation on user scroll interaction ([@bramvanderholst](https://github.com/bramvanderholst))
+
+## 6.2.0-canary.63
+
+## 6.2.0-canary.62
+
+## 6.2.0-canary.61
+
+## 6.2.0-canary.60
+
+## 6.2.0-canary.59
+
+## 6.2.0-canary.58
+
+## 6.2.0-canary.57
+
+## 6.2.0-canary.56
+
+## 6.2.0-canary.55
+
+## 6.2.0-canary.54
+
+## 6.2.0-canary.53
+
+## 6.2.0-canary.52
+
+## 6.2.0-canary.51
+
+## 6.2.0-canary.50
+
+## 6.2.0-canary.49
+
+## 6.2.0-canary.48
+
+## 6.2.0-canary.47
+
+## 6.2.0-canary.46
+
+## 6.2.0-canary.45
+
+## 6.2.0-canary.44
+
+## 6.2.0-canary.43
+
+## 6.2.0-canary.42
+
+## 6.2.0-canary.41
+
+## 6.2.0-canary.40
+
+## 6.2.0-canary.39
+
+## 6.2.0-canary.38
+
+## 6.2.0-canary.37
+
+## 6.2.0-canary.36
+
+## 6.2.0-canary.35
+
+### Patch Changes
+
+- [#1954](https://github.com/graphcommerce-org/graphcommerce/pull/1954) [`ec82fe49c`](https://github.com/graphcommerce-org/graphcommerce/commit/ec82fe49cd9aa0865b6c21eb405f05d8596748f6) - fix: prevent overlays from aut-closing on iOS 14 ([@FrankHarland](https://github.com/FrankHarland))
+
+## 6.2.0-canary.34
+
+## 6.2.0-canary.33
+
+## 6.2.0-canary.32
+
+## 6.2.0-canary.31
+
+## 6.2.0-canary.30
+
+## 6.2.0-canary.29
+
+## 6.2.0-canary.28
+
+## 6.2.0-canary.27
+
+## 6.2.0-canary.26
+
+## 6.2.0-canary.25
+
+## 6.2.0-canary.24
+
+## 6.2.0-canary.23
+
+## 6.2.0-canary.22
+
+## 6.2.0-canary.21
+
+### Minor Changes
 
 - [#1937](https://github.com/graphcommerce-org/graphcommerce/pull/1937) [`a98e23e3a`](https://github.com/graphcommerce-org/graphcommerce/commit/a98e23e3a250157b9d3756b656f1a4c3c52b0ec0) - Assign correct scroll-snap-type type, to prevent error on firefox ([@mikekeehnen](https://github.com/mikekeehnen))
 

package/components/ScrollerBar.tsx

@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { styled, SxProps, Theme, useTheme } from '@mui/material'
 import { m, transform, useTransform } from 'framer-motion'

package/components/ScrollerDot.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { i18n } from '@lingui/core'
 import { Fab, FabProps, styled } from '@mui/material'

package/components/ScrollerDots.tsx

@@ -1,4 +1,5 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { Box, FabProps, styled, SxProps, Theme } from '@mui/material'
 import { m } from 'framer-motion'

package/components/ScrollerProvider.tsx

@@ -1,5 +1,5 @@
 import { useConstant, useElementScroll } from '@graphcommerce/framer-utils'
-import { MotionValue, motionValue, Point, useMotionValue } from 'framer-motion'
+import { MotionValue, motionValue, Point, useDomEvent, useMotionValue } from 'framer-motion'
 import { PlaybackControls } from 'popmotion'
 import React, { useEffect, useRef, useMemo, useCallback } from 'react'
 import { scrollerContext } from '../context/scrollerContext'
@@ -85,6 +85,7 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
   )
 
   const snap = useMotionValue(_inititalSnap)
+  const stopOnInteraction = useMotionValue(_inititalSnap)
 
   // Monitor the visbility of all elements and store them for later use.
   const items = useMotionValue<ItemState[]>([])
@@ -104,42 +105,55 @@ export function ScrollerProvider(props: ScrollerProviderProps) {
     [stop],
   )
 
-  const disableSnap = useCallback(() => {
-    if (snap.get() === false) stop()
-    if (scrollerRef.current) scrollerRef.current.style.scrollSnapType = 'none'
+  const disableSnap = useCallback(
+    (stopAnimationOnScroll = true) => {
+      stopOnInteraction.set(stopAnimationOnScroll)
+      if (snap.get() === false) stop()
+      if (scrollerRef.current) scrollerRef.current.style.scrollSnapType = 'none'
 
-    scroll.animating.set(true)
-    snap.set(false)
-  }, [snap, stop, scroll.animating])
+      scroll.animating.set(true)
+      snap.set(false)
+    },
+    [stopOnInteraction, snap, stop, scroll.animating],
+  )
 
   const enableSnap = useCallback(() => {
     if (snap.get() === true) return
-    if (scrollerRef.current) scrollerRef.current.style.scrollSnapType = ''
-    snap.set(true)
 
-    /**
-     * There is a bug in Firefox where the actual max scrollLeft isn't the same as the max measured
-     * bounds of the elements. If we do not exactly set the correct scrollLeft the scrollLeft is
-     * reset to 0 on firefox (instead of chrome/safari where it will snap to the nearest valid
-     * position).
-     *
-     * This can be checked by opening a LayoutOverlay.
-     *
-     * So we're setting a 'too big' scroll position by an arbitrary amount.
-     *
-     * To check if it works in a more recent version of FireFox:
-     *
-     * - Move `scroll.animating.set(false)` outside the requestAnimationFrame
-     * - Remove `scrollerRef.current.scrollLeft = prev + 10`
-     */
-    const prev = scroll.x.get()
-    requestAnimationFrame(() => {
-      if (scrollerRef.current && Math.round(scrollerRef.current.scrollLeft) !== prev)
-        scrollerRef.current.scrollLeft = prev + 10
+    stop()
 
-      scroll.animating.set(false)
-    })
-  }, [snap, scroll])
+    const scroller = scrollerRef.current
+    if (scroller) scroller.style.scrollSnapType = ''
+
+    snap.set(true)
+    scroll.animating.set(false)
+    // Fix for iOS Safari 14 where the scrollPosition would be reset to 0.
+    if (scroller) {
+      const { scrollLeft, scrollTop } = scroller
+      requestAnimationFrame(() => {
+        // We're forcing a layout calculation, else Safari 14 will still close.
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
+        const forceLayout = scroller.scrollTop
+        requestAnimationFrame(() => {
+          if (scroller.scrollTop === 0 && scrollTop !== 0) scroller.scrollTop = scrollTop
+          if (scroller.scrollLeft === 0 && scrollLeft !== 0) scroller.scrollLeft = scrollLeft
+        })
+      })
+    }
+  }, [snap, scroll.animating, stop])
+
+  /**
+   * If the scroller is animating and the user now uses their scrollwheel, enable the snapping
+   * behavior.
+   *
+   * If the scroller doesn't have snap enabled and isPanning===false, enable snap
+   */
+  useDomEvent(scrollerRef as React.RefObject<EventTarget>, 'wheel', () => {
+    if (stopOnInteraction.get()) enableSnap()
+  })
+  useDomEvent(scrollerRef as React.RefObject<EventTarget>, 'touchmove', () => {
+    if (stopOnInteraction.get()) stop()
+  })
 
   useObserveItems(scrollerRef, items)
 

package/hooks/useScrollTo.ts

@@ -4,6 +4,10 @@ import { useCallback, useContext } from 'react'
 import { distanceAnimationDuration } from '../utils/distanceAnimationDuration'
 import { useScrollerContext } from './useScrollerContext'
 
+type Options = {
+  stopAnimationOnScroll?: boolean
+}
+
 export function useScrollTo() {
   const { scrollerRef, register, disableSnap, enableSnap, scroll, getScrollSnapPositions } =
     useScrollerContext()
@@ -11,8 +15,13 @@ export function useScrollTo() {
   const duration = (useContext(MotionConfigContext).transition as Tween | undefined)?.duration ?? 0
 
   const scrollTo = useCallback(
-    async (incoming: Point | [number, number], retrigger = 0) => {
+    async (
+      incoming: Point | [number, number],
+      options: Options = { stopAnimationOnScroll: true },
+      __retrigger = 0,
+    ) => {
       const ref = scrollerRef.current
+      const { stopAnimationOnScroll } = options
       if (!ref) return
 
       let to: Point
@@ -24,20 +33,20 @@ export function useScrollTo() {
         to = incoming
       }
 
-      if (process.env.NODE_ENV === 'development' && scroll.animating.get() && retrigger === 0) {
+      if (process.env.NODE_ENV === 'development' && scroll.animating.get() && __retrigger === 0) {
         console.warn(
           `scrollTo triggered while another animation is in progress. This cancels the current animation and creates a new one.`,
         )
       }
 
-      if (process.env.NODE_ENV === 'development' && retrigger > 5) {
+      if (process.env.NODE_ENV === 'development' && __retrigger > 5) {
         console.error(
           `scrollTo triggered more than 5 times, is the element resizing constantly? Bailing out.`,
         )
         return
       }
 
-      if (process.env.NODE_ENV === 'development' && retrigger > 0) {
+      if (process.env.NODE_ENV === 'development' && __retrigger > 0) {
         console.warn(
           `scrollTo re-animating to because the final location changed during animation.`,
         )
@@ -47,7 +56,8 @@ export function useScrollTo() {
 
       const xDone = new Promise<void>((onComplete) => {
         if (ref.scrollLeft !== to.x) {
-          disableSnap()
+          disableSnap(stopAnimationOnScroll)
+          if (!stopAnimationOnScroll) ref.style.overflow = 'hidden'
 
           stop.push(
             animate({
@@ -68,7 +78,9 @@ export function useScrollTo() {
 
       const yDone = new Promise<void>((onComplete) => {
         if (ref.scrollTop !== to.y) {
-          disableSnap()
+          disableSnap(stopAnimationOnScroll)
+          if (!stopAnimationOnScroll) ref.style.overflow = 'hidden'
+
           stop.push(
             animate({
               from: ref.scrollTop,
@@ -92,10 +104,12 @@ export function useScrollTo() {
       register({ stop: () => stop.forEach((s) => s.stop()) })
       await Promise.all([xDone, yDone])
 
+      if (!stopAnimationOnScroll) ref.style.removeProperty('overflow')
+
       if (Array.isArray(incoming)) {
         const checkPositions = getScrollSnapPositions()
         if (checkPositions.x[incoming[0]] !== to.x || checkPositions.y[incoming[1]] !== to.y)
-          await scrollTo(incoming, retrigger + 1)
+          await scrollTo(incoming, options, __retrigger + 1)
       }
       enableSnap()
     },

package/hooks/useScroller.ts

@@ -1,4 +1,5 @@
 import { useConstant, useMotionValueValue } from '@graphcommerce/framer-utils'
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { extendableComponent } from '@graphcommerce/next-ui/Styles'
 import { SxProps, Theme } from '@mui/material'
 import {
@@ -7,10 +8,9 @@ import {
   MotionValue,
   PanHandlers,
   PanInfo,
-  useDomEvent,
   useTransform,
 } from 'framer-motion'
-import React, { ReactHTML, useEffect, useState } from 'react'
+import React, { MouseEventHandler, ReactHTML, useEffect, useState } from 'react'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
 import { scrollSnapTypeDirection, SnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
@@ -47,7 +47,7 @@ export function useScroller<
 >(props: ScrollableProps<TagName>, forwardedRef: React.ForwardedRef<E>) {
   const { hideScrollbar = false, children, grid = false, ...divProps } = props
 
-  const { scrollSnap, scrollerRef, enableSnap, disableSnap, snap, registerChildren, scroll } =
+  const { scrollSnap, scrollerRef, disableSnap, snap, registerChildren, scroll } =
     useScrollerContext()
 
   useEffect(() => {
@@ -68,19 +68,6 @@ export function useScroller<
 
   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 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()
-  })
-
   const scrollStart = useConstant(() => ({ x: motionValue(0), y: motionValue(0) }))
   const onPanStart: PanHandlers['onPanStart'] = (event) => {
     // If we're not dealing with the mouse we don't need to do anything
@@ -102,6 +89,14 @@ export function useScroller<
     setPanning(true)
   }
 
+  const onMouseDown: MouseEventHandler<HTMLDivElement> = (event) => {
+    if (event.target instanceof Element) {
+      if (event.target.tagName === 'INPUT' || event.target.tagName === 'TEXTAREA') return
+      if (event.target.querySelector(':scope > input, :scope > textarea')) return
+    }
+    event.preventDefault()
+  }
+
   const onPan: PanHandlers['onPan'] = (event, info: PanInfo) => {
     if (!scrollerRef.current) return
 
@@ -289,6 +284,7 @@ export function useScroller<
     onPanStart,
     onPan,
     onPanEnd,
+    onMouseDown,
     children,
     className: `${classes.root} ${props.className}`,
     sx,

package/hooks/useVelocitySnapTo.ts

@@ -1,7 +1,7 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { useMatchMedia } from '@graphcommerce/next-ui/hooks/useMatchMedia'
 import { PanInfo } from 'framer-motion'
 import { inertia, InertiaOptions } from 'popmotion'
-import { ScrollerContext } from '../types'
 import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 

package/package.json

@@ -2,7 +2,7 @@
   "name": "@graphcommerce/framer-scroller",
   "homepage": "https://www.graphcommerce.org/",
   "repository": "github:graphcommerce-org/graphcommerce",
-  "version": "7.0.0-canary.21",
+  "version": "7.0.0",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
@@ -16,18 +16,18 @@
   },
   "dependencies": {
     "popmotion": "11.0.5",
-    "@graphcommerce/framer-utils": "7.0.0-canary.21",
-    "@graphcommerce/image": "7.0.0-canary.21"
+    "@graphcommerce/framer-utils": "7.0.0",
+    "@graphcommerce/image": "7.0.0"
   },
   "devDependencies": {
-    "@graphcommerce/eslint-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/prettier-config-pwa": "7.0.0-canary.21",
-    "@graphcommerce/typescript-config-pwa": "7.0.0-canary.21"
+    "@graphcommerce/eslint-config-pwa": "7.0.0",
+    "@graphcommerce/prettier-config-pwa": "7.0.0",
+    "@graphcommerce/typescript-config-pwa": "7.0.0"
   },
   "peerDependencies": {
     "@mui/material": "^5.10.16",
-    "@lingui/react": "^3.17.1",
-    "@lingui/core": "^3.17.1",
+    "@lingui/react": "^4.2.1",
+    "@lingui/core": "^4.2.1",
     "framer-motion": "^10.0.0",
     "next": "^13.2.0",
     "react": "^18.2.0",

package/types.ts

@@ -32,7 +32,7 @@ export type ScrollerContext = {
   /** @private */
   enableSnap: () => void
   /** @private */
-  disableSnap: () => void
+  disableSnap: (stopAnimationOnScroll?: boolean) => void
   /** @private */
   register: (controls: PlaybackControls) => void
   /** @private */