@graphcommerce/framer-scroller 1.2.11 → 2.0.1

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 +122 -152
  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 +14 -18
  11. package/utils/scrollSnapTypeDirection.ts +1 -1
package/CHANGELOG.md CHANGED
@@ -1,271 +1,241 @@
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.
3
+ ## 2.0.1
5
4
 
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)
7
-
8
-
9
- ### Bug Fixes
5
+ ### Patch Changes
10
6
 
11
- * make sure the useVelocitySnapTo resolves completely ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
7
+ - [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
8
+ Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files,
9
+ so that the packages link to back to the website and repository
10
+ - Updated dependencies
11
+ [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
12
+ - @graphcommerce/framer-utils@3.0.1
13
+ - @graphcommerce/image@3.0.1
14
+ - @graphcommerce/next-ui@4.0.1
12
15
 
16
+ ## 2.0.0
13
17
 
14
- ### Features
15
-
16
- * **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
18
+ ### Major Changes
17
19
 
20
+ - [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
21
+ [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
22
+ Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
18
23
 
24
+ ### Patch Changes
19
25
 
26
+ - Updated dependencies
27
+ [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
28
+ - @graphcommerce/framer-utils@3.0.0
29
+ - @graphcommerce/image@3.0.0
30
+ - @graphcommerce/next-ui@4.0.0
20
31
 
32
+ All notable changes to this project will be documented in this file. See
33
+ [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
21
34
 
22
- ## [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
+ # [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)
24
36
 
25
37
  ### Bug Fixes
26
38
 
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
-
39
+ - make sure the useVelocitySnapTo resolves completely
40
+ ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
31
41
 
42
+ ### Features
32
43
 
33
- ## [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)
44
+ - **framer-next-pages:** reduce rerenders when navigating to a new page
45
+ ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
34
46
 
47
+ ## [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)
35
48
 
36
49
  ### Bug Fixes
37
50
 
38
- * **framer-scroller:** make sure the first gallery dot is selected initially ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
39
-
51
+ - **framer-next-pages:** closing is janky, caused by setting pointer-events to none, trying without
52
+ resetting the pointerevents
53
+ ([9247fa3](https://github.com/ho-nl/m2-pwa/commit/9247fa312926416802abd68ea04b1e6b52531f2c))
40
54
 
55
+ ## [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)
41
56
 
57
+ ### Bug Fixes
42
58
 
59
+ - **framer-scroller:** make sure the first gallery dot is selected initially
60
+ ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
43
61
 
44
62
  ## [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
63
 
46
-
47
64
  ### Bug Fixes
48
65
 
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
-
66
+ - **framer-scroller:** height of the gallery item isn't high enough
67
+ ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
68
+ - **framer-scroller:** make sure the actual image will scale instead of the container
69
+ ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
70
+ - **framer-scroller:** would throw ssr warning
71
+ ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
56
72
 
57
73
  ## [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
74
 
59
-
60
75
  ### Bug Fixes
61
76
 
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
-
77
+ - **framer-scroller:** gallery didn't align images in the center
78
+ ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
79
+ - **framer-scroller:** offaxis scroll was allowed on safari
80
+ ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
68
81
 
69
82
  ## [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
83
 
71
-
72
84
  ### Bug Fixes
73
85
 
74
- * **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
75
-
76
-
77
-
78
-
86
+ - **framer-scroller:** apply will change only when animating
87
+ ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
79
88
 
80
89
  ## [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
90
 
82
-
83
91
  ### Bug Fixes
84
92
 
85
- * **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
86
-
87
-
88
-
89
-
93
+ - **framer-scroller:** remove jank from scroller when opening
94
+ ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
90
95
 
91
96
  ## [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
97
 
93
-
94
98
  ### Bug Fixes
95
99
 
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
-
100
+ - **framer-scroller:** make sure we're not throwing only warning when there are no children
101
+ ([001c7d9](https://github.com/ho-nl/m2-pwa/commit/001c7d9a00e447d44134c00bd77505e52cf0f9d4))
101
102
 
102
103
  ## [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
104
 
104
-
105
105
  ### Bug Fixes
106
106
 
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
-
107
+ - scroller should not snap to off-axis while dragging and direction isn't set to both
108
+ ([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
112
109
 
113
110
  ## [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
111
 
115
-
116
112
  ### Bug Fixes
117
113
 
118
- * Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
119
-
120
-
121
-
122
-
114
+ - Accessibility, SEO
115
+ ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
123
116
 
124
117
  ## [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
118
 
126
-
127
119
  ### Bug Fixes
128
120
 
129
- * height of scroller isn't correct ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
130
-
131
-
132
-
133
-
121
+ - height of scroller isn't correct
122
+ ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
134
123
 
135
124
  # [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
125
 
137
-
138
126
  ### Bug Fixes
139
127
 
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
-
128
+ - **framer-scroller:** do not scroll in the direction that is not being scrolled when dragging and
129
+ thus delaying the reset to snap
130
+ ([3198eed](https://github.com/ho-nl/m2-pwa/commit/3198eed7977039f712784ee6c17031d7efb20c25))
131
+ - **framer-scroller:** recursively find snapPoints for deeply nested children
132
+ ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
133
+ - **framer-scroller:** set the scrollTop when switching snap
134
+ ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
135
+ - make sure the overlay becomes visible, even if the overlay is scrolled
136
+ ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
137
+ - make sure the overlays are rendered correctly on mobile
138
+ ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
139
+ - make the headerHeight properly configurable
140
+ ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
147
141
 
148
142
  ### Features
149
143
 
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
-
144
+ - **framer-scroller-sheet:** created package replacing the framer-sheet package
145
+ ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
146
+ - **framer-scroller:** find the direction of the scroller and set proper values
147
+ ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
148
+ - **framer-scroller:** get the scrollSnapAlign from the element instead of the body
149
+ ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
150
+ - **framer-scroller:** provide promise with scrollTo
151
+ ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
152
+ - **framer-scroller:** split the grid functionality from the scroller
153
+ ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
159
154
 
160
155
  ## [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
156
 
162
-
163
157
  ### Bug Fixes
164
158
 
165
- * various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
166
-
167
-
168
-
169
-
159
+ - various accessibility improvements
160
+ ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
170
161
 
171
162
  ## [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
163
 
173
-
174
164
  ### Bug Fixes
175
165
 
176
- * spacing of title on category landing on mobile ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
177
-
178
-
179
-
180
-
166
+ - spacing of title on category landing on mobile
167
+ ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
181
168
 
182
169
  # [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
170
 
184
-
185
171
  ### Features
186
172
 
187
- * **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
188
-
189
-
190
-
191
-
173
+ - **nextjs:** upgraded to nextjs 12
174
+ ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
192
175
 
193
176
  # [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
177
 
195
-
196
178
  ### Features
197
179
 
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
-
180
+ - **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
181
+ ([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
203
182
 
204
183
  ## [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
184
 
206
-
207
185
  ### Bug Fixes
208
186
 
209
- * **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
210
-
211
-
212
-
213
-
187
+ - **framer-scroller:** dots should have a background
188
+ ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
214
189
 
215
190
  ## [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
191
 
217
-
218
192
  ### Bug Fixes
219
193
 
220
- * **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
221
-
222
-
223
-
224
-
194
+ - **framer-scroller:** pan snap does not work on mobile
195
+ ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
225
196
 
226
197
  ## [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
198
 
228
-
229
199
  ### Bug Fixes
230
200
 
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
-
201
+ - ignore example directories when publishing
202
+ ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
203
+ - versions
204
+ ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
237
205
 
238
206
  ## [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
207
 
240
208
  **Note:** Version bump only for package @graphcommerce/framer-scroller
241
209
 
242
-
243
-
244
-
245
-
246
210
  # 0.2.0 (2021-09-27)
247
211
 
248
-
249
212
  ### Bug Fixes
250
213
 
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
-
214
+ - **framer-scroller:** center the prev/next buttons on the gallery
215
+ ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
216
+ - **framer-scroller:** check if the ref exists instead of throwing an exception
217
+ ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
218
+ - **framer-slider:** prev/next buttons don't always show up correctly
219
+ ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
220
+ - make sure we can actually observe items
221
+ ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
256
222
 
257
223
  ### Features
258
224
 
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
-
225
+ - **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
226
+ resizes
227
+ ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
228
+ - **framer-scroller:** implemented the scroller on all pages
229
+ ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
230
+ - **framer-scroller:** option to hide scrollbar
231
+ ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
232
+ - **framer-scroller:** package to implement scroll-snap handling with JS
233
+ ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
234
+ - **framer-scroller:** pagination dots
235
+ ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
236
+ - renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
237
+ [@reachdigital](https://github.com/reachdigital)
238
+ ([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
269
239
 
270
240
  # Change Log
271
241
 
@@ -292,8 +262,8 @@ All notable changes to this project will be documented in this file. See
292
262
 
293
263
  ### Features
294
264
 
295
- - **framer-scroller:** created an MotionImageAspect component to properly center
296
- and handle scorller resizes
265
+ - **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
266
+ resizes
297
267
  ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
298
268
  - **framer-scroller:** implemented the scroller on all pages
299
269
  ([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,13 @@
1
1
  {
2
2
  "name": "@graphcommerce/framer-scroller",
3
- "version": "1.2.11",
3
+ "homepage": "https://www.graphcommerce.org/",
4
+ "repository": "github:graphcommerce-org/graphcommerce",
5
+ "version": "2.0.1",
4
6
  "sideEffects": false,
5
7
  "scripts": {
6
8
  "dev": "tsc -W"
7
9
  },
8
10
  "prettier": "@graphcommerce/prettier-config-pwa",
9
- "browserslist": [
10
- "extends @graphcommerce/browserslist-config-pwa"
11
- ],
12
11
  "eslintConfig": {
13
12
  "extends": "@graphcommerce/eslint-config-pwa",
14
13
  "parserOptions": {
@@ -16,25 +15,22 @@
16
15
  }
17
16
  },
18
17
  "dependencies": {
19
- "@graphcommerce/framer-utils": "^2.103.21",
20
- "@graphcommerce/image": "^2.105.13",
21
- "@graphcommerce/next-ui": "^3.25.2",
22
- "@material-ui/core": "^4.12.3",
18
+ "@graphcommerce/framer-utils": "^3.0.1",
19
+ "@graphcommerce/image": "^3.0.1",
20
+ "@graphcommerce/next-ui": "^4.0.1",
21
+ "@mui/material": "^5.4.1",
23
22
  "popmotion": "11.0.3"
24
23
  },
25
24
  "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"
25
+ "@graphcommerce/eslint-config-pwa": "^4.0.1",
26
+ "@graphcommerce/prettier-config-pwa": "^4.0.1",
27
+ "@graphcommerce/typescript-config-pwa": "^4.0.1",
28
+ "@playwright/test": "^1.18.1"
31
29
  },
32
30
  "peerDependencies": {
33
- "clsx": "^1.1.1",
34
- "framer-motion": "^5.4.5",
31
+ "framer-motion": "^6.2.4",
35
32
  "react": "^17.0.2",
36
33
  "react-dom": "^17.0.2",
37
- "type-fest": "^2.8.0"
38
- },
39
- "gitHead": "110ddb032ee3ce6e363b9f5f7d21af71fb51b527"
34
+ "type-fest": "^2.11.2"
35
+ }
40
36
  }
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')