yet-another-react-lightbox 3.10.1 → 3.11.0

package/dist/index.js

@@ -1143,7 +1143,7 @@ function CarouselSlide({ slide, offset }) {
     const containerRef = React.useRef(null);
     const { currentIndex } = useLightboxState();
     const { slideRect, close } = useController();
-    const { render, carousel: { imageFit, imageProps }, on: { click: onClick }, controller: { closeOnBackdropClick }, } = useLightboxProps();
+    const { render, carousel: { imageFit, imageProps }, on: { click: onClick }, controller: { closeOnBackdropClick }, styles: { slide: style }, } = useLightboxProps();
     const renderSlide = () => {
         var _a, _b, _c, _d;
         let rendered = (_a = render.slide) === null || _a === void 0 ? void 0 : _a.call(render, { slide, offset, rect: slideRect });
@@ -1167,10 +1167,11 @@ function CarouselSlide({ slide, offset }) {
             close();
         }
     };
-    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick }, renderSlide()));
+    return (React.createElement("div", { ref: containerRef, className: clsx(cssClass(cssSlidePrefix()), offset === 0 && cssClass(cssSlidePrefix("current")), cssClass(CLASS_FLEX_CENTER)), onClick: handleBackdropClick, style: style }, renderSlide()));
 }
 function Placeholder() {
-    return React.createElement("div", { className: cssClass("slide") });
+    const style = useLightboxProps().styles.slide;
+    return React.createElement("div", { className: cssClass("slide"), style: style });
 }
 function Carousel({ carousel: { finite, preload, padding, spacing } }) {
     const { slides, currentIndex, globalIndex } = useLightboxState();

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

@@ -10,6 +10,8 @@ declare module "yet-another-react-lightbox" {
     }
     /** Video slide attributes */
     interface SlideVideo extends GenericSlide {
+        /** video slide type */
+        type: "video";
         /** video placeholder image */
         poster?: string;
         /** video width in pixels */

package/dist/plugins/video/index.js

@@ -94,8 +94,9 @@ function Video({ augment }) {
     augment(({ render: { slide: renderSlide, ...restRender }, video, ...restProps }) => ({
         render: {
             slide: ({ slide, offset, rect }) => {
+                var _a;
                 if (isVideoSlide(slide)) {
-                    return (React.createElement(VideoSlide, { key: `${slide.sources.map((source) => source.src).join(" ")}`, slide: slide, offset: offset }));
+                    return (React.createElement(VideoSlide, { key: `${(_a = slide.sources) === null || _a === void 0 ? void 0 : _a.map((source) => source.src).join(" ")}`, slide: slide, offset: offset }));
                 }
                 return renderSlide === null || renderSlide === void 0 ? void 0 : renderSlide({ slide, offset, rect });
             },

package/dist/types.d.ts

@@ -102,6 +102,8 @@ interface GenericSlide {
 }
 /** Image slide properties */
 interface SlideImage extends GenericSlide {
+    /** image slide type */
+    type?: "image";
     /** image URL */
     src: string;
     /** image 'alt' attribute */
@@ -159,6 +161,8 @@ interface SlotType {
     root: "root";
     /** lightbox container customization slot */
     container: "container";
+    /** lightbox slide customization slot */
+    slide: "slide";
     /** lightbox button customization slot */
     button: "button";
     /** lightbox icon customization slot */

package/package.json

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