@graphcommerce/framer-scroller 2.0.4 → 2.1.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.
- package/CHANGELOG.md +121 -159
- package/components/MotionImageAspect.tsx +1 -3
- package/components/Scroller.tsx +5 -4
- package/components/ScrollerButton.tsx +2 -4
- package/components/ScrollerDot.tsx +58 -0
- package/components/ScrollerDots.tsx +6 -35
- package/components/ScrollerPageCounter.tsx +1 -3
- package/components/ScrollerProvider.tsx +1 -1
- package/hooks/useScrollTo.ts +1 -0
- package/hooks/useScroller.ts +8 -6
- package/index.ts +1 -11
- package/package.json +7 -7
- package/types.ts +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,29 +1,72 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 2.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`1e2a07141`](https://github.com/graphcommerce-org/graphcommerce/commit/1e2a071414154600430e6dcf0513d86ab78e0b28) Thanks [@paales](https://github.com/paales)! - Add a state-class to ScrollerDot when the dot is active to customize the colors of the dots.
|
|
8
|
+
|
|
9
|
+
```tsx
|
|
10
|
+
<ScrollerDots
|
|
11
|
+
layout
|
|
12
|
+
sx={{
|
|
13
|
+
'& .ScrollerDot-circle': {
|
|
14
|
+
bgcolor: 'green',
|
|
15
|
+
},
|
|
16
|
+
'& .ScrollerDot-circle.active': {
|
|
17
|
+
bgcolor: 'hotpink',
|
|
18
|
+
opacity: '1 !important',
|
|
19
|
+
},
|
|
20
|
+
}}
|
|
21
|
+
/>
|
|
22
|
+
```
|
|
23
|
+
|
|
24
|
+
### Patch Changes
|
|
25
|
+
|
|
26
|
+
- [#1322](https://github.com/graphcommerce-org/graphcommerce/pull/1322) [`d91359871`](https://github.com/graphcommerce-org/graphcommerce/commit/d91359871b023a9f0d305b37353c1ee2d0912248) Thanks [@paales](https://github.com/paales)! - useScroller set userSelect/userDrag for all types of scrollers instead of only when it is rendered as a grid
|
|
27
|
+
|
|
28
|
+
- Updated dependencies [[`5266388ea`](https://github.com/graphcommerce-org/graphcommerce/commit/5266388eaffda41592623ef7a3ddbbe03c8e0dad), [`9b35403d9`](https://github.com/graphcommerce-org/graphcommerce/commit/9b35403d9dbb2606ac7cf3bb641a0f9cc3d8a2ba), [`0298a0de1`](https://github.com/graphcommerce-org/graphcommerce/commit/0298a0de1d13e543c4124a6a099297b4e27e2b05), [`815132ea4`](https://github.com/graphcommerce-org/graphcommerce/commit/815132ea43937b4b84b59ec9974ac593cb4eb456), [`3326742a0`](https://github.com/graphcommerce-org/graphcommerce/commit/3326742a0dceb45f0cac4741ca09dc4d4f09ad90), [`7a3799bfc`](https://github.com/graphcommerce-org/graphcommerce/commit/7a3799bfc107f26aa9991a91db5f228e3476f4aa), [`9a77f88ed`](https://github.com/graphcommerce-org/graphcommerce/commit/9a77f88ed26cbecdae9a135c3cb234a5b7ecf4df), [`0eeaad304`](https://github.com/graphcommerce-org/graphcommerce/commit/0eeaad30461b1d5b486438f0287fa76d49429044), [`bc5213547`](https://github.com/graphcommerce-org/graphcommerce/commit/bc52135471479c83d989449dad24798112e898f4), [`3f1912f55`](https://github.com/graphcommerce-org/graphcommerce/commit/3f1912f553318d5888f8af2b841918ef4ae96a84), [`b6c68cda8`](https://github.com/graphcommerce-org/graphcommerce/commit/b6c68cda8836a1d0c78ef351899cec9ec1037385), [`bec88d0d7`](https://github.com/graphcommerce-org/graphcommerce/commit/bec88d0d70b679e15150917df89986ecee5b39a6)]:
|
|
29
|
+
- @graphcommerce/next-ui@4.3.0
|
|
30
|
+
- @graphcommerce/framer-utils@3.0.5
|
|
31
|
+
|
|
32
|
+
## 2.0.6
|
|
33
|
+
|
|
34
|
+
### Patch Changes
|
|
35
|
+
|
|
36
|
+
- [#1307](https://github.com/ho-nl/m2-pwa/pull/1307) [`bd10506d3`](https://github.com/ho-nl/m2-pwa/commit/bd10506d32fdbc91d01dadc29a12ebd1e0943655) Thanks [@paales](https://github.com/paales)! - All default exports are now named exports internally and all `index.tsx` are renamed to the component name.
|
|
37
|
+
|
|
38
|
+
* [#1307](https://github.com/ho-nl/m2-pwa/pull/1307) [`27cb1f2d8`](https://github.com/ho-nl/m2-pwa/commit/27cb1f2d8dbfb8f1b301ce56fb6a2b6c1fc6a5ef) Thanks [@paales](https://github.com/paales)! - upgrade dependencies
|
|
39
|
+
|
|
40
|
+
* Updated dependencies [[`3d63b39f7`](https://github.com/ho-nl/m2-pwa/commit/3d63b39f7e330d1827a32dba782667d7b21adaba), [`bd10506d3`](https://github.com/ho-nl/m2-pwa/commit/bd10506d32fdbc91d01dadc29a12ebd1e0943655), [`27cb1f2d8`](https://github.com/ho-nl/m2-pwa/commit/27cb1f2d8dbfb8f1b301ce56fb6a2b6c1fc6a5ef)]:
|
|
41
|
+
- @graphcommerce/next-ui@4.2.4
|
|
42
|
+
- @graphcommerce/framer-utils@3.0.4
|
|
43
|
+
- @graphcommerce/image@3.1.1
|
|
44
|
+
|
|
45
|
+
## 2.0.5
|
|
46
|
+
|
|
47
|
+
### Patch Changes
|
|
48
|
+
|
|
49
|
+
- [#1294](https://github.com/ho-nl/m2-pwa/pull/1294) [`4e28c8afd`](https://github.com/ho-nl/m2-pwa/commit/4e28c8afd9cead3577dd0eff97b5c44ba4c1c862) Thanks [@paales](https://github.com/paales)! - set the duration of useScrollTo to 500 for the x direction
|
|
50
|
+
|
|
51
|
+
- Updated dependencies [[`19f33e0aa`](https://github.com/ho-nl/m2-pwa/commit/19f33e0aaf4e3121edd444926d08b6459d3ef400), [`aea787542`](https://github.com/ho-nl/m2-pwa/commit/aea787542484a0480a48031fcc4a9a5566c6bfc7)]:
|
|
52
|
+
- @graphcommerce/next-ui@4.2.1
|
|
53
|
+
|
|
3
54
|
## 2.0.4
|
|
4
55
|
|
|
5
56
|
### Patch Changes
|
|
6
57
|
|
|
7
|
-
- [#1285](https://github.com/ho-nl/m2-pwa/pull/1285)
|
|
8
|
-
[`16d77b280`](https://github.com/ho-nl/m2-pwa/commit/16d77b2806e49e376d06bc0d578d38eb724b0c17)
|
|
9
|
-
Thanks [@paales](https://github.com/paales)! - allow scroller button to be overwritten
|
|
58
|
+
- [#1285](https://github.com/ho-nl/m2-pwa/pull/1285) [`16d77b280`](https://github.com/ho-nl/m2-pwa/commit/16d77b2806e49e376d06bc0d578d38eb724b0c17) Thanks [@paales](https://github.com/paales)! - allow scroller button to be overwritten
|
|
10
59
|
|
|
11
|
-
- Updated dependencies
|
|
12
|
-
[[`c85294ba6`](https://github.com/ho-nl/m2-pwa/commit/c85294ba6d742ce78c074559a1e95409b25a5017)]:
|
|
60
|
+
- Updated dependencies [[`c85294ba6`](https://github.com/ho-nl/m2-pwa/commit/c85294ba6d742ce78c074559a1e95409b25a5017)]:
|
|
13
61
|
- @graphcommerce/next-ui@4.1.3
|
|
14
62
|
|
|
15
63
|
## 2.0.3
|
|
16
64
|
|
|
17
65
|
### Patch Changes
|
|
18
66
|
|
|
19
|
-
- [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96)
|
|
20
|
-
Thanks [@paales](https://github.com/paales)! - made packages public
|
|
67
|
+
- [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96) Thanks [@paales](https://github.com/paales)! - made packages public
|
|
21
68
|
|
|
22
|
-
- Updated dependencies
|
|
23
|
-
[[`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96),
|
|
24
|
-
[`81ea406d5`](https://github.com/ho-nl/m2-pwa/commit/81ea406d54d6b5c662c030a7fea444abc4117a20),
|
|
25
|
-
[`3a719c88c`](https://github.com/ho-nl/m2-pwa/commit/3a719c88cad1eab58602de28c41adc0fc4827e1d),
|
|
26
|
-
[`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14)]:
|
|
69
|
+
- Updated dependencies [[`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96), [`81ea406d5`](https://github.com/ho-nl/m2-pwa/commit/81ea406d54d6b5c662c030a7fea444abc4117a20), [`3a719c88c`](https://github.com/ho-nl/m2-pwa/commit/3a719c88cad1eab58602de28c41adc0fc4827e1d), [`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14)]:
|
|
27
70
|
- @graphcommerce/framer-utils@3.0.3
|
|
28
71
|
- @graphcommerce/image@3.1.0
|
|
29
72
|
- @graphcommerce/next-ui@4.1.2
|
|
@@ -32,28 +75,13 @@
|
|
|
32
75
|
|
|
33
76
|
### Patch Changes
|
|
34
77
|
|
|
35
|
-
- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
* [
|
|
42
|
-
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
|
|
43
|
-
Thanks [@paales](https://github.com/paales)! - Upgraded to
|
|
44
|
-
[NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
|
|
45
|
-
implementing
|
|
46
|
-
[On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
|
|
47
|
-
soon.
|
|
48
|
-
|
|
49
|
-
This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
|
|
50
|
-
frontend to be able to revalidate pages manually.
|
|
51
|
-
|
|
52
|
-
* Updated dependencies
|
|
53
|
-
[[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
|
|
54
|
-
[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
|
|
55
|
-
[`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
|
|
56
|
-
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
|
|
78
|
+
- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276) [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2) Thanks [@paales](https://github.com/paales)! - We've moved lots of internal packages from `dependencies` to `peerDependencies`. The result of this is that there will be significantly less duplicate packages in the node_modules folders.
|
|
79
|
+
|
|
80
|
+
* [#1276](https://github.com/ho-nl/m2-pwa/pull/1276) [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d) Thanks [@paales](https://github.com/paales)! - Upgraded to [NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be implementing [On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta) soon.
|
|
81
|
+
|
|
82
|
+
This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the frontend to be able to revalidate pages manually.
|
|
83
|
+
|
|
84
|
+
* Updated dependencies [[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7), [`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2), [`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b), [`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
|
|
57
85
|
- @graphcommerce/next-ui@4.1.1
|
|
58
86
|
- @graphcommerce/framer-utils@3.0.2
|
|
59
87
|
- @graphcommerce/image@3.0.2
|
|
@@ -62,11 +90,8 @@
|
|
|
62
90
|
|
|
63
91
|
### Patch Changes
|
|
64
92
|
|
|
65
|
-
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
66
|
-
|
|
67
|
-
so that the packages link to back to the website and repository
|
|
68
|
-
- Updated dependencies
|
|
69
|
-
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
93
|
+
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514) Thanks [@paales](https://github.com/paales)! - Added homepage and repository package.json files, so that the packages link to back to the website and repository
|
|
94
|
+
- Updated dependencies [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
70
95
|
- @graphcommerce/framer-utils@3.0.1
|
|
71
96
|
- @graphcommerce/image@3.0.1
|
|
72
97
|
- @graphcommerce/next-ui@4.0.1
|
|
@@ -75,191 +100,151 @@
|
|
|
75
100
|
|
|
76
101
|
### Major Changes
|
|
77
102
|
|
|
78
|
-
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
79
|
-
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
80
|
-
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
103
|
+
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258) [`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05) Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
81
104
|
|
|
82
105
|
### Patch Changes
|
|
83
106
|
|
|
84
|
-
- Updated dependencies
|
|
85
|
-
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
107
|
+
- Updated dependencies [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
86
108
|
- @graphcommerce/framer-utils@3.0.0
|
|
87
109
|
- @graphcommerce/image@3.0.0
|
|
88
110
|
- @graphcommerce/next-ui@4.0.0
|
|
89
111
|
|
|
90
|
-
All notable changes to this project will be documented in this file. See
|
|
91
|
-
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
112
|
+
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
92
113
|
|
|
93
114
|
# [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)
|
|
94
115
|
|
|
95
116
|
### Bug Fixes
|
|
96
117
|
|
|
97
|
-
- make sure the useVelocitySnapTo resolves completely
|
|
98
|
-
([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
|
|
118
|
+
- make sure the useVelocitySnapTo resolves completely ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
|
|
99
119
|
|
|
100
120
|
### Features
|
|
101
121
|
|
|
102
|
-
- **framer-next-pages:** reduce rerenders when navigating to a new page
|
|
103
|
-
([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
|
|
122
|
+
- **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
|
|
104
123
|
|
|
105
124
|
## [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)
|
|
106
125
|
|
|
107
126
|
### Bug Fixes
|
|
108
127
|
|
|
109
|
-
- **framer-next-pages:** closing is janky, caused by setting pointer-events to none, trying without
|
|
110
|
-
resetting the pointerevents
|
|
111
|
-
([9247fa3](https://github.com/ho-nl/m2-pwa/commit/9247fa312926416802abd68ea04b1e6b52531f2c))
|
|
128
|
+
- **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))
|
|
112
129
|
|
|
113
130
|
## [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)
|
|
114
131
|
|
|
115
132
|
### Bug Fixes
|
|
116
133
|
|
|
117
|
-
- **framer-scroller:** make sure the first gallery dot is selected initially
|
|
118
|
-
([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
|
|
134
|
+
- **framer-scroller:** make sure the first gallery dot is selected initially ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
|
|
119
135
|
|
|
120
136
|
## [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)
|
|
121
137
|
|
|
122
138
|
### Bug Fixes
|
|
123
139
|
|
|
124
|
-
- **framer-scroller:** height of the gallery item isn't high enough
|
|
125
|
-
|
|
126
|
-
- **framer-scroller:**
|
|
127
|
-
([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
|
|
128
|
-
- **framer-scroller:** would throw ssr warning
|
|
129
|
-
([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
|
|
140
|
+
- **framer-scroller:** height of the gallery item isn't high enough ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
|
|
141
|
+
- **framer-scroller:** make sure the actual image will scale instead of the container ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
|
|
142
|
+
- **framer-scroller:** would throw ssr warning ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
|
|
130
143
|
|
|
131
144
|
## [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)
|
|
132
145
|
|
|
133
146
|
### Bug Fixes
|
|
134
147
|
|
|
135
|
-
- **framer-scroller:** gallery didn't align images in the center
|
|
136
|
-
|
|
137
|
-
- **framer-scroller:** offaxis scroll was allowed on safari
|
|
138
|
-
([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
|
|
148
|
+
- **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
|
|
149
|
+
- **framer-scroller:** offaxis scroll was allowed on safari ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
|
|
139
150
|
|
|
140
151
|
## [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)
|
|
141
152
|
|
|
142
153
|
### Bug Fixes
|
|
143
154
|
|
|
144
|
-
- **framer-scroller:** apply will change only when animating
|
|
145
|
-
([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
|
|
155
|
+
- **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
|
|
146
156
|
|
|
147
157
|
## [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)
|
|
148
158
|
|
|
149
159
|
### Bug Fixes
|
|
150
160
|
|
|
151
|
-
- **framer-scroller:** remove jank from scroller when opening
|
|
152
|
-
([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
|
|
161
|
+
- **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
|
|
153
162
|
|
|
154
163
|
## [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)
|
|
155
164
|
|
|
156
165
|
### Bug Fixes
|
|
157
166
|
|
|
158
|
-
- **framer-scroller:** make sure we're not throwing only warning when there are no children
|
|
159
|
-
([001c7d9](https://github.com/ho-nl/m2-pwa/commit/001c7d9a00e447d44134c00bd77505e52cf0f9d4))
|
|
167
|
+
- **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))
|
|
160
168
|
|
|
161
169
|
## [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)
|
|
162
170
|
|
|
163
171
|
### Bug Fixes
|
|
164
172
|
|
|
165
|
-
- scroller should not snap to off-axis while dragging and direction isn't set to both
|
|
166
|
-
([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
|
|
173
|
+
- 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))
|
|
167
174
|
|
|
168
175
|
## [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)
|
|
169
176
|
|
|
170
177
|
### Bug Fixes
|
|
171
178
|
|
|
172
|
-
- Accessibility, SEO
|
|
173
|
-
([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
|
|
179
|
+
- Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
|
|
174
180
|
|
|
175
181
|
## [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)
|
|
176
182
|
|
|
177
183
|
### Bug Fixes
|
|
178
184
|
|
|
179
|
-
- height of scroller isn't correct
|
|
180
|
-
([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
|
|
185
|
+
- height of scroller isn't correct ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
|
|
181
186
|
|
|
182
187
|
# [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)
|
|
183
188
|
|
|
184
189
|
### Bug Fixes
|
|
185
190
|
|
|
186
|
-
- **framer-scroller:** do not scroll in the direction that is not being scrolled when dragging and
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
-
|
|
190
|
-
|
|
191
|
-
-
|
|
192
|
-
([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
|
|
193
|
-
- make sure the overlay becomes visible, even if the overlay is scrolled
|
|
194
|
-
([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
|
|
195
|
-
- make sure the overlays are rendered correctly on mobile
|
|
196
|
-
([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
|
|
197
|
-
- make the headerHeight properly configurable
|
|
198
|
-
([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
|
|
191
|
+
- **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))
|
|
192
|
+
- **framer-scroller:** recursively find snapPoints for deeply nested children ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
|
|
193
|
+
- **framer-scroller:** set the scrollTop when switching snap ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
|
|
194
|
+
- make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
|
|
195
|
+
- make sure the overlays are rendered correctly on mobile ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
|
|
196
|
+
- make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
|
|
199
197
|
|
|
200
198
|
### Features
|
|
201
199
|
|
|
202
|
-
- **framer-scroller-sheet:** created package replacing the framer-sheet package
|
|
203
|
-
|
|
204
|
-
- **framer-scroller:**
|
|
205
|
-
|
|
206
|
-
- **framer-scroller:**
|
|
207
|
-
([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
|
|
208
|
-
- **framer-scroller:** provide promise with scrollTo
|
|
209
|
-
([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
|
|
210
|
-
- **framer-scroller:** split the grid functionality from the scroller
|
|
211
|
-
([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
|
|
200
|
+
- **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
|
|
201
|
+
- **framer-scroller:** find the direction of the scroller and set proper values ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
|
|
202
|
+
- **framer-scroller:** get the scrollSnapAlign from the element instead of the body ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
|
|
203
|
+
- **framer-scroller:** provide promise with scrollTo ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
|
|
204
|
+
- **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
|
|
212
205
|
|
|
213
206
|
## [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)
|
|
214
207
|
|
|
215
208
|
### Bug Fixes
|
|
216
209
|
|
|
217
|
-
- various accessibility improvements
|
|
218
|
-
([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
|
|
210
|
+
- various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
|
|
219
211
|
|
|
220
212
|
## [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)
|
|
221
213
|
|
|
222
214
|
### Bug Fixes
|
|
223
215
|
|
|
224
|
-
- spacing of title on category landing on mobile
|
|
225
|
-
([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
|
|
216
|
+
- spacing of title on category landing on mobile ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
|
|
226
217
|
|
|
227
218
|
# [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)
|
|
228
219
|
|
|
229
220
|
### Features
|
|
230
221
|
|
|
231
|
-
- **nextjs:** upgraded to nextjs 12
|
|
232
|
-
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
222
|
+
- **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
233
223
|
|
|
234
224
|
# [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)
|
|
235
225
|
|
|
236
226
|
### Features
|
|
237
227
|
|
|
238
|
-
- **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
|
|
239
|
-
([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
|
|
228
|
+
- **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))
|
|
240
229
|
|
|
241
230
|
## [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)
|
|
242
231
|
|
|
243
232
|
### Bug Fixes
|
|
244
233
|
|
|
245
|
-
- **framer-scroller:** dots should have a background
|
|
246
|
-
([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
|
|
234
|
+
- **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
|
|
247
235
|
|
|
248
236
|
## [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)
|
|
249
237
|
|
|
250
238
|
### Bug Fixes
|
|
251
239
|
|
|
252
|
-
- **framer-scroller:** pan snap does not work on mobile
|
|
253
|
-
([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
|
|
240
|
+
- **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
|
|
254
241
|
|
|
255
242
|
## [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)
|
|
256
243
|
|
|
257
244
|
### Bug Fixes
|
|
258
245
|
|
|
259
|
-
- ignore example directories when publishing
|
|
260
|
-
|
|
261
|
-
- versions
|
|
262
|
-
([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
|
|
246
|
+
- ignore example directories when publishing ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
|
|
247
|
+
- versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
|
|
263
248
|
|
|
264
249
|
## [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)
|
|
265
250
|
|
|
@@ -269,65 +254,42 @@ All notable changes to this project will be documented in this file. See
|
|
|
269
254
|
|
|
270
255
|
### Bug Fixes
|
|
271
256
|
|
|
272
|
-
- **framer-scroller:** center the prev/next buttons on the gallery
|
|
273
|
-
|
|
274
|
-
- **framer-
|
|
275
|
-
|
|
276
|
-
- **framer-slider:** prev/next buttons don't always show up correctly
|
|
277
|
-
([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
|
|
278
|
-
- make sure we can actually observe items
|
|
279
|
-
([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
257
|
+
- **framer-scroller:** center the prev/next buttons on the gallery ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
|
|
258
|
+
- **framer-scroller:** check if the ref exists instead of throwing an exception ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
|
|
259
|
+
- **framer-slider:** prev/next buttons don't always show up correctly ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
|
|
260
|
+
- make sure we can actually observe items ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
280
261
|
|
|
281
262
|
### Features
|
|
282
263
|
|
|
283
|
-
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
|
|
284
|
-
|
|
285
|
-
|
|
286
|
-
- **framer-scroller:**
|
|
287
|
-
|
|
288
|
-
-
|
|
289
|
-
([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
290
|
-
- **framer-scroller:** package to implement scroll-snap handling with JS
|
|
291
|
-
([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
292
|
-
- **framer-scroller:** pagination dots
|
|
293
|
-
([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
294
|
-
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
295
|
-
[@reachdigital](https://github.com/reachdigital)
|
|
296
|
-
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
264
|
+
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller resizes ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
|
|
265
|
+
- **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
|
|
266
|
+
- **framer-scroller:** option to hide scrollbar ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
267
|
+
- **framer-scroller:** package to implement scroll-snap handling with JS ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
268
|
+
- **framer-scroller:** pagination dots ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
269
|
+
- 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))
|
|
297
270
|
|
|
298
271
|
# Change Log
|
|
299
272
|
|
|
300
|
-
All notable changes to this project will be documented in this file. See
|
|
301
|
-
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
273
|
+
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
302
274
|
|
|
303
275
|
## [0.1.1](https://github.com/ho-nl/m2-pwa/compare/@graphcommerce/framer-scroller@0.1.0...@graphcommerce/framer-scroller@0.1.1) (2021-09-01)
|
|
304
276
|
|
|
305
277
|
### Bug Fixes
|
|
306
278
|
|
|
307
|
-
- **framer-slider:** prev/next buttons don't always show up correctly
|
|
308
|
-
|
|
309
|
-
- make sure we can actually observe items
|
|
310
|
-
([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
279
|
+
- **framer-slider:** prev/next buttons don't always show up correctly ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
|
|
280
|
+
- make sure we can actually observe items ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
311
281
|
|
|
312
282
|
# 0.1.0 (2021-09-01)
|
|
313
283
|
|
|
314
284
|
### Bug Fixes
|
|
315
285
|
|
|
316
|
-
- **framer-scroller:** center the prev/next buttons on the gallery
|
|
317
|
-
|
|
318
|
-
- **framer-scroller:** check if the ref exists instead of throwing an exception
|
|
319
|
-
([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
|
|
286
|
+
- **framer-scroller:** center the prev/next buttons on the gallery ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
|
|
287
|
+
- **framer-scroller:** check if the ref exists instead of throwing an exception ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
|
|
320
288
|
|
|
321
289
|
### Features
|
|
322
290
|
|
|
323
|
-
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
|
|
324
|
-
|
|
325
|
-
|
|
326
|
-
- **framer-scroller:**
|
|
327
|
-
|
|
328
|
-
- **framer-scroller:** option to hide scrollbar
|
|
329
|
-
([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
330
|
-
- **framer-scroller:** package to implement scroll-snap handling with JS
|
|
331
|
-
([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
332
|
-
- **framer-scroller:** pagination dots
|
|
333
|
-
([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
291
|
+
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller resizes ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
|
|
292
|
+
- **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
|
|
293
|
+
- **framer-scroller:** option to hide scrollbar ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
294
|
+
- **framer-scroller:** package to implement scroll-snap handling with JS ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
295
|
+
- **framer-scroller:** pagination dots ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
@@ -12,7 +12,7 @@ export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
|
|
|
12
12
|
* Note: We have a fallback for Safari 14 which doesn't yet support aspect-ratio, this causes a
|
|
13
13
|
* problem when the layout is animated. Should be fixed in Safari 15
|
|
14
14
|
*/
|
|
15
|
-
const MotionImageAspect = m(
|
|
15
|
+
export const MotionImageAspect = m(
|
|
16
16
|
forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => (
|
|
17
17
|
<Box
|
|
18
18
|
className='MotionImageAspect'
|
|
@@ -67,5 +67,3 @@ const MotionImageAspect = m(
|
|
|
67
67
|
)
|
|
68
68
|
|
|
69
69
|
MotionImageAspect.displayName = 'MotionImageAspect'
|
|
70
|
-
|
|
71
|
-
export default MotionImageAspect
|
package/components/Scroller.tsx
CHANGED
|
@@ -5,14 +5,15 @@ import { ScrollableProps, useScroller } from '../hooks/useScroller'
|
|
|
5
5
|
|
|
6
6
|
const ScrollerDiv = styled(m.div)({})
|
|
7
7
|
|
|
8
|
-
const Scroller = forwardRef<HTMLDivElement, ScrollableProps & { sx?: SxProps<Theme> }>(
|
|
8
|
+
export const Scroller = forwardRef<HTMLDivElement, ScrollableProps & { sx?: SxProps<Theme> }>(
|
|
9
9
|
(props, forwardedRef) => {
|
|
10
10
|
const { sx = [], ...scrollerProps } = props
|
|
11
|
-
const scroller = useScroller<'div'>(
|
|
11
|
+
const scroller = useScroller<'div', HTMLDivElement>(
|
|
12
|
+
{ grid: true, ...scrollerProps },
|
|
13
|
+
forwardedRef,
|
|
14
|
+
)
|
|
12
15
|
|
|
13
16
|
return <ScrollerDiv {...scroller} sx={[scroller.sx, ...(Array.isArray(sx) ? sx : [sx])]} />
|
|
14
17
|
},
|
|
15
18
|
)
|
|
16
19
|
Scroller.displayName = 'Scroller'
|
|
17
|
-
|
|
18
|
-
export default Scroller
|
|
@@ -10,7 +10,7 @@ export type ScrollerButtonProps = {
|
|
|
10
10
|
direction: SnapPositionDirection
|
|
11
11
|
} & FabProps
|
|
12
12
|
|
|
13
|
-
const
|
|
13
|
+
export const ScrollerButton = m(
|
|
14
14
|
React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
|
|
15
15
|
const { direction, sx = [], ...buttonProps } = props
|
|
16
16
|
|
|
@@ -44,6 +44,4 @@ const ScrollerFab = m(
|
|
|
44
44
|
)
|
|
45
45
|
}),
|
|
46
46
|
)
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
export default ScrollerFab
|
|
47
|
+
ScrollerButton.displayName = 'ScrollerButton'
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
import { useMotionValueValue } from '@graphcommerce/framer-utils'
|
|
2
|
+
import { extendableComponent } from '@graphcommerce/next-ui'
|
|
3
|
+
import { t } from '@lingui/macro'
|
|
4
|
+
import { Fab, FabProps, styled } from '@mui/material'
|
|
5
|
+
import { m, useSpring, useTransform } from 'framer-motion'
|
|
6
|
+
import { useScrollTo } from '../hooks/useScrollTo'
|
|
7
|
+
import { useScrollerContext } from '../hooks/useScrollerContext'
|
|
8
|
+
import { ItemState } from '../types'
|
|
9
|
+
|
|
10
|
+
const name = 'ScrollerDot'
|
|
11
|
+
const parts = ['dot', 'circle'] as const
|
|
12
|
+
type OwnerProps = { active: boolean }
|
|
13
|
+
|
|
14
|
+
const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
|
|
15
|
+
|
|
16
|
+
type ScrollerDotProps = Omit<FabProps, 'onClick' | 'className'> & ItemState & { idx: number }
|
|
17
|
+
|
|
18
|
+
const MotionBox = styled(m.div)({})
|
|
19
|
+
|
|
20
|
+
export function ScrollerDot(props: ScrollerDotProps) {
|
|
21
|
+
const { el, visibility, opacity, idx, ...fabProps } = props
|
|
22
|
+
const scrollTo = useScrollTo()
|
|
23
|
+
const { getScrollSnapPositions } = useScrollerContext()
|
|
24
|
+
|
|
25
|
+
const active = useMotionValueValue(visibility, (v) => v > 0.5)
|
|
26
|
+
const classes = withState({ active })
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<Fab
|
|
30
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
31
|
+
color='inherit'
|
|
32
|
+
size='small'
|
|
33
|
+
{...fabProps}
|
|
34
|
+
onClick={() => {
|
|
35
|
+
const positions = getScrollSnapPositions()
|
|
36
|
+
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
37
|
+
scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
|
|
38
|
+
}}
|
|
39
|
+
className={classes.dot}
|
|
40
|
+
aria-label={t`Navigate to item ${idx + 1}`}
|
|
41
|
+
sx={{
|
|
42
|
+
boxShadow: 'none',
|
|
43
|
+
background: 'transparent',
|
|
44
|
+
}}
|
|
45
|
+
>
|
|
46
|
+
<MotionBox
|
|
47
|
+
className={classes.circle}
|
|
48
|
+
sx={(theme) => ({
|
|
49
|
+
borderRadius: '99em',
|
|
50
|
+
width: 10,
|
|
51
|
+
height: 10,
|
|
52
|
+
background: theme.palette.text.primary,
|
|
53
|
+
})}
|
|
54
|
+
style={{ opacity }}
|
|
55
|
+
/>
|
|
56
|
+
</Fab>
|
|
57
|
+
)
|
|
58
|
+
}
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
import { useMotionValueValue } from '@graphcommerce/framer-utils'
|
|
2
2
|
import { extendableComponent } from '@graphcommerce/next-ui/Styles'
|
|
3
3
|
import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
|
|
4
|
-
import { m } from 'framer-motion'
|
|
4
|
+
import { m, useSpring } from 'framer-motion'
|
|
5
5
|
import React from 'react'
|
|
6
6
|
import { useScrollTo } from '../hooks/useScrollTo'
|
|
7
7
|
import { useScrollerContext } from '../hooks/useScrollerContext'
|
|
8
|
+
import { ScrollerDot } from './ScrollerDot'
|
|
8
9
|
|
|
9
10
|
const MotionBox = styled(m.div)({})
|
|
10
11
|
|
|
@@ -16,13 +17,12 @@ export type DotsProps = {
|
|
|
16
17
|
const componentName = 'ScrollerDots'
|
|
17
18
|
const { classes } = extendableComponent(componentName, ['root', 'dot', 'circle'] as const)
|
|
18
19
|
|
|
19
|
-
const ScrollerDots = m(
|
|
20
|
+
export const ScrollerDots = m(
|
|
20
21
|
React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
|
|
21
22
|
const { fabProps, sx = [], ...containerProps } = props
|
|
22
23
|
|
|
23
|
-
const { items
|
|
24
|
+
const { items } = useScrollerContext()
|
|
24
25
|
const itemsArr = useMotionValueValue(items, (v) => v)
|
|
25
|
-
const scrollTo = useScrollTo()
|
|
26
26
|
|
|
27
27
|
return (
|
|
28
28
|
<MotionBox
|
|
@@ -41,40 +41,11 @@ const ScrollerDots = m(
|
|
|
41
41
|
]}
|
|
42
42
|
>
|
|
43
43
|
{itemsArr.map((item, idx) => (
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
key={idx}
|
|
47
|
-
color='inherit'
|
|
48
|
-
size='small'
|
|
49
|
-
{...fabProps}
|
|
50
|
-
onClick={() => {
|
|
51
|
-
const positions = getScrollSnapPositions()
|
|
52
|
-
// eslint-disable-next-line @typescript-eslint/no-floating-promises
|
|
53
|
-
scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
|
|
54
|
-
}}
|
|
55
|
-
className={classes.dot}
|
|
56
|
-
aria-label={`img-${idx}`}
|
|
57
|
-
sx={{
|
|
58
|
-
boxShadow: 'none',
|
|
59
|
-
background: 'transparent',
|
|
60
|
-
}}
|
|
61
|
-
>
|
|
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
|
-
/>
|
|
72
|
-
</Fab>
|
|
44
|
+
// eslint-disable-next-line react/no-array-index-key
|
|
45
|
+
<ScrollerDot key={idx} {...item} idx={idx} />
|
|
73
46
|
))}
|
|
74
47
|
</MotionBox>
|
|
75
48
|
)
|
|
76
49
|
}),
|
|
77
50
|
)
|
|
78
51
|
ScrollerDots.displayName = componentName
|
|
79
|
-
|
|
80
|
-
export default ScrollerDots
|
|
@@ -11,7 +11,7 @@ export type SliderPageCounterProps = {
|
|
|
11
11
|
sx?: SxProps<Theme>
|
|
12
12
|
}
|
|
13
13
|
|
|
14
|
-
const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterProps>(
|
|
14
|
+
export const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterProps>(
|
|
15
15
|
({ sx = [] }, ref) => {
|
|
16
16
|
const { items } = useScrollerContext()
|
|
17
17
|
|
|
@@ -34,5 +34,3 @@ const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterPr
|
|
|
34
34
|
)
|
|
35
35
|
},
|
|
36
36
|
)
|
|
37
|
-
|
|
38
|
-
export default ScrollerPageCounter
|
|
@@ -62,7 +62,7 @@ function useObserveItems(scrollerRef: ReactHtmlRefObject, items: MotionValue<Ite
|
|
|
62
62
|
}, [items, observe])
|
|
63
63
|
}
|
|
64
64
|
|
|
65
|
-
export
|
|
65
|
+
export function ScrollerProvider(props: ScrollerProviderProps) {
|
|
66
66
|
const scrollerRef = useRef<HTMLDivElement>()
|
|
67
67
|
const cancels = useRef<PlaybackControls[]>([])
|
|
68
68
|
|
package/hooks/useScrollTo.ts
CHANGED
package/hooks/useScroller.ts
CHANGED
|
@@ -30,16 +30,17 @@ type OwnerProps = {
|
|
|
30
30
|
isPanning: boolean
|
|
31
31
|
hideScrollbar: boolean
|
|
32
32
|
canGrab: boolean
|
|
33
|
+
grid: boolean
|
|
33
34
|
}
|
|
34
35
|
const name = 'Scroller' as const
|
|
35
36
|
const parts = ['root'] as const
|
|
36
37
|
const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
|
|
37
38
|
|
|
38
39
|
/** Make any HTML */
|
|
39
|
-
export function useScroller<
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
) {
|
|
40
|
+
export function useScroller<
|
|
41
|
+
TagName extends keyof ReactHTML = 'div',
|
|
42
|
+
E extends HTMLElement = HTMLElement,
|
|
43
|
+
>(props: ScrollableProps<TagName>, forwardedRef: React.ForwardedRef<E>) {
|
|
43
44
|
const { hideScrollbar = false, children, grid = false, ...divProps } = props
|
|
44
45
|
|
|
45
46
|
const { scrollSnap, scrollerRef, enableSnap, disableSnap, snap, registerChildren } =
|
|
@@ -106,7 +107,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
|
|
|
106
107
|
snapToVelocity(info)
|
|
107
108
|
}
|
|
108
109
|
|
|
109
|
-
const ref: React.RefCallback<
|
|
110
|
+
const ref: React.RefCallback<E> = (el) => {
|
|
110
111
|
// @ts-expect-error current is assignable
|
|
111
112
|
scrollerRef.current = el ?? undefined
|
|
112
113
|
if (typeof forwardedRef === 'function') forwardedRef(el)
|
|
@@ -117,6 +118,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
|
|
|
117
118
|
const mdSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
|
|
118
119
|
|
|
119
120
|
const classes = withState({
|
|
121
|
+
grid,
|
|
120
122
|
smSnapDir,
|
|
121
123
|
smGridDir: grid && smSnapDir,
|
|
122
124
|
mdSnapDir,
|
|
@@ -128,7 +130,7 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
|
|
|
128
130
|
})
|
|
129
131
|
|
|
130
132
|
const sx: SxProps<Theme> = (theme) => ({
|
|
131
|
-
'
|
|
133
|
+
'&.grid *': {
|
|
132
134
|
userSelect: 'none',
|
|
133
135
|
userDrag: 'none',
|
|
134
136
|
WebkitUserDrag: 'none',
|
package/index.ts
CHANGED
|
@@ -1,21 +1,11 @@
|
|
|
1
1
|
export * from './types'
|
|
2
2
|
|
|
3
3
|
export * from './components/MotionImageAspect'
|
|
4
|
-
export
|
|
5
|
-
|
|
6
|
-
export { default as Scroller } from './components/Scroller'
|
|
7
|
-
|
|
4
|
+
export * from './components/Scroller'
|
|
8
5
|
export * from './components/ScrollerButton'
|
|
9
|
-
export { default as ScrollerButton } from './components/ScrollerButton'
|
|
10
|
-
|
|
11
6
|
export * from './components/ScrollerDots'
|
|
12
|
-
export { default as ScrollerDots } from './components/ScrollerDots'
|
|
13
|
-
|
|
14
7
|
export * from './components/ScrollerPageCounter'
|
|
15
|
-
export { default as ScrollerPageCounter } from './components/ScrollerPageCounter'
|
|
16
|
-
|
|
17
8
|
export * from './components/ScrollerProvider'
|
|
18
|
-
export { default as ScrollerProvider } from './components/ScrollerProvider'
|
|
19
9
|
|
|
20
10
|
export * from './hooks/useScrollerContext'
|
|
21
11
|
// export * from './hooks/useScroller'
|
package/package.json
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
"name": "@graphcommerce/framer-scroller",
|
|
3
3
|
"homepage": "https://www.graphcommerce.org/",
|
|
4
4
|
"repository": "github:graphcommerce-org/graphcommerce",
|
|
5
|
-
"version": "2.0
|
|
5
|
+
"version": "2.1.0",
|
|
6
6
|
"sideEffects": false,
|
|
7
7
|
"scripts": {
|
|
8
8
|
"dev": "tsc -W"
|
|
@@ -15,15 +15,15 @@
|
|
|
15
15
|
}
|
|
16
16
|
},
|
|
17
17
|
"dependencies": {
|
|
18
|
-
"@graphcommerce/framer-utils": "^3.0.
|
|
19
|
-
"@graphcommerce/image": "^3.1.
|
|
20
|
-
"@graphcommerce/next-ui": "^4.
|
|
18
|
+
"@graphcommerce/framer-utils": "^3.0.5",
|
|
19
|
+
"@graphcommerce/image": "^3.1.1",
|
|
20
|
+
"@graphcommerce/next-ui": "^4.3.0"
|
|
21
21
|
},
|
|
22
22
|
"devDependencies": {
|
|
23
|
-
"@graphcommerce/eslint-config-pwa": "^4.0.
|
|
24
|
-
"@graphcommerce/prettier-config-pwa": "^4.0.
|
|
23
|
+
"@graphcommerce/eslint-config-pwa": "^4.0.5",
|
|
24
|
+
"@graphcommerce/prettier-config-pwa": "^4.0.3",
|
|
25
25
|
"@graphcommerce/typescript-config-pwa": "^4.0.2",
|
|
26
|
-
"@playwright/test": "^1.19.
|
|
26
|
+
"@playwright/test": "^1.19.2"
|
|
27
27
|
},
|
|
28
28
|
"peerDependencies": {
|
|
29
29
|
"@mui/material": "^5.4.1",
|
package/types.ts
CHANGED
|
@@ -28,19 +28,19 @@ export type ScrollerContext = {
|
|
|
28
28
|
snap: MotionValue<boolean>
|
|
29
29
|
|
|
30
30
|
/** @private */
|
|
31
|
-
enableSnap()
|
|
31
|
+
enableSnap: () => void
|
|
32
32
|
/** @private */
|
|
33
|
-
disableSnap()
|
|
33
|
+
disableSnap: () => void
|
|
34
34
|
/** @private */
|
|
35
|
-
register(controls: PlaybackControls)
|
|
35
|
+
register: (controls: PlaybackControls) => void
|
|
36
36
|
/** @private */
|
|
37
|
-
stop()
|
|
37
|
+
stop: () => void
|
|
38
38
|
/** @private */
|
|
39
|
-
getSnapPosition(direction: SnapPositionDirection)
|
|
39
|
+
getSnapPosition: (direction: SnapPositionDirection) => Point
|
|
40
40
|
/** @private */
|
|
41
|
-
getScrollSnapPositions()
|
|
41
|
+
getScrollSnapPositions: () => Record<Axis, number[]>
|
|
42
42
|
/** @private */
|
|
43
|
-
registerChildren(children: React.ReactNode)
|
|
43
|
+
registerChildren: (children: React.ReactNode) => void
|
|
44
44
|
}
|
|
45
45
|
|
|
46
46
|
export type ScrollSnapTypeSingle = 'none' | 'block' | 'inline' | 'x' | 'y' | 'both'
|