react-motion-gallery 2.0.1 → 2.0.4

package/dist/index.d.mts

@@ -1,75 +1,10 @@
-import * as React from 'react';
+import * as React$1 from 'react';
 import React__default, { ReactNode } from 'react';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { APITypes } from 'plyr-react';
 
-type BreakpointMap = Record<string, number>;
-type ResponsiveNumber = number | string | Array<number | string> | Record<string, number | string>;
-type MediaItem = {
-    kind: 'image';
-    src: string;
-    alt?: string;
-    caption?: React__default.ReactNode;
-    srcSet?: string;
-    sizes?: string;
-    width?: number;
-    height?: number;
-} | {
-    kind: 'video';
-    src: string;
-    alt?: string;
-    thumb?: string;
-    caption?: React__default.ReactNode;
-};
-type EntryItem = {
-    media?: MediaItem[];
-    [key: string]: any;
-};
-type EntryMediaRenderArgs = {
-    entry: EntryItem;
-    entryIndex: number;
-    media: MediaItem;
-    mediaIndex: number;
-};
-type MediaEntryLink = {
-    entryIndex: number;
-    mediaIndex: number;
-};
-type EntryOverlayRenderArgs = {
-    entry: EntryItem;
-    entryIndex: number;
-    mediaIndex: number | null;
-    link: MediaEntryLink | null;
-    opacity: number;
-    fsIndex: number;
-    style: React__default.CSSProperties;
-    containerProps: React__default.HTMLAttributes<HTMLDivElement>;
-};
-type EntryMediaLayout = 'slider' | 'grid' | 'masonry';
-type EntryCardRenderArgs = {
-    entry: EntryItem;
-    entryIndex: number;
-    media: React__default.ReactNode;
-};
-type ThumbnailPosition = 'top' | 'right' | 'bottom' | 'left';
-type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
-type FSImageRender = (args: {
-    item: Extract<MediaItem, {
-        kind: "image";
-    }>;
-    index: number;
-    isZoomed: boolean;
-    className: string;
-    baseStyle: React__default.CSSProperties;
-}) => React__default.ReactNode;
-type PlyrSourceBuilder = (item: MediaItem, index: number) => Plyr.SourceInfo;
-type PlyrOptionsResolver = Plyr.Options | ((item: MediaItem, index: number) => Plyr.Options);
-type ResponsiveHeightRule = {
-    query: string;
-    height: string;
-};
 type ArrowRenderArgs = {
-    ref: React__default.RefObject<HTMLDivElement | null>;
+    ref: React.RefObject<HTMLDivElement | null>;
     onClick: () => void;
     hidden: boolean;
     disabled: boolean;
@@ -77,7 +12,7 @@ type ArrowRenderArgs = {
     className?: string;
 };
 type DotsRenderArgs = {
-    ref: React__default.RefObject<HTMLDivElement | null>;
+    ref: React.RefObject<HTMLDivElement | null>;
     count: number;
     activeIndex: number;
     hidden: boolean;
@@ -88,62 +23,37 @@ type DotsRenderArgs = {
     classNameDot?: string;
 };
 type ProgressRenderArgs = {
-    ref: React__default.Ref<HTMLDivElement>;
-    innerRef?: React__default.Ref<HTMLDivElement>;
+    ref: React.Ref<HTMLDivElement>;
+    innerRef?: React.Ref<HTMLDivElement>;
     hidden: boolean;
     progress: number;
-    classNameContainer?: string;
-    classNameBar?: string;
-};
-type FsCounterArgs = {
-    index: number;
-    count: number;
+    axis: 'x' | 'y';
+    className?: string;
+    style?: React.CSSProperties;
+    innerClassName?: string;
+    innerStyle?: React.CSSProperties;
 };
-type FsCaptionPlacement = 'top' | 'right' | 'bottom' | 'left';
-type FsCaptionRenderArgs = {
-    item: MediaItem;
-    index: number;
-    isZoomed: boolean;
+
+type ElementStyle = {
+    className?: string;
+    style?: React.CSSProperties;
 };
-type IndexMode = 'instant' | 'animated';
-type LoadingOptions = {
+
+type ThumbnailPosition = "top" | "right" | "bottom" | "left";
+type ResponsivePosition = ThumbnailPosition | Array<ThumbnailPosition> | Record<string, ThumbnailPosition>;
+type ThumbnailLoadingOptions = {
     isLoading?: boolean;
     skeletonCount?: ResponsiveNumber;
     renderLoading?: (args: {
-        layout: 'slider' | 'grid' | 'masonry' | 'entries';
+        layout: "thumbnails";
         count: number;
-    }) => React__default.ReactNode;
+    }) => React$1.ReactNode;
 };
-type IntroOptions = {
+type ThumbnailIntroOptions = {
     renderIntro?: (args: {
         active: boolean;
-        containerProps: React__default.HTMLAttributes<HTMLDivElement>;
-    }, content: React__default.ReactNode) => React__default.ReactNode;
-    staggerMs?: number;
-    transform?: number | string;
-    durationMs?: number;
-    easing?: string;
-    staggerLimit?: number;
-};
-type ControlStyle = {
-    className?: string;
-    style?: React__default.CSSProperties;
-};
-type LoadingRenderArgs = {
-    layout: 'thumbnails';
-    count: number;
-};
-type IntroRenderArgs = {
-    active: boolean;
-    containerProps: React__default.HTMLAttributes<HTMLDivElement>;
-};
-type ThumbnailLoadingOptions = {
-    isLoading?: boolean;
-    skeletonCount?: ResponsiveNumber;
-    renderLoading?: (args: LoadingRenderArgs) => React__default.ReactNode;
-};
-type ThumbnailIntroOptions = {
-    renderIntro?: (args: IntroRenderArgs, inner: React__default.ReactNode) => React__default.ReactNode;
+        containerProps: React$1.HTMLAttributes<HTMLDivElement>;
+    }, inner: React$1.ReactNode) => React$1.ReactNode;
     staggerMs?: number;
     transform?: number;
     durationMs?: number;
@@ -165,8 +75,8 @@ type ThumbnailsLayout = {
     container?: ThumbnailContainerLayout;
 };
 type ThumbnailsElements = {
-    container?: ControlStyle;
-    thumbnail?: ControlStyle;
+    container?: ElementStyle;
+    thumbnail?: ElementStyle;
 };
 type ThumbnailsScroll = {
     freeScroll?: boolean;
@@ -186,14 +96,14 @@ type ThumbnailsRipple = {
 };
 type ThumbnailsControls = {
     enabled?: boolean;
-    arrow?: ControlStyle;
-    prev?: ControlStyle;
-    next?: ControlStyle;
+    arrow?: ElementStyle;
+    prev?: ElementStyle;
+    next?: ElementStyle;
     render?: (args: ArrowRenderArgs & {
         dir: "prev" | "next";
-    }) => React__default.ReactNode;
-    renderPrev?: (args: ArrowRenderArgs) => React__default.ReactNode;
-    renderNext?: (args: ArrowRenderArgs) => React__default.ReactNode;
+    }) => React$1.ReactNode;
+    renderPrev?: (args: ArrowRenderArgs) => React$1.ReactNode;
+    renderNext?: (args: ArrowRenderArgs) => React$1.ReactNode;
     ripple?: ThumbnailsRipple;
 };
 type ThumbnailsTransitions = {
@@ -201,7 +111,7 @@ type ThumbnailsTransitions = {
     intro?: ThumbnailIntroOptions;
 };
 type ThumbnailsOptions = {
-    children?: React__default.ReactNode;
+    children?: React$1.ReactNode;
     layout?: ThumbnailsLayout;
     elements?: ThumbnailsElements;
     scroll?: ThumbnailsScroll;
@@ -210,42 +120,147 @@ type ThumbnailsOptions = {
     transitions?: ThumbnailsTransitions;
     breakpointMap?: BreakpointMap;
 };
+
+type BreakpointMap = Record<string, number>;
+type ResponsiveNumber = number | string | Array<number | string> | Record<string, number | string>;
+
+type MediaItem = {
+    kind: "image";
+    src: string;
+    alt?: string;
+    caption?: React.ReactNode;
+    srcSet?: string;
+    sizes?: string;
+    width?: number;
+    height?: number;
+} | {
+    kind: "video";
+    src: string;
+    alt?: string;
+    thumb?: string;
+    caption?: React.ReactNode;
+};
+
+type LoadingOptions = {
+    isLoading?: boolean;
+    skeletonCount?: ResponsiveNumber;
+    renderLoading?: (args: {
+        layout: "slider" | "grid" | "masonry" | "entries";
+        count: number;
+    }) => React.ReactNode;
+};
+type IntroOptions = {
+    renderIntro?: (args: {
+        active: boolean;
+        containerProps: React.HTMLAttributes<HTMLDivElement>;
+    }, content: React.ReactNode) => React.ReactNode;
+    staggerMs?: number;
+    transform?: string;
+    durationMs?: number;
+    easing?: string;
+    staggerLimit?: number;
+};
+
+type EntryItem = {
+    media?: MediaItem[];
+    [key: string]: any;
+};
+type EntryMediaRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+    media: MediaItem;
+    mediaIndex: number;
+};
+type MediaEntryLink = {
+    entryIndex: number;
+    mediaIndex: number;
+};
+type EntryOverlayRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+    mediaIndex: number | null;
+    link: MediaEntryLink | null;
+    opacity: number;
+    fsIndex: number;
+    style: React.CSSProperties;
+    containerProps: React.HTMLAttributes<HTMLDivElement>;
+};
+type EntryMediaLayout = "slider" | "grid" | "masonry";
+type EntryCardRenderArgs = {
+    entry: EntryItem;
+    entryIndex: number;
+    media: React.ReactNode;
+};
+type EntriesOptions = {
+    items?: EntryItem[];
+    mediaLayout?: EntryMediaLayout;
+    render?: {
+        card?: (args: EntryCardRenderArgs) => React.ReactNode;
+        media?: (args: EntryMediaRenderArgs) => React.ReactNode;
+        overlay?: (args: EntryOverlayRenderArgs) => React.ReactNode;
+    };
+    overlay?: ElementStyle;
+    loading?: LoadingOptions;
+    intro?: IntroOptions;
+};
+
+type FsCounterArgs = {
+    index: number;
+    count: number;
+};
+type FsCaptionPlacement = "top" | "right" | "bottom" | "left";
+type FSImageRender = (args: {
+    item: Extract<MediaItem, {
+        kind: "image";
+    }>;
+    index: number;
+    isZoomed: boolean;
+    className: string;
+    baseStyle: React$1.CSSProperties;
+}) => React$1.ReactNode;
+type PlyrSourceBuilder = (item: MediaItem, index: number) => Plyr.SourceInfo;
+type PlyrOptionsResolver = Plyr.Options | ((item: MediaItem, index: number) => Plyr.Options);
 type FullscreenArrows = {
     enabled?: boolean;
-    arrow?: ControlStyle;
-    prev?: ControlStyle;
-    next?: ControlStyle;
+    arrow?: ElementStyle;
+    prev?: ElementStyle;
+    next?: ElementStyle;
     render?: (args: {
         dir: "prev" | "next";
-    }) => HTMLElement | null;
-    renderPrev?: () => HTMLElement | null;
-    renderNext?: () => HTMLElement | null;
+    }) => React$1.ReactNode;
+    renderPrev?: () => React$1.ReactNode;
+    renderNext?: () => React$1.ReactNode;
 };
 type FullscreenClose = {
     enabled?: boolean;
-    style?: React__default.CSSProperties;
+    style?: React$1.CSSProperties;
     className?: string;
-    render?: () => React__default.ReactNode | HTMLElement | null;
+    render?: () => React$1.ReactNode;
 };
 type FullscreenCounter = {
     enabled?: boolean;
-    style?: React__default.CSSProperties;
+    style?: React$1.CSSProperties;
     className?: string;
-    render?: (args: FsCounterArgs) => React__default.ReactNode | HTMLElement | null;
+    render?: (args: FsCounterArgs) => React$1.ReactNode;
 };
 type FullscreenControlsOptions = {
     close?: FullscreenClose;
     arrows?: FullscreenArrows;
     counter?: FullscreenCounter;
 };
+type FsCaptionRenderArgs = {
+    item: MediaItem;
+    index: number;
+    isZoomed: boolean;
+};
 type FullscreenCaptionOptions = {
     className?: string;
-    style?: React__default.CSSProperties;
+    style?: React$1.CSSProperties;
     placement?: FsCaptionPlacement;
     width?: number;
     height?: number;
     breakpoint?: number;
-    render?: (args: FsCaptionRenderArgs) => React__default.ReactNode;
+    render?: (args: FsCaptionRenderArgs) => React$1.ReactNode;
 };
 type FullscreenEffectsOptions = {
     introDuration?: number;
@@ -270,7 +285,7 @@ type FullscreenZoomPanOptions = {
 type FullscreenVideoOptions = {
     source?: PlyrSourceBuilder;
     options?: PlyrOptionsResolver;
-    style?: React__default.CSSProperties;
+    style?: React$1.CSSProperties;
     className?: string;
 };
 type FullscreenOptions = {
@@ -285,13 +300,72 @@ type FullscreenOptions = {
     zoom?: FullscreenZoomPanOptions;
     effects?: FullscreenEffectsOptions;
 };
+
+type MasonryOptions = {
+    columns?: ResponsiveNumber;
+    gap?: ResponsiveNumber;
+    placement?: "balanced" | "roundRobin";
+    estimatedItemHeight?: number;
+    as?: React.ElementType;
+    rootRef?: React.Ref<HTMLDivElement>;
+    classNames?: {
+        root?: string;
+        column?: string;
+        item?: string;
+    };
+    loading?: LoadingOptions;
+    intro?: IntroOptions;
+};
+
+type GridOptions = {
+    columns?: ResponsiveNumber;
+    minColumnWidth?: number | string;
+    gap?: ResponsiveNumber;
+    rootClassName?: string;
+    itemClassName?: string;
+    loading?: LoadingOptions;
+    intro?: IntroOptions;
+};
+
+type IndexMode = "instant" | "animated";
+interface GalleryApi {
+    rootNode(): HTMLElement | null;
+    containerNode(): HTMLElement | null;
+    slideNodes(): HTMLElement[];
+    onReady?(cb: (nodes: HTMLElement[]) => void): () => void;
+    whenReady?(): Promise<HTMLElement[]>;
+    isReady?(): boolean;
+    scrollTo(index: number, jump?: boolean): void;
+    scrollNext(jump?: boolean): void;
+    scrollPrev(jump?: boolean): void;
+    canScrollNext(): boolean;
+    canScrollPrev(): boolean;
+    getIndex(): number;
+    selectCell(index: number, jump?: boolean): void;
+    scrollProgress(): number;
+    cellsInView(): number[];
+    append(nodes: React.ReactNode | React.ReactNode[]): number;
+    prepend(nodes: React.ReactNode | React.ReactNode[]): number;
+    insert(index: number, nodes: React.ReactNode | React.ReactNode[]): number;
+    remove(indexOrPredicate: number | ((i: number) => boolean)): number;
+    replace(index: number, node: React.ReactNode): void;
+    setItems(nodes: React.ReactNode[]): number;
+    onIndexChange(cb: (i: number, meta: {
+        mode: IndexMode;
+    }) => void): () => void;
+}
+
+type ResponsiveHeightRule = {
+    query: string;
+    height: string;
+};
 type SliderLayout = {
     gap?: number;
     cellsPerSlide?: ResponsiveNumber;
 };
 type SliderDirection = {
-    dir?: 'ltr' | 'rtl';
-    axis?: 'x' | 'y';
+    dir?: "ltr" | "rtl";
+    axis?: "x" | "y";
 };
 type SliderSize = {
     height?: string;
@@ -299,8 +373,8 @@ type SliderSize = {
     initialHeight?: number | string;
 };
 type SliderElements = {
-    viewport?: ControlStyle;
-    container?: ControlStyle;
+    viewport?: ElementStyle;
+    container?: ElementStyle;
 };
 type SliderScroll = {
     groupCells?: boolean;
@@ -310,26 +384,26 @@ type SliderScroll = {
 };
 type SliderArrows = {
     enabled?: boolean;
-    arrow?: ControlStyle;
-    prev?: ControlStyle;
-    next?: ControlStyle;
+    arrow?: ElementStyle;
+    prev?: ElementStyle;
+    next?: ElementStyle;
     render?: (args: ArrowRenderArgs & {
         dir: "prev" | "next";
-    }) => React__default.ReactNode;
-    renderPrev?: (args: ArrowRenderArgs) => React__default.ReactNode;
-    renderNext?: (args: ArrowRenderArgs) => React__default.ReactNode;
+    }) => React.ReactNode;
+    renderPrev?: (args: ArrowRenderArgs) => React.ReactNode;
+    renderNext?: (args: ArrowRenderArgs) => React.ReactNode;
 };
 type SliderDots = {
     enabled?: boolean;
-    root?: ControlStyle;
-    dot?: ControlStyle;
-    render?: (args: DotsRenderArgs) => React__default.ReactNode;
+    root?: ElementStyle;
+    dot?: ElementStyle;
+    render?: (args: DotsRenderArgs) => React.ReactNode;
 };
 type SliderProgress = {
     enabled?: boolean;
-    root?: ControlStyle;
-    bar?: ControlStyle;
-    render?: (args: ProgressRenderArgs) => React__default.ReactNode;
+    root?: ElementStyle;
+    bar?: ElementStyle;
+    render?: (args: ProgressRenderArgs) => React.ReactNode;
 };
 type SliderRipple = {
     enabled?: boolean;
@@ -361,15 +435,15 @@ type SliderLoadingOptions = {
     isLoading?: boolean;
     skeletonCount?: ResponsiveNumber;
     renderLoading?: (args: {
-        layout: 'slider' | 'grid' | 'masonry' | 'entries';
+        layout: "slider" | "grid" | "masonry" | "entries";
         count: number;
-    }) => React__default.ReactNode;
+    }) => React.ReactNode;
 };
 type SliderIntroOptions = {
     renderIntro?: (args: {
         active: boolean;
-        containerProps: React__default.HTMLAttributes<HTMLDivElement>;
-    }, content: React__default.ReactNode) => React__default.ReactNode;
+        containerProps: React.HTMLAttributes<HTMLDivElement>;
+    }, content: React.ReactNode) => React.ReactNode;
     staggerMs?: number;
     transform?: number | string;
     durationMs?: number;
@@ -406,7 +480,7 @@ type SliderOptions = {
     layout?: SliderLayout;
     direction?: SliderDirection;
     size?: SliderSize;
-    align?: 'start' | 'center';
+    align?: "start" | "center";
     scroll?: SliderScroll;
     elements?: SliderElements;
     lazyLoad?: boolean;
@@ -417,68 +491,7 @@ type SliderOptions = {
     motion?: SliderMotion;
     effects?: SliderEffects;
 };
-type GridOptions = {
-    columns?: ResponsiveNumber;
-    minColumnWidth?: number | string;
-    gap?: ResponsiveNumber;
-    rootClassName?: string;
-    itemClassName?: string;
-    loading?: LoadingOptions;
-    intro?: IntroOptions;
-};
-type MasonryOptions = {
-    columns?: ResponsiveNumber;
-    gap?: ResponsiveNumber;
-    placement?: "balanced" | "roundRobin";
-    estimatedItemHeight?: number;
-    as?: React__default.ElementType;
-    rootRef?: React__default.Ref<HTMLDivElement>;
-    classNames?: {
-        root?: string;
-        column?: string;
-        item?: string;
-    };
-    loading?: LoadingOptions;
-    intro?: IntroOptions;
-};
-type EntriesOptions = {
-    items?: EntryItem[];
-    mediaLayout?: EntryMediaLayout;
-    render?: {
-        card?: (args: EntryCardRenderArgs) => React__default.ReactNode;
-        media?: (args: EntryMediaRenderArgs) => React__default.ReactNode;
-        overlay?: (args: EntryOverlayRenderArgs) => React__default.ReactNode;
-    };
-    overlay?: ControlStyle;
-    loading?: LoadingOptions;
-    intro?: IntroOptions;
-};
-interface GalleryApi {
-    rootNode(): HTMLElement | null;
-    containerNode(): HTMLElement | null;
-    slideNodes(): HTMLElement[];
-    onReady?(cb: (nodes: HTMLElement[]) => void): () => void;
-    whenReady?(): Promise<HTMLElement[]>;
-    isReady?(): boolean;
-    scrollTo(index: number, jump?: boolean): void;
-    scrollNext(jump?: boolean): void;
-    scrollPrev(jump?: boolean): void;
-    canScrollNext(): boolean;
-    canScrollPrev(): boolean;
-    getIndex(): number;
-    selectCell(index: number, jump?: boolean): void;
-    scrollProgress(): number;
-    cellsInView(): number[];
-    append(nodes: React__default.ReactNode | React__default.ReactNode[]): number;
-    prepend(nodes: React__default.ReactNode | React__default.ReactNode[]): number;
-    insert(index: number, nodes: React__default.ReactNode | React__default.ReactNode[]): number;
-    remove(indexOrPredicate: number | ((i: number) => boolean)): number;
-    replace(index: number, node: React__default.ReactNode): void;
-    setItems(nodes: React__default.ReactNode[]): number;
-    onIndexChange(cb: (i: number, meta: {
-        mode: IndexMode;
-    }) => void): () => void;
-}
+
 type Props = {
     children?: ReactNode;
     fullscreen?: FullscreenOptions;
@@ -488,8 +501,8 @@ type Props = {
     masonry?: MasonryOptions;
     entries?: EntriesOptions;
     breakpoints?: BreakpointMap;
-    root?: ControlStyle;
-    container?: ControlStyle;
+    root?: ElementStyle;
+    container?: ElementStyle;
 };
 declare const Gallery: React__default.ForwardRefExoticComponent<Props & React__default.RefAttributes<GalleryApi>>;
 
@@ -510,9 +523,9 @@ type RmgPlyrVideoProps = {
     sourceBuilder?: RmgPlyrSourceBuilder;
     options?: RmgPlyrOptionsResolver;
     className?: string;
-    style?: React.CSSProperties;
+    style?: React$1.CSSProperties;
     posterClassName?: string;
-    posterStyle?: React.CSSProperties;
+    posterStyle?: React$1.CSSProperties;
     onApi?: (api: APITypes | null) => void;
     registerApiByIndex?: (index: number, api: APITypes | null) => void;
 };