yet-another-react-lightbox 2.2.2 → 2.2.4

package/dist/core/components/IconButton.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "aria-label"> & {
+export type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "aria-label"> & {
     label: string;
     icon: React.ElementType;
     renderIcon?: () => React.ReactNode;

package/dist/core/components/ImageSlide.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ImageFit, Render, SlideImage } from "../../types.js";
 import { ContainerRect } from "../hooks/index.js";
-export declare type ImageSlideProps = {
+export type ImageSlideProps = {
     slide: SlideImage;
     offset?: number;
     render?: Render;

package/dist/core/consts.d.ts

@@ -16,7 +16,7 @@ export declare const SLIDE_STATUS_PLAYING = "playing";
 export declare const SLIDE_STATUS_ERROR = "error";
 export declare const SLIDE_STATUS_COMPLETE = "complete";
 export declare const SLIDE_STATUS_PLACEHOLDER = "placeholder";
-export declare type SlideStatus = typeof SLIDE_STATUS_LOADING | typeof SLIDE_STATUS_PLAYING | typeof SLIDE_STATUS_ERROR | typeof SLIDE_STATUS_COMPLETE;
+export type SlideStatus = typeof SLIDE_STATUS_LOADING | typeof SLIDE_STATUS_PLAYING | typeof SLIDE_STATUS_ERROR | typeof SLIDE_STATUS_COMPLETE;
 export declare const activeSlideStatus: (status: SlideStatus) => string;
 export declare const ACTIVE_SLIDE_LOADING: string;
 export declare const ACTIVE_SLIDE_PLAYING: string;

package/dist/core/contexts/Events.d.ts

@@ -1,9 +1,9 @@
 import * as React from "react";
-export declare type Callback = (event?: unknown) => void;
-export declare type Subscribe = (topic: string, callback: Callback) => () => void;
-export declare type Unsubscribe = (topic: string, callback: Callback) => void;
-export declare type Publish = (topic: string, event?: unknown) => void;
-export declare type EventsContextType = {
+export type Callback = (event?: unknown) => void;
+export type Subscribe = (topic: string, callback: Callback) => () => void;
+export type Unsubscribe = (topic: string, callback: Callback) => void;
+export type Publish = (topic: string, event?: unknown) => void;
+export type EventsContextType = {
     subscribe: Subscribe;
     unsubscribe: Unsubscribe;
     publish: Publish;

package/dist/core/contexts/LightboxState.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
-export declare type LightboxState = {
+export type LightboxState = {
     currentIndex: number;
     globalIndex: number;
     animationDuration: number;
 };
-declare type LightboxStateAction = {
+type LightboxStateAction = {
     increment?: number;
     animationDuration: number;
 };
@@ -12,7 +12,7 @@ export declare const useLightboxState: () => {
     state: LightboxState;
     dispatch: React.Dispatch<LightboxStateAction>;
 };
-declare type LightboxStateProviderProps = React.PropsWithChildren<{
+type LightboxStateProviderProps = React.PropsWithChildren<{
     slidesCount: number;
     initialIndex: number;
 }>;

package/dist/core/contexts/Timeouts.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare type TimeoutsContextType = {
+export type TimeoutsContextType = {
     setTimeout: (fn: () => void, delay?: number) => number;
     clearTimeout: (id?: number) => void;
 };

package/dist/core/hooks/useContainerRect.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-export declare type ContainerRect = {
+export type ContainerRect = {
     width: number;
     height: number;
 };

package/dist/core/hooks/useSensors.d.ts

@@ -1,13 +1,13 @@
 import * as React from "react";
-export declare type PointerEventType = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel";
-export declare type KeyboardEventType = "onKeyDown" | "onKeyUp";
-export declare type WheelEventType = "onWheel";
-export declare type SupportedEventType = PointerEventType | KeyboardEventType | WheelEventType;
-export declare type ReactEventType<T, K> = K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
-export declare type EventCallback<T, P extends React.PointerEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
-export declare type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: EventCallback<T, ReactEventType<T, ET>>) => () => void;
-export declare type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
-export declare type UseSensors<T> = {
+export type PointerEventType = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel";
+export type KeyboardEventType = "onKeyDown" | "onKeyUp";
+export type WheelEventType = "onWheel";
+export type SupportedEventType = PointerEventType | KeyboardEventType | WheelEventType;
+export type ReactEventType<T, K> = K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
+export type EventCallback<T, P extends React.PointerEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
+export type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: EventCallback<T, ReactEventType<T, ET>>) => () => void;
+export type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
+export type UseSensors<T> = {
     registerSensors: RegisterSensors<T>;
     subscribeSensors: SubscribeSensors<T>;
 };

package/dist/core/modules/Controller.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Component, ComponentProps } from "../../types.js";
 import { ContainerRect, SubscribeSensors } from "../hooks/index.js";
-export declare type ControllerContextType = {
+export type ControllerContextType = {
     getLightboxProps: () => ComponentProps;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;
     transferFocus: () => void;

package/dist/core/modules/Navigation.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Component, Labels } from "../../types.js";
 import { Publish } from "../contexts/index.js";
-export declare type NavigationButtonProps = {
+export type NavigationButtonProps = {
     publish: Publish;
     labels?: Labels;
     label: string;

package/dist/core/modules/controller/usePointerSwipe.js

@@ -16,6 +16,7 @@ export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth,
     }, []);
     const addPointer = React.useCallback((event) => {
         clearPointer(event);
+        event.persist();
         pointers.current.push(event);
     }, [clearPointer]);
     const onPointerDown = useEventCallback((event) => {
@@ -40,6 +41,15 @@ export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth,
     const onPointerMove = useEventCallback((event) => {
         const pointer = pointers.current.find((p) => p.pointerId === event.pointerId);
         if (pointer) {
+            const isCurrentPointer = activePointer.current === event.pointerId;
+            if (event.buttons === 0) {
+                if (isCurrentPointer && offset.current > 0) {
+                    onSwipeCancel(offset.current);
+                    offset.current = 0;
+                }
+                clearPointer(pointer);
+                return;
+            }
             const deltaX = event.clientX - pointer.clientX;
             const deltaY = event.clientY - pointer.clientY;
             if (!activePointer.current &&
@@ -51,7 +61,7 @@ export const usePointerSwipe = (subscribeSensors, isSwipeValid, containerWidth,
                 startTime.current = Date.now();
                 onSwipeStart();
             }
-            else if (activePointer.current === event.pointerId) {
+            else if (isCurrentPointer) {
                 offset.current = deltaX;
                 onSwipeProgress(deltaX);
             }

package/dist/plugins/captions/CaptionsContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare type CaptionsContextType = {
+type CaptionsContextType = {
     toolbarWidth?: number;
 };
 export declare const useCaptions: () => CaptionsContextType;

package/dist/plugins/captions/Description.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { LightboxProps, Slide } from "../../types.js";
-declare type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
+type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
 export declare const Description: React.FC<DescriptionProps>;
 export {};

package/dist/plugins/captions/Title.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { LightboxProps, Slide } from "../../types.js";
-declare type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
+type TitleProps = Pick<LightboxProps, "styles"> & Pick<Slide, "title">;
 export declare const Title: React.FC<TitleProps>;
 export {};

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

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { Captions } from "./Captions.js";
-declare type TextAlignment = "start" | "end" | "center";
+type TextAlignment = "start" | "end" | "center";
 declare module "../../types" {
     interface GenericSlide {
         /** slide title */

package/dist/plugins/fullscreen/FullscreenButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { LightboxProps } from "../../types.js";
 /** Fullscreen button props */
-export declare type FullscreenButtonProps = Pick<LightboxProps, "labels" | "render"> & {
+export type FullscreenButtonProps = Pick<LightboxProps, "labels" | "render"> & {
     auto: boolean;
 };
 /** Fullscreen button */

package/dist/plugins/fullscreen/FullscreenContext.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-declare type FullscreenContextType = React.RefObject<HTMLDivElement>;
+type FullscreenContextType = React.RefObject<HTMLDivElement>;
 export declare const useFullscreen: () => FullscreenContextType;
 export declare const FullscreenContextProvider: React.FC<React.PropsWithChildren>;
 export {};

package/dist/plugins/thumbnails/Thumbnail.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ImageFit, LightboxProps, Slide } from "../../types.js";
 import { ContainerRect } from "../../core/index.js";
-declare type FadeSettings = {
+type FadeSettings = {
     duration: number;
     delay: number;
 };
-declare type ThumbnailProps = {
+type ThumbnailProps = {
     rect: ContainerRect;
     slide: Slide | null;
     onClick: () => void;

package/dist/plugins/thumbnails/ThumbnailsTrack.d.ts

@@ -1,8 +1,8 @@
 import * as React from "react";
 import { ContainerRect } from "../../core/index.js";
 import { DeepNonNullable, LightboxProps } from "../../types.js";
-declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
+type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
+type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;
     thumbnails: ThumbnailsInternal;
     startingIndex: number;

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ContainerRect } from "../../core/index.js";
 import { Thumbnails } from "./Thumbnails.js";
-declare type Position = "top" | "bottom" | "start" | "end";
+type Position = "top" | "bottom" | "start" | "end";
 declare module "../../types" {
     interface LightboxProps {
         /** Thumbnails plugin settings */

package/dist/plugins/video/VideoSlide.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { SlideVideo } from "./index.js";
-declare type VideoSlideProps = {
+type VideoSlideProps = {
     slide: SlideVideo;
     offset: number;
 };

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

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { ImageSlideProps } from "../../core/index.js";
 import { ImageSource, SlideImage } from "../../types.js";
-declare type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
+type ResponsiveImageSlide = Omit<SlideImage, "srcSet"> & {
     srcSet: [ImageSource, ...ImageSource[]];
 };
 export declare const isResponsiveImageSlide: (slide: SlideImage) => slide is ResponsiveImageSlide;
-declare type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
+type ResponsiveImageProps = Omit<ImageSlideProps, "slide" | "rect"> & Required<Pick<ImageSlideProps, "rect">> & {
     slide: ResponsiveImageSlide;
 };
 export declare const ResponsiveImage: React.FC<ResponsiveImageProps>;

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

@@ -1,5 +1,5 @@
 import * as React from "react";
 import { LightboxProps } from "../../types.js";
-declare type ZoomButtonsGroupProps = Pick<LightboxProps, "labels" | "render">;
+type ZoomButtonsGroupProps = Pick<LightboxProps, "labels" | "render">;
 export declare const ZoomButtonsGroup: React.FC<ZoomButtonsGroupProps>;
 export {};

package/dist/plugins/zoom/ZoomContainer.js

@@ -210,6 +210,7 @@ export const ZoomContainer = ({ slide, offset, rect, render, carousel, animation
     }, []);
     const replacePointer = React.useCallback((event) => {
         clearPointer(event);
+        event.persist();
         activePointers.current.push(event);
     }, [clearPointer]);
     const onPointerDown = useEventCallback((event) => {

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

@@ -1,5 +1,5 @@
 import { Component } from "../../types.js";
-declare type ZoomContextType = {
+type ZoomContextType = {
     isMinZoom: boolean;
     isMaxZoom: boolean;
     isZoomSupported: boolean;

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

@@ -4,7 +4,7 @@ import { Zoom } from "./Zoom.js";
 export declare const ACTION_ZOOM_IN = "zoom-in";
 export declare const ACTION_ZOOM_OUT = "zoom-out";
 /** Custom zoom button render function */
-declare type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBlur, }: Pick<LightboxProps, "labels"> & {
+type RenderZoomButton = ({ ref, labels, disabled, onClick, onFocus, onBlur, }: Pick<LightboxProps, "labels"> & {
     ref: React.ForwardedRef<HTMLButtonElement>;
     disabled: boolean;
     onClick: () => void;

package/dist/types.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { ContainerRect } from "./core/hooks/useContainerRect.js";
 /** Image fit setting */
-export declare type ImageFit = "contain" | "cover";
+export type ImageFit = "contain" | "cover";
 /** Image source */
 export interface ImageSource {
     /** image URL */
@@ -37,7 +37,7 @@ export interface SlideTypes {
     SlideImage: SlideImage;
 }
 /** Slide */
-export declare type Slide = SlideTypes[keyof SlideTypes];
+export type Slide = SlideTypes[keyof SlideTypes];
 /** Supported customization slots */
 export interface SlotType {
     /** lightbox root customization slot */
@@ -50,13 +50,13 @@ export interface SlotType {
     icon: "icon";
 }
 /** Customization slots */
-export declare type Slot = SlotType[keyof SlotType];
+export type Slot = SlotType[keyof SlotType];
 /** Customization slot CSS properties */
 interface SlotCSSProperties extends React.CSSProperties {
     [key: `--yarl__${string}`]: string | number;
 }
 /** Customization slots styles */
-export declare type SlotStyles = {
+export type SlotStyles = {
     [key in Slot]?: SlotCSSProperties;
 };
 /** Carousel settings */
@@ -173,7 +173,7 @@ export interface LightboxProps {
     className: string;
 }
 /** Custom UI labels */
-export declare type Labels = {
+export type Labels = {
     [key: string]: string;
 };
 /** Toolbar settings */
@@ -182,27 +182,27 @@ export interface ToolbarSettings {
     buttons: ("close" | React.ReactNode)[];
 }
 /** Lightbox component properties */
-export declare type ComponentProps = Omit<LightboxProps, "plugins">;
+export type ComponentProps = Omit<LightboxProps, "plugins">;
 /** Lightbox component */
-export declare type Component = React.ComponentType<React.PropsWithChildren<ComponentProps>>;
+export type Component = React.ComponentType<React.PropsWithChildren<ComponentProps>>;
 /** Lightbox module */
-export declare type Module = {
+export type Module = {
     /** module name */
     name: string;
     /** module component */
     component: Component;
 };
 /** Lightbox component tree node */
-export declare type Node = {
+export type Node = {
     /** module */
     module: Module;
     /** module child nodes */
     children?: Node[];
 };
 /** Lightbox props augmentation */
-export declare type Augmentation = (props: LightboxProps) => LightboxProps;
+export type Augmentation = (props: LightboxProps) => LightboxProps;
 /** Plugin methods */
-export declare type PluginMethods = {
+export type PluginMethods = {
     /** test if a target module is present */
     contains: (target: string) => boolean;
     /** add module as a parent */
@@ -221,15 +221,15 @@ export declare type PluginMethods = {
     augment: (augmentation: Augmentation) => void;
 };
 /** Lightbox plugin */
-export declare type Plugin = ({ addParent, addChild, addSibling, replace, remove, append, augment }: PluginMethods) => void;
+export type Plugin = ({ addParent, addChild, addSibling, replace, remove, append, augment }: PluginMethods) => void;
 /** Deep partial utility type */
-export declare type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
+export type DeepPartial<T, K extends keyof T> = Omit<T, K> & {
     [P in keyof Pick<T, K>]?: Partial<Pick<T, K>[P]>;
 };
 /** Deep non-nullable utility type */
-export declare type DeepNonNullable<T> = T extends {} ? {
+export type DeepNonNullable<T> = T extends {} ? {
     [K in keyof T]-?: NonNullable<T[K]>;
 } : never;
 /** Lightbox external props */
-export declare type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "controller" | "toolbar">;
+export type LightboxExternalProps = DeepPartial<Partial<LightboxProps>, "carousel" | "animation" | "controller" | "toolbar">;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "yet-another-react-lightbox",
-    "version": "2.2.2",
+    "version": "2.2.4",
     "description": "Modern React lightbox component",
     "author": "Igor Danchenko",
     "license": "MIT",
@@ -90,42 +90,42 @@
         "react-dom": ">=16.8.0"
     },
     "devDependencies": {
-        "@commitlint/cli": "^17.2.0",
-        "@commitlint/config-conventional": "^17.2.0",
-        "@semantic-release/changelog": "^6.0.1",
-        "@semantic-release/github": "^8.0.6",
+        "@commitlint/cli": "^17.3.0",
+        "@commitlint/config-conventional": "^17.3.0",
+        "@semantic-release/changelog": "^6.0.2",
+        "@semantic-release/github": "^8.0.7",
         "@testing-library/jest-dom": "^5.16.5",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^14.4.3",
-        "@types/jest": "^29.2.2",
-        "@types/react": "^18.0.25",
-        "@types/react-dom": "^18.0.8",
-        "@typescript-eslint/eslint-plugin": "^5.42.0",
-        "@typescript-eslint/parser": "^5.42.0",
+        "@types/jest": "^29.2.4",
+        "@types/react": "^18.0.26",
+        "@types/react-dom": "^18.0.10",
+        "@typescript-eslint/eslint-plugin": "^5.47.0",
+        "@typescript-eslint/parser": "^5.47.0",
         "autoprefixer": "^10.4.13",
-        "eslint": "^8.27.0",
+        "eslint": "^8.30.0",
         "eslint-config-airbnb": "^19.0.4",
         "eslint-config-airbnb-typescript": "^17.0.0",
         "eslint-config-prettier": "^8.5.0",
         "eslint-plugin-import": "^2.26.0",
         "eslint-plugin-jsx-a11y": "^6.6.1",
         "eslint-plugin-prettier": "^4.2.1",
-        "eslint-plugin-react": "^7.31.10",
+        "eslint-plugin-react": "^7.31.11",
         "eslint-plugin-react-hooks": "^4.6.0",
-        "husky": "^8.0.1",
-        "jest": "^29.2.2",
-        "jest-environment-jsdom": "^29.2.2",
-        "lint-staged": "^13.0.3",
+        "husky": "^8.0.2",
+        "jest": "^29.3.1",
+        "jest-environment-jsdom": "^29.3.1",
+        "lint-staged": "^13.1.0",
         "npm-run-all": "^4.1.5",
-        "postcss": "^8.4.18",
-        "postcss-cli": "^10.0.0",
-        "prettier": "^2.7.1",
+        "postcss": "^8.4.20",
+        "postcss-cli": "^10.1.0",
+        "prettier": "^2.8.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "rimraf": "^3.0.2",
-        "sass": "^1.56.0",
+        "sass": "^1.57.1",
         "ts-jest": "^29.0.3",
-        "typescript": "^4.8.4"
+        "typescript": "^4.9.4"
     },
     "keywords": [
         "react",