yet-another-react-lightbox 2.6.2 → 3.0.0

package/dist/core/modules/Controller.js

@@ -1,15 +1,17 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cleanup, clsx, cssClass, cssVar, getAnimationEasing, getNavigationAnimationDuration, getSwipeAnimationDuration, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
+import { cleanup, clsx, computeSlideRect, cssClass, cssVar, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
 import { useAnimation, useContainerRect, useDelay, useEventCallback, useForkRef, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useLightboxState } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
-import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, YARL_EVENT_BACKDROP_CLICK, } from "../consts.js";
+import { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, CLASS_FLEX_CENTER, EVENT_ON_KEY_UP, MODULE_CONTROLLER, VK_ESCAPE, } from "../consts.js";
 const cssContainerPrefix = makeComposePrefix("container");
-const ControllerContext = React.createContext(null);
+export const ControllerContext = React.createContext(null);
 export const useController = makeUseContext("useController", "ControllerContext", ControllerContext);
 export function Controller({ children, ...props }) {
-    const { carousel, slides, animation, controller, on, styles } = props;
+    var _a;
+    const { carousel, animation, controller, on, styles, render } = props;
+    const [toolbarWidth, setToolbarWidth] = React.useState();
     const { state, dispatch } = useLightboxState();
     const [swipeState, setSwipeState] = React.useState(SwipeState.NONE);
     const swipeOffset = React.useRef(0);
@@ -22,21 +24,28 @@ export function Controller({ children, ...props }) {
     const carouselRef = React.useRef(null);
     const setCarouselRef = useForkRef(carouselRef, undefined);
     const isRTL = useRTL();
-    const rtl = (value) => (isRTL ? -1 : 1) * (isNumber(value) ? value : 1);
+    const rtl = (value) => (isRTL ? -1 : 1) * (typeof value === "number" ? value : 1);
+    const focus = useEventCallback(() => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
+    const getLightboxProps = useEventCallback(() => props);
+    const getLightboxState = useEventCallback(() => state);
+    const prev = React.useCallback((params) => publish(ACTION_PREV, params), [publish]);
+    const next = React.useCallback((params) => publish(ACTION_NEXT, params), [publish]);
+    const close = React.useCallback(() => publish(ACTION_CLOSE), [publish]);
     const isSwipeValid = (offset) => !(carousel.finite &&
         ((rtl(offset) > 0 && state.currentIndex === 0) ||
-            (rtl(offset) < 0 && state.currentIndex === slides.length - 1)));
+            (rtl(offset) < 0 && state.currentIndex === state.slides.length - 1)));
     const setSwipeOffset = (offset) => {
         var _a;
         swipeOffset.current = offset;
         (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.style.setProperty(cssVar("swipe_offset"), `${Math.round(offset)}px`);
     };
-    const animate = useAnimation(carouselRef, (snapshot, rect, translate) => {
+    const { prepareAnimation, isAnimationPlaying } = useAnimation(carouselRef, (snapshot, rect, translate) => {
         var _a;
         if (carouselRef.current && containerRect && ((_a = state.animation) === null || _a === void 0 ? void 0 : _a.duration)) {
             const parsedSpacing = parseLengthPercentage(carousel.spacing);
-            const spacingValue = (parsedSpacing.percent ? (parsedSpacing.percent * containerRect.width) / 100 : parsedSpacing.pixel) ||
-                0;
+            const spacingValue = (parsedSpacing.percent
+                ? (parsedSpacing.percent * containerRect.width) / 100
+                : parsedSpacing.pixel) || 0;
             return {
                 keyframes: [
                     {
@@ -54,14 +63,12 @@ export function Controller({ children, ...props }) {
         return undefined;
     });
     const swipe = useEventCallback((action) => {
-        var _a;
+        var _a, _b;
         const currentSwipeOffset = action.offset || 0;
-        const swipeDuration = !currentSwipeOffset
-            ? getNavigationAnimationDuration(animation)
-            : getSwipeAnimationDuration(animation);
-        const swipeEasing = getAnimationEasing(!currentSwipeOffset ? animation.navigation : animation.swipe);
+        const swipeDuration = !currentSwipeOffset ? (_a = animation.navigation) !== null && _a !== void 0 ? _a : animation.swipe : animation.swipe;
+        const swipeEasing = !currentSwipeOffset && !isAnimationPlaying() ? animation.easing.navigation : animation.easing.swipe;
         let { direction } = action;
-        const count = (_a = action.count) !== null && _a !== void 0 ? _a : 1;
+        const count = (_b = action.count) !== null && _b !== void 0 ? _b : 1;
         let newSwipeState = SwipeState.ANIMATION;
         let newSwipeAnimationDuration = swipeDuration * count;
         if (!direction) {
@@ -110,25 +117,30 @@ export function Controller({ children, ...props }) {
             setSwipeState(SwipeState.NONE);
         }, newSwipeAnimationDuration);
         if (carouselRef.current) {
-            animate({
+            prepareAnimation({
                 rect: carouselRef.current.getBoundingClientRect(),
                 index: state.globalIndex,
             });
         }
         setSwipeState(newSwipeState);
-        publish(ACTION_SWIPE, { increment, duration: newSwipeAnimationDuration, easing: swipeEasing });
+        publish(ACTION_SWIPE, {
+            type: "swipe",
+            increment,
+            duration: newSwipeAnimationDuration,
+            easing: swipeEasing,
+        });
     });
     React.useEffect(() => {
         var _a, _b;
         if (((_a = state.animation) === null || _a === void 0 ? void 0 : _a.increment) && ((_b = state.animation) === null || _b === void 0 ? void 0 : _b.duration)) {
-            cleanupAnimationIncrement(() => dispatch({ increment: 0 }), state.animation.duration);
+            cleanupAnimationIncrement(() => dispatch({ type: "swipe", increment: 0 }), state.animation.duration);
         }
     }, [state.animation, dispatch, cleanupAnimationIncrement]);
     const swipeParams = [
         subscribeSensors,
         isSwipeValid,
         (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) || 0,
-        getSwipeAnimationDuration(animation),
+        animation.swipe,
         () => setSwipeState(SwipeState.SWIPE),
         (offset) => setSwipeOffset(offset),
         (offset, duration) => swipe({ offset, duration, count: 1 }),
@@ -143,30 +155,50 @@ export function Controller({ children, ...props }) {
         }
     });
     React.useEffect(focusOnMount, [focusOnMount]);
-    const handleIndexChange = useEventCallback(() => {
+    const onViewCallback = useEventCallback(() => {
         var _a;
-        (_a = on.view) === null || _a === void 0 ? void 0 : _a.call(on, state.currentIndex);
+        (_a = on.view) === null || _a === void 0 ? void 0 : _a.call(on, { index: state.currentIndex });
     });
-    React.useEffect(handleIndexChange, [state.currentIndex, handleIndexChange]);
+    React.useEffect(onViewCallback, [state.globalIndex, onViewCallback]);
     React.useEffect(() => cleanup(subscribe(ACTION_PREV, (action) => swipe({ direction: ACTION_PREV, ...action })), subscribe(ACTION_NEXT, (action) => swipe({ direction: ACTION_NEXT, ...action })), subscribe(ACTION_SWIPE, (action) => dispatch(action))), [subscribe, swipe, dispatch]);
     React.useEffect(() => subscribeSensors(EVENT_ON_KEY_UP, (event) => {
         if (event.code === VK_ESCAPE) {
-            publish(ACTION_CLOSE);
+            close();
         }
-    }), [subscribeSensors, publish]);
-    React.useEffect(() => controller.closeOnBackdropClick
-        ? subscribe(YARL_EVENT_BACKDROP_CLICK, () => publish(ACTION_CLOSE))
-        : () => { }, [controller.closeOnBackdropClick, publish, subscribe]);
-    const transferFocus = useEventCallback(() => { var _a; return (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.focus(); });
-    const getLightboxProps = useEventCallback(() => props);
+    }), [subscribeSensors, close]);
     const context = React.useMemo(() => ({
-        getLightboxProps,
-        subscribeSensors,
-        transferFocus,
+        prev,
+        next,
+        close,
+        focus,
+        slideRect: containerRect ? computeSlideRect(containerRect, carousel.padding) : { width: 0, height: 0 },
         containerRect: containerRect || { width: 0, height: 0 },
+        subscribeSensors,
         containerRef,
         setCarouselRef,
-    }), [getLightboxProps, subscribeSensors, transferFocus, containerRect, containerRef, setCarouselRef]);
+        toolbarWidth,
+        setToolbarWidth,
+    }), [
+        prev,
+        next,
+        close,
+        focus,
+        subscribeSensors,
+        containerRect,
+        containerRef,
+        setCarouselRef,
+        toolbarWidth,
+        setToolbarWidth,
+        carousel.padding,
+    ]);
+    React.useImperativeHandle(controller.ref, () => ({
+        prev,
+        next,
+        close,
+        focus,
+        getLightboxProps,
+        getLightboxState,
+    }), [prev, next, close, focus, getLightboxProps, getLightboxState]);
     return (React.createElement("div", { ref: handleContainerRef, className: clsx(cssClass(cssContainerPrefix()), cssClass(CLASS_FLEX_CENTER)), style: {
             ...(swipeState === SwipeState.SWIPE
                 ? { [cssVar("swipe_offset")]: `${Math.round(swipeOffset.current)}px` }
@@ -175,6 +207,8 @@ export function Controller({ children, ...props }) {
                 ? { [cssVar("controller_touch_action")]: controller.touchAction }
                 : null),
             ...styles.container,
-        }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && React.createElement(ControllerContext.Provider, { value: context }, children)));
+        }, ...(controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context },
+        children, (_a = render.controls) === null || _a === void 0 ? void 0 :
+        _a.call(render)))));
 }
 export const ControllerModule = createModule(MODULE_CONTROLLER, Controller);

package/dist/core/modules/Navigation.d.ts

@@ -1,14 +1,13 @@
 import * as React from "react";
-import { ComponentProps, Labels } from "../../types.js";
+import { ComponentProps, RenderFunction } from "../../types.js";
 export type NavigationButtonProps = {
-    labels?: Labels;
     label: string;
     icon: React.ElementType;
-    renderIcon?: () => React.ReactNode;
+    renderIcon?: RenderFunction;
     action: "prev" | "next";
     onClick: () => void;
     disabled?: boolean;
 };
-export declare function NavigationButton({ labels, label, icon, renderIcon, action, onClick, disabled, }: NavigationButtonProps): JSX.Element;
-export declare function Navigation({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): JSX.Element;
+export declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps): JSX.Element;
+export declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): JSX.Element;
 export declare const NavigationModule: import("../../types.js").Module;

package/dist/core/modules/Navigation.js

@@ -1,33 +1,36 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { useEventCallback, useLoseFocus, useRTL, useThrottle } from "../hooks/index.js";
-import { cssClass, getNavigationAnimationDuration, label as translateLabel } from "../utils.js";
+import { cssClass, label as translateLabel } from "../utils.js";
 import { IconButton, NextIcon, PreviousIcon } from "../components/index.js";
-import { useEvents, useLightboxState } from "../contexts/index.js";
+import { useLightboxProps, useLightboxState } from "../contexts/index.js";
 import { useController } from "./Controller.js";
 import { ACTION_NEXT, ACTION_PREV, EVENT_ON_KEY_DOWN, MODULE_NAVIGATION, VK_ARROW_LEFT, VK_ARROW_RIGHT, } from "../consts.js";
-export function NavigationButton({ labels, label, icon, renderIcon, action, onClick, disabled, }) {
+export function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }) {
+    const { labels } = useLightboxProps();
     return (React.createElement(IconButton, { label: translateLabel(labels, label), icon: icon, renderIcon: renderIcon, className: cssClass(`navigation_${action}`), disabled: disabled, onClick: onClick, ...useLoseFocus(disabled) }));
 }
-export function Navigation({ slides, carousel: { finite }, animation, labels, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
-    const { currentIndex } = useLightboxState().state;
-    const { subscribeSensors } = useController();
-    const { publish } = useEvents();
+export function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }) {
+    var _a;
+    const { slides, currentIndex } = useLightboxState().state;
+    const { prev, next, subscribeSensors } = useController();
     const isRTL = useRTL();
     const prevDisabled = slides.length === 0 || (finite && currentIndex === 0);
     const nextDisabled = slides.length === 0 || (finite && currentIndex === slides.length - 1);
-    const publishThrottled = useThrottle((action) => publish(action), getNavigationAnimationDuration(animation) / 2);
+    const throttle = ((_a = animation.navigation) !== null && _a !== void 0 ? _a : animation.swipe) / 2;
+    const prevThrottled = useThrottle(prev, throttle);
+    const nextThrottled = useThrottle(next, throttle);
     const handleKeyDown = useEventCallback((event) => {
         if (event.key === VK_ARROW_LEFT && !(isRTL ? nextDisabled : prevDisabled)) {
-            publishThrottled(isRTL ? ACTION_NEXT : ACTION_PREV);
+            (isRTL ? nextThrottled : prevThrottled)();
         }
         if (event.key === VK_ARROW_RIGHT && !(isRTL ? prevDisabled : nextDisabled)) {
-            publishThrottled(isRTL ? ACTION_PREV : ACTION_NEXT);
+            (isRTL ? prevThrottled : nextThrottled)();
         }
     });
     React.useEffect(() => subscribeSensors(EVENT_ON_KEY_DOWN, handleKeyDown), [subscribeSensors, handleKeyDown]);
     return (React.createElement(React.Fragment, null,
-        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, labels: labels, onClick: () => publish(ACTION_PREV) })),
-        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, labels: labels, onClick: () => publish(ACTION_NEXT) }))));
+        buttonPrev ? (buttonPrev()) : (React.createElement(NavigationButton, { label: "Previous", action: ACTION_PREV, icon: PreviousIcon, renderIcon: iconPrev, disabled: prevDisabled, onClick: prev })),
+        buttonNext ? (buttonNext()) : (React.createElement(NavigationButton, { label: "Next", action: ACTION_NEXT, icon: NextIcon, renderIcon: iconNext, disabled: nextDisabled, onClick: next }))));
 }
 export const NavigationModule = createModule(MODULE_NAVIGATION, Navigation);

package/dist/core/modules/Portal.js

@@ -2,7 +2,7 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 import { LightboxDefaultProps } from "../../props.js";
 import { createModule } from "../config.js";
-import { clsx, composePrefix, cssClass, cssVar, getAnimationEasing, getFadeAnimationDuration } from "../utils.js";
+import { clsx, composePrefix, cssClass, cssVar } from "../utils.js";
 import { useEventCallback, useMotionPreference } from "../hooks/index.js";
 import { useEvents, useTimeouts } from "../contexts/index.js";
 import { ACTION_CLOSE, CLASS_NO_SCROLL_PADDING, MODULE_PORTAL } from "../consts.js";
@@ -28,8 +28,7 @@ export function Portal({ children, animation, styles, className, on, close }) {
     const { setTimeout } = useTimeouts();
     const { subscribe } = useEvents();
     const reduceMotion = useMotionPreference();
-    const animationDuration = !reduceMotion ? getFadeAnimationDuration(animation) : 0;
-    const animationEasing = !reduceMotion ? getAnimationEasing(animation.fade) : undefined;
+    const animationDuration = !reduceMotion ? animation.fade : 0;
     React.useEffect(() => {
         setMounted(true);
         return () => {
@@ -83,7 +82,9 @@ export function Portal({ children, animation, styles, className, on, close }) {
                 ...(animation.fade !== LightboxDefaultProps.animation.fade
                     ? { [cssVar("fade_animation_duration")]: `${animationDuration}ms` }
                     : null),
-                ...(animationEasing ? { [cssVar("fade_animation_timing_function")]: animationEasing } : null),
+                ...(animation.easing.fade !== LightboxDefaultProps.animation.easing.fade
+                    ? { [cssVar("fade_animation_timing_function")]: animation.easing.fade }
+                    : null),
                 ...styles.root,
             } }, children), document.body)
         : null;

package/dist/core/modules/Root.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import { ComponentProps } from "../../types.js";
+export declare function Root({ children }: ComponentProps): JSX.Element;
+export declare const RootModule: import("../../types.js").Module;

package/dist/core/modules/Root.js

@@ -0,0 +1,7 @@
+import * as React from "react";
+import { createModule } from "../config.js";
+import { MODULE_ROOT } from "../consts.js";
+export function Root({ children }) {
+    return React.createElement(React.Fragment, null, children);
+}
+export const RootModule = createModule(MODULE_ROOT, Root);

package/dist/core/modules/Toolbar.d.ts

@@ -1,10 +1,4 @@
 /// <reference types="react" />
 import { ComponentProps } from "../../types.js";
-import { YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
-declare module "../" {
-    interface EventTypes {
-        [YARL_EVENT_TOOLBAR_WIDTH]: number;
-    }
-}
 export declare function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }: ComponentProps): JSX.Element;
 export declare const ToolbarModule: import("../../types.js").Module;

package/dist/core/modules/Toolbar.js

@@ -1,22 +1,20 @@
 import * as React from "react";
 import { createModule } from "../config.js";
 import { composePrefix, cssClass, label } from "../utils.js";
-import { useEvents } from "../contexts/index.js";
 import { CloseIcon, IconButton } from "../components/index.js";
 import { useContainerRect } from "../hooks/useContainerRect.js";
-import { ACTION_CLOSE, MODULE_TOOLBAR, YARL_EVENT_TOOLBAR_WIDTH } from "../consts.js";
+import { useController } from "./Controller.js";
+import { ACTION_CLOSE, MODULE_TOOLBAR } from "../consts.js";
 function cssPrefix(value) {
     return composePrefix(MODULE_TOOLBAR, value);
 }
 export function Toolbar({ toolbar: { buttons }, labels, render: { buttonClose, iconClose } }) {
-    const { publish } = useEvents();
+    const { close, setToolbarWidth } = useController();
     const { setContainerRef, containerRect } = useContainerRect();
     React.useEffect(() => {
-        if (containerRect === null || containerRect === void 0 ? void 0 : containerRect.width) {
-            publish(YARL_EVENT_TOOLBAR_WIDTH, containerRect.width);
-        }
-    }, [publish, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
-    const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => publish(ACTION_CLOSE) }));
+        setToolbarWidth(containerRect === null || containerRect === void 0 ? void 0 : containerRect.width);
+    }, [setToolbarWidth, containerRect === null || containerRect === void 0 ? void 0 : containerRect.width]);
+    const renderCloseButton = () => buttonClose ? (buttonClose()) : (React.createElement(IconButton, { key: ACTION_CLOSE, label: label(labels, "Close"), icon: CloseIcon, renderIcon: iconClose, onClick: () => close() }));
     return (React.createElement("div", { ref: setContainerRef, className: cssClass(cssPrefix()) }, buttons === null || buttons === void 0 ? void 0 : buttons.map((button) => (button === ACTION_CLOSE ? renderCloseButton() : button))));
 }
 export const ToolbarModule = createModule(MODULE_TOOLBAR, Toolbar);

package/dist/core/modules/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./Carousel.js";
 export * from "./Controller.js";
-export * from "./Core.js";
 export * from "./Navigation.js";
 export * from "./NoScroll.js";
 export * from "./Portal.js";
+export * from "./Root.js";
 export * from "./Toolbar.js";

package/dist/core/modules/index.js

@@ -1,7 +1,7 @@
 export * from "./Carousel.js";
 export * from "./Controller.js";
-export * from "./Core.js";
 export * from "./Navigation.js";
 export * from "./NoScroll.js";
 export * from "./Portal.js";
+export * from "./Root.js";
 export * from "./Toolbar.js";

package/dist/core/utils.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { AnimationSettings, AnimationSpec, Labels, LightboxProps, Slide, SlideImage } from "../types.js";
+import { ContainerRect, Labels, LengthOrPercentage, LightboxProps, Slide, SlideImage } from "../types.js";
 export declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
 export declare const cssClass: (name: string) => string;
 export declare const cssVar: (name: string) => string;
@@ -9,23 +9,20 @@ export declare const label: (labels: Labels | undefined, lbl: string) => string;
 export declare const cleanup: (...cleaners: (() => void)[]) => () => void;
 export declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => NonNullable<T>;
 export declare const hasWindow: () => boolean;
-export declare const isDefined: <T = any>(x: T | undefined) => x is T;
-export declare const isNumber: (value: any) => value is number;
-export declare const round: (value: number, decimals?: number) => number;
+export declare function round(value: number, decimals?: number): number;
 export declare const isImageSlide: (slide: Slide) => slide is SlideImage;
 export declare const isImageFitCover: (image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]) => boolean;
-export declare const parseLengthPercentage: (input: unknown) => {
+export declare function parseLengthPercentage(input: LengthOrPercentage): {
     pixel: number;
     percent?: undefined;
 } | {
     percent: number;
     pixel?: undefined;
 };
+export declare function computeSlideRect(containerRect: ContainerRect, padding: LengthOrPercentage): {
+    width: number;
+    height: number;
+};
 export declare const devicePixelRatio: () => number;
 export declare const getSlideIndex: (index: number, slidesCount: number) => number;
 export declare const getSlide: (slides: Slide[], index: number) => Slide;
-export declare const getAnimationEasing: (animationSpec: AnimationSpec | undefined) => string | undefined;
-export declare const getAnimationDuration: (animationSpec: AnimationSpec | undefined, defaultDuration: number) => number;
-export declare const getFadeAnimationDuration: (animation: AnimationSettings) => number;
-export declare const getSwipeAnimationDuration: (animation: AnimationSettings) => number;
-export declare const getNavigationAnimationDuration: (animation: AnimationSettings) => number;

package/dist/core/utils.js

@@ -1,5 +1,4 @@
 import * as React from "react";
-import { AnimationDefaultProps } from "../props.js";
 import { IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER } from "./consts.js";
 export const clsx = (...classes) => [...classes].filter((cls) => Boolean(cls)).join(" ");
 const cssPrefix = "yarl__";
@@ -21,15 +20,13 @@ export const makeUseContext = (name, contextName, context) => () => {
     return ctx;
 };
 export const hasWindow = () => typeof window !== "undefined";
-export const isDefined = (x) => typeof x !== "undefined";
-export const isNumber = (value) => typeof value === "number";
-export const round = (value, decimals = 0) => {
+export function round(value, decimals = 0) {
     const factor = 10 ** decimals;
     return Math.round((value + Number.EPSILON) * factor) / factor;
-};
-export const isImageSlide = (slide) => !isDefined(slide.type) || slide.type === "image";
+}
+export const isImageSlide = (slide) => slide.type === undefined || slide.type === "image";
 export const isImageFitCover = (image, imageFit) => image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
-export const parseLengthPercentage = (input) => {
+export function parseLengthPercentage(input) {
     if (typeof input === "number") {
         return { pixel: input };
     }
@@ -38,12 +35,15 @@ export const parseLengthPercentage = (input) => {
         return input.endsWith("%") ? { percent: value } : { pixel: value };
     }
     return { pixel: 0 };
-};
-export const devicePixelRatio = () => (typeof window !== "undefined" ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
+}
+export function computeSlideRect(containerRect, padding) {
+    const paddingValue = parseLengthPercentage(padding);
+    const paddingPixels = paddingValue.percent !== undefined ? (containerRect.width / 100) * paddingValue.percent : paddingValue.pixel;
+    return {
+        width: Math.max(containerRect.width - 2 * paddingPixels, 0),
+        height: Math.max(containerRect.height - 2 * paddingPixels, 0),
+    };
+}
+export const devicePixelRatio = () => (hasWindow() ? window === null || window === void 0 ? void 0 : window.devicePixelRatio : undefined) || 1;
 export const getSlideIndex = (index, slidesCount) => ((index % slidesCount) + slidesCount) % slidesCount;
 export const getSlide = (slides, index) => slides[getSlideIndex(index, slides.length)];
-export const getAnimationEasing = (animationSpec) => typeof animationSpec === "object" ? animationSpec.easing : undefined;
-export const getAnimationDuration = (animationSpec, defaultDuration) => { var _a; return (_a = (typeof animationSpec === "object" ? animationSpec.duration : animationSpec)) !== null && _a !== void 0 ? _a : defaultDuration; };
-export const getFadeAnimationDuration = (animation) => getAnimationDuration(animation.fade, AnimationDefaultProps.fade);
-export const getSwipeAnimationDuration = (animation) => getAnimationDuration(animation.swipe, AnimationDefaultProps.swipe);
-export const getNavigationAnimationDuration = (animation) => getAnimationDuration(animation.navigation, getSwipeAnimationDuration(animation));

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

@@ -1,7 +1,3 @@
-import { Plugin } from "../../types.js";
-export declare const defaultCaptionsProps: {
-    descriptionTextAlign: "start";
-    descriptionMaxLines: number;
-};
+import { PluginProps } from "../../types.js";
 /** Captions plugin */
-export declare const Captions: Plugin;
+export declare function Captions({ augment }: PluginProps): void;

package/dist/plugins/captions/Captions.js

@@ -1,23 +1,20 @@
 import * as React from "react";
-import { createModule, MODULE_CONTROLLER, PLUGIN_CAPTIONS } from "../../core/index.js";
-import { CaptionsContextProvider } from "./CaptionsContext.js";
+import { resolveCaptionsProps } from "./props.js";
 import { Description } from "./Description.js";
 import { Title } from "./Title.js";
-export const defaultCaptionsProps = {
-    descriptionTextAlign: "start",
-    descriptionMaxLines: 3,
-};
-export const Captions = ({ augment, addParent }) => {
-    addParent(MODULE_CONTROLLER, createModule(PLUGIN_CAPTIONS, CaptionsContextProvider));
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => ({
-        render: {
-            slideFooter: (slide) => (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
-                renderFooter(slide),
-                slide.title && React.createElement(Title, { styles: styles, title: slide.title }),
-                slide.description && (React.createElement(Description, { styles: styles, description: slide.description, ...{ ...defaultCaptionsProps, ...captions } })))),
-            ...restRender,
-        },
-        styles,
-        ...restProps,
-    }));
-};
+export function Captions({ augment }) {
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => {
+        return {
+            render: {
+                slideFooter: ({ slide }) => (React.createElement(React.Fragment, null, renderFooter === null || renderFooter === void 0 ? void 0 :
+                    renderFooter({ slide }),
+                    slide.title && React.createElement(Title, { styles: styles, title: slide.title }),
+                    slide.description && React.createElement(Description, { styles: styles, description: slide.description }))),
+                ...restRender,
+            },
+            captions: resolveCaptionsProps(captions),
+            styles,
+            ...restProps,
+        };
+    });
+}

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { LightboxProps, Slide } from "../../types.js";
-export type DescriptionProps = Pick<LightboxProps, "styles"> & Required<Pick<Slide, "description">> & Required<LightboxProps["captions"]>;
-export declare function Description({ description, descriptionTextAlign, descriptionMaxLines, styles }: DescriptionProps): JSX.Element;
+export type DescriptionProps = Required<Pick<Slide, "description">> & Pick<LightboxProps, "styles">;
+export declare function Description({ description, styles }: DescriptionProps): JSX.Element;

package/dist/plugins/captions/Description.js

@@ -1,8 +1,10 @@
 import * as React from "react";
-import { clsx, cssVar } from "../../core/index.js";
-import { defaultCaptionsProps } from "./Captions.js";
+import { clsx, cssVar, useLightboxProps } from "../../core/index.js";
+import { defaultCaptionsProps, resolveCaptionsProps } from "./props.js";
 import { cssPrefix } from "./utils.js";
-export function Description({ description, descriptionTextAlign, descriptionMaxLines, styles }) {
+export function Description({ description, styles }) {
+    const { captions } = useLightboxProps();
+    const { descriptionTextAlign, descriptionMaxLines } = resolveCaptionsProps(captions);
     return (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
         React.createElement("div", { className: cssPrefix("description"), style: {
                 ...(descriptionTextAlign !== defaultCaptionsProps.descriptionTextAlign ||

package/dist/plugins/captions/Title.js

@@ -1,9 +1,8 @@
 import * as React from "react";
-import { clsx, cssVar } from "../../core/index.js";
-import { useCaptions } from "./CaptionsContext.js";
+import { clsx, cssVar, useController } from "../../core/index.js";
 import { cssPrefix } from "./utils.js";
 export function Title({ title, styles }) {
-    const { toolbarWidth } = useCaptions();
+    const { toolbarWidth } = useController();
     return (React.createElement("div", { style: styles.captionsTitleContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
         React.createElement("div", { style: styles.captionsTitle, className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
 }

package/dist/plugins/captions/captions.css

@@ -4,6 +4,7 @@
   right: var(--yarl__slide_captions_container_right, 0);
   padding: var(--yarl__slide_captions_container_padding, 16px);
   background: var(--yarl__slide_captions_container_background, rgba(0, 0, 0, 0.5));
+  -webkit-transform: translateZ(0);
 }
 .yarl__slide_title {
   color: var(--yarl__slide_title_color, #fff);

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

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Captions } from "./Captions.js";
-type TextAlignment = "start" | "end" | "center";
-declare module "../../types" {
+declare module "../../types.js" {
+    type TextAlignment = "start" | "end" | "center";
     interface GenericSlide {
         /** slide title */
         title?: React.ReactNode;

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

@@ -0,0 +1,9 @@
+import { LightboxProps } from "../../types.js";
+export declare const defaultCaptionsProps: {
+    descriptionTextAlign: "start";
+    descriptionMaxLines: number;
+};
+export declare const resolveCaptionsProps: (captions: LightboxProps["captions"]) => {
+    descriptionTextAlign: import("../../types.js").TextAlignment;
+    descriptionMaxLines: number;
+};

package/dist/plugins/captions/props.js

@@ -0,0 +1,8 @@
+export const defaultCaptionsProps = {
+    descriptionTextAlign: "start",
+    descriptionMaxLines: 3,
+};
+export const resolveCaptionsProps = (captions) => ({
+    ...defaultCaptionsProps,
+    ...captions,
+});

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

@@ -1 +1 @@
-export declare function cssPrefix(className: string): string;
+export declare const cssPrefix: (className: string) => string;

package/dist/plugins/captions/utils.js

@@ -1,4 +1,2 @@
 import { cssClass } from "../../core/index.js";
-export function cssPrefix(className) {
-    return cssClass(`slide_${className}`);
-}
+export const cssPrefix = (className) => cssClass(`slide_${className}`);

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

@@ -1,3 +1,3 @@
-import { Plugin } from "../../types.js";
+import { PluginProps } from "../../types.js";
 /** Fullscreen plugin */
-export declare const Fullscreen: Plugin;
+export declare function Fullscreen({ augment, contains, addParent }: PluginProps): void;

package/dist/plugins/fullscreen/Fullscreen.js

@@ -1,11 +1,13 @@
 import * as React from "react";
 import { createModule, MODULE_CONTROLLER, PLUGIN_FULLSCREEN, PLUGIN_THUMBNAILS } from "../../core/index.js";
+import { resolveFullscreenProps } from "./props.js";
 import { FullscreenButton } from "./FullscreenButton.js";
 import { FullscreenContextProvider } from "./FullscreenContext.js";
-export const Fullscreen = ({ augment, contains, addParent }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
+export function Fullscreen({ augment, contains, addParent }) {
+    augment(({ fullscreen, toolbar: { buttons, ...restToolbar }, ...restProps }) => ({
         toolbar: { buttons: [React.createElement(FullscreenButton, { key: PLUGIN_FULLSCREEN }), ...buttons], ...restToolbar },
+        fullscreen: resolveFullscreenProps(fullscreen),
         ...restProps,
     }));
     addParent(contains(PLUGIN_THUMBNAILS) ? PLUGIN_THUMBNAILS : MODULE_CONTROLLER, createModule(PLUGIN_FULLSCREEN, FullscreenContextProvider));
-};
+}