yet-another-react-lightbox 3.19.0 → 3.20.1

package/dist/index.d.ts

@@ -204,9 +204,10 @@ type ImageSlideProps = Partial<Pick<CarouselSettings, "imageFit" | "imageProps">
     rect?: ContainerRect;
     onClick?: () => void;
     onLoad?: (image: HTMLImageElement) => void;
+    onError?: () => void;
     style?: React.CSSProperties;
 };
-declare function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, style, }: ImageSlideProps): React.JSX.Element;
+declare function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, onError, style, }: ImageSlideProps): React.JSX.Element;
 
 declare const LightboxRoot: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
 

package/dist/index.js

@@ -623,7 +623,7 @@ function useThrottle(callback, delay) {
 
 const slidePrefix = makeComposePrefix("slide");
 const slideImagePrefix = makeComposePrefix("slide_image");
-function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, style, }) {
+function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps, onClick, onLoad, onError, style, }) {
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
     const { publish } = useEvents();
@@ -656,9 +656,10 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
     const handleOnLoad = React.useCallback((event) => {
         handleLoading(event.currentTarget);
     }, [handleLoading]);
-    const onError = React.useCallback(() => {
+    const handleOnError = useEventCallback(() => {
         setStatus(SLIDE_STATUS_ERROR);
-    }, []);
+        onError === null || onError === void 0 ? void 0 : onError();
+    });
     const cover = isImageFitCover(image, imageFit);
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
     const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : []).filter(Boolean)), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
@@ -677,7 +678,7 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
     const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
     const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = imageProps || {};
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: onError, onClick: onClick, draggable: false, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")), imagePropsClassName), style: { ...defaultStyle, ...style, ...imagePropsStyle }, ...restImageProps, alt: image.alt, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: handleOnLoad, onError: handleOnError, onClick: onClick, draggable: false, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading")), imagePropsClassName), style: { ...defaultStyle, ...style, ...imagePropsStyle }, ...restImageProps, alt: image.alt, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
             status === SLIDE_STATUS_LOADING &&
                 ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),

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

@@ -19,6 +19,8 @@ declare module "yet-another-react-lightbox" {
         captions?: {
             /** Captions plugin ref */
             ref?: React.ForwardedRef<CaptionsRef>;
+            /** if `true`, captions are hidden when the lightbox opens */
+            hidden?: boolean;
             /** if `true`, show Captions Toggle button in the toolbar */
             showToggle?: boolean;
             /** description text alignment */

package/dist/plugins/captions/index.js

@@ -1,5 +1,5 @@
-import { cssClass, useLightboxProps, makeUseContext, useController, clsx, cssVar, createIcon, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
+import { cssClass, useLightboxProps, makeUseContext, useController, clsx, cssVar, createIcon, createIconDisabled, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { PLUGIN_CAPTIONS } from '../../types.js';
 
 const cssPrefix = (className) => cssClass(`slide_${className}`);
@@ -8,6 +8,7 @@ const defaultCaptionsProps = {
     descriptionTextAlign: "start",
     descriptionMaxLines: 3,
     showToggle: false,
+    hidden: false,
 };
 const resolveCaptionsProps = (captions) => ({
     ...defaultCaptionsProps,
@@ -21,8 +22,8 @@ function useCaptionsProps() {
 const CaptionsContext = React.createContext(null);
 const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
 function CaptionsContextProvider({ captions, children }) {
-    const { ref } = resolveCaptionsProps(captions);
-    const [visible, setVisible] = React.useState(true);
+    const { ref, hidden } = resolveCaptionsProps(captions);
+    const [visible, setVisible] = React.useState(!hidden);
     const context = React.useMemo(() => ({
         visible,
         show: () => setVisible(true),

package/dist/plugins/download/index.js

@@ -1,5 +1,5 @@
-import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButton, addToolbarButton } from '../../index.js';
 import * as React from 'react';
+import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButton, addToolbarButton } from '../../index.js';
 import { PLUGIN_DOWNLOAD } from '../../types.js';
 
 const defaultDownloadProps = {

package/dist/plugins/fullscreen/index.js

@@ -1,5 +1,5 @@
-import { makeUseContext, useDocumentContext, useLayoutEffect, cleanup, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
+import { makeUseContext, useDocumentContext, useLayoutEffect, cleanup, useEventCallback, clsx, cssClass, createIcon, useLightboxProps, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { PLUGIN_FULLSCREEN, CLASS_FULLSIZE, PLUGIN_THUMBNAILS, MODULE_CONTROLLER } from '../../types.js';
 
 const defaultFullscreenProps = {

package/dist/plugins/share/index.js

@@ -1,5 +1,5 @@
-import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButton, addToolbarButton } from '../../index.js';
 import * as React from 'react';
+import { createIcon, useLightboxProps, useLightboxState, isImageSlide, IconButton, addToolbarButton } from '../../index.js';
 
 const defaultShareProps = {
     share: undefined,

package/dist/plugins/slideshow/index.js

@@ -1,5 +1,5 @@
-import { makeUseContext, useLightboxState, useTimeouts, useEvents, useController, useEventCallback, cleanup, createIcon, useLightboxProps, useLoseFocus, IconButton, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
+import { makeUseContext, useLightboxState, useTimeouts, useEvents, useController, useEventCallback, cleanup, createIcon, useLightboxProps, useLoseFocus, IconButton, addToolbarButton, createModule } from '../../index.js';
 import { SLIDE_STATUS_LOADING, SLIDE_STATUS_PLAYING, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, ACTIVE_SLIDE_ERROR, SLIDE_STATUS_ERROR, ACTIVE_SLIDE_COMPLETE, SLIDE_STATUS_COMPLETE, PLUGIN_SLIDESHOW } from '../../types.js';
 
 const defaultSlideshowProps = {

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

@@ -36,6 +36,8 @@ declare module "yet-another-react-lightbox" {
             imageFit?: ImageFit;
             /** if `true`, show the vignette effect on the edges of the thumbnails track */
             vignette?: boolean;
+            /** if `true`, thumbnails are hidden when the lightbox opens */
+            hidden?: boolean;
             /** if `true`, show the Toggle Thumbnails button in the toolbar */
             showToggle?: boolean;
         };

package/dist/plugins/thumbnails/index.js

@@ -1,5 +1,5 @@
-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 * 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 { PLUGIN_THUMBNAILS, ELEMENT_ICON, CLASS_FLEX_CENTER, ACTION_SWIPE, ACTION_NEXT, ACTION_PREV, PLUGIN_FULLSCREEN, MODULE_CONTROLLER } from '../../types.js';
 
 const defaultThumbnailsProps = {
@@ -13,6 +13,8 @@ const defaultThumbnailsProps = {
     gap: 16,
     imageFit: "contain",
     vignette: true,
+    hidden: false,
+    showToggle: false,
 };
 const resolveThumbnailsProps = (thumbnails) => ({
     ...defaultThumbnailsProps,
@@ -205,9 +207,9 @@ function ThumbnailsTrack({ visible, containerRef }) {
 const ThumbnailsContext = React.createContext(null);
 const useThumbnails = makeUseContext("useThumbnails", "ThumbnailsContext", ThumbnailsContext);
 function ThumbnailsContextProvider({ children, ...props }) {
-    const [visible, setVisible] = React.useState(true);
+    const { ref, position, hidden } = resolveThumbnailsProps(props.thumbnails);
+    const [visible, setVisible] = React.useState(!hidden);
     const containerRef = React.useRef(null);
-    const { ref, position } = resolveThumbnailsProps(props.thumbnails);
     const context = React.useMemo(() => ({
         visible,
         show: () => setVisible(true),

package/dist/plugins/zoom/index.js

@@ -1,5 +1,5 @@
-import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useDocumentContext, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
 import * as React from 'react';
+import { useLightboxProps, useMotionPreference, useEventCallback, useLayoutEffect, useLightboxState, isImageSlide, isImageFitCover, round, useDocumentContext, useController, usePointerEvents, cleanup, makeUseContext, createIcon, IconButton, devicePixelRatio, ImageSlide, clsx, cssClass, addToolbarButton, createModule } from '../../index.js';
 import { EVENT_ON_KEY_DOWN, EVENT_ON_WHEEL, UNKNOWN_ACTION_TYPE, CLASS_FULLSIZE, CLASS_FLEX_CENTER, CLASS_SLIDE_WRAPPER, PLUGIN_ZOOM } from '../../types.js';
 
 const defaultZoomProps = {

package/package.json

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