yet-another-react-lightbox 3.28.0 → 3.29.1

package/README.md

@@ -1,6 +1,6 @@
 # Yet Another React Lightbox
 
-Modern React lightbox component. Performant, easy to use, customizable and
+Modern React lightbox component. Performant, easy to use, customizable, and
 extendable.
 
 ## Overview
@@ -9,8 +9,8 @@ extendable.
 [![Bundle Size](https://img.shields.io/bundlephobia/minzip/yet-another-react-lightbox.svg?color=blue)](https://bundlephobia.com/package/yet-another-react-lightbox)
 [![License MIT](https://img.shields.io/npm/l/yet-another-react-lightbox.svg?color=blue)](https://github.com/igordanchenko/yet-another-react-lightbox/blob/main/LICENSE)
 
-- **Built for React:** works with React 19, 18, 17 and 16.8.0+
-- **UX:** supports keyboard, mouse, touchpad and touchscreen navigation
+- **Built for React:** works with React 19, 18, 17, and 16.8.0+
+- **UX:** supports keyboard, mouse, touchpad, and touchscreen navigation
 - **Preloading:** never displays partially downloaded images
 - **Performance:** preloads limited number of images without compromising
   performance or UX
@@ -21,7 +21,7 @@ extendable.
 - **Customization:** customize any UI element or add your own custom slides
 - **No bloat:** never bundle rarely used features; add optional features via
   plugins
-- **TypeScript:** type definitions come built-in in the package
+- **TypeScript:** type definitions come built-in with the package
 - **RTL:** compatible with RTL layout
 
 ![Yet Another React Lightbox | Example](https://images.yet-another-react-lightbox.com/example.jpg)
@@ -158,7 +158,7 @@ The following plugins are bundled in the package:
 
 ## Sponsors
 
-This project is supported by the following companies, organizations and
+This project is supported by the following companies, organizations, and
 individuals who help make its continued development and maintenance possible.
 
 <p align="center">

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-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, 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';
+import { LightboxExternalProps, LightboxProps, ToolbarSettings, CarouselSettings, Slide, ContainerRect, LengthOrPercentage, SlideImage, Labels, Label, 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, 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, ImageProps, 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 */
 declare function Lightbox({ carousel, animation, render, toolbar, controller, noScroll, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;
@@ -15,7 +15,7 @@ declare function makeComposePrefix(base: string): (prefix?: string) => string;
 declare function translateLabel(labels: Labels | undefined, defaultLabel: Label): string;
 /** @deprecated - use `translateLabel` instead */
 declare function label(labels: Labels | undefined, defaultLabel: Label): string;
-declare function translateSlideCounter(labels: Labels | undefined, slides: Slide[], index: number): string;
+declare function translateSlideCounter(labels: Labels | undefined, slides: readonly Slide[], index: number): 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;
@@ -36,9 +36,9 @@ declare function computeSlideRect(containerRect: ContainerRect, padding: LengthO
 };
 declare function devicePixelRatio(): number;
 declare function getSlideIndex(index: number, slidesCount: number): number;
-declare function hasSlides(slides: Slide[]): slides is [Slide, ...Slide[]];
+declare function hasSlides(slides: readonly Slide[]): slides is [Slide, ...Slide[]];
 declare function getSlide(slides: [Slide, ...Slide[]], index: number): SlideImage;
-declare function getSlideIfPresent(slides: Slide[], index: number): SlideImage | undefined;
+declare function getSlideIfPresent(slides: readonly Slide[], index: number): SlideImage | undefined;
 declare function getSlideKey(slide: Slide): string | undefined;
 declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
 declare function stopNavigationEventsPropagation(): {
@@ -46,7 +46,7 @@ declare function stopNavigationEventsPropagation(): {
     onKeyDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
     onWheel: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
 };
-declare function calculatePreload(carousel: CarouselSettings, slides: Slide[], minimum?: number): number;
+declare function calculatePreload(carousel: CarouselSettings, slides: readonly Slide[], minimum?: number): number;
 declare function makeInertWhen(condition: boolean): {
     inert: boolean;
 };
@@ -54,7 +54,7 @@ declare function reflow(node: HTMLElement): void;
 
 declare function createModule(name: string, component: Component): Module;
 declare function createNode(module: Module, children?: Node$1[]): Node$1;
-declare function withPlugins(root: Node$1[], plugins?: Plugin[], augmentations?: Augmentation[]): {
+declare function withPlugins(root: Node$1[], plugins?: readonly Plugin[], augmentations?: Augmentation[]): {
     config: Node$1[];
     augmentation: Augmentation;
 };

package/dist/index.js

@@ -6,7 +6,7 @@ export { ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE
 
 const cssPrefix$3 = "yarl__";
 function clsx(...classes) {
-    return [...classes].filter(Boolean).join(" ");
+    return classes.filter(Boolean).join(" ");
 }
 function cssClass(name) {
     return `${cssPrefix$3}${name}`;
@@ -715,10 +715,10 @@ function ImageSlide({ slide: image, offset, render, rect, imageFit, imageProps,
             maxWidth: "100%",
             maxHeight: "100%",
         };
-    const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
+    const srcSet = (_g = image.srcSet) === null || _g === void 0 ? void 0 : _g.slice().sort((a, b) => a.width - b.width).map((item) => `${item.src} ${item.width}w`).join(", ");
     const estimateActualWidth = () => rect && !cover && image.width && image.height ? (rect.height / image.height) * image.width : Number.MAX_VALUE;
     const sizes = srcSet && rect && hasWindow() ? `${Math.round(Math.min(estimateActualWidth(), rect.width))}px` : undefined;
-    const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = imageProps || {};
+    const { style: imagePropsStyle, className: imagePropsClassName, ...restImageProps } = (typeof imageProps === "function" ? imageProps(image) : imageProps) || {};
     return (React.createElement(React.Fragment, null,
         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: (_h = image.alt) !== null && _h !== void 0 ? _h : "", sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },

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

@@ -39,7 +39,7 @@ declare module "yet-another-react-lightbox" {
         /** disables the capability of remote playback */
         disableRemotePlayback?: boolean;
         /** an array of video files */
-        sources: {
+        sources: readonly {
             /** video source URL */
             src: string;
             /** video source type (e.g., `video/mp4`) */

package/dist/styles.css

@@ -1 +1 @@
-.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-moz-user-select:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}
+.yarl__fullsize{height:100%;width:100%}.yarl__relative{position:relative}.yarl__portal{bottom:0;left:0;opacity:0;overflow:hidden;position:fixed;right:0;top:0;transition:opacity var(--yarl__fade_animation_duration,.25s) var(--yarl__fade_animation_timing_function,ease);z-index:var(--yarl__portal_zindex,9999)}.yarl__portal_open{opacity:1}.yarl__container{background-color:var(--yarl__container_background_color,var(--yarl__color_backdrop,#000));bottom:0;left:0;outline:none;overflow:hidden;overscroll-behavior:var(--yarl__controller_overscroll_behavior,contain);position:absolute;right:0;top:0;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none}.yarl__carousel{align-content:center;align-items:stretch;display:flex;flex:0 0 auto;height:100%;justify-content:center;opacity:var(--yarl__pull_opacity,1);transform:translate(var(--yarl__swipe_offset,0),var(--yarl__pull_offset,0));width:calc(100% + (var(--yarl__carousel_slides_count) - 1)*(100% + var(--yarl__carousel_spacing_px, 0)*1px + var(--yarl__carousel_spacing_percent, 0)*1%))}.yarl__carousel_with_slides{-moz-column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%);column-gap:calc(var(--yarl__carousel_spacing_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_spacing_percent, 0)*1%)}.yarl__flex_center{align-content:center;align-items:center;display:flex;justify-content:center}.yarl__slide{flex:1;overflow:hidden;padding:calc(var(--yarl__carousel_padding_px, 0)*1px + 100/(var(--yarl__carousel_slides_count)*100 + (var(--yarl__carousel_slides_count) - 1)*var(--yarl__carousel_spacing_percent, 0))*var(--yarl__carousel_padding_percent, 0)*1%);position:relative}[dir=rtl] .yarl__slide{--yarl__direction:-1}.yarl__slide_image{max-height:100%;max-width:100%;-o-object-fit:contain;object-fit:contain;touch-action:var(--yarl__controller_touch_action,none);-webkit-user-select:none;-moz-user-select:none;user-select:none;-webkit-touch-callout:none}.yarl__slide_image_cover{height:100%;-o-object-fit:cover;object-fit:cover;width:100%}.yarl__slide_image_loading{opacity:0}@media screen and (min-width:800px){.yarl__slide_wrapper:not(.yarl__slide_wrapper_interactive) .yarl__slide_image{-webkit-backface-visibility:hidden;-webkit-transform:translateZ(0);-webkit-transform-style:preserve-3d}}.yarl__slide_placeholder{left:50%;line-height:0;position:absolute;top:50%;transform:translateX(-50%) translateY(-50%)}.yarl__slide_loading{animation:yarl__delayed_fadein 1s linear;color:var(--yarl__slide_icon_loading_color,var(--yarl__color_button,hsla(0,0%,100%,.8)))}.yarl__slide_loading line{animation:yarl__stroke_opacity 1s linear infinite}.yarl__slide_loading line:first-of-type{animation-delay:-1.875s}.yarl__slide_loading line:nth-of-type(2){animation-delay:-1.75s}.yarl__slide_loading line:nth-of-type(3){animation-delay:-1.625s}.yarl__slide_loading line:nth-of-type(4){animation-delay:-1.5s}.yarl__slide_loading line:nth-of-type(5){animation-delay:-1.375s}.yarl__slide_loading line:nth-of-type(6){animation-delay:-1.25s}.yarl__slide_loading line:nth-of-type(7){animation-delay:-1.125s}.yarl__slide_loading line:nth-of-type(8){animation-delay:-1s}.yarl__slide_error{color:var(--yarl__slide_icon_error_color,red);height:var(--yarl__slide_icon_error_size,48px);width:var(--yarl__slide_icon_error_size,48px)}@media (prefers-reduced-motion){.yarl__portal,.yarl__slide{transition:unset}.yarl__slide_loading,.yarl__slide_loading line{animation:unset}}.yarl__toolbar{bottom:auto;display:flex;justify-content:flex-end;left:auto;padding:var(--yarl__toolbar_padding,8px);position:absolute;right:0;top:0}[dir=rtl] .yarl__toolbar{bottom:auto;left:0;right:auto;top:0}.yarl__icon{height:var(--yarl__icon_size,32px);width:var(--yarl__icon_size,32px)}.yarl__button{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--yarl__button_background_color,transparent);border:var(--yarl__button_border,0);color:var(--yarl__color_button,hsla(0,0%,100%,.8));cursor:pointer;filter:var(--yarl__button_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));line-height:0;margin:var(--yarl__button_margin,0);outline:none;padding:var(--yarl__button_padding,8px);-webkit-tap-highlight-color:transparent}.yarl__button:focus{color:var(--yarl__color_button_active,#fff)}.yarl__button:focus:not(:focus-visible){color:var(--yarl__color_button,hsla(0,0%,100%,.8))}.yarl__button:focus-visible{color:var(--yarl__color_button_active,#fff)}@media (hover:hover){.yarl__button:focus-visible:hover,.yarl__button:focus:hover,.yarl__button:hover{color:var(--yarl__color_button_active,#fff)}}.yarl__button:disabled{color:var(--yarl__color_button_disabled,hsla(0,0%,100%,.4));cursor:default}.yarl__navigation_next,.yarl__navigation_prev{padding:var(--yarl__navigation_button_padding,24px 16px);position:absolute;top:50%;transform:translateY(-50%)}.yarl__navigation_prev{left:0}[dir=rtl] .yarl__navigation_prev{left:unset;right:0;transform:translateY(-50%) rotate(180deg)}.yarl__navigation_next{right:0}[dir=rtl] .yarl__navigation_next{left:0;right:unset;transform:translateY(-50%) rotate(180deg)}.yarl__no_scroll{height:100%;overflow:hidden;overscroll-behavior:none}@keyframes yarl__delayed_fadein{0%{opacity:0}80%{opacity:0}to{opacity:1}}@keyframes yarl__stroke_opacity{0%{stroke-opacity:1}to{stroke-opacity:.125}}

package/dist/types.d.ts

@@ -66,13 +66,13 @@ interface LightboxProps {
     /** starting slide index */
     index: number;
     /** slides to display in the lightbox */
-    slides: Slide[];
+    slides: readonly Slide[];
     /** custom render functions */
     render: Render;
     /** custom UI labels / translations */
     labels: Labels;
     /** enabled plugins */
-    plugins: Plugin[];
+    plugins: readonly Plugin[];
     /** toolbar settings */
     toolbar: ToolbarSettings;
     /** carousel settings */
@@ -120,7 +120,7 @@ interface SlideImage extends GenericSlide {
     /** `object-fit` setting */
     imageFit?: ImageFit;
     /** alternative images to be passed to the 'srcSet' */
-    srcSet?: ImageSource[];
+    srcSet?: readonly ImageSource[];
 }
 /** Image source */
 interface ImageSource {
@@ -200,9 +200,10 @@ interface CarouselSettings {
     /** `object-fit` setting for image slides */
     imageFit: ImageFit;
     /** custom image attributes */
-    imageProps: Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "sizes" | "srcSet" | "onLoad" | "onError" | "onClick">;
+    imageProps: ImageProps | ((slide: Slide) => ImageProps);
 }
 type LengthOrPercentage = `${number}px` | `${number}%` | number;
+type ImageProps = Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "alt" | "sizes" | "srcSet" | "onLoad" | "onError" | "onClick">;
 /** Animation settings */
 interface AnimationSettings {
     /** fade-in / fade-out animation settings */
@@ -284,13 +285,13 @@ type LightboxStateSwipeAction = {
 /** Lightbox state update action */
 type LightboxStateUpdateAction = {
     type: "update";
-    slides: Slide[];
+    slides: readonly Slide[];
     index: number;
 };
 /** Lightbox state */
 interface LightboxState {
     /** lightbox slides */
-    slides: Slide[];
+    slides: readonly Slide[];
     /** current slide index */
     currentIndex: number;
     /** current slide index in the (-∞, +∞) range */
@@ -407,7 +408,7 @@ type Label = keyof Labels;
 /** Toolbar settings */
 interface ToolbarSettings {
     /** buttons to render in the toolbar */
-    buttons: (ToolbarButtonKey | React.ReactNode)[];
+    buttons: readonly (ToolbarButtonKey | React.ReactNode)[];
 }
 type ToolbarButtonKey = keyof ToolbarButtonKeys;
 interface ToolbarButtonKeys {
@@ -450,9 +451,9 @@ type Plugin = (props: PluginProps) => void;
 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 object ? {
+type DeepPartialValue<T, E extends string = never> = T extends readonly 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;
 
 export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, CLASS_SLIDE, CLASS_SLIDE_WRAPPER, CLASS_SLIDE_WRAPPER_INTERACTIVE, 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, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SHARE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, activeSlideStatus };
-export type { AnimationSettings, Augmentation, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepPartial, DeepPartialValue, EventTypes, GenericSlide, ImageFit, ImageSource, Label, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, Module, NavigationAction, NoScrollSettings, Node, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, ViewCallbackProps };
+export type { AnimationSettings, Augmentation, Callback, Callbacks, CarouselSettings, ClickCallbackProps, Component, ComponentProps, ContainerRect, ControllerRef, ControllerSettings, DeepPartial, DeepPartialValue, EventTypes, GenericSlide, ImageFit, ImageProps, ImageSource, Label, Labels, LengthOrPercentage, LightboxExternalProps, LightboxProps, LightboxState, LightboxStateSwipeAction, LightboxStateUpdateAction, Module, NavigationAction, NoScrollSettings, Node, Plugin, PluginProps, PortalSettings, Render, RenderFunction, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, Slide, SlideImage, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, ToolbarSettings, ViewCallbackProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yet-another-react-lightbox",
-  "version": "3.28.0",
+  "version": "3.29.1",
   "description": "Modern React lightbox component",
   "author": "Igor Danchenko",
   "license": "MIT",
@@ -16,10 +16,6 @@
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
-    "./styles.css": {
-      "types": "./dist/styles.css.d.ts",
-      "default": "./dist/styles.css"
-    },
     "./plugins": {
       "types": "./dist/plugins/index.d.ts",
       "default": "./dist/plugins/index.js"
@@ -28,18 +24,10 @@
       "types": "./dist/plugins/captions/index.d.ts",
       "default": "./dist/plugins/captions/index.js"
     },
-    "./plugins/captions.css": {
-      "types": "./dist/plugins/captions/captions.css.d.ts",
-      "default": "./dist/plugins/captions/captions.css"
-    },
     "./plugins/counter": {
       "types": "./dist/plugins/counter/index.d.ts",
       "default": "./dist/plugins/counter/index.js"
     },
-    "./plugins/counter.css": {
-      "types": "./dist/plugins/counter/counter.css.d.ts",
-      "default": "./dist/plugins/counter/counter.css"
-    },
     "./plugins/download": {
       "types": "./dist/plugins/download/index.d.ts",
       "default": "./dist/plugins/download/index.js"
@@ -64,10 +52,6 @@
       "types": "./dist/plugins/thumbnails/index.d.ts",
       "default": "./dist/plugins/thumbnails/index.js"
     },
-    "./plugins/thumbnails.css": {
-      "types": "./dist/plugins/thumbnails/thumbnails.css.d.ts",
-      "default": "./dist/plugins/thumbnails/thumbnails.css"
-    },
     "./plugins/video": {
       "types": "./dist/plugins/video/index.d.ts",
       "default": "./dist/plugins/video/index.js"
@@ -75,7 +59,11 @@
     "./plugins/zoom": {
       "types": "./dist/plugins/zoom/index.d.ts",
       "default": "./dist/plugins/zoom/index.js"
-    }
+    },
+    "./styles.css": "./dist/styles.css",
+    "./plugins/captions.css": "./dist/plugins/captions/captions.css",
+    "./plugins/counter.css": "./dist/plugins/counter/counter.css",
+    "./plugins/thumbnails.css": "./dist/plugins/thumbnails/thumbnails.css"
   },
   "typesVersions": {
     "*": {
@@ -85,24 +73,15 @@
       "core": [
         "dist/index.d.ts"
       ],
-      "styles.css": [
-        "dist/styles.css.d.ts"
-      ],
       "plugins": [
         "dist/plugins/index.d.ts"
       ],
       "plugins/captions": [
         "dist/plugins/captions/index.d.ts"
       ],
-      "plugins/captions.css": [
-        "dist/plugins/captions/captions.css.d.ts"
-      ],
       "plugins/counter": [
         "dist/plugins/counter/index.d.ts"
       ],
-      "plugins/counter.css": [
-        "dist/plugins/counter/counter.css.d.ts"
-      ],
       "plugins/download": [
         "dist/plugins/download/index.d.ts"
       ],
@@ -121,9 +100,6 @@
       "plugins/thumbnails": [
         "dist/plugins/thumbnails/index.d.ts"
       ],
-      "plugins/thumbnails.css": [
-        "dist/plugins/thumbnails/thumbnails.css.d.ts"
-      ],
       "plugins/video": [
         "dist/plugins/video/index.d.ts"
       ],

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

@@ -1,2 +0,0 @@
-declare const styles: unknown;
-export default styles;

package/dist/plugins/counter/counter.css.d.ts

@@ -1,2 +0,0 @@
-declare const styles: unknown;
-export default styles;

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

@@ -1,2 +0,0 @@
-declare const styles: unknown;
-export default styles;

package/dist/styles.css.d.ts

@@ -1,2 +0,0 @@
-declare const styles: unknown;
-export default styles;