react-photo-album - npm Package Compare versions

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

dist/client/aggregate.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { Photo, RowsPhotoAlbumProps, ColumnsPhotoAlbumProps, MasonryPhotoAlbumProps } from '../types.js';
+import { Photo, LayoutType, RowsPhotoAlbumProps, ColumnsPhotoAlbumProps, MasonryPhotoAlbumProps } from '../types.js';
 import 'react';
 
 type PhotoAlbumProps<TPhoto extends Photo> = ({
-    layout: "rows";
+    layout: Extract<LayoutType, "rows">;
 } & RowsPhotoAlbumProps<TPhoto>) | ({
-    layout: "columns";
+    layout: Extract<LayoutType, "columns">;
 } & ColumnsPhotoAlbumProps<TPhoto>) | ({
-    layout: "masonry";
+    layout: Extract<LayoutType, "masonry">;
 } & MasonryPhotoAlbumProps<TPhoto>);
@@ -12,0 +12,0 @@ declare function PhotoAlbum<TPhoto extends Photo>({ layout, ...rest }: PhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element | null;

dist/client/columns.d.ts

@@ -5,4 +5,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function ColumnsPhotoAlbum<TPhoto extends Photo>({ photos, onClick, sizes, breakpoints, defaultContainerWidth, skeleton, ...restProps }: ColumnsPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
+declare function ColumnsPhotoAlbum<TPhoto extends Photo>({ photos, breakpoints, defaultContainerWidth, ...rest }: ColumnsPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
 
 export { ColumnsPhotoAlbum as default };

dist/client/columns.js

@@ -6,21 +6,12 @@ "use client";
 import StaticPhotoAlbum from "../core/static.js";
+import resolveColumnsProps from "./columnsProps.js";
 import computeColumnsLayout from "../layouts/columns.js";
-import { resolveResponsiveParameter, resolveCommonProps } from "../core/utils.js";
-function resolveProps(containerWidth, { columns, ...rest }) {
-  return {
-    columns: resolveResponsiveParameter(columns, containerWidth, [5, 4, 3, 2], 1),
-    ...resolveCommonProps(containerWidth, rest)
-  };
-}
 function ColumnsPhotoAlbum({
   photos,
-  onClick,
-  sizes,
   breakpoints,
   defaultContainerWidth,
-  skeleton,
-  ...restProps
+  ...rest
 }) {
   const { containerRef, containerWidth } = useContainerWidth(breakpoints, defaultContainerWidth);
-  const { spacing, padding, componentsProps, render, columns } = resolveProps(containerWidth, restProps);
+  const { spacing, padding, columns, ...restProps } = resolveColumnsProps(containerWidth, { photos, ...rest });
   const model = useMemo(
@@ -30,10 +21,3 @@ () => containerWidth !== void 0 && spacing !== void 0 && padding !== void 0 && columns !== void 0 ? computeColumnsLayout(photos, spacing, padding, containerWidth, columns) : void 0,
   );
-  return jsx(
-    StaticPhotoAlbum,
-    {
-      layout: "columns",
-      ref: containerRef,
-      ...{ model, componentsProps, render, onClick, sizes, skeleton }
-    }
-  );
+  return jsx(StaticPhotoAlbum, { layout: "columns", ref: containerRef, model, ...restProps });
 }
@@ -40,0 +24,0 @@ export {

dist/client/masonry.d.ts

@@ -5,4 +5,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function MasonryPhotoAlbum<TPhoto extends Photo>({ photos, onClick, sizes, breakpoints, defaultContainerWidth, skeleton, ...restProps }: MasonryPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
+declare function MasonryPhotoAlbum<TPhoto extends Photo>({ photos, breakpoints, defaultContainerWidth, ...rest }: MasonryPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
 
 export { MasonryPhotoAlbum as default };

dist/client/masonry.js

@@ -6,21 +6,12 @@ "use client";
 import StaticPhotoAlbum from "../core/static.js";
+import resolveMasonryProps from "./masonryProps.js";
 import computeMasonryLayout from "../layouts/masonry.js";
-import { resolveResponsiveParameter, resolveCommonProps } from "../core/utils.js";
-function resolveProps(containerWidth, { columns, ...rest }) {
-  return {
-    columns: resolveResponsiveParameter(columns, containerWidth, [5, 4, 3, 2], 1),
-    ...resolveCommonProps(containerWidth, rest)
-  };
-}
 function MasonryPhotoAlbum({
   photos,
-  onClick,
-  sizes,
   breakpoints,
   defaultContainerWidth,
-  skeleton,
-  ...restProps
+  ...rest
 }) {
   const { containerRef, containerWidth } = useContainerWidth(breakpoints, defaultContainerWidth);
-  const { spacing, padding, componentsProps, render, columns } = resolveProps(containerWidth, restProps);
+  const { spacing, padding, columns, ...restProps } = resolveMasonryProps(containerWidth, { photos, ...rest });
   const model = useMemo(
@@ -30,10 +21,3 @@ () => containerWidth !== void 0 && spacing !== void 0 && padding !== void 0 && columns !== void 0 ? computeMasonryLayout(photos, spacing, padding, containerWidth, columns) : void 0,
   );
-  return jsx(
-    StaticPhotoAlbum,
-    {
-      layout: "masonry",
-      ref: containerRef,
-      ...{ model, componentsProps, render, onClick, sizes, skeleton }
-    }
-  );
+  return jsx(StaticPhotoAlbum, { layout: "masonry", ref: containerRef, model, ...restProps });
 }
@@ -40,0 +24,0 @@ export {

dist/client/rows.d.ts

@@ -5,4 +5,4 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
-declare function RowsPhotoAlbum<TPhoto extends Photo>({ photos, onClick, sizes, breakpoints, defaultContainerWidth, skeleton, ...rest }: RowsPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
+declare function RowsPhotoAlbum<TPhoto extends Photo>({ photos, breakpoints, defaultContainerWidth, ...rest }: RowsPhotoAlbumProps<TPhoto>): react_jsx_runtime.JSX.Element;
 
 export { RowsPhotoAlbum as default };

dist/client/rows.js

@@ -6,31 +6,15 @@ "use client";
 import StaticPhotoAlbum from "../core/static.js";
+import resolveRowsProps from "./rowsProps.js";
 import computeRowsLayout from "../layouts/rows.js";
-import { resolveResponsiveParameter, unwrapParameter, resolveCommonProps } from "../core/utils.js";
-function resolveProps(containerWidth, {
-  targetRowHeight,
-  rowConstraints,
-  ...rest
-}) {
-  return {
-    targetRowHeight: resolveResponsiveParameter(targetRowHeight, containerWidth, [
-      (w) => w / 5,
-      (w) => w / 4,
-      (w) => w / 3,
-      (w) => w / 2
-    ]),
-    ...unwrapParameter(rowConstraints, containerWidth),
-    ...resolveCommonProps(containerWidth, rest)
-  };
-}
 function RowsPhotoAlbum({
   photos,
-  onClick,
-  sizes,
   breakpoints,
   defaultContainerWidth,
-  skeleton,
   ...rest
 }) {
   const { containerRef, containerWidth } = useContainerWidth(breakpoints, defaultContainerWidth);
-  const { spacing, padding, componentsProps, render, targetRowHeight, minPhotos, maxPhotos, singleRowMaxHeight } = resolveProps(containerWidth, rest);
+  const { spacing, padding, targetRowHeight, minPhotos, maxPhotos, ...restProps } = resolveRowsProps(containerWidth, {
+    photos,
+    ...rest
+  });
   const model = useMemo(
@@ -40,22 +24,3 @@ () => containerWidth !== void 0 && spacing !== void 0 && padding !== void 0 && targetRowHeight !== void 0 ? computeRowsLayout(photos, spacing, padding, containerWidth, targetRowHeight, minPhotos, maxPhotos) : void 0,
   );
-  if (singleRowMaxHeight !== void 0 && spacing !== void 0 && padding !== void 0) {
-    const maxWidth = Math.floor(
-      photos.reduce(
-        (acc, { width, height }) => acc + width / height * singleRowMaxHeight - 2 * padding,
-        padding * photos.length * 2 + spacing * (photos.length - 1)
-      )
-    );
-    if (maxWidth > 0) {
-      componentsProps.container = { ...componentsProps.container };
-      componentsProps.container.style = { maxWidth, ...componentsProps.container.style };
-    }
-  }
-  return jsx(
-    StaticPhotoAlbum,
-    {
-      layout: "rows",
-      ref: containerRef,
-      ...{ model, componentsProps, render, onClick, sizes, skeleton }
-    }
-  );
+  return jsx(StaticPhotoAlbum, { layout: "rows", ref: containerRef, model, ...restProps });
 }
@@ -62,0 +27,0 @@ export {

dist/core/static.d.ts

@@ -1,2 +0,2 @@
-import React from 'react';
+import React__default from 'react';
 import { Photo, CommonPhotoAlbumProps, LayoutModel, Render, ComponentsProps } from '../types.js';
@@ -11,5 +11,5 @@
 declare const _default: <TPhoto extends Photo>(props: StaticPhotoAlbumProps<TPhoto> & {
-    ref?: React.ForwardedRef<HTMLDivElement>;
-}) => React.ReactNode;
+    ref?: React__default.ForwardedRef<HTMLDivElement>;
+}) => React__default.ReactNode;
 
 export { type StaticPhotoAlbumProps, _default as default };

dist/index.d.ts

@@ -1,2 +0,2 @@
-export { ClickHandlerProps, ColumnsPhotoAlbumProps, CommonPhotoAlbumProps, ComponentsProps, ContextAware, Image, LayoutModel, 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, 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 { default } from './client/aggregate.js';
@@ -3,0 +3,0 @@ export { default as RowsPhotoAlbum } from './client/rows.js';

dist/scroll/index.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 import { Photo, CommonPhotoAlbumProps } from '../types.js';
@@ -7,9 +7,9 @@
 type InfiniteScrollProps = {
-    /** Photo fetcher. Return `null` to indicate end of stream. */
+    /** Photo fetcher. Resolve promise with `null` to indicate end of stream. */
     fetch: (index: number) => Promise<Photo[] | null>;
-    /** Initial photos. */
+    /** Initial photos (optional). */
     photos?: Photo[];
     /** Retry attempts. */
     retries?: number;
-    /** Use a single photo album component (masonry layout) */
+    /** Use a single photo album component (masonry layout). */
     singleton?: boolean;
@@ -19,9 +19,9 @@ /** IntersectionObserver root margin setting. */
     /** Markup to display when an error occurred. */
-    error?: React.ReactNode;
-    /** Markup to display while fetching more photos. */
-    loading?: React.ReactNode;
+    error?: React__default.ReactNode;
+    /** Markup to display while fetching additional photos. */
+    loading?: React__default.ReactNode;
     /** Markup to display when no more photos are available. */
-    finished?: React.ReactNode;
-    /** Photo album component */
-    children: React.ReactElement<Pick<CommonPhotoAlbumProps, "photos">>;
+    finished?: React__default.ReactNode;
+    /** Photo album component. Must be the only child. */
+    children: React__default.ReactElement<Pick<CommonPhotoAlbumProps, "photos">>;
 };
@@ -28,0 +28,0 @@ /** InfiniteScroll component. */

dist/ssr/index.d.ts

 import * as react_jsx_runtime from 'react/jsx-runtime';
-import React from 'react';
+import React__default from 'react';
 import { CommonPhotoAlbumProps } from '../types.js';
 
+/** SSR component props. */
 type SSRProps = {
@@ -9,7 +10,18 @@ /** Photo album layout breakpoints. */
     /** Photo album instance, which must be the only child. */
-    children: React.ReactElement<Pick<CommonPhotoAlbumProps, "breakpoints" | "defaultContainerWidth">>;
+    children: React__default.ReactElement<Pick<CommonPhotoAlbumProps, "breakpoints" | "defaultContainerWidth">>;
+    /** If `true`, do not include the inline stylesheet. */
+    unstyled?: boolean;
+    /** Custom class names for the container and the breakpoint intervals. */
+    classNames?: {
+        /** Custom container class name. */
+        container?: string;
+        /** Custom class names for the breakpoint intervals. */
+        breakpoints?: {
+            [key: number]: string;
+        };
+    };
 };
 /** Experimental SSR component. */
-declare function SSR({ breakpoints, children }: SSRProps): react_jsx_runtime.JSX.Element | null;
+declare function SSR({ breakpoints: breakpointsProp, unstyled, classNames, children }: SSRProps): react_jsx_runtime.JSX.Element | null;
 
 export { SSR as UnstableSSR, type SSRProps as UnstableSSRProps };

dist/ssr/index.js

 "use client";
 import { jsxs, Fragment, jsx } from "react/jsx-runtime";
-import { useId, useState, isValidElement, cloneElement } from "react";
+import { useState, isValidElement, cloneElement } from "react";
+import { clsx } from "../core/utils.js";
 import { useContainerWidth } from "../client/hooks.js";
-import { cssClass } from "../core/utils.js";
-function SSR({ breakpoints, children }) {
-  const uid = `ssr-${useId().replace(/:/g, "")}`;
+import { useBreakpoints, StyledBreakpoints } from "./breakpoints.js";
+function SSR({ breakpoints: breakpointsProp, unstyled, classNames, children }) {
+  const { breakpoints, containerClass, breakpointClass } = useBreakpoints("ssr", breakpointsProp);
   const { containerRef, containerWidth } = useContainerWidth(breakpoints);
@@ -14,16 +15,20 @@ const [hydratedBreakpoint, setHydratedBreakpoint] = useState();
   }
-  const containerClass = cssClass(uid);
-  const breakpointClass = (breakpoint) => cssClass(`${uid}-${breakpoint}`);
-  const allBreakpoints = [Math.min(...breakpoints) / 2, ...breakpoints];
-  allBreakpoints.sort((a, b) => a - b);
   return jsxs(Fragment, { children: [
-    hydratedBreakpoint === void 0 && jsx("style", { children: [
-      `.${containerClass}{container-type:inline-size}`,
-      `${allBreakpoints.map((breakpoint) => `.${breakpointClass(breakpoint)}`).join()}{display:none}`,
-      ...allBreakpoints.map(
-        (breakpoint, index, array) => `@container(min-width:${index > 0 ? breakpoint : 0}px)${index < array.length - 1 ? ` and (max-width:${array[index + 1] - 1}px)` : ""}{.${breakpointClass(breakpoint)}{display:block}}`
+    !unstyled && hydratedBreakpoint === void 0 && jsx(
+      StyledBreakpoints,
+      {
+        breakpoints,
+        containerClass,
+        breakpointClass
+      }
+    ),
+    jsx("div", { ref: containerRef, className: clsx(containerClass, classNames?.container), children: breakpoints.map(
+      (breakpoint) => (hydratedBreakpoint === void 0 || hydratedBreakpoint === breakpoint) && jsx(
+        "div",
+        {
+          className: clsx(breakpointClass(breakpoint), classNames?.breakpoints?.[breakpoint]),
+          children: cloneElement(children, { breakpoints, defaultContainerWidth: breakpoint })
+        },
+        breakpoint
       )
-    ].join("\n") }),
-    jsx("div", { ref: containerRef, className: containerClass, children: allBreakpoints.map(
-      (breakpoint) => (hydratedBreakpoint === void 0 || hydratedBreakpoint === breakpoint) && jsx("div", { className: breakpointClass(breakpoint), children: cloneElement(children, { breakpoints, defaultContainerWidth: breakpoint }) }, breakpoint)
     ) })
@@ -30,0 +35,0 @@ ] });

dist/types.d.ts

@@ -1,3 +0,5 @@
-import React from 'react';
+import React__default from 'react';
 
+/** Layout type */
+type LayoutType = "rows" | "columns" | "masonry";
 /** Photo object */
@@ -48,3 +50,3 @@ interface Photo extends Image {
     /** Fallback skeleton in SSR. */
-    skeleton?: React.ReactNode;
+    skeleton?: React__default.ReactNode;
 }
@@ -144,13 +146,13 @@ /** Rows photo album props */
     /** Additional HTML attributes for the outer `<div>` container. */
-    container?: React.ComponentPropsWithoutRef<"div">;
+    container?: React__default.ComponentPropsWithoutRef<"div">;
     /** Additional HTML attributes for the row / column `<div>` container. */
-    track?: React.ComponentPropsWithoutRef<"div">;
+    track?: React__default.ComponentPropsWithoutRef<"div">;
     /** Additional HTML attributes for the image `<div>` wrapper. */
-    wrapper?: ContextAware<React.ComponentPropsWithoutRef<"div">, RenderWrapperContext<TPhoto>>;
+    wrapper?: ContextAware<React__default.ComponentPropsWithoutRef<"div">, RenderWrapperContext<TPhoto>>;
     /** Additional HTML attributes for the photo `<a>` link. */
-    link?: ContextAware<React.ComponentPropsWithoutRef<"a">, RenderLinkContext<TPhoto>>;
+    link?: ContextAware<React__default.ComponentPropsWithoutRef<"a">, RenderLinkContext<TPhoto>>;
     /** Additional HTML attributes for the photo `<button>` element. */
-    button?: ContextAware<React.ComponentPropsWithoutRef<"button">, RenderButtonContext<TPhoto>>;
+    button?: ContextAware<React__default.ComponentPropsWithoutRef<"button">, RenderButtonContext<TPhoto>>;
     /** Additional HTML attributes for the photo `<img>` element. */
-    image?: ContextAware<React.ComponentPropsWithoutRef<"img">, RenderImageContext<TPhoto>>;
+    image?: ContextAware<React__default.ComponentPropsWithoutRef<"img">, RenderImageContext<TPhoto>>;
 };
@@ -160,3 +162,3 @@ /** Click callback props */
     /** Click event. */
-    event: React.MouseEvent;
+    event: React__default.MouseEvent;
     /** Photo object. */
@@ -167,11 +169,11 @@ photo: TPhoto;
 };
-type RenderContainerProps = React.ComponentPropsWithRef<"div">;
-type RenderTrackProps = React.ComponentPropsWithoutRef<"div">;
-type RenderWrapperProps = React.ComponentPropsWithoutRef<"div">;
+type RenderContainerProps = React__default.ComponentPropsWithRef<"div">;
+type RenderTrackProps = React__default.ComponentPropsWithoutRef<"div">;
+type RenderWrapperProps = React__default.ComponentPropsWithoutRef<"div">;
 type RenderWrapperContext<TPhoto extends Photo = Photo> = RenderPhotoContext<TPhoto>;
-type RenderLinkProps = NonOptional<React.ComponentPropsWithoutRef<"a">, "href">;
+type RenderLinkProps = NonOptional<React__default.ComponentPropsWithoutRef<"a">, "href">;
 type RenderLinkContext<TPhoto extends Photo = Photo> = RenderPhotoContext<TPhoto>;
-type RenderButtonProps = React.ComponentPropsWithoutRef<"button">;
+type RenderButtonProps = React__default.ComponentPropsWithoutRef<"button">;
 type RenderButtonContext<TPhoto extends Photo = Photo> = RenderPhotoContext<TPhoto>;
-type RenderImageProps = NonOptional<React.ComponentPropsWithoutRef<"img">, "src">;
+type RenderImageProps = NonOptional<React__default.ComponentPropsWithoutRef<"img">, "src">;
 type RenderImageContext<TPhoto extends Photo = Photo> = RenderPhotoContext<TPhoto>;
@@ -181,3 +183,3 @@ /** Render photo props */
     /** Click callback. */
-    onClick?: React.MouseEventHandler;
+    onClick?: React__default.MouseEventHandler;
 };
@@ -196,12 +198,12 @@ /** Render photo context */
 /** Render function */
-type RenderFunction<Props extends {} | void = void, Context extends {} | void = void> = [Context] extends [void] ? [Props] extends [void] ? () => React.ReactNode : (
+type RenderFunction<Props extends {} | void = void, Context extends {} | void = void> = [Context] extends [void] ? [Props] extends [void] ? () => React__default.ReactNode : (
 /** Component props. */
-props: Props) => React.ReactNode : [Props] extends [void] ? never : (
+props: Props) => React__default.ReactNode : [Props] extends [void] ? never : (
 /** Component props. */
 props: Props, 
 /** Rendering context. */
-context: Context) => React.ReactNode;
+context: Context) => React__default.ReactNode;
 type NonOptional<Props, Keys extends keyof Props> = Required<Pick<Props, Keys>> & Omit<Props, Keys>;
 type ContextAware<Props, Context> = Props | ((context: Context) => Props | undefined);
 
-export type { ClickHandlerProps, ColumnsPhotoAlbumProps, CommonPhotoAlbumProps, ComponentsProps, ContextAware, Image, LayoutModel, 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, 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 };

package.json

 {
   "name": "react-photo-album",
-  "version": "3.0.0-rc.4",
+  "version": "3.0.0-rc.5",
   "description": "Responsive photo gallery component for React",
@@ -23,2 +23,6 @@ "author": "Igor Danchenko",
     },
+    "./server": {
+      "types": "./dist/server/index.d.ts",
+      "default": "./dist/server/index.js"
+    },
     "./rows.css": {
@@ -52,2 +56,5 @@ "types": "./dist/styles/rows.css.d.ts",
       ],
+      "server": [
+        "dist/server/index.d.ts"
+      ],
       "rows.css": [
@@ -54,0 +61,0 @@ "dist/styles/rows.css.d.ts"

No alert changes

Improved metrics

Total package byte prevSize

74616

increased by14.71%

Number of package files

48

increased by26.32%

Lines of code

1422

increased by16.08%

No dependency changes