npm - @graphcommerce/framer-scroller - Versions diffs - 1.2.12 → 2.0.2 - Mend

@graphcommerce/framer-scroller 1.2.12 → 2.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/CHANGELOG.md +147 -147
package/components/MotionImageAspect.tsx +53 -59
package/components/Scroller.tsx +11 -4
package/components/ScrollerButton.tsx +19 -33
package/components/ScrollerDots.tsx +43 -37
package/components/ScrollerPageCounter.tsx +9 -18
package/hooks/useScroller.ts +170 -126
package/hooks/useVelocitySnapTo.ts +2 -2
package/index.ts +1 -1
package/package.json +17 -20
package/utils/scrollSnapTypeDirection.ts +1 -1

package/CHANGELOG.md CHANGED Viewed

@@ -1,271 +1,271 @@
 # Change Log
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-# [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)
+## 2.0.2
+### Patch Changes
-### Bug Fixes
+- [#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.
-* make sure the useVelocitySnapTo resolves completely ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
+* [#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.
+  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.
-### Features
+* 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)]:
+  - @graphcommerce/next-ui@4.1.1
+  - @graphcommerce/framer-utils@3.0.2
+  - @graphcommerce/image@3.0.2
-* **framer-next-pages:** reduce rerenders when navigating to a new page ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
+## 2.0.1
+### Patch Changes
+- [`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
+- Updated dependencies
+  [[`0cbaa878b`](https://github.com/ho-nl/m2-pwa/commit/0cbaa878b8a844d5abbeb1797b625a33130e6514)]:
+  - @graphcommerce/framer-utils@3.0.1
+  - @graphcommerce/image@3.0.1
+  - @graphcommerce/next-ui@4.0.1
+## 2.0.0
+### Major Changes
-## [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)
+- [#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
+### Patch Changes
-### Bug Fixes
+- Updated dependencies
+  [[`ad36382a4`](https://github.com/ho-nl/m2-pwa/commit/ad36382a4d55d83d9e47b7eb6a02671a2a631a05)]:
+  - @graphcommerce/framer-utils@3.0.0
+  - @graphcommerce/image@3.0.0
+  - @graphcommerce/next-ui@4.0.0
-* **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))
+All notable changes to this project will be documented in this file. See
+[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+# [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)
+### Bug Fixes
+- make sure the useVelocitySnapTo resolves completely
+  ([9d13fcb](https://github.com/ho-nl/m2-pwa/commit/9d13fcbf63ef8c0a964b9bd81accb6259a693c5c))
+### Features
-## [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)
+- **framer-next-pages:** reduce rerenders when navigating to a new page
+  ([5cf3301](https://github.com/ho-nl/m2-pwa/commit/5cf330130bb3527057da015e3c4a6fa295d7262e))
+## [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)
 ### Bug Fixes
-* **framer-scroller:** make sure the first gallery dot is selected initially ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
+- **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))
+## [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)
+### Bug Fixes
+- **framer-scroller:** make sure the first gallery dot is selected initially
+  ([a2ed37b](https://github.com/ho-nl/m2-pwa/commit/a2ed37bd2c17eef46c0ee4cf8219a141b2e054b4))
 ## [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)
 ### Bug Fixes
-* **framer-scroller:** height of the gallery item isn't high enough ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
-* **framer-scroller:** make sure the actual image will scale instead of the container ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
-* **framer-scroller:** would throw ssr warning ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
+- **framer-scroller:** height of the gallery item isn't high enough
+  ([0e84ba3](https://github.com/ho-nl/m2-pwa/commit/0e84ba3ecb8928870fdc0459a1c6c30fde372d91))
+- **framer-scroller:** make sure the actual image will scale instead of the container
+  ([8d55630](https://github.com/ho-nl/m2-pwa/commit/8d55630a93cff91ac37e426bbe9f1b25b001556c))
+- **framer-scroller:** would throw ssr warning
+  ([a3db078](https://github.com/ho-nl/m2-pwa/commit/a3db0781d2433809c0bd4cb6ba37af79b611f3c4))
 ## [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)
 ### Bug Fixes
-* **framer-scroller:** gallery didn't align images in the center ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
-* **framer-scroller:** offaxis scroll was allowed on safari ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
+- **framer-scroller:** gallery didn't align images in the center
+  ([0cf6066](https://github.com/ho-nl/m2-pwa/commit/0cf60669b2547d2c421eb07c1ba23d7718df74aa))
+- **framer-scroller:** offaxis scroll was allowed on safari
+  ([4ece409](https://github.com/ho-nl/m2-pwa/commit/4ece409fabad7e686d491cc6bc1682c4507f2d3b))
 ## [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)
 ### Bug Fixes
-* **framer-scroller:** apply will change only when animating ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
+- **framer-scroller:** apply will change only when animating
+  ([77fee92](https://github.com/ho-nl/m2-pwa/commit/77fee92c0eb70691b699e1f6ba378ec16c534975))
 ## [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)
 ### Bug Fixes
-* **framer-scroller:** remove jank from scroller when opening ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
+- **framer-scroller:** remove jank from scroller when opening
+  ([c618bf2](https://github.com/ho-nl/m2-pwa/commit/c618bf290bd580fe5eb45663c44843dd751e00ed))
 ## [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)
 ### Bug Fixes
-* **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))
+- **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))
 ## [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)
 ### Bug Fixes
-* 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))
+- 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))
 ## [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)
 ### Bug Fixes
-* Accessibility, SEO ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
+- Accessibility, SEO
+  ([a258837](https://github.com/ho-nl/m2-pwa/commit/a258837476d94d20d33e13a4c4f950fff57f7dca))
 ## [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)
 ### Bug Fixes
-* height of scroller isn't correct ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
+- height of scroller isn't correct
+  ([8d847ad](https://github.com/ho-nl/m2-pwa/commit/8d847ad210cfe00bf88386912d97233402e16b81))
 # [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)
 ### Bug Fixes
-* **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))
-* **framer-scroller:** recursively find snapPoints for deeply nested children ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
-* **framer-scroller:** set the scrollTop when switching snap ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
-* make sure the overlay becomes visible, even if the overlay is scrolled ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
-* make sure the overlays are rendered correctly on mobile ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
-* make the headerHeight properly configurable ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
+- **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))
+- **framer-scroller:** recursively find snapPoints for deeply nested children
+  ([2203f00](https://github.com/ho-nl/m2-pwa/commit/2203f00a97bb4e4b381acad1d86b177105874d1f))
+- **framer-scroller:** set the scrollTop when switching snap
+  ([8bd35a2](https://github.com/ho-nl/m2-pwa/commit/8bd35a2ebf5d10b44d04048c6360c7ac770221cf))
+- make sure the overlay becomes visible, even if the overlay is scrolled
+  ([1738c98](https://github.com/ho-nl/m2-pwa/commit/1738c982ea84ec2b93daa824c4b8c86ab2a3f5ed))
+- make sure the overlays are rendered correctly on mobile
+  ([48f7050](https://github.com/ho-nl/m2-pwa/commit/48f705060e99b997f5b1db03ccc49f1051a1ed8f))
+- make the headerHeight properly configurable
+  ([c39c942](https://github.com/ho-nl/m2-pwa/commit/c39c942a62a9bb9687ea553be28e37fb49a6b065))
 ### Features
-* **framer-scroller-sheet:** created package replacing the framer-sheet package ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
-* **framer-scroller:** find the direction of the scroller and set proper values ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
-* **framer-scroller:** get the scrollSnapAlign from the element instead of the body ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
-* **framer-scroller:** provide promise with scrollTo ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
-* **framer-scroller:** split the grid functionality from the scroller ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
+- **framer-scroller-sheet:** created package replacing the framer-sheet package
+  ([f9f2e91](https://github.com/ho-nl/m2-pwa/commit/f9f2e9101191f5cb5c4514ceb9534ddeb2476763))
+- **framer-scroller:** find the direction of the scroller and set proper values
+  ([631e24c](https://github.com/ho-nl/m2-pwa/commit/631e24c5c7ff67b49f83390789e8dadcb07eca04))
+- **framer-scroller:** get the scrollSnapAlign from the element instead of the body
+  ([ec8c24e](https://github.com/ho-nl/m2-pwa/commit/ec8c24e6d457a3ed1c055b27d7b94be5ed4b6f2c))
+- **framer-scroller:** provide promise with scrollTo
+  ([cbe59d9](https://github.com/ho-nl/m2-pwa/commit/cbe59d9e753cc2ab76b2de048139e0319f08d035))
+- **framer-scroller:** split the grid functionality from the scroller
+  ([81307ea](https://github.com/ho-nl/m2-pwa/commit/81307ea2652bf31a1f94e8db72af4ee161bdca2e))
 ## [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)
 ### Bug Fixes
-* various accessibility improvements ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
+- various accessibility improvements
+  ([47481a9](https://github.com/ho-nl/m2-pwa/commit/47481a9a882ba87968de6dd797557b0b275d75fb))
 ## [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)
 ### Bug Fixes
-* spacing of title on category landing on mobile ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
+- spacing of title on category landing on mobile
+  ([8ed3550](https://github.com/ho-nl/m2-pwa/commit/8ed35502fd231d1d6a8e0a282f8961335d9dead3))
 # [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)
 ### Features
-* **nextjs:** upgraded to nextjs 12 ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
+- **nextjs:** upgraded to nextjs 12
+  ([9331bc8](https://github.com/ho-nl/m2-pwa/commit/9331bc801f6419522115cc47d291d49d608d5a90))
 # [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)
 ### Features
-* **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))
+- **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))
 ## [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)
 ### Bug Fixes
-* **framer-scroller:** dots should have a background ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
+- **framer-scroller:** dots should have a background
+  ([8f2e1a1](https://github.com/ho-nl/m2-pwa/commit/8f2e1a1ffc9de3369938fe2f9e9f25f592739d8d))
 ## [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)
 ### Bug Fixes
-* **framer-scroller:** pan snap does not work on mobile ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
+- **framer-scroller:** pan snap does not work on mobile
+  ([660f242](https://github.com/ho-nl/m2-pwa/commit/660f242a38558669fa896a74e14cafdd85069d57))
 ## [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)
 ### Bug Fixes
-* ignore example directories when publishing ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
-* versions ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
+- ignore example directories when publishing
+  ([620cbb2](https://github.com/ho-nl/m2-pwa/commit/620cbb2d8e68b727b8593e2e45702c4d12276d92))
+- versions
+  ([b8b306c](https://github.com/ho-nl/m2-pwa/commit/b8b306c8f3a13415e441d0593c638ae2a3731cd6))
 ## [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)
 **Note:** Version bump only for package @graphcommerce/framer-scroller
 # 0.2.0 (2021-09-27)
 ### Bug Fixes
-* **framer-scroller:** center the prev/next buttons on the gallery ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
-* **framer-scroller:** check if the ref exists instead of throwing an exception ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
-* **framer-slider:** prev/next buttons don't always show up correctly ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
-* make sure we can actually observe items ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
+- **framer-scroller:** center the prev/next buttons on the gallery
+  ([234dc37](https://github.com/ho-nl/m2-pwa/commit/234dc37fc46f723410e9a844bbcb33cfe5d8a588))
+- **framer-scroller:** check if the ref exists instead of throwing an exception
+  ([9cdfa0d](https://github.com/ho-nl/m2-pwa/commit/9cdfa0dd749c59159ce8f6f53dbabbcdddab049c))
+- **framer-slider:** prev/next buttons don't always show up correctly
+  ([ba2510e](https://github.com/ho-nl/m2-pwa/commit/ba2510ea659344a2d71957eed396f4e5ce536a8c))
+- make sure we can actually observe items
+  ([4767b2a](https://github.com/ho-nl/m2-pwa/commit/4767b2a1bb23fc6d2e445c10c96da0a666212c55))
 ### Features
-* **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller resizes ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
-* **framer-scroller:** implemented the scroller on all pages ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
-* **framer-scroller:** option to hide scrollbar ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
-* **framer-scroller:** package to implement scroll-snap handling with JS ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
-* **framer-scroller:** pagination dots ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
-* 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))
+- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
+  resizes
+  ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
+- **framer-scroller:** implemented the scroller on all pages
+  ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))
+- **framer-scroller:** option to hide scrollbar
+  ([f6a8329](https://github.com/ho-nl/m2-pwa/commit/f6a8329d2f761956a9d7bdc5243de336aa2e5ad4))
+- **framer-scroller:** package to implement scroll-snap handling with JS
+  ([b3a279f](https://github.com/ho-nl/m2-pwa/commit/b3a279f8b4acb2b9de99004efe0459c534786bdd))
+- **framer-scroller:** pagination dots
+  ([6a5557d](https://github.com/ho-nl/m2-pwa/commit/6a5557d10d08661662eb476c5fe2296b558c1cb5))
+- 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))
 # Change Log
@@ -292,8 +292,8 @@ All notable changes to this project will be documented in this file. See
 ### Features
-- **framer-scroller:** created an MotionImageAspect component to properly center
-  and handle scorller resizes
+- **framer-scroller:** created an MotionImageAspect component to properly center and handle scorller
+  resizes
   ([2eb117e](https://github.com/ho-nl/m2-pwa/commit/2eb117e6c135ea8e009c91f854e9f9ef8e7375c5))
 - **framer-scroller:** implemented the scroller on all pages
   ([73fb518](https://github.com/ho-nl/m2-pwa/commit/73fb518eff74edb2b3212e892b3d8cc2b088011b))

package/components/MotionImageAspect.tsx CHANGED Viewed

@@ -1,47 +1,7 @@
 import { Image, ImageProps } from '@graphcommerce/image'
-import { makeStyles } from '@material-ui/core'
-import clsx from 'clsx'
+import { Box } from '@mui/material'
 import { m } from 'framer-motion'
-import React, { forwardRef } from 'react'
-const useStyles = makeStyles(
-  {
-    root: {
-      position: 'relative',
-    },
-    picture: {
-      display: 'block',
-      '@supports (aspect-ratio: 1 / 1)': {
-        maxWidth: '99.6%',
-        maxHeight: '100%',
-        width: 'auto',
-        height: 'auto',
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: 'translate(-50%, -50%)',
-        '&:after': {
-          display: 'block',
-          content: '""',
-          minWidth: '100vw',
-        },
-      },
-      '@supports not (aspect-ratio: 1 / 1)': {
-        width: '100% !important',
-        height: '100% !important',
-      },
-    },
-    image: {
-      display: 'block',
-      '@supports not (aspect-ratio: 1 / 1)': {
-        objectFit: 'contain',
-      },
-    },
-  },
-  { name: 'MotionImageAspect' },
-)
+import { forwardRef } from 'react'
 export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
@@ -53,23 +13,57 @@ export type MotionImageAspectProps = Omit<ImageProps, 'layout' | 'unoptimized'>
  * problem when the layout is animated. Should be fixed in Safari 15
  */
 const MotionImageAspect = m(
-  forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => {
-    const classes = useStyles()
-    return (
-      <div className={classes.root}>
-        <Image
-          {...props}
-          layout='fill'
-          ref={ref}
-          className={clsx(classes.image, props.className)}
-          pictureProps={{
-            className: clsx(classes.picture, props.pictureProps?.className),
-            style: { ...props.style, aspectRatio: `${props.width} / ${props.height}` },
-          }}
-        />
-      </div>
-    )
-  }),
+  forwardRef<HTMLImageElement, MotionImageAspectProps>((props, ref) => (
+    <Box
+      className='MotionImageAspect'
+      sx={{
+        position: 'relative',
+        '& > picture': {
+          display: 'block',
+          '@supports (aspect-ratio: 1 / 1)': {
+            maxWidth: '99.6%',
+            maxHeight: '100%',
+            width: 'auto',
+            height: 'auto',
+            position: 'absolute',
+            top: '50%',
+            left: '50%',
+            transform: 'translate(-50%, -50%)',
+            '&:after': {
+              display: 'block',
+              content: '""',
+              minWidth: '100vw',
+            },
+          },
+          '@supports not (aspect-ratio: 1 / 1)': {
+            width: '100% !important',
+            height: '100% !important',
+          },
+        },
+        '& > img': {
+          display: 'block',
+          '@supports not (aspect-ratio: 1 / 1)': {
+            objectFit: 'contain',
+          },
+        },
+      }}
+    >
+      <Image
+        {...props}
+        layout='fill'
+        ref={ref}
+        className={props.className}
+        pictureProps={{
+          ...props.pictureProps,
+          className: props.pictureProps?.className,
+          style: { ...props.style, aspectRatio: `${props.width} / ${props.height}` },
+        }}
+      />
+    </Box>
+  )),
 )
 MotionImageAspect.displayName = 'MotionImageAspect'

package/components/Scroller.tsx CHANGED Viewed

@@ -1,11 +1,18 @@
+import { styled, SxProps, Theme } from '@mui/material'
 import { m } from 'framer-motion'
 import { forwardRef } from 'react'
 import { ScrollableProps, useScroller } from '../hooks/useScroller'
-const Scroller = forwardRef<HTMLDivElement, ScrollableProps>((props, forwardedRef) => {
-  const scroller = useScroller<'div'>({ grid: true, ...props }, forwardedRef)
-  return <m.div {...scroller} />
-})
+const ScrollerDiv = styled(m.div)({})
+const Scroller = forwardRef<HTMLDivElement, ScrollableProps & { sx?: SxProps<Theme> }>(
+  (props, forwardedRef) => {
+    const { sx = [], ...scrollerProps } = props
+    const scroller = useScroller<'div'>({ grid: true, ...scrollerProps }, forwardedRef)
+    return <ScrollerDiv {...scroller} sx={[scroller.sx, ...(Array.isArray(sx) ? sx : [sx])]} />
+  },
+)
 Scroller.displayName = 'Scroller'
 export default Scroller

package/components/ScrollerButton.tsx CHANGED Viewed

@@ -1,58 +1,44 @@
-import { UseStyles } from '@graphcommerce/next-ui'
-import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
-import { m, useMotionValue, useSpring } from 'framer-motion'
+import { useElementScroll } from '@graphcommerce/framer-utils'
+import { Fab, FabProps } from '@mui/material'
+import { m, useSpring, useTransform } from 'framer-motion'
 import React from 'react'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
-import { useWatchItems } from '../hooks/useWatchItems'
 import { SnapPositionDirection } from '../types'
-const useStyles = makeStyles((theme: Theme) => ({
-  root: {
-    [theme.breakpoints.down('xs')]: {
-      display: 'none',
-    },
-  },
-}))
 export type ScrollerButtonProps = {
   direction: SnapPositionDirection
-} & FabProps &
-  UseStyles<typeof useStyles>
+} & FabProps
 const ScrollerFab = m(
   React.forwardRef<HTMLDivElement, ScrollerButtonProps>((props, ref) => {
-    const { direction, ...buttonProps } = props
-    const classes = useStyles(buttonProps)
-    const end = direction === 'right' || direction === 'down'
+    const { direction, sx = [], ...buttonProps } = props
-    const { getSnapPosition } = useScrollerContext()
+    const { getSnapPosition, scrollerRef } = useScrollerContext()
     const scrollTo = useScrollTo()
     const handleClick = () => scrollTo(getSnapPosition(direction))
-    const visibility = useMotionValue(0)
-    useWatchItems((_, itemArr) => {
-      const itemVisbility = end
-        ? itemArr[itemArr.length - 1].visibility.get()
-        : itemArr[0].visibility.get()
+    const { xProgress, yProgress, xMax, yMax } = useElementScroll(scrollerRef, 1)
-      // If we're half way past the first/last item we show/hide the button
-      const value = (!end && itemVisbility > 0.5) || (end && itemVisbility > 0.5) ? 0 : 1
-      if (visibility.get() !== value) visibility.set(value)
-    })
-    const scale = useSpring(visibility)
+    const progress = useTransform<number, number>(
+      [xProgress, yProgress, xMax, yMax],
+      ([x, y, xM, yM]) => {
+        if (xM === 0 && yM === 0) return 0
+        if (direction === 'right' || direction === 'down') return x * y === 1 ? 0 : 1
+        return x * y === 0 ? 0 : 1
+      },
+    )
+    const scale = useSpring(progress)
     return (
-      <m.div ref={ref} style={{ scale, opacity: scale }}>
+      <m.div ref={ref} style={{ scale, opacity: scale, willChange: 'scale, opacity', zIndex: 1 }}>
         <Fab
           type='button'
           {...buttonProps}
           onClick={handleClick}
-          classes={{ ...classes, ...buttonProps.classes }}
           aria-label={direction}
+          size='small'
+          sx={[{ display: { xs: 'none', md: 'flex' } }, ...(Array.isArray(sx) ? sx : [sx])]}
         />
       </m.div>
     )

package/components/ScrollerDots.tsx CHANGED Viewed

@@ -1,50 +1,45 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { UseStyles } from '@graphcommerce/next-ui'
-import { Fab, FabProps, makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import { HTMLMotionProps, m } from 'framer-motion'
+import { extendableComponent } from '@graphcommerce/next-ui/Styles'
+import { Fab, FabProps, styled, SxProps, Theme } from '@mui/material'
+import { m } from 'framer-motion'
 import React from 'react'
 import { useScrollTo } from '../hooks/useScrollTo'
 import { useScrollerContext } from '../hooks/useScrollerContext'
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    dots: {
-      width: 'fit-content',
-      display: 'grid',
-      gridAutoFlow: 'column',
-      padding: `0 6px`,
-      borderRadius: '99em',
-    },
-    dot: {
-      boxShadow: 'none',
-      background: 'transparent',
-    },
-    circle: {
-      borderRadius: '99em',
-      width: 10,
-      height: 10,
-      background: theme.palette.text.primary,
-    },
-  }),
-  { name: 'ScrollerDots' },
-)
+const MotionBox = styled(m.div)({})
 export type DotsProps = {
   fabProps?: Omit<FabProps, 'onClick' | 'children'>
-} & HTMLMotionProps<'div'> &
-  UseStyles<typeof useStyles>
+  sx?: SxProps<Theme>
+}
+const componentName = 'ScrollerDots'
+const { classes } = extendableComponent(componentName, ['root', 'dot', 'circle'] as const)
 const ScrollerDots = m(
   React.forwardRef<HTMLDivElement, DotsProps>((props, ref) => {
-    const { fabProps, classes: _classes, ...containerProps } = props
-    const { dots, dot, circle, ...classes } = useStyles(props)
+    const { fabProps, sx = [], ...containerProps } = props
     const { items, getScrollSnapPositions } = useScrollerContext()
     const itemsArr = useMotionValueValue(items, (v) => v)
     const scrollTo = useScrollTo()
     return (
-      <m.div {...containerProps} className={clsx(dots, containerProps?.className)} ref={ref}>
+      <MotionBox
+        {...containerProps}
+        className={classes.root}
+        ref={ref}
+        sx={[
+          {
+            width: 'fit-content',
+            display: 'grid',
+            gridAutoFlow: 'column',
+            padding: `0 6px`,
+            borderRadius: '99em',
+          },
+          ...(Array.isArray(sx) ? sx : [sx]),
+        ]}
+      >
         {itemsArr.map((item, idx) => (
           <Fab
             // eslint-disable-next-line react/no-array-index-key
@@ -57,18 +52,29 @@ const ScrollerDots = m(
               // eslint-disable-next-line @typescript-eslint/no-floating-promises
               scrollTo({ x: positions.x[idx] ?? 0, y: positions.y[idx] ?? 0 })
             }}
-            className={clsx(dot, props.className)}
-            classes={classes}
+            className={classes.dot}
             aria-label={`img-${idx}`}
+            sx={{
+              boxShadow: 'none',
+              background: 'transparent',
+            }}
           >
-            <m.div className={circle} style={{ opacity: item.opacity }} />
+            <MotionBox
+              className={classes.circle}
+              sx={(theme) => ({
+                borderRadius: '99em',
+                width: 10,
+                height: 10,
+                background: theme.palette.text.primary,
+              })}
+              style={{ opacity: item.opacity }}
+            />
           </Fab>
         ))}
-      </m.div>
+      </MotionBox>
     )
   }),
 )
-ScrollerDots.displayName = 'ScrollerDots'
+ScrollerDots.displayName = componentName
 export default ScrollerDots

package/components/ScrollerPageCounter.tsx CHANGED Viewed

@@ -1,27 +1,18 @@
 import { useMotionValueValue } from '@graphcommerce/framer-utils'
-import { makeStyles, Theme } from '@material-ui/core'
-import clsx from 'clsx'
-import { m, MotionProps } from 'framer-motion'
+import { styled, SxProps, Theme } from '@mui/material'
+import { m } from 'framer-motion'
 import React, { useState } from 'react'
 import { useScrollerContext } from '../hooks/useScrollerContext'
 import { useWatchItems } from '../hooks/useWatchItems'
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    pageCounter: {
-      ...theme.typography.h4,
-    },
-  }),
-  { name: 'SliderPageCounter' },
-)
+const MotionDiv = styled(m.div)({})
-export type SliderPageCounterProps = MotionProps &
-  React.PropsWithoutRef<React.HTMLProps<HTMLDivElement>>
+export type SliderPageCounterProps = {
+  sx?: SxProps<Theme>
+}
 const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterProps>(
-  (props, ref) => {
-    const { className, ...divProps } = props
-    const classes = useStyles(props)
+  ({ sx = [] }, ref) => {
     const { items } = useScrollerContext()
     const [current, setCurrent] = useState(1)
@@ -37,9 +28,9 @@ const ScrollerPageCounter = React.forwardRef<HTMLDivElement, SliderPageCounterPr
     })
     return (
-      <m.div ref={ref} {...divProps} className={clsx(classes.pageCounter, className)}>
+      <MotionDiv ref={ref} sx={[{ typography: 'h4' }, ...(Array.isArray(sx) ? sx : [sx])]}>
         <span>{String(current).padStart(2, '0')}</span> — {String(count).padStart(2, '0')}
-      </m.div>
+      </MotionDiv>
     )
   },
 )

package/hooks/useScroller.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { useConstant, useElementScroll, useMotionValueValue } from '@graphcommerce/framer-utils'
-import { UseStyles, classesPicker } from '@graphcommerce/next-ui'
-import { makeStyles, Theme } from '@material-ui/core'
+import { extendableComponent } from '@graphcommerce/next-ui/Styles'
+import { SxProps, Theme } from '@mui/material'
 import {
   HTMLMotionProps,
   motionValue,
@@ -11,124 +11,29 @@ import {
   useTransform,
 } from 'framer-motion'
 import React, { ReactHTML, useState } from 'react'
-import { ScrollSnapProps } from '../types'
 import { isHTMLMousePointerEvent } from '../utils/isHTMLMousePointerEvent'
-import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
+import { scrollSnapTypeDirection, SnapTypeDirection } from '../utils/scrollSnapTypeDirection'
 import { useScrollerContext } from './useScrollerContext'
 import { useVelocitySnapTo } from './useVelocitySnapTo'
-const useStyles = makeStyles(
-  (theme: Theme) => ({
-    root: {
-      '& *': {
-        userSelect: 'none',
-        userDrag: 'none',
-      },
-    },
-    rootSmSnapDirNone: {
-      [theme.breakpoints.down('sm')]: {
-        overflow: 'hidden',
-        overscrollBehavior: 'auto',
-      },
-    },
-    rootMdSnapDirNone: {
-      [theme.breakpoints.up('md')]: {
-        overflow: 'hidden',
-        overscrollBehavior: 'auto',
-      },
-    },
-    rootSmSnapDirBlock: {
-      [theme.breakpoints.down('sm')]: {
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        overscrollBehaviorBlock: 'contain',
-      },
-    },
-    rootMdSnapDirBlock: {
-      [theme.breakpoints.up('md')]: {
-        overflowY: 'auto',
-        overflowX: 'hidden',
-        overscrollBehaviorBlock: 'contain',
-      },
-    },
-    rootSmSnapDirInline: {
-      [theme.breakpoints.down('sm')]: {
-        overflowX: 'auto',
-        overflowY: 'hidden',
-        overscrollBehaviorInline: 'contain',
-      },
-    },
-    rootMdSnapDirInline: {
-      [theme.breakpoints.up('md')]: {
-        overflowX: 'auto',
-        overflowY: 'hidden',
-        overscrollBehaviorInline: 'contain',
-      },
-    },
-    rootSmSnapDirBoth: {
-      [theme.breakpoints.down('sm')]: {
-        overflow: 'auto',
-        overscrollBehavior: 'contain',
-      },
-    },
-    rootMdSnapDirBoth: {
-      [theme.breakpoints.up('md')]: {
-        overflow: 'auto',
-        overscrollBehavior: 'contain',
-      },
-    },
-    rootSmGridDirBlock: ({ scrollSnapAlign, scrollSnapStop }) => ({
-      display: 'grid',
-      gridAutoFlow: 'row',
-      gridAutoColumns: `40%`,
-      '& > *': {
-        scrollSnapAlign,
-        scrollSnapStop,
-      },
-    }),
-    rootSmGridDirInline: ({ scrollSnapAlign, scrollSnapStop }) => ({
-      display: 'grid',
-      gridAutoFlow: 'column',
-      gridAutoRows: `40%`,
-      gridTemplateRows: 'auto',
-      '& > *': {
-        scrollSnapAlign,
-        scrollSnapStop,
-      },
-    }),
-    rootCanGrab: {
-      cursor: 'grab',
-    },
-    rootIsSnap: ({ scrollSnapTypeSm, scrollSnapTypeMd }: ScrollSnapProps) => ({
-      [theme.breakpoints.down('sm')]: {
-        scrollSnapType: scrollSnapTypeSm,
-      },
-      [theme.breakpoints.up('md')]: {
-        scrollSnapType: scrollSnapTypeMd,
-      },
-    }),
-    rootNoSnap: {
-      willChange: 'scroll-position',
-    },
-    rootIsPanning: {
-      cursor: 'grabbing !important',
-      '& > *': {
-        pointerEvents: 'none',
-      },
-    },
-    rootHideScrollbar: {
-      scrollbarWidth: 'none',
-      '&::-webkit-scrollbar': {
-        display: 'none',
-      },
-    },
-  }),
-  { name: 'Scroller' },
-)
+export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = HTMLMotionProps<TagName> & {
+  hideScrollbar?: boolean
+  grid?: boolean
+}
-export type ScrollableProps<TagName extends keyof ReactHTML = 'div'> = UseStyles<typeof useStyles> &
-  HTMLMotionProps<TagName> & { hideScrollbar?: boolean; grid?: boolean }
+type OwnerProps = {
+  smSnapDir: false | SnapTypeDirection
+  smGridDir: false | SnapTypeDirection
+  mdSnapDir: false | SnapTypeDirection
+  mdGridDir: false | SnapTypeDirection
+  isSnap: boolean
+  isPanning: boolean
+  hideScrollbar: boolean
+  canGrab: boolean
+}
+const name = 'Scroller' as const
+const parts = ['root'] as const
+const { withState } = extendableComponent<OwnerProps, typeof name, typeof parts>(name, parts)
 /** Make any HTML */
 export function useScroller<TagName extends keyof ReactHTML = 'div'>(
@@ -154,8 +59,6 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
   const isSnap = useMotionValueValue(snap, (v) => v)
-  const classes = useStyles(scrollSnap)
   const snapToVelocity = useVelocitySnapTo(scrollerRef)
   const [isPanning, setPanning] = useState(false)
@@ -213,20 +116,161 @@ export function useScroller<TagName extends keyof ReactHTML = 'div'>(
   const smSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
   const mdSnapDir = scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)
-  const smGridDir = grid && smSnapDir
-  const mdGridDir = grid && mdSnapDir
-  const className = classesPicker(classes, {
+  const classes = withState({
     smSnapDir,
-    smGridDir,
+    smGridDir: grid && smSnapDir,
     mdSnapDir,
-    mdGridDir,
+    mdGridDir: grid && mdSnapDir,
     isSnap,
-    noSnap: !isSnap,
     isPanning,
     hideScrollbar,
     canGrab,
-  })('root', props.className)
+  })
-  return { ...divProps, ref, onPanStart, onPan, onPanEnd, children, ...className }
+  const sx: SxProps<Theme> = (theme) => ({
+    '& *': {
+      userSelect: 'none',
+      userDrag: 'none',
+      WebkitUserDrag: 'none',
+    },
+    // sm Snap Direction
+    '&.smSnapDirNone': {
+      [theme.breakpoints.down('md')]: {
+        overflow: 'hidden',
+        overscrollBehavior: 'auto',
+      },
+    },
+    '&.smSnapDirBlock': {
+      [theme.breakpoints.down('md')]: {
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        overscrollBehaviorBlock: 'contain',
+      },
+    },
+    '&.smSnapDirInline': {
+      [theme.breakpoints.down('md')]: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        overscrollBehaviorInline: 'contain',
+      },
+    },
+    '&.smSnapDirBoth': {
+      [theme.breakpoints.down('md')]: {
+        overflow: 'auto',
+        overscrollBehavior: 'contain',
+      },
+    },
+    // md Snap Direction
+    '&.mdSnapDirNone': {
+      [theme.breakpoints.up('md')]: {
+        overflow: 'hidden',
+        overscrollBehavior: 'auto',
+      },
+    },
+    '&.mdSnapDirBlock': {
+      [theme.breakpoints.up('md')]: {
+        overflowY: 'auto',
+        overflowX: 'hidden',
+        overscrollBehaviorBlock: 'contain',
+      },
+    },
+    '&.mdSnapDirInline': {
+      [theme.breakpoints.up('md')]: {
+        overflowX: 'auto',
+        overflowY: 'hidden',
+        overscrollBehaviorInline: 'contain',
+      },
+    },
+    '&.mdSnapDirBoth': {
+      [theme.breakpoints.up('md')]: {
+        overflow: 'auto',
+        overscrollBehavior: 'contain',
+      },
+    },
+    '&.smGridDirBlock': {
+      [theme.breakpoints.down('md')]: {
+        display: 'grid',
+        gridAutoFlow: 'row',
+        gridAutoColumns: `40%`,
+        '& > *': {
+          scrollSnapAlign: scrollSnap.scrollSnapAlign,
+          scrollSnapStop: scrollSnap.scrollSnapStop,
+        },
+      },
+    },
+    '&.smGridDirInline': {
+      [theme.breakpoints.down('md')]: {
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridAutoRows: `40%`,
+        gridTemplateRows: 'auto',
+        '& > *': {
+          scrollSnapAlign: scrollSnap.scrollSnapAlign,
+          scrollSnapStop: scrollSnap.scrollSnapStop,
+        },
+      },
+    },
+    '&.mdGridDirBlock': {
+      [theme.breakpoints.up('md')]: {
+        display: 'grid',
+        gridAutoFlow: 'row',
+        gridAutoColumns: `40%`,
+        '& > *': {
+          scrollSnapAlign: scrollSnap.scrollSnapAlign,
+          scrollSnapStop: scrollSnap.scrollSnapStop,
+        },
+      },
+    },
+    '&.mdGridDirInline': {
+      [theme.breakpoints.up('md')]: {
+        display: 'grid',
+        gridAutoFlow: 'column',
+        gridAutoRows: `40%`,
+        gridTemplateRows: 'auto',
+        '& > *': {
+          scrollSnapAlign: scrollSnap.scrollSnapAlign,
+          scrollSnapStop: scrollSnap.scrollSnapStop,
+        },
+      },
+    },
+    '&.canGrab': { cursor: 'grab' },
+    '&.isSnap': {
+      [theme.breakpoints.down('md')]: {
+        scrollSnapType: scrollSnap.scrollSnapTypeSm,
+      },
+      [theme.breakpoints.up('md')]: {
+        scrollSnapType: scrollSnap.scrollSnapTypeMd,
+      },
+    },
+    '&:not(.isSnap)': {
+      willChange: 'scroll-position',
+    },
+    '&.isPanning': {
+      cursor: 'grabbing !important',
+      '& > *': {
+        pointerEvents: 'none',
+      },
+    },
+    '&.hideScrollbar': {
+      scrollbarWidth: 'none',
+      '&::-webkit-scrollbar': {
+        display: 'none',
+      },
+    },
+  })
+  return {
+    ...divProps,
+    ref,
+    onPanStart,
+    onPan,
+    onPanEnd,
+    children,
+    className: `${classes.root} ${props.className}`,
+    sx,
+  }
 }

package/hooks/useVelocitySnapTo.ts CHANGED Viewed

@@ -1,4 +1,4 @@
-import { Theme, useMediaQuery } from '@material-ui/core'
+import { Theme, useMediaQuery } from '@mui/material'
 import { PanInfo } from 'framer-motion'
 import { inertia, InertiaOptions } from 'popmotion'
 import { scrollSnapTypeDirection } from '../utils/scrollSnapTypeDirection'
@@ -21,7 +21,7 @@ export const useVelocitySnapTo = (
 ) => {
   const { disableSnap, enableSnap, register, getScrollSnapPositions, scrollSnap } =
     useScrollerContext()
-  const direction = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'))
+  const direction = useMediaQuery<Theme>((theme) => theme.breakpoints.down('md'))
     ? scrollSnapTypeDirection(scrollSnap.scrollSnapTypeSm)
     : scrollSnapTypeDirection(scrollSnap.scrollSnapTypeMd)

package/index.ts CHANGED Viewed

@@ -18,6 +18,6 @@ export * from './components/ScrollerProvider'
 export { default as ScrollerProvider } from './components/ScrollerProvider'
 export * from './hooks/useScrollerContext'
-export * from './hooks/useScroller'
+// export * from './hooks/useScroller'
 export * from './hooks/useScrollTo'
 export * from './hooks/useWatchItems'

package/package.json CHANGED Viewed

@@ -1,14 +1,13 @@
 {
   "name": "@graphcommerce/framer-scroller",
-  "version": "1.2.12",
+  "homepage": "https://www.graphcommerce.org/",
+  "repository": "github:graphcommerce-org/graphcommerce",
+  "version": "2.0.2",
   "sideEffects": false,
   "scripts": {
     "dev": "tsc -W"
   },
   "prettier": "@graphcommerce/prettier-config-pwa",
-  "browserslist": [
-    "extends @graphcommerce/browserslist-config-pwa"
-  ],
   "eslintConfig": {
     "extends": "@graphcommerce/eslint-config-pwa",
     "parserOptions": {
@@ -16,25 +15,23 @@
     }
   },
   "dependencies": {
-    "@graphcommerce/framer-utils": "^2.103.21",
-    "@graphcommerce/image": "^2.105.13",
-    "@graphcommerce/next-ui": "^3.25.3",
-    "@material-ui/core": "^4.12.3",
-    "popmotion": "11.0.3"
+    "@graphcommerce/framer-utils": "^3.0.2",
+    "@graphcommerce/image": "^3.0.2",
+    "@graphcommerce/next-ui": "^4.1.1"
   },
   "devDependencies": {
-    "@graphcommerce/browserslist-config-pwa": "^3.0.3",
-    "@graphcommerce/eslint-config-pwa": "^3.1.10",
-    "@graphcommerce/prettier-config-pwa": "^3.0.5",
-    "@graphcommerce/typescript-config-pwa": "^3.1.2",
-    "@playwright/test": "^1.17.1"
+    "@graphcommerce/eslint-config-pwa": "^4.0.2",
+    "@graphcommerce/prettier-config-pwa": "^4.0.1",
+    "@graphcommerce/typescript-config-pwa": "^4.0.1",
+    "@playwright/test": "^1.19.1"
   },
   "peerDependencies": {
-    "clsx": "^1.1.1",
-    "framer-motion": "^5.4.5",
+    "@mui/material": "^5.4.1",
+    "@lingui/macro": "^3.13.2",
+    "framer-motion": "^6.2.4",
+    "next": "^12.0.10",
+    "popmotion": "11.0.3",
     "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "type-fest": "^2.8.0"
-  },
-  "gitHead": "41e42c8cd6f565ab0cbba81a1954a0041dc46768"
+    "react-dom": "^17.0.2"
+  }
 }

package/utils/scrollSnapTypeDirection.ts CHANGED Viewed

@@ -1,6 +1,6 @@
 import { ScrollSnapType } from '../types'
-type SnapTypeDirection = 'block' | 'inline' | 'both' | 'inline'
+export type SnapTypeDirection = 'block' | 'inline' | 'both' | 'inline'
 export function scrollSnapTypeDirection(scrollSnapType: ScrollSnapType): SnapTypeDirection {
   let snapDir = scrollSnapType.split(' ')[0]
   snapDir = snapDir.replace('y', 'block')