@graphcommerce/framer-scroller 2.1.0 → 2.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/components/ScrollerDot.tsx +2 -2
  3. package/components/ScrollerDots.tsx +2 -3
  4. package/hooks/useScrollTo.ts +57 -51
  5. package/package.json +7 -7
package/CHANGELOG.md CHANGED
@@ -1,5 +1,34 @@
1
1
  # Change Log
2
2
 
3
+ ## 2.1.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [#1369](https://github.com/graphcommerce-org/graphcommerce/pull/1369) [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9) Thanks [@paales](https://github.com/paales)! - Upgraded dependencies
8
+
9
+ - Updated dependencies [[`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a), [`ae6449502`](https://github.com/graphcommerce-org/graphcommerce/commit/ae64495024a455bbe5188588604368c1542840c9), [`892018809`](https://github.com/graphcommerce-org/graphcommerce/commit/8920188093d0422ec50580e408dc28ac5f93e46a)]:
10
+ - @graphcommerce/next-ui@4.5.0
11
+ - @graphcommerce/framer-utils@3.1.1
12
+ - @graphcommerce/image@3.1.2
13
+
14
+ ## 2.1.2
15
+
16
+ ### Patch Changes
17
+
18
+ - [#1360](https://github.com/graphcommerce-org/graphcommerce/pull/1360) [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c) Thanks [@paales](https://github.com/paales)! - Make sure the useScrollTo return value doesn't change on when rerendered.
19
+
20
+ * [#1353](https://github.com/graphcommerce-org/graphcommerce/pull/1353) [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba) Thanks [@paales](https://github.com/paales)! - Eslint: enable rules that were previously disabled and make fixes
21
+
22
+ * Updated dependencies [[`49a2d6617`](https://github.com/graphcommerce-org/graphcommerce/commit/49a2d661712e1787fba46c6195f7b559189e23d9), [`f67da3cfb`](https://github.com/graphcommerce-org/graphcommerce/commit/f67da3cfbe2dcf5ea23519d088c5aa0074029182), [`218766869`](https://github.com/graphcommerce-org/graphcommerce/commit/218766869f7468c067a590857c942f3819f8add4), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c), [`0e5ee7ba8`](https://github.com/graphcommerce-org/graphcommerce/commit/0e5ee7ba89698e5e711001e846ed182528060cba), [`829b8690b`](https://github.com/graphcommerce-org/graphcommerce/commit/829b8690bc5d0a46e596299e4120e9837a9f179c)]:
23
+ - @graphcommerce/next-ui@4.4.0
24
+ - @graphcommerce/framer-utils@3.1.0
25
+
26
+ ## 2.1.1
27
+
28
+ ### Patch Changes
29
+
30
+ - [#1330](https://github.com/graphcommerce-org/graphcommerce/pull/1330) [`b7ce24fbc`](https://github.com/graphcommerce-org/graphcommerce/commit/b7ce24fbc1fbebf913faf8f5ad0bf1a126cb56d2) Thanks [@paales](https://github.com/paales)! - cyclic dependency issue with next-ui
31
+
3
32
  ## 2.1.0
4
33
 
5
34
  ### Minor Changes
package/components/ScrollerDot.tsx CHANGED
@@ -1,8 +1,8 @@
1
1
  import { useMotionValueValue } from '@graphcommerce/framer-utils'
2
- import { extendableComponent } from '@graphcommerce/next-ui'
2
+ import { extendableComponent } from '@graphcommerce/next-ui/Styles'
3
3
  import { t } from '@lingui/macro'
4
4
  import { Fab, FabProps, styled } from '@mui/material'
5
- import { m, useSpring, useTransform } from 'framer-motion'
5
+ import { m } from 'framer-motion'
6
6
  import { useScrollTo } from '../hooks/useScrollTo'
7
7
  import { useScrollerContext } from '../hooks/useScrollerContext'
8
8
  import { ItemState } from '../types'
package/components/ScrollerDots.tsx CHANGED
@@ -1,9 +1,8 @@
1
1
  import { useMotionValueValue } from '@graphcommerce/framer-utils'
2
2
  import { extendableComponent } from '@graphcommerce/next-ui/Styles'
3
- import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
4
- import { m, useSpring } from 'framer-motion'
3
+ import { FabProps, styled, SxProps, Theme } from '@mui/material'
4
+ import { m } from 'framer-motion'
5
5
  import React from 'react'
6
- import { useScrollTo } from '../hooks/useScrollTo'
7
6
  import { useScrollerContext } from '../hooks/useScrollerContext'
8
7
  import { ScrollerDot } from './ScrollerDot'
9
8
 
package/hooks/useScrollTo.ts CHANGED
@@ -1,65 +1,71 @@
1
1
  import { useElementScroll } from '@graphcommerce/framer-utils'
2
2
  import { Point } from 'framer-motion'
3
3
  import { animate } from 'popmotion'
4
+ import { useCallback } from 'react'
4
5
  import { useScrollerContext } from './useScrollerContext'
5
6
 
6
7
  export function useScrollTo() {
7
8
  const { scrollerRef, register, disableSnap, enableSnap } = useScrollerContext()
8
9
  const scroll = useElementScroll(scrollerRef)
9
10
 
10
- return async (to: Point) => {
11
- const ref = scrollerRef.current
12
- if (!ref) return
11
+ const scrollTo = useCallback(
12
+ async (to: Point) => {
13
+ const ref = scrollerRef.current
14
+ if (!ref) return
13
15
 
14
- // In the future we want to move to browser native scrolling behavior, but since it is too slow we're not moving to that yet.
15
- // if ('scrollBehavior' in document.documentElement.style) {
16
- // scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
17
- // await new Promise((onComplete) => {
18
- // setTimeout(onComplete, 2000)
19
- // })
20
- // return
21
- // }
16
+ // In the future we want to move to browser native scrolling behavior, but since it is too slow we're not moving to that yet.
17
+ // if ('scrollBehavior' in document.documentElement.style) {
18
+ // scrollerRef.current.scrollTo({ left: to.x, top: to.y, behavior: 'smooth' })
19
+ // await new Promise((onComplete) => {
20
+ // setTimeout(onComplete, 2000)
21
+ // })
22
+ // return
23
+ // }
22
24
 
23
- const xDone = new Promise<void>((onComplete) => {
24
- if (ref.scrollLeft !== to.x) {
25
- disableSnap()
26
- register(
27
- animate({
28
- from: ref.scrollLeft,
29
- to: to.x,
30
- velocity: scroll.x.getVelocity(),
31
- onUpdate: (v) => {
32
- ref.scrollLeft = v
33
- },
34
- onComplete,
35
- onStop: onComplete,
36
- duration: 500,
37
- }),
38
- )
39
- } else onComplete()
40
- })
25
+ const xDone = new Promise<void>((onComplete) => {
26
+ if (ref.scrollLeft !== to.x) {
27
+ disableSnap()
28
+ register(
29
+ animate({
30
+ from: ref.scrollLeft,
31
+ to: to.x,
32
+ velocity: scroll.x.getVelocity(),
33
+ onUpdate: (v) => {
34
+ ref.scrollLeft = v
35
+ },
36
+ onComplete,
37
+ onStop: onComplete,
38
+ duration: 500,
39
+ }),
40
+ )
41
+ } else onComplete()
42
+ })
41
43
 
42
- const yDone = new Promise<void>((onComplete) => {
43
- if (ref.scrollTop !== to.y) {
44
- disableSnap()
45
- register(
46
- animate({
47
- from: ref.scrollTop,
48
- to: to.y,
49
- velocity: scroll.y.getVelocity(),
50
- onUpdate: (v) => {
51
- ref.scrollTop = v
52
- },
53
- onComplete,
54
- onStop: onComplete,
55
- duration: 500,
56
- }),
57
- )
58
- } else onComplete()
59
- })
44
+ const yDone = new Promise<void>((onComplete) => {
45
+ if (ref.scrollTop !== to.y) {
46
+ disableSnap()
47
+ register(
48
+ animate({
49
+ from: ref.scrollTop,
50
+ to: to.y,
51
+ velocity: scroll.y.getVelocity(),
52
+ onUpdate: (v) => {
53
+ ref.scrollTop = v
54
+ },
55
+ onComplete,
56
+ onStop: onComplete,
57
+ duration: 500,
58
+ }),
59
+ )
60
+ } else onComplete()
61
+ })
60
62
 
61
- await xDone
62
- await yDone
63
- enableSnap()
64
- }
63
+ await xDone
64
+ await yDone
65
+ enableSnap()
66
+ },
67
+ [disableSnap, enableSnap, register, scroll.x, scroll.y, scrollerRef],
68
+ )
69
+
70
+ return scrollTo
65
71
  }
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@graphcommerce/framer-scroller",
3
3
  "homepage": "https://www.graphcommerce.org/",
4
4
  "repository": "github:graphcommerce-org/graphcommerce",
5
- "version": "2.1.0",
5
+ "version": "2.1.3",
6
6
  "sideEffects": false,
7
7
  "scripts": {
8
8
  "dev": "tsc -W"
@@ -15,15 +15,15 @@
15
15
  }
16
16
  },
17
17
  "dependencies": {
18
- "@graphcommerce/framer-utils": "^3.0.5",
19
- "@graphcommerce/image": "^3.1.1",
20
- "@graphcommerce/next-ui": "^4.3.0"
18
+ "@graphcommerce/framer-utils": "^3.1.1",
19
+ "@graphcommerce/image": "^3.1.2",
20
+ "@graphcommerce/next-ui": "^4.5.0"
21
21
  },
22
22
  "devDependencies": {
23
- "@graphcommerce/eslint-config-pwa": "^4.0.5",
24
- "@graphcommerce/prettier-config-pwa": "^4.0.3",
23
+ "@graphcommerce/eslint-config-pwa": "^4.1.3",
24
+ "@graphcommerce/prettier-config-pwa": "^4.0.5",
25
25
  "@graphcommerce/typescript-config-pwa": "^4.0.2",
26
- "@playwright/test": "^1.19.2"
26
+ "@playwright/test": "^1.20.1"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "@mui/material": "^5.4.1",