diff --git a/README.md b/README.md index f6b69f9..e4e6a3a 100644 --- a/README.md +++ b/README.md @@ -50,7 +50,7 @@ import { useEmblaCarousel } from 'embla-carousel-react' import { setupWheelGestures } from 'embla-carousel-wheel-gestures' const EmblaCarouselComponent = ({ children }) => { - const [emblaRef, embla] = useEmblaCarousel({ loop: false }) + const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true }) useEffect(() => embla && setupWheelGestures(embla), [embla]) diff --git a/docs/react/package.json b/docs/react/package.json index 3c7ce11..8fd20f9 100644 --- a/docs/react/package.json +++ b/docs/react/package.json @@ -11,8 +11,8 @@ "dependencies": { "@types/react": "^17.0.3", "@types/react-dom": "^17.0.3", - "embla-carousel": "^4.5.0", - "embla-carousel-wheel-gestures": "^1.1.1", + "embla-carousel-react": "^6.0.1", + "embla-carousel-wheel-gestures": "^1.2.0", "react": "^17.0.2", "react-dom": "^17.0.2" }, diff --git a/docs/react/src/js/EmblaCarousel.tsx b/docs/react/src/js/EmblaCarousel.tsx index a785a4d..3033ffb 100644 --- a/docs/react/src/js/EmblaCarousel.tsx +++ b/docs/react/src/js/EmblaCarousel.tsx @@ -1,11 +1,11 @@ +import useEmblaCarousel from 'embla-carousel-react' import { setupWheelGestures } from 'embla-carousel-wheel-gestures' -import { useEmblaCarousel } from 'embla-carousel/react' import React, { useCallback, useEffect, useState } from 'react' import { DotButton, NextButton, PrevButton } from './EmblaCarouselButtons' const EmblaCarouselComponent = ({ children }: { children: React.ReactNode }) => { - const [emblaRef, embla] = useEmblaCarousel({ loop: false }) + const [emblaRef, embla] = useEmblaCarousel({ loop: false, skipSnaps: true }) const [prevBtnEnabled, setPrevBtnEnabled] = useState(false) const [nextBtnEnabled, setNextBtnEnabled] = useState(false) const [selectedIndex, setSelectedIndex] = useState(0) diff --git a/docs/vanilla/package.json b/docs/vanilla/package.json index 07cd9eb..ada522b 100644 --- a/docs/vanilla/package.json +++ b/docs/vanilla/package.json @@ -9,8 +9,8 @@ "build": "parcel build index.html" }, "dependencies": { - "embla-carousel": "^4.5.0", - "embla-carousel-wheel-gestures": "^1.1.1", + "embla-carousel": "^6.0.1", + "embla-carousel-wheel-gestures": "^1.2.0", "events-polyfill": "^2.1.2", "core-js": "^3.11.1" }, diff --git a/docs/vanilla/src/js/index.ts b/docs/vanilla/src/js/index.ts index 1c7517e..0c6a27b 100644 --- a/docs/vanilla/src/js/index.ts +++ b/docs/vanilla/src/js/index.ts @@ -24,6 +24,7 @@ const radioButtonsArray = [].slice.call(radioButtons) const embla = EmblaCarousel(viewPort as HTMLElement, { loop: false, + skipSnaps: true, }) const dotsArray = generateDotBtns(dots, embla) diff --git a/embla-carousel-wheel-gestures/package.json b/embla-carousel-wheel-gestures/package.json index a5c29f5..05473a4 100644 --- a/embla-carousel-wheel-gestures/package.json +++ b/embla-carousel-wheel-gestures/package.json @@ -1,7 +1,7 @@ { "name": "embla-carousel-wheel-gestures", "private": false, - "version": "1.1.1", + "version": "1.2.0", "description": "wheel gestures for embla carousel", "main": "dist/index.js", "module": "dist/embla-carousel-wheel-gestures.esm.js", @@ -48,7 +48,7 @@ }, "homepage": "https://github.com/xiel/embla-carousel-wheel-gestures#readme", "peerDependencies": { - "embla-carousel": "^4.5.0" + "embla-carousel": "^6.0.1" }, "dependencies": { "wheel-gestures": "^2.2.5" @@ -57,7 +57,7 @@ "@testing-library/react": "^11.2.6", "@types/jest": "^26.0.23", "bundlewatch": "^0.3.2", - "embla-carousel": "^4.5.0", + "embla-carousel": "^6.0.1", "eslint-plugin-import": "^2.22.1", "eslint-plugin-react": "^7.23.2", "eslint-plugin-react-app": "^6.2.2", diff --git a/embla-carousel-wheel-gestures/src/setupWheelGestures.ts b/embla-carousel-wheel-gestures/src/setupWheelGestures.ts index 927d1b9..cfae1fd 100644 --- a/embla-carousel-wheel-gestures/src/setupWheelGestures.ts +++ b/embla-carousel-wheel-gestures/src/setupWheelGestures.ts @@ -1,7 +1,11 @@ import { EmblaCarouselType } from 'embla-carousel' import WheelGestures, { WheelEventState } from 'wheel-gestures' -type TEmblaCarousel = Pick +type GetEngineFn = EmblaCarouselType['internalEngine'] +type TEmblaCarousel = + | Pick + // Backwards compatibility for embla-carousel v4 & v5. Can be removed in next major version + | (Pick & { dangerouslyGetEngine: GetEngineFn }) interface Options { wheelDraggingClass?: string @@ -22,7 +26,7 @@ export function setupWheelGestures(embla: TEmblaCarousel, { wheelDraggingClass = embla.on('reInit', reInit) embla.on('destroy', cleanup) - const engine = embla.dangerouslyGetEngine() + const engine = 'internalEngine' in embla ? embla.internalEngine() : embla.dangerouslyGetEngine() const targetNode = embla.containerNode().parentNode as Element const wheelGestures = WheelGestures({ preventWheelAction: engine.options.axis, diff --git a/package.json b/package.json index 14fbaf1..dc49ccb 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,9 @@ { "name": "embla-carousel-wheel-gestures-workspace", - "workspaces": ["embla-carousel-wheel-gestures", "docs/*"], + "workspaces": [ + "embla-carousel-wheel-gestures", + "docs/*" + ], "version": "0.0.0", "private": true, "scripts": { @@ -12,5 +15,6 @@ "description": "workspace for embla-carousel-wheel-gestures", "repository": "git@github.com:xiel/embla-carousel-wheel-gestures.git", "author": "Felix Leupold ", - "license": "MIT" + "license": "MIT", + "dependencies": {} } diff --git a/yarn.lock b/yarn.lock index b971117..c81717a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2401,9 +2401,9 @@ caniuse-api@^3.0.0: lodash.uniq "^4.5.0" caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001219: - version "1.0.30001228" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001228.tgz#bfdc5942cd3326fa51ee0b42fbef4da9d492a7fa" - integrity sha512-QQmLOGJ3DEgokHbMSA8cj2a+geXqmnpyOFT0lhQV6P3/YOJvGDEwoedcwxEQ30gJIwIIunHIicunJ2rzK5gB2A== + version "1.0.30001280" + resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001280.tgz" + integrity sha512-kFXwYvHe5rix25uwueBxC569o53J6TpnGu0BEEn+6Lhl2vsnAumRFWEBhDft1fwyo6m1r4i+RqA4+163FpeFcA== capture-exit@^2.0.0: version "2.0.0" @@ -3326,10 +3326,17 @@ elliptic@^6.0.0, elliptic@^6.5.2: minimalistic-assert "^1.0.1" minimalistic-crypto-utils "^1.0.1" -embla-carousel@^4.5.0: - version "4.5.0" - resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-4.5.0.tgz#ac8a4cbf34f97a8ad5f7ae9caf58400fe92f1d7f" - integrity sha512-Y154DYESgzau+eIUH1hu4FNYRQmSFdzIr0dVE6Dhqv3IILCTLVcMmDosz5D0GpAd1jJDI1r0WbOBGBonA6wirw== +embla-carousel-react@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/embla-carousel-react/-/embla-carousel-react-6.0.1.tgz#4a7d75860dc700bf7eb688ae5daa7a901d62fbb0" + integrity sha512-pNtxD1v90E4hIeNwolmmde3YcZEfFgV4xfZjiEjsI2feVDMmWWFEJC2nczsW2wruuaKQk5kPpe3M6m31T/p14Q== + dependencies: + embla-carousel "6.0.1" + +embla-carousel@6.0.1, embla-carousel@^6.0.1: + version "6.0.1" + resolved "https://registry.yarnpkg.com/embla-carousel/-/embla-carousel-6.0.1.tgz#1974d64ad18a93963ba4c3532ae24fc18ec6562d" + integrity sha512-jz+7AqMOt+v6Ryi8jWVG4rK0rkqr5VunuNd/boGQb2z6lebtJSVR2VmKit3uQV9DkIPp92I9ZydiTYRquk9QUQ== emoji-regex@^7.0.1, emoji-regex@^7.0.2: version "7.0.3"