yet-another-react-lightbox 3.21.9 → 3.23.0

package/dist/index.d.ts

@@ -224,7 +224,7 @@ declare enum SwipeState {
     ANIMATION = 3
 }
 
-declare function usePointerSwipe<T extends Element = Element>(subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, pullUpEnabled: boolean, pullDownEnabled: boolean, onPullStart: () => void, onPullProgress: (offset: number) => void, onPullFinish: (offset: number, duration: number) => void, onPullCancel: (offset: number) => void): void;
+declare function usePointerSwipe<T extends Element = Element>({ disableSwipeNavigation }: ControllerSettings, subscribeSensors: UseSensors<T>["subscribeSensors"], isSwipeValid: (offset: number) => boolean, containerWidth: number, swipeAnimationDuration: number, onSwipeStart: () => void, onSwipeProgress: (offset: number) => void, onSwipeFinish: (offset: number, duration: number) => void, onSwipeCancel: (offset: number) => void, pullUpEnabled: boolean, pullDownEnabled: boolean, onPullStart: () => void, onPullProgress: (offset: number) => void, onPullFinish: (offset: number, duration: number) => void, onPullCancel: (offset: number) => void): void;
 
 /**
  * Prevent default effects of the wheel events:

package/dist/index.js

@@ -156,6 +156,7 @@ const LightboxDefaultProps = {
         closeOnBackdropClick: false,
         preventDefaultWheelX: true,
         preventDefaultWheelY: false,
+        disableSwipeNavigation: false,
     },
     portal: {},
     noScroll: {
@@ -316,7 +317,7 @@ function reducer(state, action) {
             const globalIndex = state.globalIndex + increment;
             const currentIndex = getSlideIndex(globalIndex, slides.length);
             const currentSlide = getSlideIfPresent(slides, currentIndex);
-            const animation = increment || action.duration
+            const animation = increment || action.duration !== undefined
                 ? {
                     increment,
                     duration: action.duration,
@@ -719,7 +720,7 @@ var Gesture;
     Gesture[Gesture["PULL"] = 2] = "PULL";
 })(Gesture || (Gesture = {}));
 const SWIPE_THRESHOLD = 30;
-function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, pullUpEnabled, pullDownEnabled, onPullStart, onPullProgress, onPullFinish, onPullCancel) {
+function usePointerSwipe({ disableSwipeNavigation }, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel, pullUpEnabled, pullDownEnabled, onPullStart, onPullProgress, onPullFinish, onPullCancel) {
     const offset = React.useRef(0);
     const pointers = React.useRef([]);
     const activePointer = React.useRef(undefined);
@@ -791,8 +792,10 @@ function usePointerSwipe(subscribeSensors, isSwipeValid, containerWidth, swipeAn
                     gesture.current = newGesture;
                 };
                 if (Math.abs(deltaX) > Math.abs(deltaY) && Math.abs(deltaX) > SWIPE_THRESHOLD && isSwipeValid(deltaX)) {
-                    startGesture(Gesture.SWIPE);
-                    onSwipeStart();
+                    if (!disableSwipeNavigation) {
+                        startGesture(Gesture.SWIPE);
+                        onSwipeStart();
+                    }
                 }
                 else if (Math.abs(deltaY) > Math.abs(deltaX) && exceedsPullThreshold(deltaY, SWIPE_THRESHOLD)) {
                     startGesture(Gesture.PULL);
@@ -1145,7 +1148,7 @@ function Controller({ children, ...props }) {
         (offset) => pull(offset),
         (offset) => pull(offset, true),
     ];
-    usePointerSwipe(...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
+    usePointerSwipe(controller, ...swipeParams, closeOnPullUp, closeOnPullDown, ...pullParams);
     useWheelSwipe(swipeState, ...swipeParams);
     const focusOnMount = useEventCallback(() => {
         if (controller.focus &&
@@ -1205,7 +1208,7 @@ function Controller({ children, ...props }) {
                 : null),
             ...(controller.touchAction !== "none" ? { [cssVar("controller_touch_action")]: controller.touchAction } : null),
             ...styles.container,
-        }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
+        }, ...(controller.aria ? { role: "region", "aria-live": "polite", "aria-roledescription": "carousel" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
         children, (_a = render.controls) === null || _a === void 0 ? void 0 :
         _a.call(render)))));
 }
@@ -1253,7 +1256,7 @@ function CarouselSlide({ slide, offset }) {
             close();
         }
     };
-    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), !offscreen && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), ...makeInertWhen(offscreen), onClick: handleBackdropClick, style: style }, renderSlide()));
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), !offscreen && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), ...makeInertWhen(offscreen), onClick: handleBackdropClick, style: style, role: "region", "aria-roledescription": "slide" }, renderSlide()));
 }
 function Placeholder() {
     const style = useLightboxProps().styles.slide;
@@ -1469,7 +1472,7 @@ function Portal({ children, animation, styles, className, on, portal, close }) {
         }
     }, [handleEnter, handleCleanup]);
     return mounted
-        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), role: "presentation", "aria-live": "polite", style: {
+        ? createPortal(React.createElement(LightboxRoot, { ref: handleRef, className: clsx(className, cssClass(cssPrefix$1()), cssClass(CLASS_NO_SCROLL_PADDING), visible && cssClass(cssPrefix$1("open"))), "aria-modal": true, role: "dialog", "aria-live": "polite", "aria-roledescription": "lightbox", style: {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
                     ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),

package/dist/plugins/thumbnails/index.js

@@ -109,8 +109,8 @@ function ThumbnailsTrack({ visible, containerRef }) {
     useKeyboardNavigation(subscribeSensors);
     const thumbnails = useThumbnailsProps();
     const { position, width, height, border, borderStyle, borderColor, borderRadius, padding, gap, vignette } = thumbnails;
+    const offset = ((animation === null || animation === void 0 ? void 0 : animation.duration) !== undefined && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
     const animationDuration = (animation === null || animation === void 0 ? void 0 : animation.duration) || 0;
-    const offset = (animationDuration > 0 && (animation === null || animation === void 0 ? void 0 : animation.increment)) || 0;
     const { prepareAnimation } = useAnimation(track, (snapshot) => ({
         keyframes: isHorizontal(position)
             ? [

package/dist/plugins/zoom/index.d.ts

@@ -14,9 +14,9 @@ declare module "yet-another-react-lightbox" {
             maxZoomPixelRatio?: number;
             /** zoom-in multiplier */
             zoomInMultiplier?: number;
-            /** double-tap maximum time delay */
+            /** @deprecated - double-tap maximum time delay */
             doubleTapDelay?: number;
-            /** double-click maximum time delay */
+            /** @deprecated - double-click maximum time delay */
             doubleClickDelay?: number;
             /** maximum number of zoom-in stops via double-click or double-tap */
             doubleClickMaxStops?: number;

package/dist/types.d.ts

@@ -240,6 +240,8 @@ interface ControllerSettings {
     preventDefaultWheelX: boolean;
     /** if `true`, prevent default for vertical wheel scroll events (for internal use only) */
     preventDefaultWheelY: boolean;
+    /** if `true`, disable slide change on pointer swipe / drag */
+    disableSwipeNavigation: boolean;
 }
 /** Lightbox controller ref */
 interface ControllerRef {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.21.9",
+  "version": "3.23.0",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",