@graphcommerce/framer-scroller 1.2.10 → 2.0.0

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 (11) hide show
  1. package/CHANGELOG.md +110 -153
  2. package/components/MotionImageAspect.tsx +53 -59
  3. package/components/Scroller.tsx +11 -4
  4. package/components/ScrollerButton.tsx +19 -33
  5. package/components/ScrollerDots.tsx +43 -37
  6. package/components/ScrollerPageCounter.tsx +9 -18
  7. package/hooks/useScroller.ts +170 -126
  8. package/hooks/useVelocitySnapTo.ts +2 -2
  9. package/index.ts +1 -1
  10. package/package.json +12 -18
  11. package/utils/scrollSnapTypeDirection.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -1,271 +1,228 @@
1
1
  # Change Log
2
2
 
3
- All notable changes to this project will be documented in this file.
4
- See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
-
6
- # [1.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.25...@graphcommerce/framer-scroller@1.2.0) (2022-01-03)
3
+ ## 2.0.0
7
4
 
5
+ ### Major Changes
8
6
 
9
- ### Bug Fixes
7
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
8
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
9
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
10
10
 
11
- * make sure the useVelocitySnapTo resolves completely ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
11
+ ### Patch Changes
12
12
 
13
+ - Updated dependencies
14
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
15
+ - @graphcommerce/framer-utils@3.0.0
16
+ - @graphcommerce/image@3.0.0
17
+ - @graphcommerce/next-ui@4.0.0
13
18
 
14
- ### Features
19
+ All notable changes to this project will be documented in this file. See
20
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
15
21
 
16
- * **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
22
+ # [1.2.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.25...@graphcommerce/framer-scroller@1.2.0) (2022-01-03)
17
23
 
24
+ ### Bug Fixes
18
25
 
26
+ - make sure the useVelocitySnapTo resolves completely
27
+ ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
19
28
 
29
+ ### Features
20
30
 
31
+ - **framer-next-pages:** reduce rerenders when navigating to a new page
32
+ ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
21
33
 
22
34
  ## [1.1.24](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.23...@graphcommerce/framer-scroller@1.1.24) (2021-12-23)
23
35
 
24
-
25
36
  ### Bug Fixes
26
37
 
27
- * **framer-next-pages:** closing is janky, caused by setting pointer-events to none, trying without resetting the pointerevents ([9247fa3](https://github.com/ho-nl/m2-pwa/commit/9247fa312926416802abd68ea04b1e6b52531f2c))
28
-
29
-
30
-
31
-
38
+ - **framer-next-pages:** closing is janky, caused by setting pointer-events to none, trying without
39
+ resetting the pointerevents
40
+ ([9247fa3](https://github.com/ho-nl/m2-pwa/commit/9247fa312926416802abd68ea04b1e6b52531f2c))
32
41
 
33
42
  ## [1.1.22](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.21...@graphcommerce/framer-scroller@1.1.22) (2021-12-22)
34
43
 
35
-
36
44
  ### Bug Fixes
37
45
 
38
- * **framer-scroller:** make sure the first gallery dot is selected initially ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
39
-
40
-
41
-
42
-
46
+ - **framer-scroller:** make sure the first gallery dot is selected initially
47
+ ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
43
48
 
44
49
  ## [1.1.21](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.20...@graphcommerce/framer-scroller@1.1.21) (2021-12-22)
45
50
 
46
-
47
51
  ### Bug Fixes
48
52
 
49
- * **framer-scroller:** height of the gallery item isn't high enough ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
50
- * **framer-scroller:** make sure the actual image will scale instead of the container ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
51
- * **framer-scroller:** would throw ssr warning ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
52
-
53
-
54
-
55
-
53
+ - **framer-scroller:** height of the gallery item isn't high enough
54
+ ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
55
+ - **framer-scroller:** make sure the actual image will scale instead of the container
56
+ ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
57
+ - **framer-scroller:** would throw ssr warning
58
+ ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
56
59
 
57
60
  ## [1.1.20](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.19...@graphcommerce/framer-scroller@1.1.20) (2021-12-22)
58
61
 
59
-
60
62
  ### Bug Fixes
61
63
 
62
- * **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
63
- * **framer-scroller:** offaxis scroll was allowed on safari ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
64
-
65
-
66
-
67
-
64
+ - **framer-scroller:** gallery didn't align images in the center
65
+ ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
66
+ - **framer-scroller:** offaxis scroll was allowed on safari
67
+ ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
68
68
 
69
69
  ## [1.1.17](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.16...@graphcommerce/framer-scroller@1.1.17) (2021-12-21)
70
70
 
71
-
72
71
  ### Bug Fixes
73
72
 
74
- * **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
75
-
76
-
77
-
78
-
73
+ - **framer-scroller:** apply will change only when animating
74
+ ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
79
75
 
80
76
  ## [1.1.14](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@1.1.13...@graphcommerce/framer-scroller@1.1.14) (2021-12-20)
81
77
 
82
-
83
78
  ### Bug Fixes
84
79
 
85
- * **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
86
-
87
-
88
-
89
-
80
+ - **framer-scroller:** remove jank from scroller when opening
81
+ ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
90
82
 
91
83
  ## [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)
92
84
 
93
-
94
85
  ### Bug Fixes
95
86
 
96
- * **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))
97
-
98
-
99
-
100
-
87
+ - **framer-scroller:** make sure we're not throwing only warning when there are no children
88
+ ([001c7d9](https://github.com/ho-nl/m2-pwa/commit/001c7d9a00e447d44134c00bd77505e52cf0f9d4))
101
89
 
102
90
  ## [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)
103
91
 
104
-
105
92
  ### Bug Fixes
106
93
 
107
- * 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))
108
-
109
-
110
-
111
-
94
+ - scroller should not snap to off-axis while dragging and direction isn't set to both
95
+ ([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
112
96
 
113
97
  ## [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)
114
98
 
115
-
116
99
  ### Bug Fixes
117
100
 
118
- * Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
119
-
120
-
121
-
122
-
101
+ - Accessibility, SEO
102
+ ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
123
103
 
124
104
  ## [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)
125
105
 
126
-
127
106
  ### Bug Fixes
128
107
 
129
- * height of scroller isn't correct ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
130
-
131
-
132
-
133
-
108
+ - height of scroller isn't correct
109
+ ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
134
110
 
135
111
  # [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)
136
112
 
137
-
138
113
  ### Bug Fixes
139
114
 
140
- * **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))
141
- * **framer-scroller:** recursively find snapPoints for deeply nested children ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
142
- * **framer-scroller:** set the scrollTop when switching snap ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
143
- * make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
144
- * make sure the overlays are rendered correctly on mobile ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
145
- * make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
146
-
115
+ - **framer-scroller:** do not scroll in the direction that is not being scrolled when dragging and
116
+ thus delaying the reset to snap
117
+ ([3198eed](https://github.com/ho-nl/m2-pwa/commit/3198eed7977039f712784ee6c17031d7efb20c25))
118
+ - **framer-scroller:** recursively find snapPoints for deeply nested children
119
+ ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
120
+ - **framer-scroller:** set the scrollTop when switching snap
121
+ ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
122
+ - make sure the overlay becomes visible, even if the overlay is scrolled
123
+ ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
124
+ - make sure the overlays are rendered correctly on mobile
125
+ ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
126
+ - make the headerHeight properly configurable
127
+ ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
147
128
 
148
129
  ### Features
149
130
 
150
- * **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
151
- * **framer-scroller:** find the direction of the scroller and set proper values ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
152
- * **framer-scroller:** get the scrollSnapAlign from the element instead of the body ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
153
- * **framer-scroller:** provide promise with scrollTo ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
154
- * **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
155
-
156
-
157
-
158
-
131
+ - **framer-scroller-sheet:** created package replacing the framer-sheet package
132
+ ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
133
+ - **framer-scroller:** find the direction of the scroller and set proper values
134
+ ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
135
+ - **framer-scroller:** get the scrollSnapAlign from the element instead of the body
136
+ ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
137
+ - **framer-scroller:** provide promise with scrollTo
138
+ ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
139
+ - **framer-scroller:** split the grid functionality from the scroller
140
+ ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
159
141
 
160
142
  ## [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)
161
143
 
162
-
163
144
  ### Bug Fixes
164
145
 
165
- * various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
166
-
167
-
168
-
169
-
146
+ - various accessibility improvements
147
+ ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
170
148
 
171
149
  ## [0.4.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.4.1...@graphcommerce/framer-scroller@0.4.2) (2021-10-29)
172
150
 
173
-
174
151
  ### Bug Fixes
175
152
 
176
- * spacing of title on category landing on mobile ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
177
-
178
-
179
-
180
-
153
+ - spacing of title on category landing on mobile
154
+ ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
181
155
 
182
156
  # [0.4.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.3.3...@graphcommerce/framer-scroller@0.4.0) (2021-10-27)
183
157
 
184
-
185
158
  ### Features
186
159
 
187
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
188
-
189
-
190
-
191
-
160
+ - **nextjs:** upgraded to nextjs 12
161
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
192
162
 
193
163
  # [0.3.0](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.11...@graphcommerce/framer-scroller@0.3.0) (2021-10-19)
194
164
 
195
-
196
165
  ### Features
197
166
 
198
- * **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
199
-
200
-
201
-
202
-
167
+ - **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
168
+ ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
203
169
 
204
170
  ## [0.2.9](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.8...@graphcommerce/framer-scroller@0.2.9) (2021-10-11)
205
171
 
206
-
207
172
  ### Bug Fixes
208
173
 
209
- * **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
210
-
211
-
212
-
213
-
174
+ - **framer-scroller:** dots should have a background
175
+ ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
214
176
 
215
177
  ## [0.2.8](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.7...@graphcommerce/framer-scroller@0.2.8) (2021-10-09)
216
178
 
217
-
218
179
  ### Bug Fixes
219
180
 
220
- * **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
221
-
222
-
223
-
224
-
181
+ - **framer-scroller:** pan snap does not work on mobile
182
+ ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
225
183
 
226
184
  ## [0.2.2](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.0...@graphcommerce/framer-scroller@0.2.2) (2021-09-27)
227
185
 
228
-
229
186
  ### Bug Fixes
230
187
 
231
- * ignore example directories when publishing ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
232
- * versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
233
-
234
-
235
-
236
-
188
+ - ignore example directories when publishing
189
+ ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
190
+ - versions
191
+ ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
237
192
 
238
193
  ## [0.2.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.2.0...@graphcommerce/framer-scroller@0.2.1) (2021-09-27)
239
194
 
240
195
  **Note:** Version bump only for package @graphcommerce/framer-scroller
241
196
 
242
-
243
-
244
-
245
-
246
197
  # 0.2.0 (2021-09-27)
247
198
 
248
-
249
199
  ### Bug Fixes
250
200
 
251
- * **framer-scroller:** center the prev/next buttons on the gallery ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
252
- * **framer-scroller:** check if the ref exists instead of throwing an exception ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
253
- * **framer-slider:** prev/next buttons don't always show up correctly ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
254
- * make sure we can actually observe items ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
255
-
201
+ - **framer-scroller:** center the prev/next buttons on the gallery
202
+ ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
203
+ - **framer-scroller:** check if the ref exists instead of throwing an exception
204
+ ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
205
+ - **framer-slider:** prev/next buttons don't always show up correctly
206
+ ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
207
+ - make sure we can actually observe items
208
+ ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
256
209
 
257
210
  ### Features
258
211
 
259
- * **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller resizes ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
260
- * **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
261
- * **framer-scroller:** option to hide scrollbar ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
262
- * **framer-scroller:** package to implement scroll-snap handling with JS ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
263
- * **framer-scroller:** pagination dots ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
264
- * renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of [@reachdigital](https://github.com/reachdigital) ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
265
-
266
-
267
-
268
-
212
+ - **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
213
+ resizes
214
+ ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
215
+ - **framer-scroller:** implemented the scroller on all pages
216
+ ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
217
+ - **framer-scroller:** option to hide scrollbar
218
+ ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
219
+ - **framer-scroller:** package to implement scroll-snap handling with JS
220
+ ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
221
+ - **framer-scroller:** pagination dots
222
+ ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
223
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
224
+ [@reachdigital](https://github.com/reachdigital)
225
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
269
226
 
270
227
  # Change Log
271
228
 
@@ -292,8 +249,8 @@ All notable changes to this project will be documented in this file. See
292
249
 
293
250
  ### Features
294
251
 
295
- - **framer-scroller:** created an MotionImageAspect component to properly center
296
- and handle scorller resizes
252
+ - **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
253
+ resizes
297
254
  ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
298
255
  - **framer-scroller:** implemented the scroller on all pages
299
256
  ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
package/components/MotionImageAspect.tsx CHANGED
@@ -1,47 +1,7 @@
1
1
  import { Image, ImageProps } from '@graphcommerce/image'
2
- import { makeStyles } from '@material-ui/core'
3
- import clsx from 'clsx'
2
+ import { Box } from '@mui/material'
4
3
  import { m } from 'framer-motion'
5
- import React, { forwardRef } from 'react'
6
-
7
- const useStyles = makeStyles(
8
- {
9
- root: {
10
- position: 'relative',
11
- },
12
- picture: {
13
- display: 'block',
14
- '@supports (aspect-ratio: 1 / 1)': {
15
- maxWidth: '99.6%',
16
- maxHeight: '100%',
17
- width: 'auto',
18
- height: 'auto',
19
-
20
- position: 'absolute',
21
- top: '50%',
22
- left: '50%',
23
- transform: 'translate(-50%, -50%)',
24
-
25
- '&:after': {
26
- display: 'block',
27
- content: '""',
28
- minWidth: '100vw',
29
- },
30
- },
31
- '@supports not (aspect-ratio: 1 / 1)': {
32
- width: '100% !important',
33
- height: '100% !important',
34
- },
35
- },
36
- image: {
37
- display: 'block',
38
- '@supports not (aspect-ratio: 1 / 1)': {
39
- objectFit: 'contain',
40
- },
41
- },
42
- },
43
- { name: 'MotionImageAspect' },
44
- )
4
+ import { forwardRef } from 'react'
45
5
 
46
6
  export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
47
7
 
@@ -53,23 +13,57 @@ export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
53
13
  * problem when the layout is animated. Should be fixed in Safari 15
54
14
  */
55
15
  const MotionImageAspect = m(
56
- forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => {
57
- const classes = useStyles()
58
- return (
59
- <div className={classes.root}>
60
- <Image
61
- {...props}
62
- layout='fill'
63
- ref={ref}
64
- className={clsx(classes.image, props.className)}
65
- pictureProps={{
66
- className: clsx(classes.picture, props.pictureProps?.className),
67
- style: { ...props.style, aspectRatio: `${props.width} / ${props.height}` },
68
- }}
69
- />
70
- </div>
71
- )
72
- }),
16
+ forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => (
17
+ <Box
18
+ className='MotionImageAspect'
19
+ sx={{
20
+ position: 'relative',
21
+
22
+ '& > picture': {
23
+ display: 'block',
24
+ '@supports (aspect-ratio: 1 / 1)': {
25
+ maxWidth: '99.6%',
26
+ maxHeight: '100%',
27
+ width: 'auto',
28
+ height: 'auto',
29
+
30
+ position: 'absolute',
31
+ top: '50%',
32
+ left: '50%',
33
+ transform: 'translate(-50%, -50%)',
34
+
35
+ '&:after': {
36
+ display: 'block',
37
+ content: '""',
38
+ minWidth: '100vw',
39
+ },
40
+ },
41
+ '@supports not (aspect-ratio: 1 / 1)': {
42
+ width: '100% !important',
43
+ height: '100% !important',
44
+ },
45
+ },
46
+ '& > img': {
47
+ display: 'block',
48
+ '@supports not (aspect-ratio: 1 / 1)': {
49
+ objectFit: 'contain',
50
+ },
51
+ },
52
+ }}
53
+ >
54
+ <Image
55
+ {...props}
56
+ layout='fill'
57
+ ref={ref}
58
+ className={props.className}
59
+ pictureProps={{
60
+ ...props.pictureProps,
61
+ className: props.pictureProps?.className,
62
+ style: { ...props.style, aspectRatio: `${props.width} / ${props.height}` },
63
+ }}
64
+ />
65
+ </Box>
66
+ )),
73
67
  )
74
68
 
75
69
  MotionImageAspect.displayName = 'MotionImageAspect'
package/components/Scroller.tsx CHANGED
@@ -1,11 +1,18 @@
1
+ import { styled, SxProps, Theme } from '@mui/material'
1
2
  import { m } from 'framer-motion'
2
3
  import { forwardRef } from 'react'
3
4
  import { ScrollableProps, useScroller } from '../hooks/useScroller'
4
5
 
5
- const Scroller = forwardRef<HTMLDivElement, ScrollableProps>((props, forwardedRef) => {
6
- const scroller = useScroller<'div'>({ grid: true, ...props }, forwardedRef)
7
- return <m.div {...scroller} />
8
- })
6
+ const ScrollerDiv = styled(m.div)({})
7
+
8
+ const Scroller = forwardRef<HTMLDivElement, ScrollableProps & { sx?: SxProps<Theme> }>(
9
+ (props, forwardedRef) => {
10
+ const { sx = [], ...scrollerProps } = props
11
+ const scroller = useScroller<'div'>({ grid: true, ...scrollerProps }, forwardedRef)
12
+
13
+ return <ScrollerDiv {...scroller} sx={[scroller.sx, ...(Array.isArray(sx) ? sx : [sx])]} />
14
+ },
15
+ )
9
16
  Scroller.displayName = 'Scroller'
10
17
 
11
18
  export default Scroller
package/components/ScrollerButton.tsx CHANGED
@@ -1,58 +1,44 @@
1
- import { UseStyles } from '@graphcommerce/next-ui'
2
- import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
3
- import { m, useMotionValue, useSpring } from 'framer-motion'
1
+ import { useElementScroll } from '@graphcommerce/framer-utils'
2
+ import { Fab, FabProps } from '@mui/material'
3
+ import { m, useSpring, useTransform } from 'framer-motion'
4
4
  import React from 'react'
5
5
  import { useScrollTo } from '../hooks/useScrollTo'
6
6
  import { useScrollerContext } from '../hooks/useScrollerContext'
7
- import { useWatchItems } from '../hooks/useWatchItems'
8
7
  import { SnapPositionDirection } from '../types'
9
8
 
10
- const useStyles = makeStyles((theme: Theme) => ({
11
- root: {
12
- [theme.breakpoints.down('xs')]: {
13
- display: 'none',
14
- },
15
- },
16
- }))
17
-
18
9
  export type ScrollerButtonProps = {
19
10
  direction: SnapPositionDirection
20
- } & FabProps &
21
- UseStyles<typeof useStyles>
11
+ } & FabProps
22
12
 
23
13
  const ScrollerFab = m(
24
14
  React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
25
- const { direction, ...buttonProps } = props
26
- const classes = useStyles(buttonProps)
27
-
28
- const end = direction === 'right' || direction === 'down'
15
+ const { direction, sx = [], ...buttonProps } = props
29
16
 
30
- const { getSnapPosition } = useScrollerContext()
17
+ const { getSnapPosition, scrollerRef } = useScrollerContext()
31
18
  const scrollTo = useScrollTo()
32
19
  const handleClick = () => scrollTo(getSnapPosition(direction))
33
20
 
34
- const visibility = useMotionValue(0)
35
-
36
- useWatchItems((_, itemArr) => {
37
- const itemVisbility = end
38
- ? itemArr[itemArr.length - 1].visibility.get()
39
- : itemArr[0].visibility.get()
21
+ const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef, 1)
40
22
 
41
- // If we're half way past the first/last item we show/hide the button
42
- const value = (!end && itemVisbility > 0.5) || (end && itemVisbility > 0.5) ? 0 : 1
43
- if (visibility.get() !== value) visibility.set(value)
44
- })
45
-
46
- const scale = useSpring(visibility)
23
+ const progress = useTransform<number, number>(
24
+ [xProgress, yProgress, xMax, yMax],
25
+ ([x, y, xM, yM]) => {
26
+ if (xM === 0 && yM === 0) return 0
27
+ if (direction === 'right' || direction === 'down') return x * y === 1 ? 0 : 1
28
+ return x * y === 0 ? 0 : 1
29
+ },
30
+ )
31
+ const scale = useSpring(progress)
47
32
 
48
33
  return (
49
- <m.div ref={ref} style={{ scale, opacity: scale }}>
34
+ <m.div ref={ref} style={{ scale, opacity: scale, willChange: 'scale, opacity', zIndex: 1 }}>
50
35
  <Fab
51
36
  type='button'
52
37
  {...buttonProps}
53
38
  onClick={handleClick}
54
- classes={{ ...classes, ...buttonProps.classes }}
55
39
  aria-label={direction}
40
+ size='small'
41
+ sx={[{ display: { xs: 'none', md: 'flex' } }, ...(Array.isArray(sx) ? sx : [sx])]}
56
42
  />
57
43
  </m.div>
58
44
  )
package/components/ScrollerDots.tsx CHANGED
@@ -1,50 +1,45 @@
1
1
  import { useMotionValueValue } from '@graphcommerce/framer-utils'
2
- import { UseStyles } from '@graphcommerce/next-ui'
3
- import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
4
- import clsx from 'clsx'
5
- import { HTMLMotionProps, m } from 'framer-motion'
2
+ import { extendableComponent } from '@graphcommerce/next-ui/Styles'
3
+ import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
4
+ import { m } from 'framer-motion'
6
5
  import React from 'react'
7
6
  import { useScrollTo } from '../hooks/useScrollTo'
8
7
  import { useScrollerContext } from '../hooks/useScrollerContext'
9
8
 
10
- const useStyles = makeStyles(
11
- (theme: Theme) => ({
12
- dots: {
13
- width: 'fit-content',
14
- display: 'grid',
15
- gridAutoFlow: 'column',
16
- padding: `0 6px`,
17
- borderRadius: '99em',
18
- },
19
- dot: {
20
- boxShadow: 'none',
21
- background: 'transparent',
22
- },
23
- circle: {
24
- borderRadius: '99em',
25
- width: 10,
26
- height: 10,
27
- background: theme.palette.text.primary,
28
- },
29
- }),
30
- { name: 'ScrollerDots' },
31
- )
9
+ const MotionBox = styled(m.div)({})
32
10
 
33
11
  export type DotsProps = {
34
12
  fabProps?: Omit<FabProps, 'onClick' | 'children'>
35
- } & HTMLMotionProps<'div'> &
36
- UseStyles<typeof useStyles>
13
+ sx?: SxProps<Theme>
14
+ }
15
+
16
+ const componentName = 'ScrollerDots'
17
+ const { classes } = extendableComponent(componentName, ['root', 'dot', 'circle'] as const)
37
18
 
38
19
  const ScrollerDots = m(
39
20
  React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
40
- const { fabProps, classes: _classes, ...containerProps } = props
41
- const { dots, dot, circle, ...classes } = useStyles(props)
21
+ const { fabProps, sx = [], ...containerProps } = props
22
+
42
23
  const { items, getScrollSnapPositions } = useScrollerContext()
43
24
  const itemsArr = useMotionValueValue(items, (v) => v)
44
25
  const scrollTo = useScrollTo()
45
26
 
46
27
  return (
47
- <m.div {...containerProps} className={clsx(dots, containerProps?.className)} ref={ref}>
28
+ <MotionBox
29
+ {...containerProps}
30
+ className={classes.root}
31
+ ref={ref}
32
+ sx={[
33
+ {
34
+ width: 'fit-content',
35
+ display: 'grid',
36
+ gridAutoFlow: 'column',
37
+ padding: `0 6px`,
38
+ borderRadius: '99em',
39
+ },
40
+ ...(Array.isArray(sx) ? sx : [sx]),
41
+ ]}
42
+ >
48
43
  {itemsArr.map((item, idx) => (
49
44
  <Fab
50
45
  // eslint-disable-next-line react/no-array-index-key
@@ -57,18 +52,29 @@ const ScrollerDots = m(
57
52
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
58
53
  scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
59
54
  }}
60
- className={clsx(dot, props.className)}
61
- classes={classes}
55
+ className={classes.dot}
62
56
  aria-label={`img-${idx}`}
57
+ sx={{
58
+ boxShadow: 'none',
59
+ background: 'transparent',
60
+ }}
63
61
  >
64
- <m.div className={circle} style={{ opacity: item.opacity }} />
62
+ <MotionBox
63
+ className={classes.circle}
64
+ sx={(theme) => ({
65
+ borderRadius: '99em',
66
+ width: 10,
67
+ height: 10,
68
+ background: theme.palette.text.primary,
69
+ })}
70
+ style={{ opacity: item.opacity }}
71
+ />
65
72
  </Fab>
66
73
  ))}
67
- </m.div>
74
+ </MotionBox>
68
75
  )
69
76
  }),
70
77
  )
71
-
72
- ScrollerDots.displayName = 'ScrollerDots'
78
+ ScrollerDots.displayName = componentName
73
79
 
74
80
  export default ScrollerDots
package/components/ScrollerPageCounter.tsx CHANGED
@@ -1,27 +1,18 @@
1
1
  import { useMotionValueValue } from '@graphcommerce/framer-utils'
2
- import { makeStyles, Theme } from '@material-ui/core'
3
- import clsx from 'clsx'
4
- import { m, MotionProps } from 'framer-motion'
2
+ import { styled, SxProps, Theme } from '@mui/material'
3
+ import { m } from 'framer-motion'
5
4
  import React, { useState } from 'react'
6
5
  import { useScrollerContext } from '../hooks/useScrollerContext'
7
6
  import { useWatchItems } from '../hooks/useWatchItems'
8
7
 
9
- const useStyles = makeStyles(
10
- (theme: Theme) => ({
11
- pageCounter: {
12
- ...theme.typography.h4,
13
- },
14
- }),
15
- { name: 'SliderPageCounter' },
16
- )
8
+ const MotionDiv = styled(m.div)({})
17
9
 
18
- export type SliderPageCounterProps = MotionProps &
19
- React.PropsWithoutRef<React.HTMLProps<HTMLDivElement>>
10
+ export type SliderPageCounterProps = {
11
+ sx?: SxProps<Theme>
12
+ }
20
13
 
21
14
  const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterProps>(
22
- (props, ref) => {
23
- const { className, ...divProps } = props
24
- const classes = useStyles(props)
15
+ ({ sx = [] }, ref) => {
25
16
  const { items } = useScrollerContext()
26
17
 
27
18
  const [current, setCurrent] = useState(1)
@@ -37,9 +28,9 @@ const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterPr
37
28
  })
38
29
 
39
30
  return (
40
- <m.div ref={ref} {...divProps} className={clsx(classes.pageCounter, className)}>
31
+ <MotionDiv ref={ref} sx={[{ typography: 'h4' }, ...(Array.isArray(sx) ? sx : [sx])]}>
41
32
  <span>{String(current).padStart(2, '0')}</span> — {String(count).padStart(2, '0')}
42
- </m.div>
33
+ </MotionDiv>
43
34
  )
44
35
  },
45
36
  )
package/hooks/useScroller.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { useConstant, useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
2
- import { UseStyles, classesPicker } from '@graphcommerce/next-ui'
3
- import { makeStyles, Theme } from '@material-ui/core'
2
+ import { extendableComponent } from '@graphcommerce/next-ui/Styles'
3
+ import { SxProps, Theme } from '@mui/material'
4
4
  import {
5
5
  HTMLMotionProps,
6
6
  motionValue,
@@ -11,124 +11,29 @@ import {
11
11
  useTransform,
12
12
  } from 'framer-motion'
13
13
  import React, { ReactHTML, useState } from 'react'
14
- import { ScrollSnapProps } from '../types'
15
14
  import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
16
- import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
15
+ import { scrollSnapTypeDirection, SnapTypeDirection } from '../utils/scrollSnapTypeDirection'
17
16
  import { useScrollerContext } from './useScrollerContext'
18
17
  import { useVelocitySnapTo } from './useVelocitySnapTo'
19
18
 
20
- const useStyles = makeStyles(
21
- (theme: Theme) => ({
22
- root: {
23
- '& *': {
24
- userSelect: 'none',
25
- userDrag: 'none',
26
- },
27
- },
28
- rootSmSnapDirNone: {
29
- [theme.breakpoints.down('sm')]: {
30
- overflow: 'hidden',
31
- overscrollBehavior: 'auto',
32
- },
33
- },
34
- rootMdSnapDirNone: {
35
- [theme.breakpoints.up('md')]: {
36
- overflow: 'hidden',
37
- overscrollBehavior: 'auto',
38
- },
39
- },
40
- rootSmSnapDirBlock: {
41
- [theme.breakpoints.down('sm')]: {
42
- overflowY: 'auto',
43
- overflowX: 'hidden',
44
- overscrollBehaviorBlock: 'contain',
45
- },
46
- },
47
- rootMdSnapDirBlock: {
48
- [theme.breakpoints.up('md')]: {
49
- overflowY: 'auto',
50
- overflowX: 'hidden',
51
- overscrollBehaviorBlock: 'contain',
52
- },
53
- },
54
- rootSmSnapDirInline: {
55
- [theme.breakpoints.down('sm')]: {
56
- overflowX: 'auto',
57
- overflowY: 'hidden',
58
- overscrollBehaviorInline: 'contain',
59
- },
60
- },
61
- rootMdSnapDirInline: {
62
- [theme.breakpoints.up('md')]: {
63
- overflowX: 'auto',
64
- overflowY: 'hidden',
65
- overscrollBehaviorInline: 'contain',
66
- },
67
- },
68
- rootSmSnapDirBoth: {
69
- [theme.breakpoints.down('sm')]: {
70
- overflow: 'auto',
71
- overscrollBehavior: 'contain',
72
- },
73
- },
74
- rootMdSnapDirBoth: {
75
- [theme.breakpoints.up('md')]: {
76
- overflow: 'auto',
77
- overscrollBehavior: 'contain',
78
- },
79
- },
80
-
81
- rootSmGridDirBlock: ({ scrollSnapAlign, scrollSnapStop }) => ({
82
- display: 'grid',
83
- gridAutoFlow: 'row',
84
- gridAutoColumns: `40%`,
85
- '& > *': {
86
- scrollSnapAlign,
87
- scrollSnapStop,
88
- },
89
- }),
90
- rootSmGridDirInline: ({ scrollSnapAlign, scrollSnapStop }) => ({
91
- display: 'grid',
92
- gridAutoFlow: 'column',
93
- gridAutoRows: `40%`,
94
- gridTemplateRows: 'auto',
95
- '& > *': {
96
- scrollSnapAlign,
97
- scrollSnapStop,
98
- },
99
- }),
100
- rootCanGrab: {
101
- cursor: 'grab',
102
- },
103
- rootIsSnap: ({ scrollSnapTypeSm, scrollSnapTypeMd }: ScrollSnapProps) => ({
104
- [theme.breakpoints.down('sm')]: {
105
- scrollSnapType: scrollSnapTypeSm,
106
- },
107
- [theme.breakpoints.up('md')]: {
108
- scrollSnapType: scrollSnapTypeMd,
109
- },
110
- }),
111
- rootNoSnap: {
112
- willChange: 'scroll-position',
113
- },
114
- rootIsPanning: {
115
- cursor: 'grabbing !important',
116
- '& > *': {
117
- pointerEvents: 'none',
118
- },
119
- },
120
- rootHideScrollbar: {
121
- scrollbarWidth: 'none',
122
- '&::-webkit-scrollbar': {
123
- display: 'none',
124
- },
125
- },
126
- }),
127
- { name: 'Scroller' },
128
- )
19
+ export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = HTMLMotionProps<TagName> & {
20
+ hideScrollbar?: boolean
21
+ grid?: boolean
22
+ }
129
23
 
130
- export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = UseStyles<typeof useStyles> &
131
- HTMLMotionProps<TagName> & { hideScrollbar?: boolean; grid?: boolean }
24
+ type OwnerProps = {
25
+ smSnapDir: false | SnapTypeDirection
26
+ smGridDir: false | SnapTypeDirection
27
+ mdSnapDir: false | SnapTypeDirection
28
+ mdGridDir: false | SnapTypeDirection
29
+ isSnap: boolean
30
+ isPanning: boolean
31
+ hideScrollbar: boolean
32
+ canGrab: boolean
33
+ }
34
+ const name = 'Scroller' as const
35
+ const parts = ['root'] as const
36
+ const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
132
37
 
133
38
  /** Make any HTML */
134
39
  export function useScroller<TagName extends keyof ReactHTML = 'div'>(
@@ -154,8 +59,6 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
154
59
 
155
60
  const isSnap = useMotionValueValue(snap, (v) => v)
156
61
 
157
- const classes = useStyles(scrollSnap)
158
-
159
62
  const snapToVelocity = useVelocitySnapTo(scrollerRef)
160
63
 
161
64
  const [isPanning, setPanning] = useState(false)
@@ -213,20 +116,161 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
213
116
  const smSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
214
117
  const mdSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
215
118
 
216
- const smGridDir = grid && smSnapDir
217
- const mdGridDir = grid && mdSnapDir
218
-
219
- const className = classesPicker(classes, {
119
+ const classes = withState({
220
120
  smSnapDir,
221
- smGridDir,
121
+ smGridDir: grid && smSnapDir,
222
122
  mdSnapDir,
223
- mdGridDir,
123
+ mdGridDir: grid && mdSnapDir,
224
124
  isSnap,
225
- noSnap: !isSnap,
226
125
  isPanning,
227
126
  hideScrollbar,
228
127
  canGrab,
229
- })('root', props.className)
128
+ })
230
129
 
231
- return { ...divProps, ref, onPanStart, onPan, onPanEnd, children, ...className }
130
+ const sx: SxProps<Theme> = (theme) => ({
131
+ '& *': {
132
+ userSelect: 'none',
133
+ userDrag: 'none',
134
+ WebkitUserDrag: 'none',
135
+ },
136
+
137
+ // sm Snap Direction
138
+ '&.smSnapDirNone': {
139
+ [theme.breakpoints.down('md')]: {
140
+ overflow: 'hidden',
141
+ overscrollBehavior: 'auto',
142
+ },
143
+ },
144
+ '&.smSnapDirBlock': {
145
+ [theme.breakpoints.down('md')]: {
146
+ overflowY: 'auto',
147
+ overflowX: 'hidden',
148
+ overscrollBehaviorBlock: 'contain',
149
+ },
150
+ },
151
+ '&.smSnapDirInline': {
152
+ [theme.breakpoints.down('md')]: {
153
+ overflowX: 'auto',
154
+ overflowY: 'hidden',
155
+ overscrollBehaviorInline: 'contain',
156
+ },
157
+ },
158
+ '&.smSnapDirBoth': {
159
+ [theme.breakpoints.down('md')]: {
160
+ overflow: 'auto',
161
+ overscrollBehavior: 'contain',
162
+ },
163
+ },
164
+
165
+ // md Snap Direction
166
+ '&.mdSnapDirNone': {
167
+ [theme.breakpoints.up('md')]: {
168
+ overflow: 'hidden',
169
+ overscrollBehavior: 'auto',
170
+ },
171
+ },
172
+ '&.mdSnapDirBlock': {
173
+ [theme.breakpoints.up('md')]: {
174
+ overflowY: 'auto',
175
+ overflowX: 'hidden',
176
+ overscrollBehaviorBlock: 'contain',
177
+ },
178
+ },
179
+ '&.mdSnapDirInline': {
180
+ [theme.breakpoints.up('md')]: {
181
+ overflowX: 'auto',
182
+ overflowY: 'hidden',
183
+ overscrollBehaviorInline: 'contain',
184
+ },
185
+ },
186
+ '&.mdSnapDirBoth': {
187
+ [theme.breakpoints.up('md')]: {
188
+ overflow: 'auto',
189
+ overscrollBehavior: 'contain',
190
+ },
191
+ },
192
+
193
+ '&.smGridDirBlock': {
194
+ [theme.breakpoints.down('md')]: {
195
+ display: 'grid',
196
+ gridAutoFlow: 'row',
197
+ gridAutoColumns: `40%`,
198
+ '& > *': {
199
+ scrollSnapAlign: scrollSnap.scrollSnapAlign,
200
+ scrollSnapStop: scrollSnap.scrollSnapStop,
201
+ },
202
+ },
203
+ },
204
+ '&.smGridDirInline': {
205
+ [theme.breakpoints.down('md')]: {
206
+ display: 'grid',
207
+ gridAutoFlow: 'column',
208
+ gridAutoRows: `40%`,
209
+ gridTemplateRows: 'auto',
210
+ '& > *': {
211
+ scrollSnapAlign: scrollSnap.scrollSnapAlign,
212
+ scrollSnapStop: scrollSnap.scrollSnapStop,
213
+ },
214
+ },
215
+ },
216
+
217
+ '&.mdGridDirBlock': {
218
+ [theme.breakpoints.up('md')]: {
219
+ display: 'grid',
220
+ gridAutoFlow: 'row',
221
+ gridAutoColumns: `40%`,
222
+ '& > *': {
223
+ scrollSnapAlign: scrollSnap.scrollSnapAlign,
224
+ scrollSnapStop: scrollSnap.scrollSnapStop,
225
+ },
226
+ },
227
+ },
228
+ '&.mdGridDirInline': {
229
+ [theme.breakpoints.up('md')]: {
230
+ display: 'grid',
231
+ gridAutoFlow: 'column',
232
+ gridAutoRows: `40%`,
233
+ gridTemplateRows: 'auto',
234
+ '& > *': {
235
+ scrollSnapAlign: scrollSnap.scrollSnapAlign,
236
+ scrollSnapStop: scrollSnap.scrollSnapStop,
237
+ },
238
+ },
239
+ },
240
+ '&.canGrab': { cursor: 'grab' },
241
+ '&.isSnap': {
242
+ [theme.breakpoints.down('md')]: {
243
+ scrollSnapType: scrollSnap.scrollSnapTypeSm,
244
+ },
245
+ [theme.breakpoints.up('md')]: {
246
+ scrollSnapType: scrollSnap.scrollSnapTypeMd,
247
+ },
248
+ },
249
+ '&:not(.isSnap)': {
250
+ willChange: 'scroll-position',
251
+ },
252
+ '&.isPanning': {
253
+ cursor: 'grabbing !important',
254
+ '& > *': {
255
+ pointerEvents: 'none',
256
+ },
257
+ },
258
+ '&.hideScrollbar': {
259
+ scrollbarWidth: 'none',
260
+ '&::-webkit-scrollbar': {
261
+ display: 'none',
262
+ },
263
+ },
264
+ })
265
+
266
+ return {
267
+ ...divProps,
268
+ ref,
269
+ onPanStart,
270
+ onPan,
271
+ onPanEnd,
272
+ children,
273
+ className: `${classes.root} ${props.className}`,
274
+ sx,
275
+ }
232
276
  }
package/hooks/useVelocitySnapTo.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { Theme, useMediaQuery } from '@material-ui/core'
1
+ import { Theme, useMediaQuery } from '@mui/material'
2
2
  import { PanInfo } from 'framer-motion'
3
3
  import { inertia, InertiaOptions } from 'popmotion'
4
4
  import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
@@ -21,7 +21,7 @@ export const useVelocitySnapTo = (
21
21
  ) => {
22
22
  const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap } =
23
23
  useScrollerContext()
24
- const direction = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
24
+ const direction = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
25
25
  ? scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
26
26
  : scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
27
27
 
package/index.ts CHANGED
@@ -18,6 +18,6 @@ export * from './components/ScrollerProvider'
18
18
  export { default as ScrollerProvider } from './components/ScrollerProvider'
19
19
 
20
20
  export * from './hooks/useScrollerContext'
21
- export * from './hooks/useScroller'
21
+ // export * from './hooks/useScroller'
22
22
  export * from './hooks/useScrollTo'
23
23
  export * from './hooks/useWatchItems'
package/package.json CHANGED
@@ -1,14 +1,11 @@
1
1
  {
2
2
  "name": "@graphcommerce/framer-scroller",
3
- "version": "1.2.10",
3
+ "version": "2.0.0",
4
4
  "sideEffects": false,
5
5
  "scripts": {
6
6
  "dev": "tsc -W"
7
7
  },
8
8
  "prettier": "@graphcommerce/prettier-config-pwa",
9
- "browserslist": [
10
- "extends @graphcommerce/browserslist-config-pwa"
11
- ],
12
9
  "eslintConfig": {
13
10
  "extends": "@graphcommerce/eslint-config-pwa",
14
11
  "parserOptions": {
@@ -16,25 +13,22 @@
16
13
  }
17
14
  },
18
15
  "dependencies": {
19
- "@graphcommerce/framer-utils": "^2.103.21",
20
- "@graphcommerce/image": "^2.105.13",
21
- "@graphcommerce/next-ui": "^3.25.1",
22
- "@material-ui/core": "^4.12.3",
16
+ "@graphcommerce/framer-utils": "^3.0.0",
17
+ "@graphcommerce/image": "^3.0.0",
18
+ "@graphcommerce/next-ui": "^4.0.0",
19
+ "@mui/material": "^5.4.1",
23
20
  "popmotion": "11.0.3"
24
21
  },
25
22
  "devDependencies": {
26
- "@graphcommerce/browserslist-config-pwa": "^3.0.3",
27
- "@graphcommerce/eslint-config-pwa": "^3.1.10",
28
- "@graphcommerce/prettier-config-pwa": "^3.0.5",
29
- "@graphcommerce/typescript-config-pwa": "^3.1.2",
30
- "@playwright/test": "^1.17.1"
23
+ "@graphcommerce/eslint-config-pwa": "^4.0.0",
24
+ "@graphcommerce/prettier-config-pwa": "^4.0.0",
25
+ "@graphcommerce/typescript-config-pwa": "^4.0.0",
26
+ "@playwright/test": "^1.18.1"
31
27
  },
32
28
  "peerDependencies": {
33
- "clsx": "^1.1.1",
34
- "framer-motion": "^5.4.5",
29
+ "framer-motion": "^6.2.4",
35
30
  "react": "^17.0.2",
36
31
  "react-dom": "^17.0.2",
37
- "type-fest": "^2.8.0"
38
- },
39
- "gitHead": "4f7fd2440fa20b9ad619b1172bc12deaaf8b2456"
32
+ "type-fest": "^2.11.2"
33
+ }
40
34
  }
package/utils/scrollSnapTypeDirection.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ScrollSnapType } from '../types'
2
2
 
3
- type SnapTypeDirection = 'block' | 'inline' | 'both' | 'inline'
3
+ export type SnapTypeDirection = 'block' | 'inline' | 'both' | 'inline'
4
4
  export function scrollSnapTypeDirection(scrollSnapType: ScrollSnapType): SnapTypeDirection {
5
5
  let snapDir = scrollSnapType.split(' ')[0]
6
6
  snapDir = snapDir.replace('y', 'block')