yet-another-react-lightbox 3.21.2 → 3.21.4

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, CarouselSettings, Component, Module, Node as Node$1, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerSettings, ControllerRef, Callback, RenderFunction } from './types.js';
+import { LightboxExternalProps, LightboxProps, Labels, Label, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, CarouselSettings, Component, Module, Node as Node$1, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ControllerSettings, ControllerRef, Callback, RenderFunction } from './types.js';
 export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, Callbacks, ClickCallbackProps, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageFit, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, NoScrollSettings, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
 
 /** Lightbox component */
@@ -12,7 +12,7 @@ declare function cssClass(name: string): string;
 declare function cssVar(name: string): string;
 declare function composePrefix(base: string, prefix?: string): string;
 declare function makeComposePrefix(base: string): (prefix?: string) => string;
-declare function label(labels: Labels | undefined, defaultLabel: string): string;
+declare function label(labels: Labels | undefined, defaultLabel: Label): string;
 declare function cleanup(...cleaners: (() => void)[]): () => void;
 declare function makeUseContext<T>(name: string, contextName: string, context: React.Context<T | null>): () => NonNullable<T>;
 declare function hasWindow(): boolean;
@@ -162,7 +162,7 @@ declare const useTimeouts: () => TimeoutsContextType;
 declare function TimeoutsProvider({ children }: React.PropsWithChildren): React.JSX.Element;
 
 type IconButtonProps = React.ComponentProps<"button"> & {
-    label: string;
+    label: Label;
     icon: React.ElementType;
     renderIcon?: () => React.ReactNode;
 };
@@ -249,7 +249,7 @@ declare function Controller({ children, ...props }: ComponentProps): React.JSX.E
 declare const ControllerModule: Module;
 
 type NavigationButtonProps = {
-    label: string;
+    label: Label;
     icon: React.ElementType;
     renderIcon?: RenderFunction;
     action: "prev" | "next";
@@ -280,4 +280,4 @@ declare const RootModule: Module;
 declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose }, styles }: ComponentProps): React.JSX.Element;
 declare const ToolbarModule: Module;
 
-export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, type DocumentContextProviderProps, type DocumentContextType, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxRoot, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };
+export { Augmentation, Callback, Carousel, CarouselModule, CarouselSettings, CloseIcon, Component, ComponentProps, type ComputeAnimation, ContainerRect, Controller, ControllerContext, type ControllerContextType, ControllerModule, ControllerRef, ControllerSettings, DocumentContext, DocumentContextProvider, type DocumentContextProviderProps, type DocumentContextType, ErrorIcon, type Event, type EventCallback, EventTypes, EventsContext, type EventsContextType, EventsProvider, IconButton, type IconButtonProps, ImageSlide, type ImageSlideProps, type KeyboardEventType, Label, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, type LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, type LightboxPropsContextType, LightboxPropsProvider, LightboxRoot, LightboxState, type LightboxStateAction, LightboxStateContext, type LightboxStateContextType, LightboxStateProvider, type LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, type NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node$1 as Node, Plugin, type PointerEventType, Portal, PortalModule, PreviousIcon, type Publish, type ReactEventType, type RegisterSensors, Render, RenderFunction, Root, RootModule, type SensorCallback, Slide, SlideImage, type Subscribe, type SubscribeSensors, type SupportedEventType, SwipeState, TimeoutsContext, type TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, type Topic, type Unsubscribe, type UseSensors, type WheelEventType, addToolbarButton, calculatePreload, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, getSlideKey, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseInt, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useDocumentContext, useEventCallback, useEvents, useForkRef, useKeyboardNavigation, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useNavigationState, usePointerSwipe, usePreventWheelDefaults, useRTL, useSensors, useThrottle, useTimeouts, useWheelSwipe, withPlugins };

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

@@ -47,6 +47,10 @@ declare module "yet-another-react-lightbox" {
         /** render custom Captions button */
         buttonCaptions?: RenderFunction<CaptionsRef>;
     }
+    interface Labels {
+        "Show captions"?: string;
+        "Hide captions"?: string;
+    }
     /** Captions plugin ref */
     interface CaptionsRef {
         /** if `true`, captions are visible */

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

@@ -29,6 +29,9 @@ declare module "yet-another-react-lightbox" {
         /** render custom Download icon */
         iconDownload?: RenderFunction;
     }
+    interface Labels {
+        Download?: string;
+    }
     interface Callbacks {
         /** a callback called on slide download */
         download?: Callback<DownloadCallbackProps>;

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

@@ -22,6 +22,10 @@ declare module "yet-another-react-lightbox" {
         /** render custom Exit Fullscreen icon */
         iconExitFullscreen?: RenderFunction;
     }
+    interface Labels {
+        "Enter Fullscreen"?: string;
+        "Exit Fullscreen"?: string;
+    }
     interface Callbacks {
         /** a callback called when the lightbox enters fullscreen mode */
         enterFullscreen?: Callback;

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

@@ -29,6 +29,9 @@ declare module "yet-another-react-lightbox" {
         /** render custom Share icon */
         iconShare?: RenderFunction;
     }
+    interface Labels {
+        Share?: string;
+    }
     interface Callbacks {
         /** a callback called on slide share */
         share?: Callback<ShareCallbackProps>;

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

@@ -24,6 +24,10 @@ declare module "yet-another-react-lightbox" {
         /** render custom Slideshow button */
         buttonSlideshow?: RenderFunction<SlideshowRef>;
     }
+    interface Labels {
+        Play?: string;
+        Pause?: string;
+    }
     interface Callbacks {
         /** a callback called on slideshow playback start */
         slideshowStart?: Callback;

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

@@ -52,6 +52,10 @@ declare module "yet-another-react-lightbox" {
         /** render custom Thumbnails button */
         buttonThumbnails?: RenderFunction<ThumbnailsRef>;
     }
+    interface Labels {
+        "Show thumbnails"?: string;
+        "Hide thumbnails"?: string;
+    }
     /** `render.thumbnail` render function props */
     type RenderThumbnailProps = {
         slide: Slide;

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

@@ -42,6 +42,10 @@ declare module "yet-another-react-lightbox" {
         /** render custom Zoom Out icon */
         iconZoomOut?: RenderFunction;
     }
+    interface Labels {
+        "Zoom in"?: string;
+        "Zoom out"?: string;
+    }
     interface RenderSlideProps {
         /** current zoom level */
         zoom?: number;

package/dist/plugins/zoom/index.js

@@ -115,6 +115,9 @@ function useZoomImageRect(slideRect, imageDimensions) {
 function distance(pointerA, pointerB) {
     return ((pointerA.clientX - pointerB.clientX) ** 2 + (pointerA.clientY - pointerB.clientY) ** 2) ** 0.5;
 }
+function scaleZoom(value, delta, factor = 100, clamp = 2) {
+    return value * Math.min(1 + Math.abs(delta / factor), clamp) ** Math.sign(delta);
+}
 function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
@@ -174,7 +177,7 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
         if (event.ctrlKey || scrollToZoom) {
             if (Math.abs(event.deltaY) > Math.abs(event.deltaX)) {
                 event.stopPropagation();
-                changeZoom(zoom * (1 - event.deltaY / wheelZoomDistanceFactor), true, ...translateCoordinates(event));
+                changeZoom(scaleZoom(zoom, -event.deltaY, wheelZoomDistanceFactor), true, ...translateCoordinates(event));
                 return;
             }
         }
@@ -197,7 +200,8 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
     const onPointerDown = useEventCallback((event) => {
         var _a;
         const pointers = activePointers.current;
-        if (!((_a = zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
+        if ((event.pointerType === "mouse" && event.buttons > 1) ||
+            !((_a = zoomWrapperRef === null || zoomWrapperRef === void 0 ? void 0 : zoomWrapperRef.current) === null || _a === void 0 ? void 0 : _a.contains(event.target))) {
             return;
         }
         if (zoom > 1) {
@@ -226,7 +230,7 @@ function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoom
             const currentDistance = distance(pointers[0], pointers[1]);
             const delta = currentDistance - pinchZoomDistance.current;
             if (Math.abs(delta) > 0) {
-                changeZoom(zoom * (1 + delta / pinchZoomDistanceFactor), true, ...pointers
+                changeZoom(scaleZoom(zoom, delta, pinchZoomDistanceFactor), true, ...pointers
                     .map((x) => translateCoordinates(x))
                     .reduce((acc, coordinate) => coordinate.map((x, i) => acc[i] + x / 2)));
                 pinchZoomDistance.current = currentDistance;

package/dist/types.d.ts

@@ -68,7 +68,7 @@ interface LightboxProps {
     slides: Slide[];
     /** custom render functions */
     render: Render;
-    /** custom UI labels */
+    /** custom UI labels / translations */
     labels: Labels;
     /** enabled plugins */
     plugins: Plugin[];
@@ -375,10 +375,13 @@ interface Callbacks {
     /** a callback called when the portal closes */
     exited?: Callback;
 }
-/** Custom UI labels */
-type Labels = {
-    [key: string]: string;
-};
+/** Custom UI labels / translations */
+interface Labels {
+    Previous?: string;
+    Next?: string;
+    Close?: string;
+}
+type Label = keyof Labels;
 /** Toolbar settings */
 interface ToolbarSettings {
     /** buttons to render in the toolbar */
@@ -429,4 +432,4 @@ type DeepPartialValue<T, E extends string = never> = T extends any[] ? T : T ext
     [P in keyof T]?: P extends E ? T[P] : DeepPartialValue<T[P], E>;
 } : T;
 
-export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, type AnimationSettings, type Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, type Callback, type Callbacks, type CarouselSettings, type ClickCallbackProps, type Component, type ComponentProps, type ContainerRect, type ControllerRef, type ControllerSettings, type DeepPartial, type DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, type EventTypes, type GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, type ImageFit, type ImageSource, type Labels, type LengthOrPercentage, type LightboxExternalProps, type LightboxProps, type LightboxState, type LightboxStateSwipeAction, type LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, type Module, type NavigationAction, type NoScrollSettings, type Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, type Plugin, type PluginProps, type PortalSettings, type Render, type RenderFunction, type RenderSlideContainerProps, type RenderSlideFooterProps, type RenderSlideHeaderProps, type RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, type Slide, type SlideImage, type SlideStatus, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarButtonKey, type ToolbarButtonKeys, type ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, type ViewCallbackProps, activeSlideStatus };
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, type AnimationSettings, type Augmentation, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, type Callback, type Callbacks, type CarouselSettings, type ClickCallbackProps, type Component, type ComponentProps, type ContainerRect, type ControllerRef, type ControllerSettings, type DeepPartial, type DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, type EventTypes, type GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, type ImageFit, type ImageSource, type Label, type Labels, type LengthOrPercentage, type LightboxExternalProps, type LightboxProps, type LightboxState, type LightboxStateSwipeAction, type LightboxStateUpdateAction, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, type Module, type NavigationAction, type NoScrollSettings, type Node, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, type Plugin, type PluginProps, type PortalSettings, type Render, type RenderFunction, type RenderSlideContainerProps, type RenderSlideFooterProps, type RenderSlideHeaderProps, type RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, type Slide, type SlideImage, type SlideStatus, type SlideTypeKey, type SlideTypes, type Slot, type SlotStyles, type SlotType, type ToolbarButtonKey, type ToolbarButtonKeys, type ToolbarSettings, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, type ViewCallbackProps, activeSlideStatus };

package/package.json

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