yet-another-react-lightbox 3.21.6 → 3.21.8

package/dist/index.d.ts

@@ -45,7 +45,7 @@ declare function stopNavigationEventsPropagation(): {
 };
 declare function calculatePreload(carousel: CarouselSettings, slides: Slide[], minimum?: number): number;
 declare function makeInertWhen(condition: boolean): {
-    inert: string | boolean | undefined;
+    inert: boolean;
 };
 
 declare function createModule(name: string, component: Component): Module;
@@ -72,7 +72,7 @@ declare function useAnimation<T>(nodeRef: React.RefObject<HTMLElement | null>, c
 
 declare function useContainerRect<T extends HTMLElement = HTMLElement>(): {
     setContainerRef: (node: T | null) => void;
-    containerRef: React.MutableRefObject<T | null>;
+    containerRef: React.RefObject<T | null>;
     containerRect: ContainerRect | undefined;
 };
 
@@ -108,7 +108,7 @@ type UseSensors<T extends Element> = {
 };
 declare function useSensors<T extends Element>(): UseSensors<T>;
 
-declare function useThrottle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;
+declare function useThrottle(callback: (...args: unknown[]) => void, delay: number): (...args: unknown[]) => void;
 
 type DocumentContextType = {
     getOwnerDocument: (node?: Node | null) => Document;
@@ -117,7 +117,7 @@ type DocumentContextType = {
 declare const DocumentContext: React.Context<DocumentContextType | null>;
 declare const useDocumentContext: () => DocumentContextType;
 type DocumentContextProviderProps = React.PropsWithChildren & {
-    nodeRef: React.RefObject<Node>;
+    nodeRef: React.RefObject<Node | null>;
 };
 declare function DocumentContextProvider({ nodeRef, children }: DocumentContextProviderProps): React.JSX.Element;
 
@@ -241,7 +241,7 @@ type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close"> & {
     slideRect: ContainerRect;
     containerRect: ContainerRect;
     subscribeSensors: SubscribeSensors<HTMLDivElement>;
-    containerRef: React.RefObject<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement | null>;
     setCarouselRef: React.Ref<HTMLDivElement>;
     toolbarWidth: number | undefined;
     setToolbarWidth: (width: number | undefined) => void;

package/dist/index.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from 'react';
-import { IMAGE_FIT_COVER, IMAGE_FIT_CONTAIN, ACTION_CLOSE, MODULE_CONTROLLER, UNKNOWN_ACTION_TYPE, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_CANCEL, EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_WHEEL, SLIDE_STATUS_LOADING, activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_PLACEHOLDER, ACTION_PREV, ACTION_NEXT, ACTION_SWIPE, MODULE_PORTAL, CLASS_FLEX_CENTER, MODULE_CAROUSEL, CLASS_SLIDE_WRAPPER, VK_ARROW_RIGHT, VK_ARROW_LEFT, VK_ESCAPE, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, MODULE_ROOT, MODULE_TOOLBAR } from './types.js';
+import { IMAGE_FIT_COVER, IMAGE_FIT_CONTAIN, ACTION_CLOSE, MODULE_CONTROLLER, UNKNOWN_ACTION_TYPE, ELEMENT_BUTTON, ELEMENT_ICON, EVENT_ON_WHEEL, EVENT_ON_KEY_UP, EVENT_ON_KEY_DOWN, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_UP, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_DOWN, SLIDE_STATUS_LOADING, activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_PLACEHOLDER, ACTION_PREV, ACTION_NEXT, ACTION_SWIPE, MODULE_PORTAL, CLASS_FLEX_CENTER, MODULE_CAROUSEL, CLASS_SLIDE_WRAPPER, VK_ARROW_RIGHT, VK_ARROW_LEFT, VK_ESCAPE, MODULE_NAVIGATION, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, MODULE_NO_SCROLL, MODULE_ROOT, MODULE_TOOLBAR } from './types.js';
 import { createPortal } from 'react-dom';
 export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FULLSIZE, CLASS_SLIDE_WRAPPER_INTERACTIVE, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_PLAYING } from './types.js';
 
@@ -454,8 +454,8 @@ function currentTransformation(node) {
     return { x, y, z };
 }
 function useAnimation(nodeRef, computeAnimation) {
-    const snapshot = React.useRef();
-    const animation = React.useRef();
+    const snapshot = React.useRef(undefined);
+    const animation = React.useRef(undefined);
     const reduceMotion = useMotionPreference();
     useLayoutEffect(() => {
         var _a, _b, _c;
@@ -490,7 +490,7 @@ function useAnimation(nodeRef, computeAnimation) {
 
 function useContainerRect() {
     const containerRef = React.useRef(null);
-    const observerRef = React.useRef();
+    const observerRef = React.useRef(undefined);
     const [containerRect, setContainerRect] = React.useState();
     const setContainerRef = React.useCallback((node) => {
         containerRef.current = node;
@@ -521,7 +521,7 @@ function useContainerRect() {
 }
 
 function useDelay() {
-    const timeoutId = React.useRef();
+    const timeoutId = React.useRef(undefined);
     const { setTimeout, clearTimeout } = useTimeouts();
     return React.useCallback((callback, delay) => {
         clearTimeout(timeoutId.current);
@@ -555,7 +555,7 @@ function useForkRef(refA, refB) {
 }
 
 function useLoseFocus(focus, disabled = false) {
-    const focused = React.useRef();
+    const focused = React.useRef(false);
     useLayoutEffect(() => {
         if (disabled && focused.current) {
             focused.current = false;
@@ -722,7 +722,7 @@ const SWIPE_THRESHOLD = 30;
 function usePointerSwipe(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();
+    const activePointer = React.useRef(undefined);
     const startTime = React.useRef(0);
     const gesture = React.useRef(Gesture.NONE);
     const clearPointer = React.useCallback((event) => {
@@ -837,10 +837,10 @@ function usePreventWheelDefaults({ preventDefaultWheelX, preventDefaultWheelY, }
 function useWheelSwipe(swipeState, subscribeSensors, isSwipeValid, containerWidth, swipeAnimationDuration, onSwipeStart, onSwipeProgress, onSwipeFinish, onSwipeCancel) {
     const offset = React.useRef(0);
     const intent = React.useRef(0);
-    const intentCleanup = React.useRef();
-    const resetCleanup = React.useRef();
+    const intentCleanup = React.useRef(undefined);
+    const resetCleanup = React.useRef(undefined);
     const wheelInertia = React.useRef(0);
-    const wheelInertiaCleanup = React.useRef();
+    const wheelInertiaCleanup = React.useRef(undefined);
     const startTime = React.useRef(0);
     const { setTimeout, clearTimeout } = useTimeouts();
     const cancelSwipeIntentCleanup = React.useCallback(() => {

package/dist/plugins/captions/index.js

@@ -63,9 +63,7 @@ function Description({ description }) {
                     : null),
                 ...styles.captionsDescription,
             } }, typeof description === "string"
-            ? description
-                .split("\n")
-                .flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
+            ? description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line])
             : description)));
 }
 

package/dist/plugins/download/index.js

@@ -28,7 +28,7 @@ function corsEnabled(url) {
     try {
         xhr.send();
     }
-    catch (e) {
+    catch (_) {
     }
     return xhr.status >= 200 && xhr.status <= 299;
 }
@@ -36,7 +36,7 @@ function click(link) {
     try {
         link.dispatchEvent(new MouseEvent("click"));
     }
-    catch (e) {
+    catch (_) {
         const event = document.createEvent("MouseEvents");
         event.initMouseEvent("click", true, true, window, 0, 0, 0, 80, 20, false, false, false, false, 0, null);
         link.dispatchEvent(event);

package/dist/plugins/fullscreen/index.js

@@ -50,7 +50,7 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }
                 container.msRequestFullscreen();
             }
         }
-        catch (err) {
+        catch (_) {
         }
     }, []);
     const exit = React.useCallback(() => {
@@ -71,7 +71,7 @@ function FullscreenContextProvider({ fullscreen: fullscreenProps, on, children }
                 ownerDocument.msExitFullscreen();
             }
         }
-        catch (err) {
+        catch (_) {
         }
     }, [getFullscreenElement, getOwnerDocument]);
     React.useEffect(() => {

package/dist/plugins/inline/index.js

@@ -1,4 +1,4 @@
-import { LightboxRoot, clsx, cssClass, cssVar, createModule } from '../../index.js';
+import { LightboxRoot, cssVar, clsx, cssClass, createModule } from '../../index.js';
 import * as React from 'react';
 import { ACTION_CLOSE, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE } from '../../types.js';
 

package/dist/plugins/slideshow/index.js

@@ -18,8 +18,8 @@ function SlideshowContextProvider({ slideshow, carousel: { finite }, on, childre
     const { autoplay, delay, ref } = resolveSlideshowProps(slideshow);
     const wasPlaying = React.useRef(autoplay);
     const [playing, setPlaying] = React.useState(autoplay);
-    const scheduler = React.useRef();
-    const slideStatus = React.useRef();
+    const scheduler = React.useRef(undefined);
+    const slideStatus = React.useRef(undefined);
     const { slides, currentIndex } = useLightboxState();
     const { setTimeout, clearTimeout } = useTimeouts();
     const { subscribe } = useEvents();

package/dist/plugins/thumbnails/index.js

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useDocumentContext, useEventCallback, clsx, cssVar, getSlideKey, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
+import { useLightboxProps, composePrefix, createIcon, ImageSlide, isImageSlide, cssClass, makeComposePrefix, useDocumentContext, useEventCallback, cssVar, clsx, getSlideKey, useRTL, useEvents, useLightboxState, useSensors, useKeyboardNavigation, useAnimation, cleanup, calculatePreload, hasSlides, getSlide, makeUseContext, LightboxPropsProvider, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
 const defaultThumbnailsProps = {

package/dist/plugins/video/index.js

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { useLightboxProps, useEvents, useContainerRect, useEventCallback, clsx, cssClass } from '../../index.js';
-import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, ACTIVE_SLIDE_PLAYING, ACTIVE_SLIDE_COMPLETE } from '../../types.js';
+import { ACTIVE_SLIDE_LOADING, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_PLAYING } from '../../types.js';
 
 const defaultVideoProps = {
     controls: true,
@@ -79,6 +79,11 @@ function VideoSlide({ slide, offset }) {
             height: "100%",
             ...(width ? { maxWidth: `${width}px` } : null),
         }, className: clsx(cssClass("video_container"), cssClass(CLASS_FLEX_CENTER), cssClass(CLASS_SLIDE_WRAPPER)) }, containerRect && (React.createElement("video", { ref: setVideoRef, poster: poster, ...scaleWidthAndHeight(), ...resolveBoolean("controls"), ...resolveBoolean("playsInline"), ...resolveBoolean("loop"), ...resolveBoolean("muted"), ...resolveBoolean("playsInline"), ...resolveBoolean("disablePictureInPicture"), ...resolveBoolean("disableRemotePlayback"), ...resolveString("controlsList"), ...resolveString("crossOrigin"), ...resolveString("preload"), onPlay: () => {
+            var _a;
+            if (offset !== 0) {
+                (_a = videoRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+                return;
+            }
             publish(ACTIVE_SLIDE_PLAYING);
         }, onEnded: () => {
             publish(ACTIVE_SLIDE_COMPLETE);

package/dist/plugins/zoom/index.js

@@ -19,8 +19,8 @@ const resolveZoomProps = (zoom) => ({
 });
 
 function useZoomAnimation(zoom, offsetX, offsetY, zoomWrapperRef) {
-    const zoomAnimation = React.useRef();
-    const zoomAnimationStart = React.useRef();
+    const zoomAnimation = React.useRef(undefined);
+    const zoomAnimationStart = React.useRef(undefined);
     const { zoom: zoomAnimationDuration } = useLightboxProps().animation;
     const reduceMotion = useMotionPreference();
     const playZoomAnimation = useEventCallback(() => {
@@ -121,7 +121,7 @@ function scaleZoom(value, delta, factor = 100, clamp = 2) {
 function useZoomSensors(zoom, maxZoom, disabled, changeZoom, changeOffsets, zoomWrapperRef) {
     const activePointers = React.useRef([]);
     const lastPointerDown = React.useRef(0);
-    const pinchZoomDistance = React.useRef();
+    const pinchZoomDistance = React.useRef(undefined);
     const { globalIndex } = useLightboxState();
     const { getOwnerWindow } = useDocumentContext();
     const { containerRef, subscribeSensors } = useController();
@@ -434,7 +434,7 @@ function ResponsiveImage(props) {
         Object.assign(style, rect.width / rect.height < width / height ? { width: "100%", height: "auto" } : { width: "auto", height: "100%" });
     }
     return (React.createElement(React.Fragment, null,
-        preload && preload !== current && (React.createElement(ImageSlide, { key: "preload", ...props, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
+        preload && preload !== current && (React.createElement(ImageSlide, { key: "preload", ...props, offset: undefined, slide: { ...image, src: preload, srcSet: undefined }, style: { position: "absolute", visibility: "hidden", ...style }, onLoad: () => handlePreload(preload), render: {
                 ...render,
                 iconLoading: () => null,
                 iconError: () => null,

package/dist/types.d.ts

@@ -425,10 +425,10 @@ interface PluginProps {
 /** Lightbox plugin */
 type Plugin = (props: PluginProps) => void;
 /** Deep partial utility type */
-type DeepPartial<T extends {}, K extends keyof T = keyof T, E extends string = never> = Omit<Partial<T>, K> & {
+type DeepPartial<T extends object, K extends keyof T = keyof T, E extends string = never> = Omit<Partial<T>, K> & {
     [P in K]?: DeepPartialValue<T[P], E>;
 };
-type DeepPartialValue<T, E extends string = never> = T extends any[] ? T : T extends (...props: any[]) => any ? T : T extends {} ? {
+type DeepPartialValue<T, E extends string = never> = T extends any[] ? T : T extends (...props: any[]) => any ? T : T extends object ? {
     [P in keyof T]?: P extends E ? T[P] : DeepPartialValue<T[P], E>;
 } : T;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.21.6",
+  "version": "3.21.8",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",
@@ -154,8 +154,18 @@
     "provenance": true
   },
   "peerDependencies": {
-    "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
+    "@types/react": "^16 || ^17 || ^18 || ^19",
+    "@types/react-dom": "^16 || ^17 || ^18 || ^19",
+    "react": "^16.8.0 || ^17 || ^18 || ^19",
+    "react-dom": "^16.8.0 || ^17 || ^18 || ^19"
+  },
+  "peerDependenciesMeta": {
+    "@types/react": {
+      "optional": true
+    },
+    "@types/react-dom": {
+      "optional": true
+    }
   },
   "keywords": [
     "react",