react-photo-album - npm Package Compare versions

Comparing version 3.0.0-rc.5 to 3.0.0-rc.6

dist/client/aggregate.d.ts

@@ -1,3 +0,2 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Photo, LayoutType, RowsPhotoAlbumProps, ColumnsPhotoAlbumProps, MasonryPhotoAlbumProps } from '../types.js';
+import { Photo, ElementRef, JSXElement, LayoutType, RowsPhotoAlbumProps, ColumnsPhotoAlbumProps, MasonryPhotoAlbumProps } from '../types.js';
 import 'react';
@@ -12,4 +11,4 @@
 } & MasonryPhotoAlbumProps<TPhoto>);
-declare function PhotoAlbum<TPhoto extends Photo>({ layout, ...rest }: PhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element | null;
+declare const _default: <TPhoto extends Photo>(props: PhotoAlbumProps<TPhoto> & ElementRef) => JSXElement | null;
 
-export { PhotoAlbum as default };
+export { _default as default };

dist/client/aggregate.js

 "use client";
 import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
 import RowsPhotoAlbum from "./rows.js";
 import ColumnsPhotoAlbum from "./columns.js";
 import MasonryPhotoAlbum from "./masonry.js";
-function PhotoAlbum({ layout, ...rest }) {
-  if (layout === "rows") return jsx(RowsPhotoAlbum, { ...rest });
-  if (layout === "columns") return jsx(ColumnsPhotoAlbum, { ...rest });
-  if (layout === "masonry") return jsx(MasonryPhotoAlbum, { ...rest });
+function PhotoAlbum({ layout, ...rest }, ref) {
+  if (layout === "rows") return jsx(RowsPhotoAlbum, { ref, ...rest });
+  if (layout === "columns") return jsx(ColumnsPhotoAlbum, { ref, ...rest });
+  if (layout === "masonry") return jsx(MasonryPhotoAlbum, { ref, ...rest });
   return null;
 }
+const PhotoAlbum$1 = forwardRef(PhotoAlbum);
 export {
-  PhotoAlbum as default
+  PhotoAlbum$1 as default
 };

dist/client/columns.d.ts

@@ -1,7 +0,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Photo, ColumnsPhotoAlbumProps } from '../types.js';
+import { Photo, ColumnsPhotoAlbumProps, ElementRef, JSXElement } from '../types.js';
 import 'react';
 
-declare function ColumnsPhotoAlbum<TPhoto extends Photo>({ photos, breakpoints, defaultContainerWidth, ...rest }: ColumnsPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
+declare const _default: <TPhoto extends Photo>(props: ColumnsPhotoAlbumProps<TPhoto> & ElementRef) => JSXElement;
 
-export { ColumnsPhotoAlbum as default };
+export { _default as default };

dist/client/columns.js

 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, forwardRef } from "react";
 import { useContainerWidth } from "./hooks.js";
-import StaticPhotoAlbum from "../core/static.js";
+import StaticPhotoAlbum from "../static/index.js";
 import resolveColumnsProps from "./columnsProps.js";
 import computeColumnsLayout from "../layouts/columns.js";
-function ColumnsPhotoAlbum({
-  photos,
-  breakpoints,
-  defaultContainerWidth,
-  ...rest
-}) {
-  const { containerRef, containerWidth } = useContainerWidth(breakpoints, defaultContainerWidth);
+function ColumnsPhotoAlbum({ photos, breakpoints, defaultContainerWidth, ...rest }, ref) {
+  const { containerRef, containerWidth } = useContainerWidth(ref, breakpoints, defaultContainerWidth);
   const { spacing, padding, columns, ...restProps } = resolveColumnsProps(containerWidth, { photos, ...rest });
@@ -22,4 +17,5 @@ const model = useMemo(
 }
+const ColumnsPhotoAlbum$1 = forwardRef(ColumnsPhotoAlbum);
 export {
-  ColumnsPhotoAlbum as default
+  ColumnsPhotoAlbum$1 as default
 };

dist/client/columnsProps.js

@@ -1,2 +0,2 @@
-import { resolveCommonProps, resolveResponsiveParameter } from "../core/utils.js";
+import { resolveCommonProps, resolveResponsiveParameter } from "../utils/index.js";
 function resolveColumnsProps(containerWidth, { columns, ...rest }) {
@@ -3,0 +3,0 @@ return {

dist/client/hooks.d.ts

@@ -0,4 +1,7 @@
+import { ForwardedRef } from '../types.js';
+import 'react';
+
 declare function useArray<T>(array: T[] | undefined): T[] | undefined;
 
-declare function useContainerWidth(breakpointsArray: number[] | undefined, defaultContainerWidth?: number): {
+declare function useContainerWidth(ref: ForwardedRef, breakpointsArray: number[] | undefined, defaultContainerWidth?: number): {
     containerRef: (node: HTMLElement | null) => void;
@@ -5,0 +8,0 @@ containerWidth: number | undefined;

dist/client/hooks.js

@@ -22,8 +22,7 @@ "use client";
     sorted.push(Math.floor(sorted[sorted.length - 1] / 2));
-    const threshold = width;
-    width = sorted.find((breakpoint, index) => breakpoint <= threshold || index === sorted.length - 1);
+    width = sorted.find((breakpoint, index) => breakpoint <= width || index === sorted.length - 1);
   }
   return width;
 }
-function useContainerWidth(breakpointsArray, defaultContainerWidth) {
+function useContainerWidth(ref, breakpointsArray, defaultContainerWidth) {
   const [[containerWidth], dispatch] = useReducer(containerWidthReducer, [defaultContainerWidth]);
@@ -42,4 +41,9 @@ const breakpoints = useArray(breakpointsArray);
       }
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
     },
-    [breakpoints]
+    [ref, breakpoints]
   );
@@ -46,0 +50,0 @@ return { containerRef, containerWidth };

dist/client/masonry.d.ts

@@ -1,7 +0,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Photo, MasonryPhotoAlbumProps } from '../types.js';
+import { Photo, MasonryPhotoAlbumProps, ElementRef, JSXElement } from '../types.js';
 import 'react';
 
-declare function MasonryPhotoAlbum<TPhoto extends Photo>({ photos, breakpoints, defaultContainerWidth, ...rest }: MasonryPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
+declare const _default: <TPhoto extends Photo>(props: MasonryPhotoAlbumProps<TPhoto> & ElementRef) => JSXElement;
 
-export { MasonryPhotoAlbum as default };
+export { _default as default };

dist/client/masonry.js

 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, forwardRef } from "react";
 import { useContainerWidth } from "./hooks.js";
-import StaticPhotoAlbum from "../core/static.js";
+import StaticPhotoAlbum from "../static/index.js";
 import resolveMasonryProps from "./masonryProps.js";
 import computeMasonryLayout from "../layouts/masonry.js";
-function MasonryPhotoAlbum({
-  photos,
-  breakpoints,
-  defaultContainerWidth,
-  ...rest
-}) {
-  const { containerRef, containerWidth } = useContainerWidth(breakpoints, defaultContainerWidth);
+function MasonryPhotoAlbum({ photos, breakpoints, defaultContainerWidth, ...rest }, ref) {
+  const { containerRef, containerWidth } = useContainerWidth(ref, breakpoints, defaultContainerWidth);
   const { spacing, padding, columns, ...restProps } = resolveMasonryProps(containerWidth, { photos, ...rest });
@@ -22,4 +17,5 @@ const model = useMemo(
 }
+const MasonryPhotoAlbum$1 = forwardRef(MasonryPhotoAlbum);
 export {
-  MasonryPhotoAlbum as default
+  MasonryPhotoAlbum$1 as default
 };

dist/client/masonryProps.js

@@ -1,2 +0,2 @@
-import { resolveCommonProps, resolveResponsiveParameter } from "../core/utils.js";
+import { resolveCommonProps, resolveResponsiveParameter } from "../utils/index.js";
 function resolveMasonryProps(containerWidth, { columns, ...rest }) {
@@ -3,0 +3,0 @@ return {

dist/client/rows.d.ts

@@ -1,7 +0,6 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Photo, RowsPhotoAlbumProps } from '../types.js';
+import { Photo, RowsPhotoAlbumProps, ElementRef, JSXElement } from '../types.js';
 import 'react';
 
-declare function RowsPhotoAlbum<TPhoto extends Photo>({ photos, breakpoints, defaultContainerWidth, ...rest }: RowsPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
+declare const _default: <TPhoto extends Photo>(props: RowsPhotoAlbumProps<TPhoto> & ElementRef) => JSXElement;
 
-export { RowsPhotoAlbum as default };
+export { _default as default };

dist/client/rows.js

 "use client";
 import { jsx } from "react/jsx-runtime";
-import { useMemo } from "react";
+import { useMemo, forwardRef } from "react";
 import { useContainerWidth } from "./hooks.js";
-import StaticPhotoAlbum from "../core/static.js";
+import StaticPhotoAlbum from "../static/index.js";
 import resolveRowsProps from "./rowsProps.js";
 import computeRowsLayout from "../layouts/rows.js";
-function RowsPhotoAlbum({
-  photos,
-  breakpoints,
-  defaultContainerWidth,
-  ...rest
-}) {
-  const { containerRef, containerWidth } = useContainerWidth(breakpoints, defaultContainerWidth);
+function RowsPhotoAlbum({ photos, breakpoints, defaultContainerWidth, ...rest }, ref) {
+  const { containerRef, containerWidth } = useContainerWidth(ref, breakpoints, defaultContainerWidth);
   const { spacing, padding, targetRowHeight, minPhotos, maxPhotos, ...restProps } = resolveRowsProps(containerWidth, {
@@ -25,4 +20,5 @@ photos,
 }
+const RowsPhotoAlbum$1 = forwardRef(RowsPhotoAlbum);
 export {
-  RowsPhotoAlbum as default
+  RowsPhotoAlbum$1 as default
 };

dist/client/rowsProps.js

@@ -1,2 +0,2 @@
-import { resolveCommonProps, unwrapParameter, resolveResponsiveParameter } from "../core/utils.js";
+import { resolveCommonProps, unwrapParameter, resolveResponsiveParameter } from "../utils/index.js";
 function resolveRowsProps(containerWidth, { photos, targetRowHeight, rowConstraints, ...rest }) {
@@ -3,0 +3,0 @@ const { spacing, padding, componentsProps, render } = resolveCommonProps(containerWidth, rest);

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { ClickHandlerProps, ColumnsPhotoAlbumProps, CommonPhotoAlbumProps, ComponentsProps, ContextAware, Image, LayoutModel, LayoutType, LayoutVariables, MasonryPhotoAlbumProps, NonOptional, Photo, Render, RenderButtonContext, RenderButtonProps, RenderContainerProps, RenderFunction, RenderImageContext, RenderImageProps, RenderLinkContext, RenderLinkProps, RenderPhotoContext, RenderPhotoProps, RenderTrackProps, RenderWrapperContext, RenderWrapperProps, ResponsiveParameter, ResponsiveSizes, RowConstraints, RowsPhotoAlbumProps } from './types.js';
+export { ClickHandlerProps, ColumnsPhotoAlbumProps, CommonPhotoAlbumProps, ComponentsProps, ContextAware, ElementRef, ForwardedRef, Image, JSXElement, LayoutModel, LayoutType, LayoutVariables, MasonryPhotoAlbumProps, NonOptional, Photo, Render, RenderButtonContext, RenderButtonProps, RenderContainerProps, RenderFunction, RenderImageContext, RenderImageProps, RenderLinkContext, RenderLinkProps, RenderPhotoContext, RenderPhotoProps, RenderTrackProps, RenderWrapperContext, RenderWrapperProps, ResponsiveParameter, ResponsiveSizes, RowConstraints, RowsPhotoAlbumProps } from './types.js';
 export { default } from './client/aggregate.js';
@@ -6,3 +6,3 @@ export { default as RowsPhotoAlbum } from './client/rows.js';
 export { default as MasonryPhotoAlbum } from './client/masonry.js';
-export { default as UnstableStaticPhotoAlbum, StaticPhotoAlbumProps as UnstableStaticPhotoAlbumProps } from './core/static.js';
+export { default as UnstableStaticPhotoAlbum, StaticPhotoAlbumProps as UnstableStaticPhotoAlbumProps } from './static/index.js';
 export { default as unstable_computeRowsLayout } from './layouts/rows.js';
@@ -12,2 +12,1 @@ export { default as unstable_computeColumnsLayout } from './layouts/columns.js';
 import 'react';
-import 'react/jsx-runtime';

dist/index.js

@@ -5,3 +5,3 @@ import { default as default2 } from "./client/aggregate.js";
 import { default as default5 } from "./client/masonry.js";
-import { default as default6 } from "./core/static.js";
+import { default as default6 } from "./static/index.js";
 import { default as default7 } from "./layouts/rows.js";
@@ -8,0 +8,0 @@ import { default as default8 } from "./layouts/columns.js";

dist/layouts/columns.js

@@ -1,2 +0,2 @@
-import { ratio } from "../core/utils.js";
+import { ratio } from "../utils/index.js";
 function computeShortestPath(graph, pathLength, startNode, endNode) {
@@ -3,0 +3,0 @@ const matrix = /* @__PURE__ */ new Map();

dist/layouts/masonry.js

@@ -1,2 +0,2 @@
-import { ratio } from "../core/utils.js";
+import { ratio } from "../utils/index.js";
 function computeMasonryLayout(photos, spacing, padding, containerWidth, columns) {
@@ -3,0 +3,0 @@ const columnWidth = (containerWidth - spacing * (columns - 1) - 2 * padding * columns) / columns;

dist/layouts/rows.js

@@ -1,2 +0,2 @@
-import { round, ratio } from "../core/utils.js";
+import { round, ratio } from "../utils/index.js";
 function rankingFunctionComparator(rank) {
@@ -3,0 +3,0 @@ return (a, b) => rank(b) - rank(a);

dist/scroll/index.d.ts

@@ -15,4 +15,2 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
     singleton?: boolean;
-    /** IntersectionObserver root margin setting. */
-    rootMargin?: string;
     /** Markup to display when an error occurred. */
@@ -24,8 +22,12 @@ error?: React__default.ReactNode;
     finished?: React__default.ReactNode;
+    /** Fetcher `IntersectionObserver` root margin setting. Default: `800px` */
+    fetchRootMargin?: string;
+    /** Offscreen `IntersectionObserver` root margin setting. Default: `2000px` */
+    offscreenRootMargin?: string;
     /** Photo album component. Must be the only child. */
-    children: React__default.ReactElement<Pick<CommonPhotoAlbumProps, "photos">>;
+    children: React__default.ReactElement<Pick<CommonPhotoAlbumProps, "photos" | "render">>;
 };
 /** InfiniteScroll component. */
-declare function InfiniteScroll({ photos: initialPhotos, fetch, retries, singleton, rootMargin, error, loading, finished, children, }: InfiniteScrollProps): react_jsx_runtime.JSX.Element;
+declare function InfiniteScroll({ photos: initialPhotos, fetch, retries, singleton, error, loading, finished, children, fetchRootMargin, offscreenRootMargin, }: InfiniteScrollProps): react_jsx_runtime.JSX.Element;
 
 export { InfiniteScroll as UnstableInfiniteScroll, type InfiniteScrollProps as UnstableInfiniteScrollProps };

dist/scroll/index.js

 "use client";
-import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useLayoutEffect as useLayoutEffect$1, useEffect, useRef, useCallback, useState, cloneElement } from "react";
+import { jsx, jsxs, Fragment } from "react/jsx-runtime";
+import { useMemo, useState, useCallback, cloneElement, useLayoutEffect as useLayoutEffect$1, useEffect, useRef, Children, isValidElement } from "react";
+const observers = /* @__PURE__ */ new Map();
+function createObserver(rootMargin) {
+  let instance = observers.get(rootMargin);
+  if (!instance) {
+    const listeners = /* @__PURE__ */ new Map();
+    const observer = new IntersectionObserver(
+      (entries) => {
+        entries.forEach((entry) => {
+          listeners.get(entry.target)?.forEach((callback) => {
+            callback(entry);
+          });
+        });
+      },
+      { rootMargin }
+    );
+    instance = { observer, listeners };
+    observers.set(rootMargin, instance);
+  }
+  return instance;
+}
+function useIntersectionObserver(rootMargin) {
+  return useMemo(() => {
+    const cleanup = [];
+    const observe = (target, callback) => {
+      const { observer, listeners } = createObserver(rootMargin);
+      const callbacks = listeners.get(target) || [];
+      callbacks.push(callback);
+      listeners.set(target, callbacks);
+      observer.observe(target);
+      cleanup.push(() => {
+        callbacks.splice(callbacks.indexOf(callback), 1);
+        if (callbacks.length === 0) {
+          listeners.delete(target);
+          observer.unobserve(target);
+        }
+        if (listeners.size === 0) {
+          observer.disconnect();
+          observers.delete(rootMargin);
+        }
+      });
+    };
+    const unobserve = () => {
+      cleanup.forEach((callback) => callback());
+      cleanup.splice(0, cleanup.length);
+    };
+    return { observe, unobserve };
+  }, [rootMargin]);
+}
+function Offscreen({ rootMargin, children }) {
+  const [placeholder, setPlaceholder] = useState();
+  const { observe, unobserve } = useIntersectionObserver(rootMargin);
+  const ref = useCallback(
+    (node) => {
+      unobserve();
+      if (node) {
+        observe(node, ({ isIntersecting }) => {
+          if (!isIntersecting) {
+            const { width, height } = node.getBoundingClientRect();
+            const { margin } = getComputedStyle(node);
+            setPlaceholder({ width, height, margin });
+          } else {
+            setPlaceholder(void 0);
+          }
+        });
+      }
+    },
+    [observe, unobserve]
+  );
+  return !placeholder ? cloneElement(children, { ref }) : jsx("div", { ref, style: placeholder });
+}
 const useLayoutEffect = typeof window !== "undefined" ? useLayoutEffect$1 : useEffect;
@@ -24,12 +94,13 @@ function useEventCallback(fn) {
   singleton,
-  rootMargin = "800px",
   error,
   loading,
   finished,
-  children
+  children,
+  fetchRootMargin = "800px",
+  offscreenRootMargin = "2000px"
 }) {
   const [status, setStatus] = useState(0);
   const [photos, setPhotos] = useState(() => initialPhotos ? [initialPhotos] : []);
+  const { observe, unobserve } = useIntersectionObserver(fetchRootMargin);
   const fetching = useRef(false);
-  const observer = useRef();
   const fetchWithRetry = useEventCallback((index) => {
@@ -74,25 +145,38 @@ let attempt = 1;
     (node) => {
-      observer.current?.disconnect();
-      observer.current = void 0;
-      if (node && typeof IntersectionObserver !== "undefined") {
-        observer.current = new IntersectionObserver(
-          (entries) => {
-            if (entries.some((entry) => entry.isIntersecting)) {
-              handleFetch();
-            }
-          },
-          { rootMargin }
-        );
-        observer.current.observe(node);
+      unobserve();
+      if (node) {
+        observe(node, ({ isIntersecting }) => {
+          if (isIntersecting) {
+            handleFetch();
+          }
+        });
       }
     },
-    [rootMargin, handleFetch]
+    [observe, unobserve, handleFetch]
   );
   return jsxs(Fragment, { children: [
-    singleton ? cloneElement(children, { photos: photos.flatMap((batch) => batch) }) : photos.map(
-      (batch, index) => cloneElement(children, {
-        key: index,
-        photos: batch
-      })
-    ),
+    singleton ? cloneElement(children, {
+      photos: photos.flatMap((batch) => batch),
+      render: {
+        ...children.props.render,
+        track: ({ children: trackChildren, ...rest }) => jsx("div", { ...rest, children: Children.map(
+          trackChildren,
+          (child, index) => isValidElement(child) && jsx(
+            Offscreen,
+            {
+              rootMargin: offscreenRootMargin,
+              children: child
+            },
+            index
+          )
+        ) })
+      }
+    }) : photos.map((batch, index) => jsx(
+      Offscreen,
+      {
+        rootMargin: offscreenRootMargin,
+        children: cloneElement(children, { photos: batch })
+      },
+      index
+    )),
     status === 2 && error,
@@ -99,0 +183,0 @@ status === 1 && loading,

dist/server/index.d.ts

@@ -10,9 +10,9 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 type ServerPhotoAlbumProps<TPhoto extends Photo> = {
-    /** if `true`, do not include the inline stylesheet */
+    /** If `true`, do not include the inline stylesheet. */
     unstyled?: boolean;
-    /** custom class names for the container and the breakpoint intervals */
+    /** Custom class names for the container and the breakpoint intervals. */
     classNames?: {
-        /** custom container class name */
+        /** Custom container class name. */
         container?: string;
-        /** custom class names for the breakpoint intervals */
+        /** Custom class names for the breakpoint intervals. */
         breakpoints?: {
@@ -19,0 +19,0 @@ [key: number]: string;

dist/server/index.js

 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { clsx } from "../core/utils.js";
-import StaticPhotoAlbum from "../core/static.js";
+import { clsx } from "../utils/index.js";
+import StaticPhotoAlbum from "../static/index.js";
 import computeRowsLayout from "../layouts/rows.js";
@@ -5,0 +5,0 @@ import computeColumnsLayout from "../layouts/columns.js";

dist/ssr/breakpoints.js

 import { useId } from "react";
-import { cssClass } from "../core/utils.js";
+import { cssClass } from "../utils/index.js";
 import { jsx } from "react/jsx-runtime";
@@ -4,0 +4,0 @@ function convertBreakpoints(breakpoints) {

dist/ssr/index.d.ts

@@ -1,2 +0,1 @@
-import * as react_jsx_runtime from 'react/jsx-runtime';
 import React__default from 'react';
@@ -23,5 +22,4 @@ import { CommonPhotoAlbumProps } from '../types.js';
 };
-/** Experimental SSR component. */
-declare function SSR({ breakpoints: breakpointsProp, unstyled, classNames, children }: SSRProps): react_jsx_runtime.JSX.Element | null;
+declare const _default: React__default.ForwardRefExoticComponent<SSRProps & React__default.RefAttributes<HTMLElement>>;
 
-export { SSR as UnstableSSR, type SSRProps as UnstableSSRProps };
+export { _default as UnstableSSR, type SSRProps as UnstableSSRProps };

dist/ssr/index.js

 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useState, isValidElement, cloneElement } from "react";
-import { clsx } from "../core/utils.js";
+import { useState, isValidElement, cloneElement, forwardRef } from "react";
+import { clsx } from "../utils/index.js";
 import { useContainerWidth } from "../client/hooks.js";
 import { useBreakpoints, StyledBreakpoints } from "./breakpoints.js";
-function SSR({ breakpoints: breakpointsProp, unstyled, classNames, children }) {
+function SSR({ breakpoints: breakpointsProp, unstyled, classNames, children }, ref) {
   const { breakpoints, containerClass, breakpointClass } = useBreakpoints("ssr", breakpointsProp);
-  const { containerRef, containerWidth } = useContainerWidth(breakpoints);
+  const { containerRef, containerWidth } = useContainerWidth(ref, breakpoints);
   const [hydratedBreakpoint, setHydratedBreakpoint] = useState();
@@ -36,4 +36,5 @@ if (!Array.isArray(breakpoints) || breakpoints.length === 0 || !isValidElement(children)) return null;
 }
+const SSR$1 = forwardRef(SSR);
 export {
-  SSR as UnstableSSR
+  SSR$1 as UnstableSSR
 };

dist/types.d.ts

@@ -202,3 +202,8 @@ import React__default from 'react';
 type ContextAware<Props, Context> = Props | ((context: Context) => Props | undefined);
+type JSXElement = React__default.JSX.Element;
+type ForwardedRef<T extends HTMLElement = HTMLElement> = React__default.ForwardedRef<T>;
+type ElementRef<T extends HTMLElement = HTMLElement> = {
+    ref?: React__default.Ref<T>;
+};
 
-export type { ClickHandlerProps, ColumnsPhotoAlbumProps, CommonPhotoAlbumProps, ComponentsProps, ContextAware, Image, LayoutModel, LayoutType, LayoutVariables, MasonryPhotoAlbumProps, NonOptional, Photo, Render, RenderButtonContext, RenderButtonProps, RenderContainerProps, RenderFunction, RenderImageContext, RenderImageProps, RenderLinkContext, RenderLinkProps, RenderPhotoContext, RenderPhotoProps, RenderTrackProps, RenderWrapperContext, RenderWrapperProps, ResponsiveParameter, ResponsiveSizes, RowConstraints, RowsPhotoAlbumProps };
+export type { ClickHandlerProps, ColumnsPhotoAlbumProps, CommonPhotoAlbumProps, ComponentsProps, ContextAware, ElementRef, ForwardedRef, Image, JSXElement, LayoutModel, LayoutType, LayoutVariables, MasonryPhotoAlbumProps, NonOptional, Photo, Render, RenderButtonContext, RenderButtonProps, RenderContainerProps, RenderFunction, RenderImageContext, RenderImageProps, RenderLinkContext, RenderLinkProps, RenderPhotoContext, RenderPhotoProps, RenderTrackProps, RenderWrapperContext, RenderWrapperProps, ResponsiveParameter, ResponsiveSizes, RowConstraints, RowsPhotoAlbumProps };

package.json

 {
   "name": "react-photo-album",
-  "version": "3.0.0-rc.5",
+  "version": "3.0.0-rc.6",
   "description": "Responsive photo gallery component for React",
@@ -5,0 +5,0 @@ "author": "Igor Danchenko",

No alert changes

Improved metrics

Total package byte prevSize

77952

increased by4.47%

Lines of code

1513

increased by6.4%

No dependency changes