yet-another-react-lightbox 3.29.0 → 3.29.2

package/dist/index.d.ts

@@ -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;
 };
@@ -87,7 +87,7 @@ declare function useEventCallback<Args extends unknown[], Return>(fn: (...args:
 declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
 declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | null | undefined, refB: React.Ref<InstanceB> | null | undefined): React.Ref<InstanceA & InstanceB> | null;
 
-declare const useLayoutEffect: typeof React.useLayoutEffect;
+declare const useLayoutEffect: typeof React.useEffect;
 
 declare function useLoseFocus(focus: () => void, disabled?: boolean): {
     onFocus: () => void;

package/dist/index.js

@@ -382,9 +382,13 @@ function LightboxStateProvider({ slides, index, children }) {
         globalIndex: index,
         currentSlide: getSlideIfPresent(slides, index),
     });
-    React.useEffect(() => {
+    const [prevSlides, setPrevSlides] = React.useState(slides);
+    const [prevIndex, setPrevIndex] = React.useState(index);
+    if (slides !== prevSlides || index !== prevIndex) {
+        setPrevSlides(slides);
+        setPrevIndex(index);
         dispatch({ type: "update", slides, index });
-    }, [slides, index]);
+    }
     const context = React.useMemo(() => ({ ...state, state, dispatch }), [state, dispatch]);
     return (React.createElement(LightboxDispatchContext.Provider, { value: dispatch },
         React.createElement(LightboxStateContext.Provider, { value: context }, children)));
@@ -715,7 +719,7 @@ 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 } = (typeof imageProps === "function" ? imageProps(image) : imageProps) || {};

package/dist/plugins/counter/counter.css

@@ -1 +1 @@
-.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);-moz-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}
+.yarl__counter{bottom:var(--yarl__counter_bottom,unset);color:var(--yarl__counter_color,var(--yarl__color_button,hsla(0,0%,100%,.8)));filter:var(--yarl__counter_filter,drop-shadow(2px 2px 2px rgba(0,0,0,.8)));left:var(--yarl__counter_left,0);line-height:var(--yarl__counter_line_height,var(--yarl__icon_size,32px));margin:var(--yarl__counter_margin,var(--yarl__toolbar_padding,8px));padding:var(--yarl__counter_padding,var(--yarl__button_padding,8px));position:var(--yarl__counter_position,absolute);right:var(--yarl__counter_right,unset);top:var(--yarl__counter_top,0);-webkit-user-select:var(--yarl__counter_user_select,none);-moz-user-select:var(--yarl__counter_user_select,none);user-select:var(--yarl__counter_user_select,none)}[dir=rtl] .yarl__counter{left:var(--yarl__counter_rtl_left,unset);right:var(--yarl__counter_rtl_right,0)}

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/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 {
@@ -285,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 */
@@ -408,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 {
@@ -451,7 +451,7 @@ 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;
 

package/package.json

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