yet-another-react-lightbox 3.5.4 → 3.7.0

package/README.md

@@ -123,16 +123,16 @@ See [examples](https://yet-another-react-lightbox.com/examples) on the documenta
 
 ## Plugins
 
-Yet Another React Lightbox allows you to add optional features based on your requirements via plugins.
+Yet Another React Lightbox allows you to add optional features to your project based on your requirements via plugins.
 
-The following plugins come bundled in the package:
+The following plugins are bundled in the package:
 
 - [Captions](https://yet-another-react-lightbox.com/plugins/captions) - adds support for slide title and
   description
 - [Counter](https://yet-another-react-lightbox.com/plugins/counter) - adds slides counter
 - [Download](https://yet-another-react-lightbox.com/plugins/download) - adds download button
 - [Fullscreen](https://yet-another-react-lightbox.com/plugins/fullscreen) - adds support for fullscreen mode
-- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - adds support for inline rendering mode
+- [Inline](https://yet-another-react-lightbox.com/plugins/inline) - transforms the lightbox into an image carousel
 - [Slideshow](https://yet-another-react-lightbox.com/plugins/slideshow) - adds slideshow autoplay feature
 - [Thumbnails](https://yet-another-react-lightbox.com/plugins/thumbnails) - adds thumbnails track
 - [Video](https://yet-another-react-lightbox.com/plugins/video) - adds support for video slides

package/dist/index.d.ts

@@ -1,4 +1,240 @@
-import { Lightbox } from "./Lightbox.js";
-export * from "./types.js";
-export * from "./Lightbox.js";
-export default Lightbox;
+import * as React from 'react';
+import { LightboxExternalProps, LightboxProps, Labels, Slide, SlideImage, LengthOrPercentage, ContainerRect, ToolbarSettings, Component, Module, Node, Plugin, Augmentation, EventTypes, ComponentProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LightboxState, Render, ImageFit, ControllerRef, Callback, RenderFunction } from './types.js';
+export { ACTION_CLOSE, ACTION_NEXT, ACTION_PREV, ACTION_SWIPE, ACTIVE_SLIDE_COMPLETE, ACTIVE_SLIDE_ERROR, ACTIVE_SLIDE_LOADING, ACTIVE_SLIDE_PLAYING, AnimationSettings, CLASS_FLEX_CENTER, CLASS_FULLSIZE, CLASS_NO_SCROLL, CLASS_NO_SCROLL_PADDING, Callbacks, CarouselSettings, ClickCallbackProps, ControllerSettings, DeepNonNullable, DeepPartial, DeepPartialValue, ELEMENT_BUTTON, ELEMENT_ICON, 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, GenericSlide, IMAGE_FIT_CONTAIN, IMAGE_FIT_COVER, ImageSource, MODULE_CAROUSEL, MODULE_CONTROLLER, MODULE_NAVIGATION, MODULE_NO_SCROLL, MODULE_PORTAL, MODULE_ROOT, MODULE_TOOLBAR, NavigationAction, PLUGIN_CAPTIONS, PLUGIN_COUNTER, PLUGIN_DOWNLOAD, PLUGIN_FULLSCREEN, PLUGIN_INLINE, PLUGIN_SLIDESHOW, PLUGIN_THUMBNAILS, PLUGIN_ZOOM, PluginProps, PortalSettings, RenderSlideContainerProps, RenderSlideFooterProps, RenderSlideHeaderProps, RenderSlideProps, SLIDE_STATUS_COMPLETE, SLIDE_STATUS_ERROR, SLIDE_STATUS_LOADING, SLIDE_STATUS_PLACEHOLDER, SLIDE_STATUS_PLAYING, SlideStatus, SlideTypeKey, SlideTypes, Slot, SlotStyles, SlotType, ToolbarButtonKey, ToolbarButtonKeys, UNKNOWN_ACTION_TYPE, VK_ARROW_LEFT, VK_ARROW_RIGHT, VK_ESCAPE, ViewCallbackProps, activeSlideStatus } from './types.js';
+
+/** Lightbox component */
+declare function Lightbox({ carousel, animation, render, toolbar, controller, on, plugins, slides, index, ...restProps }: LightboxExternalProps): React.JSX.Element | null;
+
+declare const LightboxDefaultProps: LightboxProps;
+
+declare const clsx: (...classes: (string | boolean | undefined)[]) => string;
+declare const cssClass: (name: string) => string;
+declare const cssVar: (name: string) => string;
+declare const composePrefix: (base: string, prefix?: string) => string;
+declare const makeComposePrefix: (base: string) => (prefix?: string) => string;
+declare const label: (labels: Labels | undefined, lbl: string) => string;
+declare const cleanup: (...cleaners: (() => void)[]) => () => void;
+declare const makeUseContext: <T>(name: string, contextName: string, context: React.Context<T | null>) => () => NonNullable<T>;
+declare const hasWindow: () => boolean;
+declare function round(value: number, decimals?: number): number;
+declare const isImageSlide: (slide: Slide) => slide is SlideImage;
+declare const isImageFitCover: (image: SlideImage, imageFit?: LightboxProps["carousel"]["imageFit"]) => boolean;
+declare function parseLengthPercentage(input: LengthOrPercentage): {
+    pixel: number;
+    percent?: undefined;
+} | {
+    percent: number;
+    pixel?: undefined;
+};
+declare function computeSlideRect(containerRect: ContainerRect, padding: LengthOrPercentage): {
+    width: number;
+    height: number;
+};
+declare const devicePixelRatio: () => number;
+declare const getSlideIndex: (index: number, slidesCount: number) => number;
+declare const hasSlides: (slides: Slide[]) => slides is [SlideImage, ...SlideImage[]];
+declare const getSlide: (slides: [Slide, ...Slide[]], index: number) => SlideImage;
+declare const getSlideIfPresent: (slides: Slide[], index: number) => SlideImage | undefined;
+declare function addToolbarButton(toolbar: ToolbarSettings, key: string, button: React.ReactNode): ToolbarSettings;
+declare function stopNavigationEventsPropagation(): {
+    onPointerDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
+    onKeyDown: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
+    onWheel: (event: React.PointerEvent | React.KeyboardEvent | React.WheelEvent) => void;
+};
+
+declare function createModule(name: string, component: Component): Module;
+declare function createNode(module: Module, children?: Node[]): Node;
+declare function withPlugins(root: Node[], plugins?: Plugin[], augmentations?: Augmentation[]): {
+    config: Node[];
+    augmentation: Augmentation;
+};
+
+type ComputeAnimation<T> = (snapshot: T, rect: DOMRect, translate: {
+    x: number;
+    y: number;
+    z: number;
+}) => {
+    keyframes: Keyframe[];
+    duration: number;
+    easing?: string;
+    onfinish?: () => void;
+} | undefined;
+declare function useAnimation<T>(nodeRef: React.RefObject<HTMLElement | null>, computeAnimation: ComputeAnimation<T>): {
+    prepareAnimation: (currentSnapshot: T | undefined) => void;
+    isAnimationPlaying: () => boolean;
+};
+
+declare function useContainerRect<T extends HTMLElement = HTMLElement>(): {
+    setContainerRef: (node: T | null) => void;
+    containerRef: React.MutableRefObject<T | null>;
+    containerRect: ContainerRect | undefined;
+};
+
+declare function useDelay(): (callback: () => void, delay: number) => void;
+
+declare function useEventCallback<Args extends unknown[], Return>(fn: (...args: Args) => Return): (...args: Args) => Return;
+
+declare function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;
+declare function useForkRef<InstanceA, InstanceB>(refA: React.Ref<InstanceA> | null | undefined, refB: React.Ref<InstanceB> | null | undefined): React.Ref<InstanceA & InstanceB> | null;
+
+declare const useLayoutEffect: typeof React.useEffect;
+
+declare function useLoseFocus(focus: () => void, disabled?: boolean): {
+    onFocus: () => void;
+    onBlur: () => void;
+};
+
+declare function useMotionPreference(): boolean;
+
+declare function useRTL(): boolean;
+
+type PointerEventType = "onPointerDown" | "onPointerMove" | "onPointerUp" | "onPointerLeave" | "onPointerCancel";
+type KeyboardEventType = "onKeyDown" | "onKeyUp";
+type WheelEventType = "onWheel";
+type SupportedEventType = PointerEventType | KeyboardEventType | WheelEventType;
+type ReactEventType<T, K> = K extends KeyboardEventType ? React.KeyboardEvent<T> : K extends WheelEventType ? React.WheelEvent<T> : K extends PointerEventType ? React.PointerEvent<T> : never;
+type SensorCallback<T, P extends React.PointerEvent<T> | React.KeyboardEvent<T> | React.WheelEvent<T>> = (event: P) => void;
+type SubscribeSensors<T> = <ET extends SupportedEventType>(type: ET, callback: SensorCallback<T, ReactEventType<T, ET>>) => () => void;
+type RegisterSensors<T> = Required<Pick<React.HTMLAttributes<T>, PointerEventType>> & Required<Pick<React.HTMLAttributes<T>, KeyboardEventType>> & Required<Pick<React.HTMLAttributes<T>, WheelEventType>>;
+type UseSensors<T> = {
+    registerSensors: RegisterSensors<T>;
+    subscribeSensors: SubscribeSensors<T>;
+};
+declare function useSensors<T extends Element>(): UseSensors<T>;
+
+declare function useThrottle(callback: (...args: any[]) => void, delay: number): (...args: any[]) => void;
+
+type Topic = keyof EventTypes;
+type Event<T extends Topic> = EventTypes[T];
+type EventCallback<T extends Topic> = (...args: Event<T> extends void ? [] : [event: Event<T>]) => void;
+type Subscribe = <T extends Topic>(topic: T, callback: EventCallback<T>) => () => void;
+type Unsubscribe = <T extends Topic>(topic: T, callback: EventCallback<T>) => void;
+type Publish = <T extends Topic>(...args: Event<T> extends void ? [topic: T] : [topic: T, event: Event<T>]) => void;
+type EventsContextType = {
+    subscribe: Subscribe;
+    unsubscribe: Unsubscribe;
+    publish: Publish;
+};
+declare const EventsContext: React.Context<EventsContextType | null>;
+declare const useEvents: () => EventsContextType;
+declare function EventsProvider({ children }: React.PropsWithChildren): React.JSX.Element;
+
+type LightboxPropsContextType = Omit<ComponentProps, "children">;
+declare const LightboxPropsContext: React.Context<LightboxPropsContextType | null>;
+declare const useLightboxProps: () => LightboxPropsContextType;
+declare function LightboxPropsProvider({ children, ...props }: ComponentProps): React.JSX.Element;
+
+type LightboxStateAction = LightboxStateSwipeAction | LightboxStateUpdateAction;
+type LightboxStateContextType = LightboxState & {
+    /** @deprecated - use `useLightboxState` props directly */
+    state: LightboxState;
+    /** @deprecated - use `useLightboxDispatch` instead */
+    dispatch: React.Dispatch<LightboxStateAction>;
+};
+declare const LightboxStateContext: React.Context<LightboxStateContextType | null>;
+declare const useLightboxState: () => NonNullable<LightboxStateContextType>;
+type LightboxDispatchContextType = React.Dispatch<LightboxStateAction>;
+declare const LightboxDispatchContext: React.Context<LightboxDispatchContextType | null>;
+declare const useLightboxDispatch: () => LightboxDispatchContextType;
+type LightboxStateProviderProps = React.PropsWithChildren<Pick<LightboxProps, "slides" | "index">>;
+declare function LightboxStateProvider({ slides, index, children }: LightboxStateProviderProps): React.JSX.Element;
+
+type TimeoutsContextType = {
+    setTimeout: (fn: () => void, delay?: number) => number;
+    clearTimeout: (id?: number) => void;
+};
+declare const TimeoutsContext: React.Context<TimeoutsContextType | null>;
+declare const useTimeouts: () => TimeoutsContextType;
+declare function TimeoutsProvider({ children }: React.PropsWithChildren): React.JSX.Element;
+
+type IconButtonProps = Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "type" | "aria-label"> & {
+    label: string;
+    icon: React.ElementType;
+    renderIcon?: () => React.ReactNode;
+};
+declare const IconButton: React.ForwardRefExoticComponent<Omit<IconButtonProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+
+declare function createIcon(name: string, glyph: React.ReactNode): {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+declare function createIconDisabled(name: string, glyph: React.ReactNode): {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const CloseIcon: {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const PreviousIcon: {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const NextIcon: {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const LoadingIcon: {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+declare const ErrorIcon: {
+    (props: React.SVGProps<SVGSVGElement>): React.JSX.Element;
+    displayName: string;
+};
+
+type ImageSlideProps = {
+    slide: SlideImage;
+    offset?: number;
+    render?: Render;
+    rect?: ContainerRect;
+    imageFit?: ImageFit;
+    onClick?: () => void;
+    onLoad?: (image: HTMLImageElement) => void;
+    style?: React.CSSProperties;
+};
+declare function ImageSlide({ slide: image, offset, render, rect, imageFit, onClick, onLoad, style }: ImageSlideProps): React.JSX.Element;
+
+declare function Carousel({ carousel: { finite, preload, padding, spacing } }: ComponentProps): React.JSX.Element;
+declare const CarouselModule: Module;
+
+type ControllerContextType = Pick<ControllerRef, "prev" | "next" | "close"> & {
+    focus: Callback;
+    slideRect: ContainerRect;
+    containerRect: ContainerRect;
+    subscribeSensors: SubscribeSensors<HTMLDivElement>;
+    containerRef: React.RefObject<HTMLDivElement>;
+    setCarouselRef: React.Ref<HTMLDivElement>;
+    toolbarWidth: number | undefined;
+    setToolbarWidth: (width: number | undefined) => void;
+};
+declare const ControllerContext: React.Context<ControllerContextType | null>;
+declare const useController: () => NonNullable<ControllerContextType>;
+declare function Controller({ children, ...props }: ComponentProps): React.JSX.Element;
+declare const ControllerModule: Module;
+
+type NavigationButtonProps = {
+    label: string;
+    icon: React.ElementType;
+    renderIcon?: RenderFunction;
+    action: "prev" | "next";
+    onClick: () => void;
+    disabled?: boolean;
+};
+declare function NavigationButton({ label, icon, renderIcon, action, onClick, disabled }: NavigationButtonProps): React.JSX.Element;
+declare function Navigation({ carousel: { finite }, animation, render: { buttonPrev, buttonNext, iconPrev, iconNext }, }: ComponentProps): React.JSX.Element;
+declare const NavigationModule: Module;
+
+declare function NoScroll({ children }: ComponentProps): React.JSX.Element;
+declare const NoScrollModule: Module;
+
+declare function Portal({ children, animation, styles, className, on, portal, close }: ComponentProps): React.ReactPortal | null;
+declare const PortalModule: Module;
+
+declare function Root({ children }: ComponentProps): React.JSX.Element;
+declare const RootModule: Module;
+
+declare function Toolbar({ toolbar: { buttons }, render: { buttonClose, iconClose } }: ComponentProps): React.JSX.Element;
+declare const ToolbarModule: Module;
+
+export { Augmentation, Callback, Carousel, CarouselModule, CloseIcon, Component, ComponentProps, ComputeAnimation, ContainerRect, Controller, ControllerContext, ControllerContextType, ControllerModule, ControllerRef, ErrorIcon, Event, EventCallback, EventTypes, EventsContext, EventsContextType, EventsProvider, IconButton, IconButtonProps, ImageFit, ImageSlide, ImageSlideProps, KeyboardEventType, Labels, LengthOrPercentage, Lightbox, LightboxDefaultProps, LightboxDispatchContext, LightboxDispatchContextType, LightboxExternalProps, LightboxProps, LightboxPropsContext, LightboxPropsContextType, LightboxPropsProvider, LightboxState, LightboxStateAction, LightboxStateContext, LightboxStateContextType, LightboxStateProvider, LightboxStateProviderProps, LightboxStateSwipeAction, LightboxStateUpdateAction, LoadingIcon, Module, Navigation, NavigationButton, NavigationButtonProps, NavigationModule, NextIcon, NoScroll, NoScrollModule, Node, Plugin, PointerEventType, Portal, PortalModule, PreviousIcon, Publish, ReactEventType, RegisterSensors, Render, RenderFunction, Root, RootModule, SensorCallback, Slide, SlideImage, Subscribe, SubscribeSensors, SupportedEventType, TimeoutsContext, TimeoutsContextType, TimeoutsProvider, Toolbar, ToolbarModule, ToolbarSettings, Topic, Unsubscribe, UseSensors, WheelEventType, addToolbarButton, cleanup, clsx, composePrefix, computeSlideRect, createIcon, createIconDisabled, createModule, createNode, cssClass, cssVar, Lightbox as default, devicePixelRatio, getSlide, getSlideIfPresent, getSlideIndex, hasSlides, hasWindow, isImageFitCover, isImageSlide, label, makeComposePrefix, makeUseContext, parseLengthPercentage, round, setRef, stopNavigationEventsPropagation, useAnimation, useContainerRect, useController, useDelay, useEventCallback, useEvents, useForkRef, useLayoutEffect, useLightboxDispatch, useLightboxProps, useLightboxState, useLoseFocus, useMotionPreference, useRTL, useSensors, useThrottle, useTimeouts, withPlugins };