@graphcommerce/framer-scroller 2.0.5 → 2.1.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.
- package/CHANGELOG.md +120 -166
- 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/useScroller.ts +8 -6
- package/index.ts +1 -11
- package/package.json +7 -7
- package/types.ts +7 -7
package/CHANGELOG.md
CHANGED
|
@@ -1,43 +1,78 @@
|
|
|
1
1
|
# Change Log
|
|
2
2
|
|
|
3
|
+
## 2.1.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#1330](https://github.com/graphcommerce-org/graphcommerce/pull/1330) [`b7ce24fbc`](https://github.com/graphcommerce-org/graphcommerce/commit/b7ce24fbc1fbebf913faf8f5ad0bf1a126cb56d2) Thanks [@paales](https://github.com/paales)! - cyclic dependency issue with next-ui
|
|
8
|
+
|
|
9
|
+
## 2.1.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#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.
|
|
14
|
+
|
|
15
|
+
```tsx
|
|
16
|
+
<ScrollerDots
|
|
17
|
+
layout
|
|
18
|
+
sx={{
|
|
19
|
+
'& .ScrollerDot-circle': {
|
|
20
|
+
bgcolor: 'green',
|
|
21
|
+
},
|
|
22
|
+
'& .ScrollerDot-circle.active': {
|
|
23
|
+
bgcolor: 'hotpink',
|
|
24
|
+
opacity: '1 !important',
|
|
25
|
+
},
|
|
26
|
+
}}
|
|
27
|
+
/>
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
### Patch Changes
|
|
31
|
+
|
|
32
|
+
- [#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
|
|
33
|
+
|
|
34
|
+
- 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)]:
|
|
35
|
+
- @graphcommerce/next-ui@4.3.0
|
|
36
|
+
- @graphcommerce/framer-utils@3.0.5
|
|
37
|
+
|
|
38
|
+
## 2.0.6
|
|
39
|
+
|
|
40
|
+
### Patch Changes
|
|
41
|
+
|
|
42
|
+
- [#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.
|
|
43
|
+
|
|
44
|
+
* [#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
|
|
45
|
+
|
|
46
|
+
* 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)]:
|
|
47
|
+
- @graphcommerce/next-ui@4.2.4
|
|
48
|
+
- @graphcommerce/framer-utils@3.0.4
|
|
49
|
+
- @graphcommerce/image@3.1.1
|
|
50
|
+
|
|
3
51
|
## 2.0.5
|
|
4
52
|
|
|
5
53
|
### Patch Changes
|
|
6
54
|
|
|
7
|
-
- [#1294](https://github.com/ho-nl/m2-pwa/pull/1294)
|
|
8
|
-
[`4e28c8afd`](https://github.com/ho-nl/m2-pwa/commit/4e28c8afd9cead3577dd0eff97b5c44ba4c1c862)
|
|
9
|
-
Thanks [@paales](https://github.com/paales)! - set the duration of useScrollTo to 500 for the x
|
|
10
|
-
direction
|
|
55
|
+
- [#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
|
|
11
56
|
|
|
12
|
-
- Updated dependencies
|
|
13
|
-
[[`19f33e0aa`](https://github.com/ho-nl/m2-pwa/commit/19f33e0aaf4e3121edd444926d08b6459d3ef400),
|
|
14
|
-
[`aea787542`](https://github.com/ho-nl/m2-pwa/commit/aea787542484a0480a48031fcc4a9a5566c6bfc7)]:
|
|
57
|
+
- Updated dependencies [[`19f33e0aa`](https://github.com/ho-nl/m2-pwa/commit/19f33e0aaf4e3121edd444926d08b6459d3ef400), [`aea787542`](https://github.com/ho-nl/m2-pwa/commit/aea787542484a0480a48031fcc4a9a5566c6bfc7)]:
|
|
15
58
|
- @graphcommerce/next-ui@4.2.1
|
|
16
59
|
|
|
17
60
|
## 2.0.4
|
|
18
61
|
|
|
19
62
|
### Patch Changes
|
|
20
63
|
|
|
21
|
-
- [#1285](https://github.com/ho-nl/m2-pwa/pull/1285)
|
|
22
|
-
[`16d77b280`](https://github.com/ho-nl/m2-pwa/commit/16d77b2806e49e376d06bc0d578d38eb724b0c17)
|
|
23
|
-
Thanks [@paales](https://github.com/paales)! - allow scroller button to be overwritten
|
|
64
|
+
- [#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
|
|
24
65
|
|
|
25
|
-
- Updated dependencies
|
|
26
|
-
[[`c85294ba6`](https://github.com/ho-nl/m2-pwa/commit/c85294ba6d742ce78c074559a1e95409b25a5017)]:
|
|
66
|
+
- Updated dependencies [[`c85294ba6`](https://github.com/ho-nl/m2-pwa/commit/c85294ba6d742ce78c074559a1e95409b25a5017)]:
|
|
27
67
|
- @graphcommerce/next-ui@4.1.3
|
|
28
68
|
|
|
29
69
|
## 2.0.3
|
|
30
70
|
|
|
31
71
|
### Patch Changes
|
|
32
72
|
|
|
33
|
-
- [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96)
|
|
34
|
-
Thanks [@paales](https://github.com/paales)! - made packages public
|
|
73
|
+
- [`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96) Thanks [@paales](https://github.com/paales)! - made packages public
|
|
35
74
|
|
|
36
|
-
- Updated dependencies
|
|
37
|
-
[[`973ff8645`](https://github.com/ho-nl/m2-pwa/commit/973ff86452a70ade9f4db13fdda6e963d7220e96),
|
|
38
|
-
[`81ea406d5`](https://github.com/ho-nl/m2-pwa/commit/81ea406d54d6b5c662c030a7fea444abc4117a20),
|
|
39
|
-
[`3a719c88c`](https://github.com/ho-nl/m2-pwa/commit/3a719c88cad1eab58602de28c41adc0fc4827e1d),
|
|
40
|
-
[`5ffcb56bf`](https://github.com/ho-nl/m2-pwa/commit/5ffcb56bfcbe49ebeaf24f9341e819a145ab9a14)]:
|
|
75
|
+
- 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)]:
|
|
41
76
|
- @graphcommerce/framer-utils@3.0.3
|
|
42
77
|
- @graphcommerce/image@3.1.0
|
|
43
78
|
- @graphcommerce/next-ui@4.1.2
|
|
@@ -46,28 +81,13 @@
|
|
|
46
81
|
|
|
47
82
|
### Patch Changes
|
|
48
83
|
|
|
49
|
-
- [#1276](https://github.com/ho-nl/m2-pwa/pull/1276)
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
* [
|
|
56
|
-
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)
|
|
57
|
-
Thanks [@paales](https://github.com/paales)! - Upgraded to
|
|
58
|
-
[NextJS 12.1](https://nextjs.org/blog/next-12-1)! This is just for compatibility, but we'll be
|
|
59
|
-
implementing
|
|
60
|
-
[On-demand Incremental Static Regeneration](https://nextjs.org/blog/next-12-1#on-demand-incremental-static-regeneration-beta)
|
|
61
|
-
soon.
|
|
62
|
-
|
|
63
|
-
This will greatly reduce the requirement to rebuid stuff and we'll add a management UI on the
|
|
64
|
-
frontend to be able to revalidate pages manually.
|
|
65
|
-
|
|
66
|
-
* Updated dependencies
|
|
67
|
-
[[`381e4c86a`](https://github.com/ho-nl/m2-pwa/commit/381e4c86a8321ce96e1fa5c7d3c0a0c0ff3e02c7),
|
|
68
|
-
[`ce09388e0`](https://github.com/ho-nl/m2-pwa/commit/ce09388e0d7ef33aee660612340f6fbae15ceec2),
|
|
69
|
-
[`e7c8e2756`](https://github.com/ho-nl/m2-pwa/commit/e7c8e2756d637cbcd2e793d62ef5721d35d9fa7b),
|
|
70
|
-
[`52a45bba4`](https://github.com/ho-nl/m2-pwa/commit/52a45bba4dc6dd6df3c81f5023df7d23ed8a534d)]:
|
|
84
|
+
- [#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.
|
|
85
|
+
|
|
86
|
+
* [#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.
|
|
87
|
+
|
|
88
|
+
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.
|
|
89
|
+
|
|
90
|
+
* 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)]:
|
|
71
91
|
- @graphcommerce/next-ui@4.1.1
|
|
72
92
|
- @graphcommerce/framer-utils@3.0.2
|
|
73
93
|
- @graphcommerce/image@3.0.2
|
|
@@ -76,11 +96,8 @@
|
|
|
76
96
|
|
|
77
97
|
### Patch Changes
|
|
78
98
|
|
|
79
|
-
- [`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)
|
|
80
|
-
|
|
81
|
-
so that the packages link to back to the website and repository
|
|
82
|
-
- Updated dependencies
|
|
83
|
-
[[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
99
|
+
- [`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
|
|
100
|
+
- Updated dependencies [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
|
|
84
101
|
- @graphcommerce/framer-utils@3.0.1
|
|
85
102
|
- @graphcommerce/image@3.0.1
|
|
86
103
|
- @graphcommerce/next-ui@4.0.1
|
|
@@ -89,191 +106,151 @@
|
|
|
89
106
|
|
|
90
107
|
### Major Changes
|
|
91
108
|
|
|
92
|
-
- [#1258](https://github.com/ho-nl/m2-pwa/pull/1258)
|
|
93
|
-
[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)
|
|
94
|
-
Thanks [@paales](https://github.com/paales)! - Upgraded to Material UI 5
|
|
109
|
+
- [#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
|
|
95
110
|
|
|
96
111
|
### Patch Changes
|
|
97
112
|
|
|
98
|
-
- Updated dependencies
|
|
99
|
-
[[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
113
|
+
- Updated dependencies [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
|
|
100
114
|
- @graphcommerce/framer-utils@3.0.0
|
|
101
115
|
- @graphcommerce/image@3.0.0
|
|
102
116
|
- @graphcommerce/next-ui@4.0.0
|
|
103
117
|
|
|
104
|
-
All notable changes to this project will be documented in this file. See
|
|
105
|
-
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
118
|
+
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
106
119
|
|
|
107
120
|
# [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)
|
|
108
121
|
|
|
109
122
|
### Bug Fixes
|
|
110
123
|
|
|
111
|
-
- make sure the useVelocitySnapTo resolves completely
|
|
112
|
-
([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
|
|
124
|
+
- make sure the useVelocitySnapTo resolves completely ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
|
|
113
125
|
|
|
114
126
|
### Features
|
|
115
127
|
|
|
116
|
-
- **framer-next-pages:** reduce rerenders when navigating to a new page
|
|
117
|
-
([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
|
|
128
|
+
- **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
|
|
118
129
|
|
|
119
130
|
## [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)
|
|
120
131
|
|
|
121
132
|
### Bug Fixes
|
|
122
133
|
|
|
123
|
-
- **framer-next-pages:** closing is janky, caused by setting pointer-events to none, trying without
|
|
124
|
-
resetting the pointerevents
|
|
125
|
-
([9247fa3](https://github.com/ho-nl/m2-pwa/commit/9247fa312926416802abd68ea04b1e6b52531f2c))
|
|
134
|
+
- **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))
|
|
126
135
|
|
|
127
136
|
## [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)
|
|
128
137
|
|
|
129
138
|
### Bug Fixes
|
|
130
139
|
|
|
131
|
-
- **framer-scroller:** make sure the first gallery dot is selected initially
|
|
132
|
-
([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
|
|
140
|
+
- **framer-scroller:** make sure the first gallery dot is selected initially ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
|
|
133
141
|
|
|
134
142
|
## [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)
|
|
135
143
|
|
|
136
144
|
### Bug Fixes
|
|
137
145
|
|
|
138
|
-
- **framer-scroller:** height of the gallery item isn't high enough
|
|
139
|
-
|
|
140
|
-
- **framer-scroller:**
|
|
141
|
-
([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
|
|
142
|
-
- **framer-scroller:** would throw ssr warning
|
|
143
|
-
([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
|
|
146
|
+
- **framer-scroller:** height of the gallery item isn't high enough ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
|
|
147
|
+
- **framer-scroller:** make sure the actual image will scale instead of the container ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
|
|
148
|
+
- **framer-scroller:** would throw ssr warning ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
|
|
144
149
|
|
|
145
150
|
## [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)
|
|
146
151
|
|
|
147
152
|
### Bug Fixes
|
|
148
153
|
|
|
149
|
-
- **framer-scroller:** gallery didn't align images in the center
|
|
150
|
-
|
|
151
|
-
- **framer-scroller:** offaxis scroll was allowed on safari
|
|
152
|
-
([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
|
|
154
|
+
- **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
|
|
155
|
+
- **framer-scroller:** offaxis scroll was allowed on safari ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
|
|
153
156
|
|
|
154
157
|
## [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)
|
|
155
158
|
|
|
156
159
|
### Bug Fixes
|
|
157
160
|
|
|
158
|
-
- **framer-scroller:** apply will change only when animating
|
|
159
|
-
([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
|
|
161
|
+
- **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
|
|
160
162
|
|
|
161
163
|
## [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)
|
|
162
164
|
|
|
163
165
|
### Bug Fixes
|
|
164
166
|
|
|
165
|
-
- **framer-scroller:** remove jank from scroller when opening
|
|
166
|
-
([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
|
|
167
|
+
- **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
|
|
167
168
|
|
|
168
169
|
## [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)
|
|
169
170
|
|
|
170
171
|
### Bug Fixes
|
|
171
172
|
|
|
172
|
-
- **framer-scroller:** make sure we're not throwing only warning when there are no children
|
|
173
|
-
([001c7d9](https://github.com/ho-nl/m2-pwa/commit/001c7d9a00e447d44134c00bd77505e52cf0f9d4))
|
|
173
|
+
- **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))
|
|
174
174
|
|
|
175
175
|
## [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)
|
|
176
176
|
|
|
177
177
|
### Bug Fixes
|
|
178
178
|
|
|
179
|
-
- scroller should not snap to off-axis while dragging and direction isn't set to both
|
|
180
|
-
([9118bfc](https://github.com/ho-nl/m2-pwa/commit/9118bfcb1eb9ade5f144167e47e0c26724ce832f))
|
|
179
|
+
- 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))
|
|
181
180
|
|
|
182
181
|
## [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)
|
|
183
182
|
|
|
184
183
|
### Bug Fixes
|
|
185
184
|
|
|
186
|
-
- Accessibility, SEO
|
|
187
|
-
([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
|
|
185
|
+
- Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
|
|
188
186
|
|
|
189
187
|
## [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)
|
|
190
188
|
|
|
191
189
|
### Bug Fixes
|
|
192
190
|
|
|
193
|
-
- height of scroller isn't correct
|
|
194
|
-
([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
|
|
191
|
+
- height of scroller isn't correct ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
|
|
195
192
|
|
|
196
193
|
# [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)
|
|
197
194
|
|
|
198
195
|
### Bug Fixes
|
|
199
196
|
|
|
200
|
-
- **framer-scroller:** do not scroll in the direction that is not being scrolled when dragging and
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
-
|
|
204
|
-
|
|
205
|
-
-
|
|
206
|
-
([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
|
|
207
|
-
- make sure the overlay becomes visible, even if the overlay is scrolled
|
|
208
|
-
([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
|
|
209
|
-
- make sure the overlays are rendered correctly on mobile
|
|
210
|
-
([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
|
|
211
|
-
- make the headerHeight properly configurable
|
|
212
|
-
([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
|
|
197
|
+
- **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))
|
|
198
|
+
- **framer-scroller:** recursively find snapPoints for deeply nested children ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
|
|
199
|
+
- **framer-scroller:** set the scrollTop when switching snap ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
|
|
200
|
+
- make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
|
|
201
|
+
- make sure the overlays are rendered correctly on mobile ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
|
|
202
|
+
- make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
|
|
213
203
|
|
|
214
204
|
### Features
|
|
215
205
|
|
|
216
|
-
- **framer-scroller-sheet:** created package replacing the framer-sheet package
|
|
217
|
-
|
|
218
|
-
- **framer-scroller:**
|
|
219
|
-
|
|
220
|
-
- **framer-scroller:**
|
|
221
|
-
([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
|
|
222
|
-
- **framer-scroller:** provide promise with scrollTo
|
|
223
|
-
([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
|
|
224
|
-
- **framer-scroller:** split the grid functionality from the scroller
|
|
225
|
-
([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
|
|
206
|
+
- **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
|
|
207
|
+
- **framer-scroller:** find the direction of the scroller and set proper values ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
|
|
208
|
+
- **framer-scroller:** get the scrollSnapAlign from the element instead of the body ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
|
|
209
|
+
- **framer-scroller:** provide promise with scrollTo ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
|
|
210
|
+
- **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
|
|
226
211
|
|
|
227
212
|
## [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)
|
|
228
213
|
|
|
229
214
|
### Bug Fixes
|
|
230
215
|
|
|
231
|
-
- various accessibility improvements
|
|
232
|
-
([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
|
|
216
|
+
- various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
|
|
233
217
|
|
|
234
218
|
## [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)
|
|
235
219
|
|
|
236
220
|
### Bug Fixes
|
|
237
221
|
|
|
238
|
-
- spacing of title on category landing on mobile
|
|
239
|
-
([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
|
|
222
|
+
- spacing of title on category landing on mobile ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
|
|
240
223
|
|
|
241
224
|
# [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)
|
|
242
225
|
|
|
243
226
|
### Features
|
|
244
227
|
|
|
245
|
-
- **nextjs:** upgraded to nextjs 12
|
|
246
|
-
([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
228
|
+
- **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
|
|
247
229
|
|
|
248
230
|
# [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)
|
|
249
231
|
|
|
250
232
|
### Features
|
|
251
233
|
|
|
252
|
-
- **framer-scroller:** better defaults so the Scroller doesn't look broken when providing no props
|
|
253
|
-
([b177ce9](https://github.com/ho-nl/m2-pwa/commit/b177ce9570abb9ccfd4eb5cc34e43d157bb4e81a))
|
|
234
|
+
- **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))
|
|
254
235
|
|
|
255
236
|
## [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)
|
|
256
237
|
|
|
257
238
|
### Bug Fixes
|
|
258
239
|
|
|
259
|
-
- **framer-scroller:** dots should have a background
|
|
260
|
-
([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
|
|
240
|
+
- **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
|
|
261
241
|
|
|
262
242
|
## [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)
|
|
263
243
|
|
|
264
244
|
### Bug Fixes
|
|
265
245
|
|
|
266
|
-
- **framer-scroller:** pan snap does not work on mobile
|
|
267
|
-
([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
|
|
246
|
+
- **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
|
|
268
247
|
|
|
269
248
|
## [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)
|
|
270
249
|
|
|
271
250
|
### Bug Fixes
|
|
272
251
|
|
|
273
|
-
- ignore example directories when publishing
|
|
274
|
-
|
|
275
|
-
- versions
|
|
276
|
-
([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
|
|
252
|
+
- ignore example directories when publishing ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
|
|
253
|
+
- versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
|
|
277
254
|
|
|
278
255
|
## [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)
|
|
279
256
|
|
|
@@ -283,65 +260,42 @@ All notable changes to this project will be documented in this file. See
|
|
|
283
260
|
|
|
284
261
|
### Bug Fixes
|
|
285
262
|
|
|
286
|
-
- **framer-scroller:** center the prev/next buttons on the gallery
|
|
287
|
-
|
|
288
|
-
- **framer-
|
|
289
|
-
|
|
290
|
-
- **framer-slider:** prev/next buttons don't always show up correctly
|
|
291
|
-
([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
|
|
292
|
-
- make sure we can actually observe items
|
|
293
|
-
([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
263
|
+
- **framer-scroller:** center the prev/next buttons on the gallery ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
|
|
264
|
+
- **framer-scroller:** check if the ref exists instead of throwing an exception ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
|
|
265
|
+
- **framer-slider:** prev/next buttons don't always show up correctly ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
|
|
266
|
+
- make sure we can actually observe items ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
294
267
|
|
|
295
268
|
### Features
|
|
296
269
|
|
|
297
|
-
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
|
|
298
|
-
|
|
299
|
-
|
|
300
|
-
- **framer-scroller:**
|
|
301
|
-
|
|
302
|
-
-
|
|
303
|
-
([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
304
|
-
- **framer-scroller:** package to implement scroll-snap handling with JS
|
|
305
|
-
([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
306
|
-
- **framer-scroller:** pagination dots
|
|
307
|
-
([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
308
|
-
- renamed all packages to use [@graphcommerce](https://github.com/graphcommerce) instead of
|
|
309
|
-
[@reachdigital](https://github.com/reachdigital)
|
|
310
|
-
([491e4ce](https://github.com/ho-nl/m2-pwa/commit/491e4cec9a2686472dac36b79f999257c0811ffe))
|
|
270
|
+
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller resizes ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
|
|
271
|
+
- **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
|
|
272
|
+
- **framer-scroller:** option to hide scrollbar ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
273
|
+
- **framer-scroller:** package to implement scroll-snap handling with JS ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
274
|
+
- **framer-scroller:** pagination dots ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
275
|
+
- 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))
|
|
311
276
|
|
|
312
277
|
# Change Log
|
|
313
278
|
|
|
314
|
-
All notable changes to this project will be documented in this file. See
|
|
315
|
-
[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
279
|
+
All notable changes to this project will be documented in this file. See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
316
280
|
|
|
317
281
|
## [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)
|
|
318
282
|
|
|
319
283
|
### Bug Fixes
|
|
320
284
|
|
|
321
|
-
- **framer-slider:** prev/next buttons don't always show up correctly
|
|
322
|
-
|
|
323
|
-
- make sure we can actually observe items
|
|
324
|
-
([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
285
|
+
- **framer-slider:** prev/next buttons don't always show up correctly ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
|
|
286
|
+
- make sure we can actually observe items ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
|
|
325
287
|
|
|
326
288
|
# 0.1.0 (2021-09-01)
|
|
327
289
|
|
|
328
290
|
### Bug Fixes
|
|
329
291
|
|
|
330
|
-
- **framer-scroller:** center the prev/next buttons on the gallery
|
|
331
|
-
|
|
332
|
-
- **framer-scroller:** check if the ref exists instead of throwing an exception
|
|
333
|
-
([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
|
|
292
|
+
- **framer-scroller:** center the prev/next buttons on the gallery ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
|
|
293
|
+
- **framer-scroller:** check if the ref exists instead of throwing an exception ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
|
|
334
294
|
|
|
335
295
|
### Features
|
|
336
296
|
|
|
337
|
-
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
- **framer-scroller:**
|
|
341
|
-
|
|
342
|
-
- **framer-scroller:** option to hide scrollbar
|
|
343
|
-
([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
344
|
-
- **framer-scroller:** package to implement scroll-snap handling with JS
|
|
345
|
-
([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
346
|
-
- **framer-scroller:** pagination dots
|
|
347
|
-
([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
|
|
297
|
+
- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller resizes ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
|
|
298
|
+
- **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
|
|
299
|
+
- **framer-scroller:** option to hide scrollbar ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
|
|
300
|
+
- **framer-scroller:** package to implement scroll-snap handling with JS ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
|
|
301
|
+
- **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/Styles'
|
|
3
|
+
import { t } from '@lingui/macro'
|
|
4
|
+
import { Fab, FabProps, styled } from '@mui/material'
|
|
5
|
+
import { m } 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/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.
|
|
5
|
+
"version": "2.1.1",
|
|
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.1.0",
|
|
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'
|