yet-another-react-lightbox - npm Package Compare versions

Comparing version 1.12.0 to 1.13.0

dist/core/components/IconButton.d.ts

@@ -7,2 +7,2 @@ import * as React from "react";
 };
-export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "value" | "children" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "icon" | "renderIcon"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "icon" | "className" | "value" | "children" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancelCapture" | "onTouchEndCapture" | "onTouchMoveCapture" | "onTouchStartCapture" | "onPointerDownCapture" | "onPointerMoveCapture" | "onPointerUpCapture" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "form" | "label" | "disabled" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "renderIcon"> & React.RefAttributes<HTMLButtonElement>>;

dist/core/components/IconButton.js

 import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
-export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, ...rest }, ref) => (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon") }))));
+import { useController } from "../modules/Controller.js";
+export const IconButton = React.forwardRef(({ label, className, icon: Icon, renderIcon, onClick, style, ...rest }, ref) => {
+    const { latestProps: { current: { styles }, }, } = useController();
+    return (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass("button"), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass("icon"), style: styles.icon })));
+});
 IconButton.displayName = "IconButton";

dist/core/components/ImageSlide.js

@@ -47,3 +47,8 @@ import * as React from "react";
     const maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height).filter((x) => Boolean(x))) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), (image.aspectRatio && maxWidth ? maxWidth / image.aspectRatio : (_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
-    const style = maxWidth && maxHeight ? { maxWidth, maxHeight } : undefined;
+    const style = maxWidth && maxHeight
+        ? {
+            maxWidth: `min(${maxWidth}px, 100%)`,
+            maxHeight: `min(${maxHeight}px, 100%)`,
+        }
+        : undefined;
     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(", ");
@@ -65,3 +70,3 @@ const estimateActualWidth = () => {
     return (React.createElement(React.Fragment, null,
-        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cssClass("fullsize"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass("slide_image"), cover && cssClass("slide_image_cover"), status !== SLIDE_STATUS_COMPLETE && cssClass("slide_image_loading")), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
         status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass("slide_placeholder") },
@@ -68,0 +73,0 @@ status === SLIDE_STATUS_LOADING &&

dist/core/consts.d.ts

@@ -11,1 +11,2 @@ export declare const SLIDE_STATUS_LOADING = "loading";
 export declare const ACTIVE_SLIDE_COMPLETE: string;
+export declare const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";

dist/core/consts.js

@@ -10,1 +10,2 @@ export const SLIDE_STATUS_LOADING = "loading";
 export const ACTIVE_SLIDE_COMPLETE = activeSlideStatus(SLIDE_STATUS_COMPLETE);
+export const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";

dist/core/modules/Carousel.js

 import * as React from "react";
+import { YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
 import { LightboxDefaultProps } from "../../types.js";
@@ -8,4 +9,6 @@ import { useContainerRect } from "../hooks/index.js";
 import { useController } from "./Controller.js";
+import { useEvents } from "../contexts/Events.js";
 const CarouselSlide = ({ slide, offset }) => {
-    const { setContainerRef, containerRect } = useContainerRect();
+    const { setContainerRef, containerRect, containerRef } = useContainerRect();
+    const { publish } = useEvents();
     const { latestProps, currentIndex } = useController();
@@ -29,3 +32,14 @@ const { render } = latestProps.current;
     };
-    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset } }, containerRect && renderSlide(containerRect)));
+    const handleBackdropClick = (event) => {
+        const container = containerRef.current;
+        const target = event.target instanceof HTMLElement ? event.target : undefined;
+        if (target &&
+            container &&
+            (target === container ||
+                (Array.from(container.children).find((x) => x === target) &&
+                    target.classList.contains(cssClass("fullsize"))))) {
+            publish(YARL_EVENT_BACKDROP_CLICK);
+        }
+    };
+    return (React.createElement("div", { ref: setContainerRef, className: clsx(cssClass("slide"), cssClass("flex_center")), style: { [cssVar("slide_offset")]: offset }, onClick: handleBackdropClick }, containerRect && renderSlide(containerRect)));
 };
@@ -32,0 +46,0 @@ export const Carousel = ({ slides, carousel: { finite, preload, padding, spacing } }) => {

dist/core/modules/Controller.js

 import * as React from "react";
+import { YARL_EVENT_BACKDROP_CLICK } from "../consts.js";
 import { LightboxDefaultProps } from "../../types.js";
@@ -161,2 +162,5 @@ import { cleanup, clsx, cssClass, cssVar, makeUseContext } from "../utils.js";
     }), [subscribeSensors, publish]);
+    React.useEffect(() => props.controller.closeOnBackdropClick
+        ? subscribe(YARL_EVENT_BACKDROP_CLICK, () => publish("close"))
+        : () => { }, [props.controller.closeOnBackdropClick, publish, subscribe]);
     const clearPointer = React.useCallback((event) => {
@@ -302,4 +306,5 @@ const { current } = refs;
                 : null),
+            ...props.styles.container,
         }, ...(props.controller.aria ? { role: "presentation", "aria-live": "polite" } : null), tabIndex: -1, ...registerSensors }, containerRect && (React.createElement(ControllerContext.Provider, { value: context }, children))));
 };
 export const ControllerModule = createModule("controller", Controller);

dist/core/modules/Portal.js

@@ -30,5 +30,3 @@ import * as React from "react";
         setMounted(true);
-        return () => {
-            setMounted(false);
-        };
+        return () => setMounted(false);
     }, []);
@@ -70,11 +68,12 @@ React.useEffect(() => subscribe("close", () => {
     return mounted
-        ? ReactDOM.createPortal(React.createElement("div", { ref: handlePortalRef, className: clsx(cssClass("portal"), cssClass("no_scroll_padding"), visible && cssClass("portal_open")), role: "presentation", "aria-live": "polite", ...(props.animation.fade !== LightboxDefaultProps.animation.fade
-                ? {
-                    style: {
+        ? ReactDOM.createPortal(React.createElement("div", { ref: handlePortalRef, className: clsx(props.className, cssClass("root"), cssClass("portal"), cssClass("no_scroll_padding"), visible && cssClass("portal_open")), role: "presentation", "aria-live": "polite", style: {
+                ...(props.animation.fade !== LightboxDefaultProps.animation.fade
+                    ? {
                         [cssVar("fade_animation_duration")]: `${Math.round(props.animation.fade)}ms`,
-                    },
-                }
-                : null) }, children), document.body)
+                    }
+                    : null),
+                ...props.styles.root,
+            } }, children), document.body)
         : null;
 };
 export const PortalModule = createModule("portal", Portal);

dist/plugins/Captions.d.ts

@@ -19,2 +19,12 @@ import { Component, Plugin } from "../types.js";
     }
+    interface SlotType {
+        /** captions title customization slot */
+        captionsTitle: "captionsTitle";
+        /** captions title container customization slot */
+        captionsTitleContainer: "captionsTitleContainer";
+        /** captions description customization slot */
+        captionsDescription: "captionsDescription";
+        /** captions description container customization slot */
+        captionsDescriptionContainer: "captionsDescriptionContainer";
+    }
 }
@@ -21,0 +31,0 @@ /** Captions plugin context holder */

dist/plugins/Captions.js

@@ -12,16 +12,19 @@ import * as React from "react";
 const useCaptions = makeUseContext("useCaptions", "CaptionsContext", CaptionsContext);
-const Title = ({ title }) => {
+const Title = ({ title, styles }) => {
     const { toolbarWidth } = useCaptions();
-    return (React.createElement("div", { className: clsx(cssPrefix("captions_container"), cssPrefix("title_container")) },
-        React.createElement("div", { className: cssPrefix("title"), ...(toolbarWidth ? { style: { [cssVar("toolbar_width")]: `${toolbarWidth}px` } } : null) }, title)));
+    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)));
 };
-const Description = ({ description, align, maxLines }) => (React.createElement("div", { className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
-    React.createElement("div", { className: cssPrefix("description"), ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
-            ? {
-                style: {
-                    [cssVar("slide_description_text_align")]: align,
-                    [cssVar("slide_description_max_lines")]: maxLines,
-                },
-            }
-            : null) }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
+const Description = ({ description, align, maxLines, styles }) => (React.createElement("div", { style: styles.captionsDescriptionContainer, className: clsx(cssPrefix("captions_container"), cssPrefix("description_container")) },
+    React.createElement("div", { className: cssPrefix("description"), style: {
+            ...(align !== defaultTextAlign || maxLines !== defaultMaxLines
+                ? {
+                    style: {
+                        [cssVar("slide_description_text_align")]: align,
+                        [cssVar("slide_description_max_lines")]: maxLines,
+                    },
+                }
+                : null),
+            ...styles.captionsDescription,
+        } }, description.split("\n").flatMap((line, index) => [...(index > 0 ? [React.createElement("br", { key: index })] : []), line]))));
 export const CaptionsComponent = ({ children }) => {
@@ -41,3 +44,3 @@ const { subscribe } = useEvents();
     addParent("controller", CaptionsModule);
-    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, ...restProps }) => ({
+    augment(({ render: { slideFooter: renderFooter, ...restRender }, captions, styles, ...restProps }) => ({
         render: {
@@ -48,7 +51,8 @@ slideFooter: (slide) => {
                     renderFooter(slide),
-                    hasTitle(slide) && React.createElement(Title, { title: slide.title }),
-                    hasDescription(slide) && (React.createElement(Description, { description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
+                    hasTitle(slide) && React.createElement(Title, { styles: styles, title: slide.title }),
+                    hasDescription(slide) && (React.createElement(Description, { styles: styles, description: slide.description, align: (_a = captions === null || captions === void 0 ? void 0 : captions.descriptionTextAlign) !== null && _a !== void 0 ? _a : defaultTextAlign, maxLines: (_b = captions === null || captions === void 0 ? void 0 : captions.descriptionMaxLines) !== null && _b !== void 0 ? _b : defaultMaxLines }))));
             },
             ...restRender,
         },
+        styles,
         ...restProps,
@@ -55,0 +59,0 @@ }));

dist/plugins/Inline.js

 import * as React from "react";
-import { createModule } from "../core/index.js";
-export const InlineContainer = ({ inline, children }) => React.createElement("div", { ...inline }, children);
+import { clsx, createModule, cssClass } from "../core/index.js";
+export const InlineContainer = ({ inline: { className, ...rest } = {}, children }) => (React.createElement("div", { className: clsx(cssClass("root"), className), ...rest }, children));
 export const InlineModule = createModule("inline", InlineContainer);
 export const Inline = ({ augment, replace, remove }) => {
-    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, ...restProps }) => ({
+    augment(({ toolbar: { buttons, ...restToolbar }, open, close, controller: { focus, aria, touchAction, ...restController }, className, ...restProps }) => ({
         open: true,
@@ -13,4 +13,5 @@ close: () => { },
         },
-        inline: { style: { width: "100%", height: "100%" } },
+        inline: { style: { width: "100%", height: "100%" }, className },
         controller: { focus: false, aria: true, touchAction: "pan-y", ...restController },
+        className,
         ...restProps,
@@ -17,0 +18,0 @@ }));

dist/plugins/Thumbnails.d.ts

@@ -35,5 +35,13 @@ import * as React from "react";
     }
+    interface SlotType {
+        /** thumbnail customization slot */
+        thumbnail: "thumbnail";
+        /** thumbnails track customization slot */
+        thumbnailsTrack: "thumbnailsTrack";
+        /** thumbnails container customization slot */
+        thumbnailsContainer: "thumbnailsContainer";
+    }
 }
 declare type ThumbnailsInternal = DeepNonNullable<LightboxProps["thumbnails"]>;
-declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render"> & {
+declare type ThumbnailsTrackProps = Pick<LightboxProps, "slides" | "carousel" | "animation" | "render" | "styles"> & {
     container: React.RefObject<HTMLDivElement>;
@@ -40,0 +48,0 @@ thumbnails: ThumbnailsInternal;

dist/plugins/Thumbnails.js

 import * as React from "react";
-import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useLayoutEffect, useEvents, useLatest, useMotionPreference, useRTL, } from "../core/index.js";
+import { clsx, createIcon, createModule, cssClass, cssVar, ImageSlide, useEvents, useLatest, useLayoutEffect, useMotionPreference, useRTL, } from "../core/index.js";
 const defaultThumbnailsProps = {
@@ -39,3 +39,3 @@ position: "bottom",
 };
-const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, }) => (React.createElement("button", { type: "button", className: clsx(cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
+const Thumbnail = ({ rect, slide, onClick, active, fadeIn, fadeOut, placeholder, render, imageFit, style, }) => (React.createElement("button", { type: "button", className: clsx(cssClass("flex_center"), cssClass(cssThumbnailPrefix()), active && cssClass(cssThumbnailPrefix("active")), fadeIn && cssClass(cssThumbnailPrefix("fadein")), fadeOut && cssClass(cssThumbnailPrefix("fadeout")), placeholder && cssClass(cssThumbnailPrefix("placeholder"))), style: {
         ...(fadeIn
@@ -53,4 +53,5 @@ ? {
             : null),
+        ...style,
     }, onClick: onClick }, slide && renderThumbnail({ slide, render, rect, imageFit })));
-export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, }) => {
+export const ThumbnailsTrack = ({ container, startingIndex, slides, carousel, animation, render, thumbnails, thumbnailRect, styles, }) => {
     const track = React.useRef(null);
@@ -192,4 +193,5 @@ const [state, setState] = React.useState({
             ...(gap !== defaultThumbnailsProps.gap ? { [cssVar(cssThumbnailPrefix("gap"))]: `${gap}px` } : null),
+            ...styles.thumbnailsContainer,
         } },
-        React.createElement("nav", { ref: track, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
+        React.createElement("nav", { ref: track, style: styles.thumbnailsTrack, className: cssClass(cssPrefix("track")) }, items.map(({ slide, index: slideIndex, placeholder }) => {
             var _a;
@@ -216,9 +218,9 @@ const fadeAnimationDuration = ((_a = refs.current.animationOverride) !== null && _a !== void 0 ? _a : animation.swipe) / Math.abs(offset || 1);
                 : undefined;
-            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex) }));
+            return (React.createElement(Thumbnail, { key: slideIndex, rect: thumbnailRect, slide: slide, imageFit: imageFit, render: render, active: slideIndex === index, fadeIn: fadeIn, fadeOut: fadeOut, placeholder: Boolean(placeholder), onClick: handleClick(slideIndex), style: styles.thumbnail }));
         }))));
 };
-export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, children, }) => {
+export const ThumbnailsComponent = ({ thumbnails: thumbnailsProps, slides, index, carousel, animation, render, styles, children, }) => {
     const thumbnails = { ...defaultThumbnailsProps, ...thumbnailsProps };
     const ref = React.useRef(null);
-    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height } }));
+    const track = (React.createElement(ThumbnailsTrack, { container: ref, slides: slides, thumbnails: thumbnails, carousel: carousel, animation: animation, render: render, startingIndex: index, thumbnailRect: { width: thumbnails.width, height: thumbnails.height }, styles: styles }));
     return (React.createElement("div", { ref: ref, className: clsx(cssClass(cssPrefix()), cssClass(cssPrefix(`${thumbnails.position}`)), cssClass("fullsize")) },
@@ -225,0 +227,0 @@ (thumbnails.position === "start" || thumbnails.position === "top") && track,

dist/types.d.ts

@@ -36,2 +36,19 @@ import * as React from "react";
 export declare type Slide = SlideTypes[keyof SlideTypes];
+/** Supported customization slots */
+export interface SlotType {
+    /** lightbox root customization slot */
+    root: "root";
+    /** lightbox container customization slot */
+    container: "container";
+    /** lightbox button customization slot */
+    button: "button";
+    /** lightbox icon customization slot */
+    icon: "icon";
+}
+/** Customization slots */
+export declare type Slot = SlotType[keyof SlotType];
+/** Customization slots styles */
+export declare type SlotStyles = {
+    [key in Slot]?: React.CSSProperties;
+};
 /** Carousel settings */
@@ -65,2 +82,4 @@ export interface CarouselSettings {
     aria: boolean;
+    /** if `true`, close the lightbox when the backdrop is clicked */
+    closeOnBackdropClick: boolean;
 }
@@ -144,2 +163,6 @@ /** Custom render functions. */
     on: Callbacks;
+    /** customization styles */
+    styles: SlotStyles;
+    /** CSS class of the lightbox root element */
+    className: string;
 }
@@ -159,2 +182,4 @@ export declare const LightboxDefaultProps: {
     on: Callbacks;
+    styles: SlotStyles;
+    className: string;
 };
@@ -161,0 +186,0 @@ /** Custom UI labels */

dist/types.js

@@ -25,4 +25,7 @@ export const LightboxDefaultProps = {
         touchAction: "none",
+        closeOnBackdropClick: false,
     },
     on: {},
+    styles: {},
+    className: "",
 };

package.json

 {
     "name": "yet-another-react-lightbox",
-    "version": "1.12.0",
+    "version": "1.13.0",
     "description": "Modern React lightbox component",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

164095

increased by3.43%

Lines of code

3341

increased by2.55%

No dependency changes