yet-another-react-lightbox 2.0.0-rc.1 → 2.0.0-rc.2

package/dist/core/modules/Carousel.js

@@ -1,8 +1,7 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { LightboxDefaultProps } from "../../props.js";
 import { useContainerRect } from "../hooks/index.js";
-import { clsx, composePrefix, cssClass, cssVar, isImageSlide, parseSpacing } from "../utils.js";
+import { clsx, composePrefix, cssClass, cssVar, isImageSlide, parseLengthPercentage } from "../utils.js";
 import { ImageSlide } from "../components/index.js";
 import { useController } from "./Controller.js";
 import { useEvents } from "../contexts/Events.js";
@@ -10,7 +9,6 @@ import { useLightboxState } from "../contexts/LightboxState.js";
 import { CLASS_FLEX_CENTER, CLASS_FULLSIZE, MODULE_CAROUSEL, YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
 const cssPrefix = (value) => composePrefix(MODULE_CAROUSEL, value);
 const cssSlidePrefix = (value) => composePrefix("slide", value);
-const sanitize = (value) => (value === 0 || value === "0" ? "0px" : value);
 const CarouselSlide = ({ slide, offset }) => {
     const { setContainerRef, containerRect, containerRef } = useContainerRect();
     const { publish } = useEvents();
@@ -45,7 +43,8 @@ const Placeholder = () => React.createElement("div", { className: cssClass("slid
 export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {
     const { state: { currentIndex, globalIndex }, } = useLightboxState();
     const { setCarouselRef } = useController();
-    const spacingValue = parseSpacing(spacing);
+    const spacingValue = parseLengthPercentage(spacing);
+    const paddingValue = parseLengthPercentage(padding);
     const items = [];
     if ((slides === null || slides === void 0 ? void 0 : slides.length) > 0) {
         for (let i = currentIndex - preload; i < currentIndex; i += 1) {
@@ -62,9 +61,8 @@ export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing
             [`${cssVar(cssPrefix("slides_count"))}`]: items.length,
             [`${cssVar(cssPrefix("spacing_px"))}`]: spacingValue.pixel || 0,
             [`${cssVar(cssPrefix("spacing_percent"))}`]: spacingValue.percent || 0,
-            ...(padding !== LightboxDefaultProps.carousel.padding
-                ? { [cssVar(cssPrefix("padding"))]: sanitize(padding) }
-                : null),
+            [`${cssVar(cssPrefix("padding_px"))}`]: paddingValue.pixel || 0,
+            [`${cssVar(cssPrefix("padding_percent"))}`]: paddingValue.percent || 0,
         } }, items));
 };
 export const CarouselModule = createModule(MODULE_CAROUSEL, Carousel);

package/dist/core/modules/Controller.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { createModule } from "../config.js";
-import { cleanup, clsx, cssClass, cssVar, isNumber, makeComposePrefix, makeUseContext, parseSpacing, } from "../utils.js";
+import { cleanup, clsx, cssClass, cssVar, isNumber, makeComposePrefix, makeUseContext, parseLengthPercentage, } from "../utils.js";
 import { useContainerRect, useEventCallback, useForkRef, useLayoutEffect, useMotionPreference, useRTL, useSensors, } from "../hooks/index.js";
 import { useEvents, useLightboxState, useTimeouts } from "../contexts/index.js";
 import { SwipeState, usePointerSwipe, usePreventSwipeNavigation, useWheelSwipe } from "./controller/index.js";
@@ -104,7 +104,7 @@ export const Controller = ({ children, ...props }) => {
         const swipeAnimation = carouselSwipeAnimation.current;
         carouselSwipeAnimation.current = undefined;
         if (swipeAnimation && carouselRef.current && containerRect) {
-            const parsedSpacing = parseSpacing(carousel.spacing);
+            const parsedSpacing = parseLengthPercentage(carousel.spacing);
             const spacingValue = (parsedSpacing.percent ? (parsedSpacing.percent * containerRect.width) / 100 : parsedSpacing.pixel) ||
                 0;
             (_a = carouselAnimation.current) === null || _a === void 0 ? void 0 : _a.cancel();

package/dist/core/utils.d.ts

@@ -13,7 +13,7 @@ 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 const isImageSlide: (slide: Slide) => slide is SlideImage;
-export declare const parseSpacing: (spacing: unknown) => {
+export declare const parseLengthPercentage: (input: unknown) => {
     pixel: number;
     percent?: undefined;
 } | {

package/dist/core/utils.js

@@ -26,13 +26,13 @@ export const round = (value, decimals = 0) => {
     return Math.round((value + Number.EPSILON) * factor) / factor;
 };
 export const isImageSlide = (slide) => !isDefined(slide.type) || slide.type === "image";
-export const parseSpacing = (spacing) => {
-    if (typeof spacing === "number") {
-        return { pixel: spacing };
+export const parseLengthPercentage = (input) => {
+    if (typeof input === "number") {
+        return { pixel: input };
     }
-    if (typeof spacing === "string") {
-        const value = parseInt(spacing, 10);
-        return spacing.endsWith("%") ? { percent: value } : { pixel: value };
+    if (typeof input === "string") {
+        const value = parseInt(input, 10);
+        return input.endsWith("%") ? { percent: value } : { pixel: value };
     }
     return { pixel: 0 };
 };

package/dist/plugins/inline/Inline.js

@@ -1,6 +1,6 @@
 import * as React from "react";
 import { ACTION_CLOSE, clsx, createModule, cssClass, MODULE_NO_SCROLL, MODULE_PORTAL, PLUGIN_INLINE, } from "../../core/index.js";
-const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), className), ...rest }, children));
+const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), cssClass("relative"), className), ...rest }, children));
 export const Inline = ({ augment, replace, remove }) => {
     augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({
         open: true,

package/dist/styles.css

@@ -2,6 +2,9 @@
   width: 100%;
   height: 100%;
 }
+.yarl__relative {
+  position: relative;
+}
 .yarl__portal {
   position: fixed;
   inset: 0;
@@ -47,7 +50,7 @@
 .yarl__slide {
   flex: 1;
   position: relative;
-  padding: var(--yarl__carousel_padding, 16px);
+  padding: calc(var(--yarl__carousel_padding_px, 0) * 1px + 100 / (100 * var(--yarl__carousel_slides_count, 0) + (var(--yarl__carousel_slides_count, 0) - 1) * var(--yarl__carousel_spacing_percent, 0)) * var(--yarl__carousel_padding_percent, 0) * 1%);
 }
 [dir=rtl] .yarl__slide {
   --yarl__direction: -1;

package/package.json

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