yet-another-react-lightbox 1.13.4 → 2.0.0-rc.3

package/dist/Lightbox.js

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { LightboxDefaultProps } from "./types.js";
+import { LightboxDefaultProps } from "./props.js";
 import { CarouselModule, ControllerModule, CoreModule, createNode, NavigationModule, NoScrollModule, PortalModule, ToolbarModule, withPlugins, } from "./core/index.js";
 const renderNode = (node, props) => {
     var _a;

package/dist/core/components/IconButton.d.ts

@@ -4,4 +4,4 @@ export declare type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonH
     icon: React.ElementType;
     renderIcon?: () => React.ReactNode;
 };
-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>>;
+export declare const IconButton: React.ForwardRefExoticComponent<Pick<IconButtonProps, "icon" | "className" | "placeholder" | "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel" | "onKeyDown" | "onKeyUp" | "onWheel" | "value" | "children" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "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" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "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>>;

package/dist/core/components/IconButton.js

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { clsx, cssClass } from "../utils.js";
 import { useController } from "../modules/Controller.js";
+import { ELEMENT_BUTTON, ELEMENT_ICON } from "../consts.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 })));
+    const { styles } = useController().getLightboxProps();
+    return (React.createElement("button", { ref: ref, type: "button", "aria-label": label, className: clsx(cssClass(ELEMENT_BUTTON), className), onClick: onClick, style: { ...style, ...styles.button }, ...rest }, renderIcon ? renderIcon() : React.createElement(Icon, { className: cssClass(ELEMENT_ICON), style: styles.icon })));
 });
 IconButton.displayName = "IconButton";

package/dist/core/components/ImageSlide.js

@@ -1,13 +1,14 @@
 import * as React from "react";
-import { clsx, cssClass, hasWindow } from "../utils.js";
-import { useLatest } from "../hooks/index.js";
+import { clsx, cssClass, hasWindow, makeComposePrefix } from "../utils.js";
+import { useEventCallback } from "../hooks/index.js";
 import { useEvents } from "../contexts/index.js";
 import { ErrorIcon, LoadingIcon } from "./Icons.js";
-import { activeSlideStatus, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, } from "../consts.js";
+import { activeSlideStatus, ELEMENT_ICON, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, } from "../consts.js";
+const slidePrefix = makeComposePrefix("slide");
+const slideImagePrefix = makeComposePrefix("slide_image");
 export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onClick }) => {
     var _a, _b, _c, _d, _e, _f, _g;
     const [status, setStatus] = React.useState(SLIDE_STATUS_LOADING);
-    const latestStatus = useLatest(status);
     const { publish } = useEvents();
     const imageRef = React.useRef(null);
     React.useEffect(() => {
@@ -15,8 +16,8 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
             publish(activeSlideStatus(status));
         }
     }, [offset, status, publish]);
-    const handleLoading = React.useCallback((img) => {
-        if (latestStatus.current === SLIDE_STATUS_COMPLETE) {
+    const handleLoading = useEventCallback((img) => {
+        if (status === SLIDE_STATUS_COMPLETE) {
             return;
         }
         ("decode" in img ? img.decode() : Promise.resolve())
@@ -27,7 +28,7 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
             }
             setStatus(SLIDE_STATUS_COMPLETE);
         });
-    }, [latestStatus]);
+    });
     const setImageRef = React.useCallback((img) => {
         imageRef.current = img;
         if (img === null || img === void 0 ? void 0 : img.complete) {
@@ -40,10 +41,10 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
     const onError = React.useCallback(() => {
         setStatus(SLIDE_STATUS_ERROR);
     }, []);
-    const cover = image.imageFit === "cover" || (image.imageFit !== "contain" && imageFit === "cover");
+    const cover = image.imageFit === IMAGE_FIT_COVER || (image.imageFit !== IMAGE_FIT_CONTAIN && imageFit === IMAGE_FIT_COVER);
     const nonInfinite = (value, fallback) => (Number.isFinite(value) ? value : fallback);
     const maxWidth = nonInfinite(Math.max(...((_b = (_a = image.srcSet) === null || _a === void 0 ? void 0 : _a.map((x) => x.width)) !== null && _b !== void 0 ? _b : []).concat(image.width ? [image.width] : [])), ((_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.naturalWidth) || 0);
-    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 maxHeight = nonInfinite(Math.max(...((_e = (_d = image.srcSet) === null || _d === void 0 ? void 0 : _d.map((x) => x.height)) !== null && _e !== void 0 ? _e : []).concat(image.height ? [image.height] : [])), ((_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.naturalHeight) || 0);
     const style = maxWidth && maxHeight
         ? {
             maxWidth: `min(${maxWidth}px, 100%)`,
@@ -54,23 +55,13 @@ export const ImageSlide = ({ slide: image, offset, render, rect, imageFit, onCli
             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 estimateActualWidth = () => {
-        if (rect && !cover) {
-            if (image.width && image.height) {
-                return (rect.height / image.height) * image.width;
-            }
-            if (image.aspectRatio) {
-                return rect.height * image.aspectRatio;
-            }
-        }
-        return Number.MAX_VALUE;
-    };
+    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;
     return (React.createElement(React.Fragment, null,
-        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") },
+        React.createElement("img", { ref: setImageRef, onLoad: onLoad, onError: onError, onClick: onClick, className: clsx(cssClass(slideImagePrefix()), cover && cssClass(slideImagePrefix("cover")), status !== SLIDE_STATUS_COMPLETE && cssClass(slideImagePrefix("loading"))), draggable: false, alt: image.alt, style: style, sizes: sizes, srcSet: srcSet, src: image.src }),
+        status !== SLIDE_STATUS_COMPLETE && (React.createElement("div", { className: cssClass(slidePrefix(SLIDE_STATUS_PLACEHOLDER)) },
             status === SLIDE_STATUS_LOADING &&
-                ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass("icon"), cssClass("slide_loading")) }))),
+                ((render === null || render === void 0 ? void 0 : render.iconLoading) ? (render.iconLoading()) : (React.createElement(LoadingIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_LOADING))) }))),
             status === SLIDE_STATUS_ERROR &&
-                ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass("icon"), cssClass("slide_error")) })))))));
+                ((render === null || render === void 0 ? void 0 : render.iconError) ? (render.iconError()) : (React.createElement(ErrorIcon, { className: clsx(cssClass(ELEMENT_ICON), cssClass(slidePrefix(SLIDE_STATUS_ERROR))) })))))));
 };

package/dist/core/consts.d.ts

@@ -1,7 +1,21 @@
+export declare const MODULE_CAROUSEL = "carousel";
+export declare const MODULE_CONTROLLER = "controller";
+export declare const MODULE_CORE = "core";
+export declare const MODULE_NAVIGATION = "navigation";
+export declare const MODULE_NO_SCROLL = "no-scroll";
+export declare const MODULE_PORTAL = "portal";
+export declare const MODULE_TOOLBAR = "toolbar";
+export declare const PLUGIN_CAPTIONS = "captions";
+export declare const PLUGIN_FULLSCREEN = "fullscreen";
+export declare const PLUGIN_INLINE = "inline";
+export declare const PLUGIN_SLIDESHOW = "slideshow";
+export declare const PLUGIN_THUMBNAILS = "thumbnails";
+export declare const PLUGIN_ZOOM = "zoom";
 export declare const SLIDE_STATUS_LOADING = "loading";
 export declare const SLIDE_STATUS_PLAYING = "playing";
 export declare const SLIDE_STATUS_ERROR = "error";
 export declare const SLIDE_STATUS_COMPLETE = "complete";
+export declare const SLIDE_STATUS_PLACEHOLDER = "placeholder";
 export declare type SlideStatus = typeof SLIDE_STATUS_LOADING | typeof SLIDE_STATUS_PLAYING | typeof SLIDE_STATUS_ERROR | typeof SLIDE_STATUS_COMPLETE;
 export declare const activeSlideStatus: (status: SlideStatus) => string;
 export declare const ACTIVE_SLIDE_LOADING: string;
@@ -9,3 +23,25 @@ export declare const ACTIVE_SLIDE_PLAYING: string;
 export declare const ACTIVE_SLIDE_ERROR: string;
 export declare const ACTIVE_SLIDE_COMPLETE: string;
 export declare const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";
+export declare const CLASS_FULLSIZE = "fullsize";
+export declare const CLASS_FLEX_CENTER = "flex_center";
+export declare const CLASS_NO_SCROLL = "no_scroll";
+export declare const CLASS_NO_SCROLL_PADDING = "no_scroll_padding";
+export declare const ACTION_PREV = "prev";
+export declare const ACTION_NEXT = "next";
+export declare const ACTION_CLOSE = "close";
+export declare const EVENT_ON_POINTER_DOWN = "onPointerDown";
+export declare const EVENT_ON_POINTER_MOVE = "onPointerMove";
+export declare const EVENT_ON_POINTER_UP = "onPointerUp";
+export declare const EVENT_ON_POINTER_LEAVE = "onPointerLeave";
+export declare const EVENT_ON_POINTER_CANCEL = "onPointerCancel";
+export declare const EVENT_ON_KEY_DOWN = "onKeyDown";
+export declare const EVENT_ON_KEY_UP = "onKeyUp";
+export declare const EVENT_ON_WHEEL = "onWheel";
+export declare const VK_ESCAPE = "Escape";
+export declare const VK_ARROW_LEFT = "ArrowLeft";
+export declare const VK_ARROW_RIGHT = "ArrowRight";
+export declare const ELEMENT_BUTTON = "button";
+export declare const ELEMENT_ICON = "icon";
+export declare const IMAGE_FIT_CONTAIN = "contain";
+export declare const IMAGE_FIT_COVER = "cover";

package/dist/core/consts.js

@@ -1,10 +1,46 @@
+export const MODULE_CAROUSEL = "carousel";
+export const MODULE_CONTROLLER = "controller";
+export const MODULE_CORE = "core";
+export const MODULE_NAVIGATION = "navigation";
+export const MODULE_NO_SCROLL = "no-scroll";
+export const MODULE_PORTAL = "portal";
+export const MODULE_TOOLBAR = "toolbar";
+export const PLUGIN_CAPTIONS = "captions";
+export const PLUGIN_FULLSCREEN = "fullscreen";
+export const PLUGIN_INLINE = "inline";
+export const PLUGIN_SLIDESHOW = "slideshow";
+export const PLUGIN_THUMBNAILS = "thumbnails";
+export const PLUGIN_ZOOM = "zoom";
 export const SLIDE_STATUS_LOADING = "loading";
 export const SLIDE_STATUS_PLAYING = "playing";
 export const SLIDE_STATUS_ERROR = "error";
 export const SLIDE_STATUS_COMPLETE = "complete";
+export const SLIDE_STATUS_PLACEHOLDER = "placeholder";
 export const activeSlideStatus = (status) => `active-slide-${status}`;
 export const ACTIVE_SLIDE_LOADING = activeSlideStatus(SLIDE_STATUS_LOADING);
 export const ACTIVE_SLIDE_PLAYING = activeSlideStatus(SLIDE_STATUS_PLAYING);
 export const ACTIVE_SLIDE_ERROR = activeSlideStatus(SLIDE_STATUS_ERROR);
 export const ACTIVE_SLIDE_COMPLETE = activeSlideStatus(SLIDE_STATUS_COMPLETE);
 export const YARL_EVENT_BACKDROP_CLICK = "backdrop_click";
+export const CLASS_FULLSIZE = "fullsize";
+export const CLASS_FLEX_CENTER = "flex_center";
+export const CLASS_NO_SCROLL = "no_scroll";
+export const CLASS_NO_SCROLL_PADDING = "no_scroll_padding";
+export const ACTION_PREV = "prev";
+export const ACTION_NEXT = "next";
+export const ACTION_CLOSE = "close";
+export const EVENT_ON_POINTER_DOWN = "onPointerDown";
+export const EVENT_ON_POINTER_MOVE = "onPointerMove";
+export const EVENT_ON_POINTER_UP = "onPointerUp";
+export const EVENT_ON_POINTER_LEAVE = "onPointerLeave";
+export const EVENT_ON_POINTER_CANCEL = "onPointerCancel";
+export const EVENT_ON_KEY_DOWN = "onKeyDown";
+export const EVENT_ON_KEY_UP = "onKeyUp";
+export const EVENT_ON_WHEEL = "onWheel";
+export const VK_ESCAPE = "Escape";
+export const VK_ARROW_LEFT = "ArrowLeft";
+export const VK_ARROW_RIGHT = "ArrowRight";
+export const ELEMENT_BUTTON = "button";
+export const ELEMENT_ICON = "icon";
+export const IMAGE_FIT_CONTAIN = "contain";
+export const IMAGE_FIT_COVER = "cover";

package/dist/core/contexts/Events.d.ts

@@ -1,16 +1,12 @@
 import * as React from "react";
-export declare type Topic = string;
-export declare type Callback = (topic: Topic, event?: unknown) => void;
-export declare type Events = {
-    [key: string]: Callback[];
-};
-export declare type Subscribe = (topic: Topic, callback: Callback) => () => void;
-export declare type Unsubscribe = (topic: Topic, callback: Callback) => void;
-export declare type Publish = (topic: Topic, event?: unknown) => void;
+export declare type Callback = (event?: unknown) => void;
+export declare type Subscribe = (topic: string, callback: Callback) => () => void;
+export declare type Unsubscribe = (topic: string, callback: Callback) => void;
+export declare type Publish = (topic: string, event?: unknown) => void;
 export declare type EventsContextType = {
     subscribe: Subscribe;
     unsubscribe: Unsubscribe;
     publish: Publish;
 };
 export declare const useEvents: () => EventsContextType;
-export declare const EventsProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;
+export declare const EventsProvider: React.FC<React.PropsWithChildren>;

package/dist/core/contexts/Events.js

@@ -3,30 +3,28 @@ import { makeUseContext } from "../utils.js";
 const EventsContext = React.createContext(null);
 export const useEvents = makeUseContext("useEvents", "EventsContext", EventsContext);
 export const EventsProvider = ({ children }) => {
-    const subscriptions = React.useRef({});
-    const unsubscribe = (topic, callback) => {
-        if (subscriptions.current[topic]) {
-            subscriptions.current[topic] = subscriptions.current[topic].filter((cb) => cb !== callback);
-        }
-    };
-    const subscribe = (topic, callback) => {
-        if (!subscriptions.current[topic]) {
-            subscriptions.current[topic] = [];
-        }
-        subscriptions.current[topic].push(callback);
-        return () => unsubscribe(topic, callback);
-    };
-    const publish = (topic, event) => {
-        var _a;
-        (_a = subscriptions.current[topic]) === null || _a === void 0 ? void 0 : _a.forEach((callback) => callback(topic, event));
-    };
+    const [subscriptions] = React.useState({});
     React.useEffect(() => () => {
-        subscriptions.current = {};
-    }, []);
-    const context = React.useRef({
-        subscribe,
-        unsubscribe,
-        publish,
-    });
-    return React.createElement(EventsContext.Provider, { value: context.current }, children);
+        Object.keys(subscriptions).forEach((key) => delete subscriptions[key]);
+    }, [subscriptions]);
+    const context = React.useMemo(() => {
+        const unsubscribe = (topic, callback) => {
+            if (subscriptions[topic]) {
+                subscriptions[topic] = subscriptions[topic].filter((cb) => cb !== callback);
+            }
+        };
+        const subscribe = (topic, callback) => {
+            if (!subscriptions[topic]) {
+                subscriptions[topic] = [];
+            }
+            subscriptions[topic].push(callback);
+            return () => unsubscribe(topic, callback);
+        };
+        const publish = (topic, event) => {
+            var _a;
+            (_a = subscriptions[topic]) === null || _a === void 0 ? void 0 : _a.forEach((callback) => callback(event));
+        };
+        return { publish, subscribe, unsubscribe };
+    }, [subscriptions]);
+    return React.createElement(EventsContext.Provider, { value: context }, children);
 };

package/dist/core/contexts/LightboxState.d.ts

@@ -0,0 +1,20 @@
+import * as React from "react";
+export declare type LightboxState = {
+    currentIndex: number;
+    globalIndex: number;
+    animationDuration: number;
+};
+declare type LightboxStateAction = {
+    increment?: number;
+    animationDuration: number;
+};
+export declare const useLightboxState: () => {
+    state: LightboxState;
+    dispatch: React.Dispatch<LightboxStateAction>;
+};
+declare type LightboxStateProviderProps = React.PropsWithChildren<{
+    slidesCount: number;
+    initialIndex: number;
+}>;
+export declare const LightboxStateProvider: React.FC<LightboxStateProviderProps>;
+export {};

package/dist/core/contexts/LightboxState.js

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { makeUseContext } from "../utils.js";
+const LightboxStateContext = React.createContext(null);
+export const useLightboxState = makeUseContext("useLightboxState", "LightboxStateContext", LightboxStateContext);
+const reducer = (slidesCount) => (state, action) => {
+    var _a;
+    return action.increment !== undefined || action.animationDuration !== undefined
+        ? {
+            currentIndex: (((state.currentIndex + (action.increment || 0)) % slidesCount) + slidesCount) % slidesCount,
+            globalIndex: state.globalIndex + (action.increment || 0),
+            animationDuration: (_a = action.animationDuration) !== null && _a !== void 0 ? _a : state.animationDuration,
+        }
+        : state;
+};
+export const LightboxStateProvider = ({ initialIndex, slidesCount, children, }) => {
+    const [state, dispatch] = React.useReducer(reducer(slidesCount), {
+        currentIndex: initialIndex,
+        globalIndex: initialIndex,
+        animationDuration: 0,
+    });
+    const context = React.useMemo(() => ({ state, dispatch }), [state, dispatch]);
+    return React.createElement(LightboxStateContext.Provider, { value: context }, children);
+};

package/dist/core/contexts/Timeouts.d.ts

@@ -1,8 +1,7 @@
 import * as React from "react";
 export declare type TimeoutsContextType = {
-    setTimeout: (func: () => void, time?: number) => number;
+    setTimeout: (fn: () => void, delay?: number) => number;
     clearTimeout: (id?: number) => void;
-    clearTimeouts: () => void;
 };
 export declare const useTimeouts: () => TimeoutsContextType;
 export declare const TimeoutsProvider: ({ children }: React.PropsWithChildren<{}>) => JSX.Element;

package/dist/core/contexts/Timeouts.js

@@ -3,33 +3,30 @@ import { isDefined, makeUseContext } from "../utils.js";
 const TimeoutsContext = React.createContext(null);
 export const useTimeouts = makeUseContext("useTimeouts", "TimeoutsContext", TimeoutsContext);
 export const TimeoutsProvider = ({ children }) => {
-    const timeouts = React.useRef([]);
-    const removeTimeout = (id) => {
-        timeouts.current.splice(0, timeouts.current.length, ...timeouts.current.filter((tid) => tid !== id));
-    };
-    const setTimeout = (func, time) => {
-        const id = window.setTimeout(() => {
-            removeTimeout(id);
-            func();
-        }, time);
-        timeouts.current.push(id);
-        return id;
-    };
-    const clearTimeout = (id) => {
-        if (isDefined(id)) {
-            removeTimeout(id);
-            window.clearTimeout(id);
-        }
-    };
-    const clearTimeouts = () => {
-        timeouts.current.forEach((tid) => window.clearTimeout(tid));
-        timeouts.current.splice(0, timeouts.current.length);
-    };
-    React.useEffect(() => () => clearTimeouts(), []);
-    const context = React.useRef({
-        setTimeout,
-        clearTimeout,
-        clearTimeouts,
-    });
-    return React.createElement(TimeoutsContext.Provider, { value: context.current }, children);
+    const [timeouts] = React.useState([]);
+    React.useEffect(() => () => {
+        timeouts.forEach((tid) => window.clearTimeout(tid));
+        timeouts.splice(0, timeouts.length);
+    }, [timeouts]);
+    const context = React.useMemo(() => {
+        const removeTimeout = (id) => {
+            timeouts.splice(0, timeouts.length, ...timeouts.filter((tid) => tid !== id));
+        };
+        const setTimeout = (fn, delay) => {
+            const id = window.setTimeout(() => {
+                removeTimeout(id);
+                fn();
+            }, delay);
+            timeouts.push(id);
+            return id;
+        };
+        const clearTimeout = (id) => {
+            if (isDefined(id)) {
+                removeTimeout(id);
+                window.clearTimeout(id);
+            }
+        };
+        return { setTimeout, clearTimeout };
+    }, [timeouts]);
+    return React.createElement(TimeoutsContext.Provider, { value: context }, children);
 };

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

@@ -1,2 +1,3 @@
 export * from "./Events.js";
+export * from "./LightboxState.js";
 export * from "./Timeouts.js";

package/dist/core/contexts/index.js

@@ -1,2 +1,3 @@
 export * from "./Events.js";
+export * from "./LightboxState.js";
 export * from "./Timeouts.js";

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

@@ -1,6 +1,7 @@
 export * from "./useContainerRect.js";
+export * from "./useEventCallback.js";
+export * from "./useForkRef.js";
 export * from "./useLayoutEffect.js";
-export * from "./useLatest.js";
 export * from "./useMotionPreference.js";
 export * from "./useRTL.js";
 export * from "./useSensors.js";

package/dist/core/hooks/index.js

@@ -1,6 +1,7 @@
 export * from "./useContainerRect.js";
+export * from "./useEventCallback.js";
+export * from "./useForkRef.js";
 export * from "./useLayoutEffect.js";
-export * from "./useLatest.js";
 export * from "./useMotionPreference.js";
 export * from "./useRTL.js";
 export * from "./useSensors.js";

package/dist/core/hooks/useEventCallback.d.ts

@@ -0,0 +1 @@
+export declare const useEventCallback: <Args extends unknown[], Return>(fn: (...args: Args) => Return) => (...args: Args) => Return;

package/dist/core/hooks/useEventCallback.js

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { useLayoutEffect } from "./useLayoutEffect.js";
+export const useEventCallback = (fn) => {
+    const ref = React.useRef(fn);
+    useLayoutEffect(() => {
+        ref.current = fn;
+    });
+    return React.useCallback((...args) => { var _a; return (_a = ref.current) === null || _a === void 0 ? void 0 : _a.call(ref, ...args); }, []);
+};

package/dist/core/hooks/useForkRef.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+export declare const setRef: <T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null) => void;
+export declare const useForkRef: <InstanceA, InstanceB>(refA: React.Ref<InstanceA> | undefined, refB: React.Ref<InstanceB> | undefined) => React.Ref<InstanceA & InstanceB>;

package/dist/core/hooks/useForkRef.js

@@ -0,0 +1,15 @@
+import * as React from "react";
+export const setRef = (ref, value) => {
+    if (typeof ref === "function") {
+        ref(value);
+    }
+    else if (ref) {
+        ref.current = value;
+    }
+};
+export const useForkRef = (refA, refB) => React.useMemo(() => refA == null && refB == null
+    ? null
+    : (refValue) => {
+        setRef(refA, refValue);
+        setRef(refB, refValue);
+    }, [refA, refB]);

package/dist/core/hooks/useMotionPreference.js

@@ -1,8 +1,7 @@
 import * as React from "react";
-import { useLayoutEffect } from "./useLayoutEffect.js";
 export const useMotionPreference = () => {
     const [reduceMotion, setReduceMotion] = React.useState(false);
-    useLayoutEffect(() => {
+    React.useEffect(() => {
         var _a;
         const mediaQuery = (_a = window.matchMedia) === null || _a === void 0 ? void 0 : _a.call(window, "(prefers-reduced-motion: reduce)");
         setReduceMotion(mediaQuery === null || mediaQuery === void 0 ? void 0 : mediaQuery.matches);

package/dist/core/hooks/useSensors.d.ts

@@ -1,13 +1,12 @@
 import * as React from "react";
 export declare type PointerEventType = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel";
-export declare type TouchEventType = "onTouchStart" | "onTouchMove" | "onTouchEnd" | "onTouchCancel";
 export declare type KeyboardEventType = "onKeyDown" | "onKeyUp";
 export declare type WheelEventType = "onWheel";
-export declare type SupportedEventType = PointerEventType | TouchEventType | KeyboardEventType | WheelEventType;
-export declare type ReactEventType<T, K> = K extends TouchEventType ? React.TouchEvent<T> : K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
-export declare type EventCallback<T, P extends React.PointerEvent<T> | React.TouchEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
+export declare type SupportedEventType = PointerEventType | KeyboardEventType | WheelEventType;
+export declare type ReactEventType<T, K> = K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
+export declare type EventCallback<T, P extends React.PointerEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
 export declare type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: EventCallback<T, ReactEventType<T, ET>>) => () => void;
-export declare type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, TouchEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
+export declare type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
 export declare type UseSensors<T> = {
     registerSensors: RegisterSensors<T>;
     subscribeSensors: SubscribeSensors<T>;

package/dist/core/hooks/useSensors.js

@@ -1,4 +1,5 @@
 import * as React from "react";
+import { EVENT_ON_KEY_DOWN, EVENT_ON_KEY_UP, EVENT_ON_POINTER_CANCEL, EVENT_ON_POINTER_DOWN, EVENT_ON_POINTER_LEAVE, EVENT_ON_POINTER_MOVE, EVENT_ON_POINTER_UP, EVENT_ON_WHEEL, } from "../consts.js";
 export const useSensors = () => {
     const [subscribers] = React.useState({});
     return React.useMemo(() => {
@@ -11,18 +12,14 @@ export const useSensors = () => {
         };
         return {
             registerSensors: {
-                onPointerDown: (event) => notifySubscribers("onPointerDown", event),
-                onPointerMove: (event) => notifySubscribers("onPointerMove", event),
-                onPointerUp: (event) => notifySubscribers("onPointerUp", event),
-                onPointerLeave: (event) => notifySubscribers("onPointerLeave", event),
-                onPointerCancel: (event) => notifySubscribers("onPointerCancel", event),
-                onTouchStart: (event) => notifySubscribers("onTouchStart", event),
-                onTouchMove: (event) => notifySubscribers("onTouchMove", event),
-                onTouchEnd: (event) => notifySubscribers("onTouchEnd", event),
-                onTouchCancel: (event) => notifySubscribers("onTouchCancel", event),
-                onKeyDown: (event) => notifySubscribers("onKeyDown", event),
-                onKeyUp: (event) => notifySubscribers("onKeyUp", event),
-                onWheel: (event) => notifySubscribers("onWheel", event),
+                onPointerDown: (event) => notifySubscribers(EVENT_ON_POINTER_DOWN, event),
+                onPointerMove: (event) => notifySubscribers(EVENT_ON_POINTER_MOVE, event),
+                onPointerUp: (event) => notifySubscribers(EVENT_ON_POINTER_UP, event),
+                onPointerLeave: (event) => notifySubscribers(EVENT_ON_POINTER_LEAVE, event),
+                onPointerCancel: (event) => notifySubscribers(EVENT_ON_POINTER_CANCEL, event),
+                onKeyDown: (event) => notifySubscribers(EVENT_ON_KEY_DOWN, event),
+                onKeyUp: (event) => notifySubscribers(EVENT_ON_KEY_UP, event),
+                onWheel: (event) => notifySubscribers(EVENT_ON_WHEEL, event),
             },
             subscribeSensors: (type, callback) => {
                 if (!subscribers[type]) {