react-photo-album - npm Package Compare versions

Comparing version 1.2.0 to 1.3.0

dist/index.d.ts

 /// <reference types="react" />
 import { MouseEvent, ImgHTMLAttributes, HTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, PropsWithChildren, RefAttributes } from 'react';
 
-declare const enum Layout {
-    Rows = "rows",
-    Columns = "columns",
-    Masonry = "masonry"
-}
-
 declare type LayoutType = "columns" | "rows" | "masonry";
@@ -150,2 +144,2 @@ declare type ClickHandler = (event: MouseEvent, photo: Photo) => void;
 
-export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, Layout, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };
+export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };

dist/index.js

@@ -0,8 +1,5 @@
+"use strict"
 
-'use strict'
-
-if (process.env.NODE_ENV === 'production') {
-  module.exports = require('./react-photo-album.cjs.production.min.js')
-} else {
-  module.exports = require('./react-photo-album.cjs.development.js')
-}
+module.exports = require(process.env.NODE_ENV === "production" ?
+	"./react-photo-album.cjs.production.min.js" :
+	"./react-photo-album.cjs.development.js")

dist/react-photo-album.cjs.development.js

@@ -10,17 +10,17 @@ 'use strict';
 function _interopNamespace(e) {
-    if (e && e.__esModule) return e;
-    var n = Object.create(null);
-    if (e) {
-        Object.keys(e).forEach(function (k) {
-            if (k !== 'default') {
-                var d = Object.getOwnPropertyDescriptor(e, k);
-                Object.defineProperty(n, k, d.get ? d : {
-                    enumerable: true,
-                    get: function () { return e[k]; }
-                });
-            }
+  if (e && e.__esModule) return e;
+  var n = Object.create(null);
+  if (e) {
+    Object.keys(e).forEach(function (k) {
+      if (k !== 'default') {
+        var d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: function () { return e[k]; }
         });
-    }
-    n["default"] = e;
-    return n;
+      }
+    });
+  }
+  n["default"] = e;
+  return Object.freeze(n);
 }
@@ -31,12 +31,2 @@
 
-var Layout;
-
-(function (Layout) {
-  Layout["Rows"] = "rows";
-  Layout["Columns"] = "columns";
-  Layout["Masonry"] = "masonry";
-})(Layout || (Layout = {}));
-
-var Layout$1 = Layout;
-
 function _extends() {
@@ -94,3 +84,3 @@ _extends = Object.assign || function (target) {
 
-  if (layout !== Layout$1.Rows) {
+  if (layout !== "rows") {
     return "calc(100% - " + 2 * padding + "px)";
@@ -135,3 +125,3 @@ }
 
-  return React__namespace.createElement("img", _extends({
+  return /*#__PURE__*/React__namespace.createElement("img", _extends({
     alt: alt || ""
@@ -156,3 +146,3 @@ }, rest));
     padding: layoutOptions.padding + "px"
-  } : null, (layoutOptions.layout === Layout$1.Columns || layoutOptions.layout === Layout$1.Masonry) && layout.photoIndex < layout.photosCount - 1 ? {
+  } : null, (layoutOptions.layout === "columns" || layoutOptions.layout === "masonry") && layout.photoIndex < layout.photosCount - 1 ? {
     marginBottom: layoutOptions.spacing + "px"
@@ -186,3 +176,3 @@ } : null, onClick ? {
   var Component = renderPhoto || DefaultPhotoRenderer;
-  return React__namespace.createElement(Component, {
+  return /*#__PURE__*/React__namespace.createElement(Component, {
     photo: photo,
@@ -315,3 +305,3 @@ layoutOptions: layoutOptions,
 
-      if (storedShortestPaths[neighbor] === undefined || storedShortestPaths[neighbor] > newTotalWeight && (storedShortestPaths[neighbor] / newTotalWeight > 1.00001 || precedentsMap[neighbor] < shortestNodeId)) {
+      if (storedShortestPaths[neighbor] === undefined || storedShortestPaths[neighbor] > newTotalWeight && (storedShortestPaths[neighbor] / newTotalWeight > 1.005 || precedentsMap[neighbor] < shortestNodeId)) {
         storedShortestPaths[neighbor] = newTotalWeight;
@@ -382,3 +372,3 @@ pQueue.push({
   var commonHeight = getCommonHeight(row, width, spacing, padding);
-  return commonHeight > 0 ? Math.pow(commonHeight - targetRowHeight, 2) : undefined;
+  return commonHeight > 0 ? Math.pow(commonHeight - targetRowHeight, 2) * row.length : undefined;
 }; // return function that gets the neighboring nodes of node and returns costs
@@ -402,3 +392,3 @@
     for (var i = start + 1; i < photos.length + 1; i += 1) {
-      if (i - start > limitNodeSearch && !(instrumentation != null && instrumentation.fullGraphSearch)) break;
+      if (i - start > limitNodeSearch && !(instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.fullGraphSearch)) break;
       var currentCost = cost(photos, start, i, containerWidth, targetRowHeight, spacing, padding);
@@ -417,2 +407,5 @@ if (currentCost === undefined) break;
       instrumentation = _ref3.instrumentation;
+
+  var _a, _b;
+
   var spacing = layoutOptions.spacing,
@@ -422,3 +415,3 @@ padding = layoutOptions.padding,
       targetRowHeight = layoutOptions.targetRowHeight;
-  instrumentation == null ? void 0 : instrumentation.onStartLayoutComputation == null ? void 0 : instrumentation.onStartLayoutComputation();
+  (_a = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onStartLayoutComputation) === null || _a === void 0 ? void 0 : _a.call(instrumentation);
   var limitNodeSearch = findIdealNodeSearch({
@@ -461,3 +454,3 @@ photos: photos,
 
-  instrumentation == null ? void 0 : instrumentation.onFinishLayoutComputation == null ? void 0 : instrumentation.onFinishLayoutComputation(result);
+  (_b = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onFinishLayoutComputation) === null || _b === void 0 ? void 0 : _b.call(instrumentation, result);
   return result;
@@ -468,6 +461,6 @@ };
 
-var DefaultRowContainer = function DefaultRowContainer(_ref) {
+var RowContainer = function RowContainer(_ref) {
   var rowContainerProps = _ref.rowContainerProps,
       children = _ref.children;
-  return React__namespace.createElement("div", _extends({}, rowContainerProps), children);
+  return /*#__PURE__*/React__namespace.createElement("div", _extends({}, rowContainerProps), children);
 };
@@ -495,4 +488,4 @@
   };
-  var Component = renderRowContainer || DefaultRowContainer;
-  return React__namespace.createElement(Component, _extends({
+  var Component = renderRowContainer || RowContainer;
+  return /*#__PURE__*/React__namespace.createElement(Component, _extends({
     layoutOptions: layoutOptions,
@@ -516,5 +509,5 @@ rowIndex: rowIndex,
   });
-  if (rowsLayout === undefined) return React__namespace.createElement(React__namespace.Fragment, null);
-  return React__namespace.createElement(React__namespace.Fragment, null, rowsLayout.map(function (row, rowIndex) {
-    return React__namespace.createElement(RowContainerRenderer, {
+  if (rowsLayout === undefined) return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, rowsLayout.map(function (row, rowIndex) {
+    return /*#__PURE__*/React__namespace.createElement(RowContainerRenderer, {
       key: "row-" + rowIndex,
@@ -528,3 +521,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return React__namespace.createElement(PhotoRenderer, {
+      return /*#__PURE__*/React__namespace.createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -542,6 +535,6 @@ photo: photo,
 
-var DefaultColumnContainer = function DefaultColumnContainer(_ref) {
+var ColumnContainer = function ColumnContainer(_ref) {
   var columnContainerProps = _ref.columnContainerProps,
       children = _ref.children;
-  return React__namespace.createElement("div", _extends({}, columnContainerProps), children);
+  return /*#__PURE__*/React__namespace.createElement("div", _extends({}, columnContainerProps), children);
 };
@@ -559,3 +552,3 @@
 
-  if (layout === Layout$1.Masonry || !columnsGaps || !columnsRatios) {
+  if (layout === "masonry" || !columnsGaps || !columnsRatios) {
     return "calc((100% - " + spacing * (columnsCount - 1) + "px) / " + columnsCount + ")";
@@ -587,7 +580,7 @@ }
       width: cssWidth(props),
-      justifyContent: layoutOptions.layout === Layout$1.Columns ? "space-between" : "flex-start"
+      justifyContent: layoutOptions.layout === "columns" ? "space-between" : "flex-start"
     }
   };
-  var Component = renderColumnContainer || DefaultColumnContainer;
-  return React__namespace.createElement(Component, _extends({
+  var Component = renderColumnContainer || ColumnContainer;
+  return /*#__PURE__*/React__namespace.createElement(Component, _extends({
     layoutOptions: layoutOptions,
@@ -686,3 +679,3 @@ columnContainerProps: columnContainerProps
 
-      if (height > cutOffHeight && !(instrumentation != null && instrumentation.fullGraphSearch) || i === photos.length) {
+      if (height > cutOffHeight && !(instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.fullGraphSearch) || i === photos.length) {
         break;
@@ -871,3 +864,6 @@ }
       instrumentation = _ref5.instrumentation;
-  instrumentation == null ? void 0 : instrumentation.onStartLayoutComputation == null ? void 0 : instrumentation.onStartLayoutComputation();
+
+  var _a, _b;
+
+  (_a = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onStartLayoutComputation) === null || _a === void 0 ? void 0 : _a.call(instrumentation);
   var result = computeLayout({
@@ -880,3 +876,3 @@ photos: photos,
   });
-  instrumentation == null ? void 0 : instrumentation.onFinishLayoutComputation == null ? void 0 : instrumentation.onFinishLayoutComputation(result);
+  (_b = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onFinishLayoutComputation) === null || _b === void 0 ? void 0 : _b.call(instrumentation, result);
   return result;
@@ -896,8 +892,8 @@ };
   });
-  if (columnsLayout === undefined) return React__default["default"].createElement(React__default["default"].Fragment, null);
+  if (columnsLayout === undefined) return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null);
   var columnsModel = columnsLayout.columnsModel,
       columnsRatios = columnsLayout.columnsRatios,
       columnsGaps = columnsLayout.columnsGaps;
-  return React__default["default"].createElement(React__default["default"].Fragment, null, columnsModel.map(function (column, columnIndex) {
-    return React__default["default"].createElement(ColumnContainerRenderer, {
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, columnsModel.map(function (column, columnIndex) {
+    return /*#__PURE__*/React__default["default"].createElement(ColumnContainerRenderer, {
       key: "column-" + columnIndex,
@@ -913,3 +909,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return React__default["default"].createElement(PhotoRenderer, {
+      return /*#__PURE__*/React__default["default"].createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -926,10 +922,12 @@ photo: photo,
 var computeMasonryLayout = function computeMasonryLayout(props) {
+  var _a, _b;
+
   var photos = props.photos,
       layoutOptions = props.layoutOptions,
       instrumentation = props.instrumentation;
-  var columns = layoutOptions.columns,
-      spacing = layoutOptions.spacing,
+  var spacing = layoutOptions.spacing,
       padding = layoutOptions.padding,
       containerWidth = layoutOptions.containerWidth;
-  instrumentation == null ? void 0 : instrumentation.onStartLayoutComputation == null ? void 0 : instrumentation.onStartLayoutComputation(); // calculate column width based on total width and columns count
+  var columns = Math.min(layoutOptions.columns, photos.length);
+  (_a = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onStartLayoutComputation) === null || _a === void 0 ? void 0 : _a.call(instrumentation); // calculate column width based on total width and columns count
 
@@ -988,3 +986,3 @@ var columnWidth = (containerWidth - spacing * (columns - 1) - 2 * padding * columns) / columns; // encountered impossible layout
   });
-  instrumentation == null ? void 0 : instrumentation.onFinishLayoutComputation == null ? void 0 : instrumentation.onFinishLayoutComputation(result);
+  (_b = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onFinishLayoutComputation) === null || _b === void 0 ? void 0 : _b.call(instrumentation, result);
   return result;
@@ -1004,5 +1002,5 @@ };
   });
-  if (masonryLayout === undefined) return React__namespace.createElement(React__namespace.Fragment, null);
-  return React__namespace.createElement(React__namespace.Fragment, null, masonryLayout.map(function (column, columnIndex) {
-    return React__namespace.createElement(ColumnContainerRenderer, {
+  if (masonryLayout === undefined) return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null);
+  return /*#__PURE__*/React__namespace.createElement(React__namespace.Fragment, null, masonryLayout.map(function (column, columnIndex) {
+    return /*#__PURE__*/React__namespace.createElement(ColumnContainerRenderer, {
       key: "masonry-column-" + columnIndex,
@@ -1016,3 +1014,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return React__namespace.createElement(PhotoRenderer, {
+      return /*#__PURE__*/React__namespace.createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -1029,9 +1027,10 @@ photo: photo,
 var _excluded = ["layoutOptions", "renderContainer", "children"];
-var DefaultContainer = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
+var PhotoAlbumContainer = /*#__PURE__*/React__namespace.forwardRef(function (_ref, ref) {
   var containerProps = _ref.containerProps,
       children = _ref.children;
-  return React__namespace.createElement("div", _extends({
+  return /*#__PURE__*/React__namespace.createElement("div", _extends({
     ref: ref
   }, containerProps), children);
 });
+PhotoAlbumContainer.displayName = "PhotoAlbumContainer";
 var ContainerRenderer = /*#__PURE__*/React__namespace.forwardRef(function (_ref2, ref) {
@@ -1046,3 +1045,3 @@ var layoutOptions = _ref2.layoutOptions,
     className: "react-photo-album react-photo-album--" + layout,
-    style: layout === Layout$1.Rows ? {
+    style: layout === "rows" ? {
       display: "flex",
@@ -1059,4 +1058,4 @@ flexDirection: "column",
   };
-  var Component = renderContainer || DefaultContainer;
-  return React__namespace.createElement(Component, _extends({
+  var Component = renderContainer || PhotoAlbumContainer;
+  return /*#__PURE__*/React__namespace.createElement(Component, _extends({
     ref: ref,
@@ -1067,4 +1066,5 @@ layoutOptions: layoutOptions,
 });
+ContainerRenderer.displayName = "ContainerRenderer";
 
-var breakpoints = /*#__PURE__*/Object.freeze([1600, 1200, 768, 480, 300, 0]);
+var breakpoints = Object.freeze([1200, 600, 300, 0]);
 
@@ -1080,6 +1080,6 @@ var unwrap = function unwrap(value, containerWidth) {
 var selectResponsiveValue = function selectResponsiveValue(values, containerWidth) {
-  var index = breakpoints.findIndex(function (x) {
-    return x < containerWidth;
+  var index = breakpoints.findIndex(function (breakpoint) {
+    return breakpoint <= containerWidth;
   });
-  return index === 0 ? values[index] : values[index] + Math.floor((values[index - 1] - values[index]) * (containerWidth - breakpoints[index]) / (breakpoints[index - 1] - breakpoints[index]));
+  return unwrap(values[index >= 0 ? index : 0], containerWidth);
 };
@@ -1110,6 +1110,14 @@
     containerWidth: containerWidth,
-    columns: resolveResponsiveParameter(columns, containerWidth, [6, 5, 4, 3, 2, 1]),
-    spacing: resolveResponsiveParameter(spacing, containerWidth, [20, 16, 12, 8, 4, 2]),
-    padding: resolveResponsiveParameter(padding, containerWidth, [0, 0, 0, 0, 0, 0]),
-    targetRowHeight: resolveResponsiveParameter(targetRowHeight, containerWidth, [300, 250, 200, 150, 100, 80])
+    columns: resolveResponsiveParameter(columns, containerWidth, [5, 4, 3, 2]),
+    spacing: resolveResponsiveParameter(spacing, containerWidth, [20, 15, 10, 5]),
+    padding: resolveResponsiveParameter(padding, containerWidth, [0, 0, 0, 0, 0]),
+    targetRowHeight: resolveResponsiveParameter(targetRowHeight, containerWidth, [function (w) {
+      return w / 5;
+    }, function (w) {
+      return w / 4;
+    }, function (w) {
+      return w / 3;
+    }, function (w) {
+      return w / 2;
+    }])
   };
@@ -1204,13 +1212,13 @@ };
   };
-  return React__namespace.createElement(ContainerRenderer, {
+  return /*#__PURE__*/React__namespace.createElement(ContainerRenderer, {
     ref: setContainerRef,
     layoutOptions: layoutOptions,
     renderContainer: renderContainer
-  }, layout === Layout$1.Rows ? React__namespace.createElement(RowsLayout, _extends({
+  }, layout === "rows" ? /*#__PURE__*/React__namespace.createElement(RowsLayout, _extends({
     layoutOptions: layoutOptions,
     renderRowContainer: renderRowContainer
-  }, commonLayoutProps)) : layout === Layout$1.Columns ? React__namespace.createElement(ColumnsLayout, _extends({
+  }, commonLayoutProps)) : layout === "columns" ? /*#__PURE__*/React__namespace.createElement(ColumnsLayout, _extends({
     layoutOptions: layoutOptions,
     renderColumnContainer: renderColumnContainer
-  }, commonLayoutProps)) : React__namespace.createElement(MasonryLayout, _extends({
+  }, commonLayoutProps)) : /*#__PURE__*/React__namespace.createElement(MasonryLayout, _extends({
     layoutOptions: layoutOptions,
@@ -1221,5 +1229,4 @@ renderColumnContainer: renderColumnContainer
 
-exports.Layout = Layout$1;
 exports.PhotoAlbum = PhotoAlbum;
 exports["default"] = PhotoAlbum;
 //# sourceMappingURL=react-photo-album.cjs.development.js.map

dist/react-photo-album.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function o(t){if(t&&t.__esModule)return t;var n=Object.create(null);return t&&Object.keys(t).forEach((function(o){if("default"!==o){var e=Object.getOwnPropertyDescriptor(t,o);Object.defineProperty(n,o,e.get?e:{enumerable:!0,get:function(){return t[o]}})}})),n.default=t,n}var e,r=o(t),i=n(t);!function(t){t.Rows="rows",t.Columns="columns",t.Masonry="masonry"}(e||(e={}));var u=e;function a(){return a=Object.assign||function(t){for(var n=1;n<arguments.length;n++){var o=arguments[n];for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(t[e]=o[e])}return t},a.apply(this,arguments)}function l(t,n){if(null==t)return{};var o,e,r={},i=Object.keys(t);for(e=0;e<i.length;e++)n.indexOf(o=i[e])>=0||(r[o]=t[o]);return r}var c=function(t,n){void 0===n&&(n=0);var o=Math.pow(10,n);return Math.round((t+Number.EPSILON)*o)/o},s=["alt"],p=function(t,n){var o=n.spacing,e=n.padding;if(n.layout!==u.Rows)return"calc(100% - "+2*e+"px)";var r=t.photosCount;return"calc((100% - "+(o*(r-1)+2*e*r)+"px) / "+c((n.containerWidth-o*(r-1)-2*e*r)/t.width,5)+")"},h=function(t){var n=t.imageProps,o=n.alt,e=l(n,s);return r.createElement("img",a({alt:o||""},e))},d=function(t){var n=t.photo,o=t.layout,e=t.layoutOptions,i=t.renderPhoto,l=e.onClick,c=a({display:"block",boxSizing:"content-box",width:p(o,e),height:"auto",aspectRatio:n.width+" / "+n.height},e.padding?{padding:e.padding+"px"}:null,(e.layout===u.Columns||e.layout===u.Masonry)&&o.photoIndex<o.photosCount-1?{marginBottom:e.spacing+"px"}:null,l?{cursor:"pointer"}:null),s=l?function(t){l(t,n)}:void 0,d=function(t){var n,o,e=t.photo,r=t.layout,i=t.layoutOptions;return e.images&&e.images.length>0&&(n=e.images.concat([{src:e.src,width:e.width,height:e.height}]).sort((function(t,n){return t.width-n.width})).map((function(t){return t.src+" "+t.width+"w"})).join(", "),o=Math.ceil(r.width/(i.viewportWidth||i.containerWidth)*100)+"vw"),{srcSet:n,sizes:o}}({photo:n,layout:o,layoutOptions:e});return r.createElement(i||h,{photo:n,layoutOptions:e,layout:o,imageProps:{src:n.src,alt:n.alt,title:n.title,onClick:s,style:c,sizes:d.sizes,srcSet:d.srcSet,className:"react-photo-album--photo"}})},f=function(t){return t.width/t.height},m=function(t,n,o,e){return(n-(t.length-1)*o-2*e*t.length)/t.reduce((function(t,n){return t+f(n)}),0)},g=function(t,n,o,e,r,i,u){var a=t.slice(n,o),l=m(a,e,i,u);return l>0?Math.pow(l-r,2):void 0},y=["layoutOptions","rowIndex","rowsCount","renderRowContainer","children"],v=function(t){var n=t.children;return r.createElement("div",a({},t.rowContainerProps),n)},w=function(t){var n=t.layoutOptions,o=t.rowIndex,e=t.rowsCount,i=t.renderRowContainer,u=t.children,c=l(t,y),s={className:"react-photo-album--row",style:a({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},o<e-1?{marginBottom:n.spacing+"px"}:null)};return r.createElement(i||v,a({layoutOptions:n,rowIndex:o,rowsCount:e,rowContainerProps:s},c),u)},C=function(t){var n=t.layoutOptions,o=t.renderPhoto,e=t.renderRowContainer,i=function(t){var n=t.photos,o=t.layoutOptions,e=t.instrumentation,r=o.spacing,i=o.padding,u=o.containerWidth,a=o.targetRowHeight;null==e||null==e.onStartLayoutComputation||e.onStartLayoutComputation();var l,s,p=function(t){var n=t.targetRowHeight,o=t.containerWidth,e=t.photos.reduce((function(t,n){return Math.min(f(n),t)}),Number.MAX_VALUE);return c(o/n/e)+2}({photos:n,containerWidth:u,targetRowHeight:a}),h=function(t){var n=t.photos,o=t.layoutOptions,e=t.targetRowHeight,r=t.limitNodeSearch,i=t.instrumentation;return function(t){var u=o.containerWidth,a=o.spacing,l=o.padding,c={},s=+t;c[+s]=0;for(var p=s+1;p<n.length+1&&(!(p-s>r)||null!=i&&i.fullGraphSearch);p+=1){var h=g(n,s,p,u,e,a,l);if(void 0===h)break;c[p.toString()]=h}return c}}({photos:n,layoutOptions:o,targetRowHeight:a,limitNodeSearch:p,instrumentation:e}),d=(s=function(t,n,o){var e,r,i,u,a,l,c,s={},p={},h={0:0},d=(e=function(t){return t.weight},i=[],u=function(t,n){return e(n)-e(t)},a=0,l=function(t,n){return u(i[t],i[n])<0},c=function(t,n){var o=i[t];i[t]=i[n],i[n]=o},{push:function(t){i[a+=1]=t,function(t){for(var n=t>>1;t>1&&l(n,t);)c(n,t),n=(t=n)>>1}(a)},pop:function(){if(0!==a){c(1,a),a-=1;var t=i.pop();return function(t){for(var n=t<<1;n<=a&&(n<a&&l(n,n+1)&&n++,l(t,n));)c(t,n),n=(t=n)<<1}(1),t}},size:function(){return a}});for(d.push({id:"0",weight:0});void 0!==(r=d.pop());){var f=r.id;if(!p[f]){var m=t(f);for(var g in p[f]=1,m){var y=r.weight+m[g];(void 0===h[g]||h[g]>y&&(h[g]/y>1.00001||s[g]<f))&&(h[g]=y,d.push({id:g,weight:y}),s[g]=f)}}}if(void 0!==h[o])return s}(h,0,l=""+n.length),void 0!==s?function(t,n){for(var o=[],e=n;e;)o.push(e),e=t[e];return o.reverse()}(s,l):void 0);if(void 0!==d){for(var y=[],v=function(t){var o=n.slice(+d[t-1],+d[t]),e=m(o,u,r,i);y.push(o.map((function(t,n){return{photo:t,layout:{height:e,width:e*f(t),photoIndex:n,photosCount:o.length}}})))},w=1;w<d.length;w+=1)v(w);return null==e||null==e.onFinishLayoutComputation||e.onFinishLayoutComputation(y),y}}({photos:t.photos,layoutOptions:n,instrumentation:t.instrumentation});return void 0===i?r.createElement(r.Fragment,null):r.createElement(r.Fragment,null,i.map((function(t,u){return r.createElement(w,{key:"row-"+u,layoutOptions:n,rowIndex:u,rowsCount:i.length,renderRowContainer:e},t.map((function(t){var e=t.photo;return r.createElement(d,{key:e.key||e.src,photo:e,layout:t.layout,layoutOptions:n,renderPhoto:o})})))})))},O=["layoutOptions","renderColumnContainer","children"],x=function(t){var n=t.children;return r.createElement("div",a({},t.columnContainerProps),n)},b=function(t){var n=t.layoutOptions,o=t.columnIndex,e=t.columnsCount,r=t.columnsGaps,i=t.columnsRatios,a=n.spacing,l=n.padding;if(n.layout===u.Masonry||!r||!i)return"calc((100% - "+a*(e-1)+"px) / "+e+")";var s=i.reduce((function(t,n){return t+n}),0),p=i.reduce((function(t,n,e){return t+(r[o]-r[e])*n}),0);return"calc((100% - "+c((e-1)*a+2*e*l+p,3)+"px) * "+c(i[o]/s,5)+" + "+2*l+"px)"},R=function(t){var n=t.layoutOptions,o=t.renderColumnContainer,e=t.children,i=l(t,O),c={className:"react-photo-album--column",style:{display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:b(t),justifyContent:n.layout===u.Columns?"space-between":"flex-start"}};return r.createElement(o||x,a({layoutOptions:n,columnContainerProps:c},i),e)},E=function(t){for(var n=t.path,o=t.photos,e=t.containerWidth,r=t.columnsGaps,i=t.columnsRatios,u=t.spacing,a=t.padding,l=[],c=i.reduce((function(t,n){return t+n}),0),s=function(t){var s=o.slice(n[t],n[t+1]),p=i.reduce((function(n,o,e){return n+(r[t]-r[e])*o}),0),h=(e-(n.length-2)*u-2*(n.length-1)*a-p)*i[t]/c;l.push(s.map((function(t,n){return{photo:t,layout:{width:h,height:h/f(t),photoIndex:n,photosCount:s.length}}})))},p=0;p<n.length-1;p+=1)s(p);return l},W=function t(n){var o=n.photos,e=n.layoutOptions,r=n.instrumentation,i=e.columns,u=function(t){var n,o,e,r=t.photos,i=t.layoutOptions,u=t.targetColumnWidth,a=t.instrumentation,l=i.columns,c=i.spacing,s=i.padding,p=i.containerWidth,h=[],d=[];if(r.length<=l){for(var m=0;m<r.length;m+=1)h[m]=2*s,d[m]=f(r[m]);var g=E({path:Array.from({length:r.length+1}).map((function(t,n){return n})),photos:r,columnsRatios:d,columnsGaps:h,containerWidth:p,spacing:c,padding:s});return{columnsGaps:h,columnsRatios:d,columnsModel:g}}for(var y=(r.reduce((function(t,n){return t+u/f(n)}),0)+c*(r.length-l)+2*s*r.length)/l,v=function(t){var n=t.photos,o=t.spacing,e=t.padding,r=t.targetColumnWidth,i=t.targetColumnHeight,u=t.instrumentation;return function(t){for(var a=[],l=1.5*i,c=r/f(n[t])+2*e,s=t+1;s<n.length+1&&(a.push({neighbor:s,weight:Math.pow(i-c,2)}),(!(c>l)||null!=u&&u.fullGraphSearch)&&s!==n.length);s+=1)c+=r/f(n[s])+o+2*e;return a}}({photos:r,targetColumnWidth:u,targetColumnHeight:y,spacing:c,padding:s,instrumentation:a}),w=(n=v,o=l,e=r.length,function(t,n,o){for(var e=[o],r=o,i=n;i>0;i-=1)e.push(r=t[r][i][0]);return e.reverse()}(function(t,n,o,e){for(var r,i=[],u={0:(r={},r[0]=null,r)},a=function(o){Object.keys(u[o]).forEach((function(r){var a=+r,l=o>0&&i[a][o]?i[a][o][1]:0;t(a).forEach((function(t){var r=t.neighbor,c=t.weight;i[r]||(i[r]=[]);var s=l+c;(!i[r][o+1]||i[r][o+1][1]>s&&(i[r][o+1][1]/s>1.0001||a<i[r][o+1][0]))&&(i[r][o+1]=[a,s]),o<n-1&&r!==e&&(u[o+1]||(u[o+1]={}),u[o+1][r]=null)}))}))},l=0;l<n;l+=1)a(l);return i}(n,o,0,e),o,e)).map((function(t){return+t})),C=0;C<w.length-1;C+=1){var O=r.slice(w[C],w[C+1]);h[C]=c*(O.length-1)+2*s*O.length,d[C]=1/O.reduce((function(t,n){return t+1/f(n)}),0)}return{columnsGaps:h,columnsRatios:d,columnsModel:E({path:w,photos:r,columnsRatios:d,columnsGaps:h,containerWidth:p,spacing:c,padding:s})}}({photos:o,layoutOptions:e,targetColumnWidth:(e.containerWidth-e.spacing*(i-1)-2*e.padding*i)/i,instrumentation:r}),l=u.columnsGaps,c=u.columnsRatios,s=u.columnsModel;return s.findIndex((function(t){return t.findIndex((function(t){var n=t.layout;return n.width<0||n.height<0}))>=0}))>=0?i>1?t({photos:o,layoutOptions:a({},e,{columns:i-1}),instrumentation:r}):void 0:{columnsModel:s,columnsGaps:l,columnsRatios:c}},P=function(t){var n=t.layoutOptions,o=t.renderPhoto,e=t.renderColumnContainer,r=function(t){var n=t.photos,o=t.layoutOptions,e=t.instrumentation;null==e||null==e.onStartLayoutComputation||e.onStartLayoutComputation();var r=W({photos:n,layoutOptions:a({},o,{columns:Math.min(o.columns,n.length)}),instrumentation:e});return null==e||null==e.onFinishLayoutComputation||e.onFinishLayoutComputation(r),r}({photos:t.photos,layoutOptions:n,instrumentation:t.instrumentation});if(void 0===r)return i.default.createElement(i.default.Fragment,null);var u=r.columnsModel,l=r.columnsRatios,c=r.columnsGaps;return i.default.createElement(i.default.Fragment,null,u.map((function(t,r){return i.default.createElement(R,{key:"column-"+r,layoutOptions:n,columnIndex:r,columnsCount:u.length,columnsGaps:c,columnsRatios:l,renderColumnContainer:e},t.map((function(t){var e=t.photo;return i.default.createElement(d,{key:e.key||e.src,photo:e,layout:t.layout,layoutOptions:n,renderPhoto:o})})))})))},k=function t(n){var o=n.photos,e=n.layoutOptions,r=n.instrumentation,i=e.columns,u=e.spacing,l=e.padding,c=e.containerWidth;null==r||null==r.onStartLayoutComputation||r.onStartLayoutComputation();var s=(c-u*(i-1)-2*l*i)/i;if(s<=0)return i>1?t(a({},n,{layoutOptions:a({},e,{columns:i-1})})):void 0;for(var p=[],h=0;h<i;h+=1)p[h]=0;var d=o.reduce((function(t,n){var o=p.reduce((function(t,n,o){return n<p[t]-1?o:t}),0);return p[o]=p[o]+s/f(n)+u+2*l,t[o]||(t[o]=[]),t[o].push(n),t}),[]),m=d.map((function(t){return t.map((function(n,o){return{photo:n,layout:{width:s,height:s/f(n),photoIndex:o,photosCount:t.length}}}))}));return null==r||null==r.onFinishLayoutComputation||r.onFinishLayoutComputation(m),m},M=function(t){var n=t.layoutOptions,o=t.renderPhoto,e=t.renderColumnContainer,i=k({photos:t.photos,layoutOptions:n,instrumentation:t.instrumentation});return void 0===i?r.createElement(r.Fragment,null):r.createElement(r.Fragment,null,i.map((function(t,u){return r.createElement(R,{key:"masonry-column-"+u,layoutOptions:n,columnsCount:i.length,columnIndex:u,renderColumnContainer:e},t.map((function(t){var e=t.photo;return r.createElement(d,{key:e.key||e.src,photo:e,layout:t.layout,layoutOptions:n,renderPhoto:o})})))})))},S=["layoutOptions","renderContainer","children"],I=r.forwardRef((function(t,n){var o=t.children;return r.createElement("div",a({ref:n},t.containerProps),o)})),j=r.forwardRef((function(t,n){var o=t.layoutOptions,e=t.renderContainer,i=t.children,c=l(t,S),s=o.layout;return r.createElement(e||I,a({ref:n,layoutOptions:o,containerProps:{className:"react-photo-album react-photo-album--"+s,style:s===u.Rows?{display:"flex",flexDirection:"column",flexWrap:"nowrap",justifyContent:"space-between"}:{display:"flex",flexDirection:"row",flexWrap:"nowrap",justifyContent:"space-between"}}},c),i)})),L=Object.freeze([1600,1200,768,480,300,0]),F=function(t,n,o){var e=function(t,n){return void 0!==t?function(t,n){return"function"==typeof t?t(n):t}(t,n):void 0}(t,n);return void 0===e?function(t,n){var o=L.findIndex((function(t){return t<n}));return 0===o?t[o]:t[o]+Math.floor((t[o-1]-t[o])*(n-L[o])/(L[o-1]-L[o]))}(o,n):e},G="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,H=function(t){var n=t.photos,o=t.layout,e=t.columns,i=t.spacing,l=t.padding,c=t.onClick,s=t.targetRowHeight,p=t.defaultContainerWidth,h=void 0===p?800:p,d=t.renderPhoto,f=t.renderContainer,m=t.renderRowContainer,g=t.renderColumnContainer,y=t.resizeObserverProvider,v=t.instrumentation,w=r.useState(),O=w[0],x=w[1],b=r.useState(),R=b[0],E=b[1],W=r.useRef(null),k=r.useRef(null),S=r.useCallback((function(){"undefined"!=typeof window&&x(window.innerWidth),k.current&&E(k.current.clientWidth)}),[]),I=r.useCallback((function(t){W.current&&k.current&&W.current.unobserve(k.current),k.current=t,t&&W.current&&W.current.observe(t)}),[]);G((function(){S();var t=function(){return S()};return"undefined"!=typeof ResizeObserver?W.current=new ResizeObserver(t):y&&(W.current=y(t)),W.current&&k.current&&W.current.observe(k.current),function(){W.current&&(W.current.disconnect(),W.current=null)}}),[S,y]);var L=function(t){var n=t.containerWidth,o=t.targetRowHeight,e=t.spacing,r=t.padding;return{layout:t.layout,onClick:t.onClick,viewportWidth:t.viewportWidth,containerWidth:n,columns:F(t.columns,n,[6,5,4,3,2,1]),spacing:F(e,n,[20,16,12,8,4,2]),padding:F(r,n,[0,0,0,0,0,0]),targetRowHeight:F(o,n,[300,250,200,150,100,80])}}({containerWidth:R||h,viewportWidth:O,layout:o,onClick:c,spacing:i,padding:l,columns:e,targetRowHeight:s}),H={photos:n,renderPhoto:d,instrumentation:v};return r.createElement(j,{ref:I,layoutOptions:L,renderContainer:f},o===u.Rows?r.createElement(C,a({layoutOptions:L,renderRowContainer:m},H)):r.createElement(o===u.Columns?P:M,a({layoutOptions:L,renderColumnContainer:g},H)))};exports.Layout=u,exports.PhotoAlbum=H,exports.default=H;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var n=require("react");function t(n){return n&&"object"==typeof n&&"default"in n?n:{default:n}}function o(n){if(n&&n.__esModule)return n;var t=Object.create(null);return n&&Object.keys(n).forEach((function(o){if("default"!==o){var e=Object.getOwnPropertyDescriptor(n,o);Object.defineProperty(t,o,e.get?e:{enumerable:!0,get:function(){return n[o]}})}})),t.default=n,Object.freeze(t)}var e=o(n),r=t(n);function i(){return i=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var o=arguments[t];for(var e in o)Object.prototype.hasOwnProperty.call(o,e)&&(n[e]=o[e])}return n},i.apply(this,arguments)}function u(n,t){if(null==n)return{};var o,e,r={},i=Object.keys(n);for(e=0;e<i.length;e++)o=i[e],t.indexOf(o)>=0||(r[o]=n[o]);return r}var a=function(n,t){void 0===t&&(t=0);var o=Math.pow(10,t);return Math.round((n+Number.EPSILON)*o)/o},l=["alt"],c=function(n,t){var o=n.width,e=t.spacing,r=t.padding,i=t.layout,u=t.containerWidth;if("rows"!==i)return"calc(100% - "+2*r+"px)";var l=n.photosCount;return"calc((100% - "+(e*(l-1)+2*r*l)+"px) / "+a((u-e*(l-1)-2*r*l)/o,5)+")"},s=function(n){var t=n.imageProps,o=t.alt,r=u(t,l);return e.createElement("img",i({alt:o||""},r))},p=function(n){var t=n.photo,o=n.layout,r=n.layoutOptions,u=n.renderPhoto,a=r.onClick,l=i({display:"block",boxSizing:"content-box",width:c(o,r),height:"auto",aspectRatio:t.width+" / "+t.height},r.padding?{padding:r.padding+"px"}:null,("columns"===r.layout||"masonry"===r.layout)&&o.photoIndex<o.photosCount-1?{marginBottom:r.spacing+"px"}:null,a?{cursor:"pointer"}:null),p=a?function(n){a(n,t)}:void 0,d=function(n){var t,o,e=n.photo,r=n.layout,i=n.layoutOptions;return e.images&&e.images.length>0&&(t=e.images.concat([{src:e.src,width:e.width,height:e.height}]).sort((function(n,t){return n.width-t.width})).map((function(n){return n.src+" "+n.width+"w"})).join(", "),o=Math.ceil(r.width/(i.viewportWidth||i.containerWidth)*100)+"vw"),{srcSet:t,sizes:o}}({photo:t,layout:o,layoutOptions:r}),h=d.srcSet,f=d.sizes,m={src:t.src,alt:t.alt,title:t.title,onClick:p,style:l,sizes:f,srcSet:h,className:"react-photo-album--photo"},v=u||s;return e.createElement(v,{photo:t,layoutOptions:r,layout:o,imageProps:m})},d=function(n){return n.width/n.height},h=function(n){var t=[],o=n,e=0,r=function(n,e){return o(t[n],t[e])<0},i=function(n,o){var e=t[n];t[n]=t[o],t[o]=e};return{push:function(n){t[e+=1]=n,function(n){for(var t=n>>1;n>1&&r(t,n);)i(t,n),t=(n=t)>>1}(e)},pop:function(){if(0!==e){i(1,e),e-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=e&&(t<e&&r(t,t+1)&&t++,r(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return e}}},f=function(n,t,o){var e=function(n,t,o){var e={},r={},i={};i[t]=0;var u,a,l=h((u=function(n){return n.weight},function(n,t){return u(t)-u(n)}));for(l.push({id:t,weight:0});void 0!==(a=l.pop());){var c=a.id;if(!r[c]){var s=n(c);for(var p in r[c]=1,s){var d=a.weight+s[p];(void 0===i[p]||i[p]>d&&(i[p]/d>1.005||e[p]<c))&&(i[p]=d,l.push({id:p,weight:d}),e[p]=c)}}}if(void 0!==i[o])return e}(n,t,o);return void 0!==e?function(n,t){for(var o=[],e=t;e;)o.push(e),e=n[e];return o.reverse()}(e,o):void 0},m=function(n,t,o,e){return(t-(n.length-1)*o-2*e*n.length)/n.reduce((function(n,t){return n+d(t)}),0)},v=function(n,t,o,e,r,i,u){var a=n.slice(t,o),l=m(a,e,i,u);return l>0?Math.pow(l-r,2)*a.length:void 0},g=function(n){var t,o,e=n.photos,r=n.layoutOptions,i=n.instrumentation,u=r.spacing,l=r.padding,c=r.containerWidth,s=r.targetRowHeight;null===(t=null==i?void 0:i.onStartLayoutComputation)||void 0===t||t.call(i);var p=function(n){var t=n.photos,o=n.targetRowHeight,e=n.containerWidth,r=t.reduce((function(n,t){return Math.min(d(t),n)}),Number.MAX_VALUE);return a(e/o/r)+2}({photos:e,containerWidth:c,targetRowHeight:s}),h=function(n){var t=n.photos,o=n.layoutOptions,e=n.targetRowHeight,r=n.limitNodeSearch,i=n.instrumentation;return function(n){var u=o.containerWidth,a=o.spacing,l=o.padding,c={},s=+n;c[+s]=0;for(var p=s+1;p<t.length+1&&(!(p-s>r)||(null==i?void 0:i.fullGraphSearch));p+=1){var d=v(t,s,p,u,e,a,l);if(void 0===d)break;c[p.toString()]=d}return c}}({photos:e,layoutOptions:r,targetRowHeight:s,limitNodeSearch:p,instrumentation:i}),g=f(h,"0",""+e.length);if(void 0!==g){for(var y=[],w=function(n){var t=e.slice(+g[n-1],+g[n]),o=m(t,c,u,l);y.push(t.map((function(n,e){return{photo:n,layout:{height:o,width:o*d(n),photoIndex:e,photosCount:t.length}}})))},C=1;C<g.length;C+=1)w(C);return null===(o=null==i?void 0:i.onFinishLayoutComputation)||void 0===o||o.call(i,y),y}},y=["layoutOptions","rowIndex","rowsCount","renderRowContainer","children"],w=function(n){var t=n.rowContainerProps,o=n.children;return e.createElement("div",i({},t),o)},C=function(n){var t=n.layoutOptions,o=n.rowIndex,r=n.rowsCount,a=n.renderRowContainer,l=n.children,c=u(n,y),s={className:"react-photo-album--row",style:i({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},o<r-1?{marginBottom:t.spacing+"px"}:null)},p=a||w;return e.createElement(p,i({layoutOptions:t,rowIndex:o,rowsCount:r,rowContainerProps:s},c),l)},O=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderRowContainer,u=n.instrumentation,a=g({photos:t,layoutOptions:o,instrumentation:u});return void 0===a?e.createElement(e.Fragment,null):e.createElement(e.Fragment,null,a.map((function(n,t){return e.createElement(C,{key:"row-"+t,layoutOptions:o,rowIndex:t,rowsCount:a.length,renderRowContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(p,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r})})))})))},x=["layoutOptions","renderColumnContainer","children"],b=function(n){var t=n.columnContainerProps,o=n.children;return e.createElement("div",i({},t),o)},R=function(n){var t=n.layoutOptions,o=n.columnIndex,e=n.columnsCount,r=n.columnsGaps,i=n.columnsRatios,u=t.layout,l=t.spacing,c=t.padding;if("masonry"===u||!r||!i)return"calc((100% - "+l*(e-1)+"px) / "+e+")";var s=i.reduce((function(n,t){return n+t}),0),p=i.reduce((function(n,t,e){return n+(r[o]-r[e])*t}),0);return"calc((100% - "+a((e-1)*l+2*e*c+p,3)+"px) * "+a(i[o]/s,5)+" + "+2*c+"px)"},E=function(n){var t=n.layoutOptions,o=n.renderColumnContainer,r=n.children,a=u(n,x),l={className:"react-photo-album--column",style:{display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:R(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"}},c=o||b;return e.createElement(c,i({layoutOptions:t,columnContainerProps:l},a),r)},W=function(n,t,o,e){return function(n,t,o){for(var e=[o],r=o,i=t;i>0;i-=1)r=n[r][i][0],e.push(r);return e.reverse()}(function(n,t,o,e){for(var r,i=[],u={0:(r={},r[o]=null,r)},a=function(o){Object.keys(u[o]).forEach((function(r){var a=+r,l=o>0&&i[a][o]?i[a][o][1]:0;n(a).forEach((function(n){var r=n.neighbor,c=n.weight;i[r]||(i[r]=[]);var s=l+c;(!i[r][o+1]||i[r][o+1][1]>s&&(i[r][o+1][1]/s>1.0001||a<i[r][o+1][0]))&&(i[r][o+1]=[a,s]),o<t-1&&r!==e&&(u[o+1]||(u[o+1]={}),u[o+1][r]=null)}))}))},l=0;l<t;l+=1)a(l);return i}(n,t,o,e),t,e)},P=function(n){for(var t=n.path,o=n.photos,e=n.containerWidth,r=n.columnsGaps,i=n.columnsRatios,u=n.spacing,a=n.padding,l=[],c=i.reduce((function(n,t){return n+t}),0),s=function(n){var s=o.slice(t[n],t[n+1]),p=i.reduce((function(t,o,e){return t+(r[n]-r[e])*o}),0),h=(e-(t.length-2)*u-2*(t.length-1)*a-p)*i[n]/c;l.push(s.map((function(n,t){return{photo:n,layout:{width:h,height:h/d(n),photoIndex:t,photosCount:s.length}}})))},p=0;p<t.length-1;p+=1)s(p);return l},k=function(n){var t=n.photos,o=n.layoutOptions,e=n.targetColumnWidth,r=n.instrumentation,i=o.columns,u=o.spacing,a=o.padding,l=o.containerWidth,c=[],s=[];if(t.length<=i){for(var p=0;p<t.length;p+=1)c[p]=2*a,s[p]=d(t[p]);var h=P({path:Array.from({length:t.length+1}).map((function(n,t){return t})),photos:t,columnsRatios:s,columnsGaps:c,containerWidth:l,spacing:u,padding:a});return{columnsGaps:c,columnsRatios:s,columnsModel:h}}for(var f=(t.reduce((function(n,t){return n+e/d(t)}),0)+u*(t.length-i)+2*a*t.length)/i,m=function(n){var t=n.photos,o=n.spacing,e=n.padding,r=n.targetColumnWidth,i=n.targetColumnHeight,u=n.instrumentation;return function(n){for(var a=[],l=1.5*i,c=r/d(t[n])+2*e,s=n+1;s<t.length+1&&(a.push({neighbor:s,weight:Math.pow(i-c,2)}),!(c>l&&!(null==u?void 0:u.fullGraphSearch)||s===t.length));s+=1)c+=r/d(t[s])+o+2*e;return a}}({photos:t,targetColumnWidth:e,targetColumnHeight:f,spacing:u,padding:a,instrumentation:r}),v=W(m,i,0,t.length).map((function(n){return+n})),g=0;g<v.length-1;g+=1){var y=t.slice(v[g],v[g+1]);c[g]=u*(y.length-1)+2*a*y.length,s[g]=1/y.reduce((function(n,t){return n+1/d(t)}),0)}return{columnsGaps:c,columnsRatios:s,columnsModel:P({path:v,photos:t,columnsRatios:s,columnsGaps:c,containerWidth:l,spacing:u,padding:a})}},j=function n(t){var o=t.photos,e=t.layoutOptions,r=t.instrumentation,u=e.columns,a=e.spacing,l=e.padding,c=e.containerWidth,s=k({photos:o,layoutOptions:e,targetColumnWidth:(c-a*(u-1)-2*l*u)/u,instrumentation:r}),p=s.columnsGaps,d=s.columnsRatios,h=s.columnsModel;return h.findIndex((function(n){return n.findIndex((function(n){var t=n.layout,o=t.width,e=t.height;return o<0||e<0}))>=0}))>=0?u>1?n({photos:o,layoutOptions:i({},e,{columns:u-1}),instrumentation:r}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},I=function(n){var t,o,e=n.photos,r=n.layoutOptions,u=n.instrumentation;null===(t=null==u?void 0:u.onStartLayoutComputation)||void 0===t||t.call(u);var a=j({photos:e,layoutOptions:i({},r,{columns:Math.min(r.columns,e.length)}),instrumentation:u});return null===(o=null==u?void 0:u.onFinishLayoutComputation)||void 0===o||o.call(u,a),a},M=function(n){var t=n.photos,o=n.layoutOptions,e=n.renderPhoto,i=n.renderColumnContainer,u=n.instrumentation,a=I({photos:t,layoutOptions:o,instrumentation:u});if(void 0===a)return r.default.createElement(r.default.Fragment,null);var l=a.columnsModel,c=a.columnsRatios,s=a.columnsGaps;return r.default.createElement(r.default.Fragment,null,l.map((function(n,t){return r.default.createElement(E,{key:"column-"+t,layoutOptions:o,columnIndex:t,columnsCount:l.length,columnsGaps:s,columnsRatios:c,renderColumnContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return r.default.createElement(p,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:e})})))})))},S=function n(t){var o,e,r=t.photos,u=t.layoutOptions,a=t.instrumentation,l=u.spacing,c=u.padding,s=u.containerWidth,p=Math.min(u.columns,r.length);null===(o=null==a?void 0:a.onStartLayoutComputation)||void 0===o||o.call(a);var h=(s-l*(p-1)-2*c*p)/p;if(h<=0)return p>1?n(i({},t,{layoutOptions:i({},u,{columns:p-1})})):void 0;for(var f=[],m=0;m<p;m+=1)f[m]=0;var v=r.reduce((function(n,t){var o=f.reduce((function(n,t,o){return t<f[n]-1?o:n}),0);return f[o]=f[o]+h/d(t)+l+2*c,n[o]||(n[o]=[]),n[o].push(t),n}),[]),g=v.map((function(n){return n.map((function(t,o){return{photo:t,layout:{width:h,height:h/d(t),photoIndex:o,photosCount:n.length}}}))}));return null===(e=null==a?void 0:a.onFinishLayoutComputation)||void 0===e||e.call(a,g),g},G=function(n){var t=n.photos,o=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.instrumentation,a=S({photos:t,layoutOptions:o,instrumentation:u});return void 0===a?e.createElement(e.Fragment,null):e.createElement(e.Fragment,null,a.map((function(n,t){return e.createElement(E,{key:"masonry-column-"+t,layoutOptions:o,columnsCount:a.length,columnIndex:t,renderColumnContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return e.createElement(p,{key:t.key||t.src,photo:t,layout:i,layoutOptions:o,renderPhoto:r})})))})))},H=["layoutOptions","renderContainer","children"],N=e.forwardRef((function(n,t){var o=n.containerProps,r=n.children;return e.createElement("div",i({ref:t},o),r)}));N.displayName="PhotoAlbumContainer";var z=e.forwardRef((function(n,t){var o=n.layoutOptions,r=n.renderContainer,a=n.children,l=u(n,H),c=o.layout,s={className:"react-photo-album react-photo-album--"+c,style:"rows"===c?{display:"flex",flexDirection:"column",flexWrap:"nowrap",justifyContent:"space-between"}:{display:"flex",flexDirection:"row",flexWrap:"nowrap",justifyContent:"space-between"}},p=r||N;return e.createElement(p,i({ref:t,layoutOptions:o,containerProps:s},l),a)}));z.displayName="ContainerRenderer";var F=Object.freeze([1200,600,300,0]),L=function(n,t){return"function"==typeof n?n(t):n},A=function(n,t,o){var e=function(n,t){return void 0!==n?L(n,t):void 0}(n,t);return void 0===e?function(n,t){var o=F.findIndex((function(n){return n<=t}));return L(n[o>=0?o:0],t)}(o,t):e},D="undefined"!=typeof document?n.useLayoutEffect:n.useEffect,_=function(n){var t=n.photos,o=n.layout,r=n.columns,u=n.spacing,a=n.padding,l=n.onClick,c=n.targetRowHeight,s=n.defaultContainerWidth,p=void 0===s?800:s,d=n.renderPhoto,h=n.renderContainer,f=n.renderRowContainer,m=n.renderColumnContainer,v=n.resizeObserverProvider,g=n.instrumentation,y=e.useState(),w=y[0],C=y[1],x=e.useState(),b=x[0],R=x[1],E=e.useRef(null),W=e.useRef(null),P=e.useCallback((function(){"undefined"!=typeof window&&C(window.innerWidth),W.current&&R(W.current.clientWidth)}),[]),k=e.useCallback((function(n){E.current&&W.current&&E.current.unobserve(W.current),W.current=n,n&&E.current&&E.current.observe(n)}),[]);D((function(){P();var n=function(){return P()};return"undefined"!=typeof ResizeObserver?E.current=new ResizeObserver(n):v&&(E.current=v(n)),E.current&&W.current&&E.current.observe(W.current),function(){E.current&&(E.current.disconnect(),E.current=null)}}),[P,v]);var j=function(n){var t=n.layout,o=n.onClick,e=n.viewportWidth,r=n.containerWidth,i=n.targetRowHeight,u=n.columns,a=n.spacing,l=n.padding;return{layout:t,onClick:o,viewportWidth:e,containerWidth:r,columns:A(u,r,[5,4,3,2]),spacing:A(a,r,[20,15,10,5]),padding:A(l,r,[0,0,0,0,0]),targetRowHeight:A(i,r,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}])}}({containerWidth:b||p,viewportWidth:w,layout:o,onClick:l,spacing:u,padding:a,columns:r,targetRowHeight:c}),I={photos:t,renderPhoto:d,instrumentation:g};return e.createElement(z,{ref:k,layoutOptions:j,renderContainer:h},"rows"===o?e.createElement(O,i({layoutOptions:j,renderRowContainer:f},I)):"columns"===o?e.createElement(M,i({layoutOptions:j,renderColumnContainer:m},I)):e.createElement(G,i({layoutOptions:j,renderColumnContainer:m},I)))};exports.PhotoAlbum=_,exports.default=_;
 //# sourceMappingURL=react-photo-album.cjs.production.min.js.map

dist/react-photo-album.esm.js

 import * as React from 'react';
 import React__default, { useLayoutEffect as useLayoutEffect$1, useEffect } from 'react';
 
-var Layout;
-
-(function (Layout) {
-  Layout["Rows"] = "rows";
-  Layout["Columns"] = "columns";
-  Layout["Masonry"] = "masonry";
-})(Layout || (Layout = {}));
-
-var Layout$1 = Layout;
-
 function _extends() {
@@ -66,3 +56,3 @@ _extends = Object.assign || function (target) {
 
-  if (layout !== Layout$1.Rows) {
+  if (layout !== "rows") {
     return "calc(100% - " + 2 * padding + "px)";
@@ -107,3 +97,3 @@ }
 
-  return React.createElement("img", _extends({
+  return /*#__PURE__*/React.createElement("img", _extends({
     alt: alt || ""
@@ -128,3 +118,3 @@ }, rest));
     padding: layoutOptions.padding + "px"
-  } : null, (layoutOptions.layout === Layout$1.Columns || layoutOptions.layout === Layout$1.Masonry) && layout.photoIndex < layout.photosCount - 1 ? {
+  } : null, (layoutOptions.layout === "columns" || layoutOptions.layout === "masonry") && layout.photoIndex < layout.photosCount - 1 ? {
     marginBottom: layoutOptions.spacing + "px"
@@ -158,3 +148,3 @@ } : null, onClick ? {
   var Component = renderPhoto || DefaultPhotoRenderer;
-  return React.createElement(Component, {
+  return /*#__PURE__*/React.createElement(Component, {
     photo: photo,
@@ -287,3 +277,3 @@ layoutOptions: layoutOptions,
 
-      if (storedShortestPaths[neighbor] === undefined || storedShortestPaths[neighbor] > newTotalWeight && (storedShortestPaths[neighbor] / newTotalWeight > 1.00001 || precedentsMap[neighbor] < shortestNodeId)) {
+      if (storedShortestPaths[neighbor] === undefined || storedShortestPaths[neighbor] > newTotalWeight && (storedShortestPaths[neighbor] / newTotalWeight > 1.005 || precedentsMap[neighbor] < shortestNodeId)) {
         storedShortestPaths[neighbor] = newTotalWeight;
@@ -354,3 +344,3 @@ pQueue.push({
   var commonHeight = getCommonHeight(row, width, spacing, padding);
-  return commonHeight > 0 ? Math.pow(commonHeight - targetRowHeight, 2) : undefined;
+  return commonHeight > 0 ? Math.pow(commonHeight - targetRowHeight, 2) * row.length : undefined;
 }; // return function that gets the neighboring nodes of node and returns costs
@@ -374,3 +364,3 @@
     for (var i = start + 1; i < photos.length + 1; i += 1) {
-      if (i - start > limitNodeSearch && !(instrumentation != null && instrumentation.fullGraphSearch)) break;
+      if (i - start > limitNodeSearch && !(instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.fullGraphSearch)) break;
       var currentCost = cost(photos, start, i, containerWidth, targetRowHeight, spacing, padding);
@@ -389,2 +379,5 @@ if (currentCost === undefined) break;
       instrumentation = _ref3.instrumentation;
+
+  var _a, _b;
+
   var spacing = layoutOptions.spacing,
@@ -394,3 +387,3 @@ padding = layoutOptions.padding,
       targetRowHeight = layoutOptions.targetRowHeight;
-  instrumentation == null ? void 0 : instrumentation.onStartLayoutComputation == null ? void 0 : instrumentation.onStartLayoutComputation();
+  (_a = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onStartLayoutComputation) === null || _a === void 0 ? void 0 : _a.call(instrumentation);
   var limitNodeSearch = findIdealNodeSearch({
@@ -433,3 +426,3 @@ photos: photos,
 
-  instrumentation == null ? void 0 : instrumentation.onFinishLayoutComputation == null ? void 0 : instrumentation.onFinishLayoutComputation(result);
+  (_b = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onFinishLayoutComputation) === null || _b === void 0 ? void 0 : _b.call(instrumentation, result);
   return result;
@@ -440,6 +433,6 @@ };
 
-var DefaultRowContainer = function DefaultRowContainer(_ref) {
+var RowContainer = function RowContainer(_ref) {
   var rowContainerProps = _ref.rowContainerProps,
       children = _ref.children;
-  return React.createElement("div", _extends({}, rowContainerProps), children);
+  return /*#__PURE__*/React.createElement("div", _extends({}, rowContainerProps), children);
 };
@@ -467,4 +460,4 @@
   };
-  var Component = renderRowContainer || DefaultRowContainer;
-  return React.createElement(Component, _extends({
+  var Component = renderRowContainer || RowContainer;
+  return /*#__PURE__*/React.createElement(Component, _extends({
     layoutOptions: layoutOptions,
@@ -488,5 +481,5 @@ rowIndex: rowIndex,
   });
-  if (rowsLayout === undefined) return React.createElement(React.Fragment, null);
-  return React.createElement(React.Fragment, null, rowsLayout.map(function (row, rowIndex) {
-    return React.createElement(RowContainerRenderer, {
+  if (rowsLayout === undefined) return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, rowsLayout.map(function (row, rowIndex) {
+    return /*#__PURE__*/React.createElement(RowContainerRenderer, {
       key: "row-" + rowIndex,
@@ -500,3 +493,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return React.createElement(PhotoRenderer, {
+      return /*#__PURE__*/React.createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -514,6 +507,6 @@ photo: photo,
 
-var DefaultColumnContainer = function DefaultColumnContainer(_ref) {
+var ColumnContainer = function ColumnContainer(_ref) {
   var columnContainerProps = _ref.columnContainerProps,
       children = _ref.children;
-  return React.createElement("div", _extends({}, columnContainerProps), children);
+  return /*#__PURE__*/React.createElement("div", _extends({}, columnContainerProps), children);
 };
@@ -531,3 +524,3 @@
 
-  if (layout === Layout$1.Masonry || !columnsGaps || !columnsRatios) {
+  if (layout === "masonry" || !columnsGaps || !columnsRatios) {
     return "calc((100% - " + spacing * (columnsCount - 1) + "px) / " + columnsCount + ")";
@@ -559,7 +552,7 @@ }
       width: cssWidth(props),
-      justifyContent: layoutOptions.layout === Layout$1.Columns ? "space-between" : "flex-start"
+      justifyContent: layoutOptions.layout === "columns" ? "space-between" : "flex-start"
     }
   };
-  var Component = renderColumnContainer || DefaultColumnContainer;
-  return React.createElement(Component, _extends({
+  var Component = renderColumnContainer || ColumnContainer;
+  return /*#__PURE__*/React.createElement(Component, _extends({
     layoutOptions: layoutOptions,
@@ -658,3 +651,3 @@ columnContainerProps: columnContainerProps
 
-      if (height > cutOffHeight && !(instrumentation != null && instrumentation.fullGraphSearch) || i === photos.length) {
+      if (height > cutOffHeight && !(instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.fullGraphSearch) || i === photos.length) {
         break;
@@ -843,3 +836,6 @@ }
       instrumentation = _ref5.instrumentation;
-  instrumentation == null ? void 0 : instrumentation.onStartLayoutComputation == null ? void 0 : instrumentation.onStartLayoutComputation();
+
+  var _a, _b;
+
+  (_a = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onStartLayoutComputation) === null || _a === void 0 ? void 0 : _a.call(instrumentation);
   var result = computeLayout({
@@ -852,3 +848,3 @@ photos: photos,
   });
-  instrumentation == null ? void 0 : instrumentation.onFinishLayoutComputation == null ? void 0 : instrumentation.onFinishLayoutComputation(result);
+  (_b = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onFinishLayoutComputation) === null || _b === void 0 ? void 0 : _b.call(instrumentation, result);
   return result;
@@ -868,8 +864,8 @@ };
   });
-  if (columnsLayout === undefined) return React__default.createElement(React__default.Fragment, null);
+  if (columnsLayout === undefined) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
   var columnsModel = columnsLayout.columnsModel,
       columnsRatios = columnsLayout.columnsRatios,
       columnsGaps = columnsLayout.columnsGaps;
-  return React__default.createElement(React__default.Fragment, null, columnsModel.map(function (column, columnIndex) {
-    return React__default.createElement(ColumnContainerRenderer, {
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnsModel.map(function (column, columnIndex) {
+    return /*#__PURE__*/React__default.createElement(ColumnContainerRenderer, {
       key: "column-" + columnIndex,
@@ -885,3 +881,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return React__default.createElement(PhotoRenderer, {
+      return /*#__PURE__*/React__default.createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -898,10 +894,12 @@ photo: photo,
 var computeMasonryLayout = function computeMasonryLayout(props) {
+  var _a, _b;
+
   var photos = props.photos,
       layoutOptions = props.layoutOptions,
       instrumentation = props.instrumentation;
-  var columns = layoutOptions.columns,
-      spacing = layoutOptions.spacing,
+  var spacing = layoutOptions.spacing,
       padding = layoutOptions.padding,
       containerWidth = layoutOptions.containerWidth;
-  instrumentation == null ? void 0 : instrumentation.onStartLayoutComputation == null ? void 0 : instrumentation.onStartLayoutComputation(); // calculate column width based on total width and columns count
+  var columns = Math.min(layoutOptions.columns, photos.length);
+  (_a = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onStartLayoutComputation) === null || _a === void 0 ? void 0 : _a.call(instrumentation); // calculate column width based on total width and columns count
 
@@ -960,3 +958,3 @@ var columnWidth = (containerWidth - spacing * (columns - 1) - 2 * padding * columns) / columns; // encountered impossible layout
   });
-  instrumentation == null ? void 0 : instrumentation.onFinishLayoutComputation == null ? void 0 : instrumentation.onFinishLayoutComputation(result);
+  (_b = instrumentation === null || instrumentation === void 0 ? void 0 : instrumentation.onFinishLayoutComputation) === null || _b === void 0 ? void 0 : _b.call(instrumentation, result);
   return result;
@@ -976,5 +974,5 @@ };
   });
-  if (masonryLayout === undefined) return React.createElement(React.Fragment, null);
-  return React.createElement(React.Fragment, null, masonryLayout.map(function (column, columnIndex) {
-    return React.createElement(ColumnContainerRenderer, {
+  if (masonryLayout === undefined) return /*#__PURE__*/React.createElement(React.Fragment, null);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, masonryLayout.map(function (column, columnIndex) {
+    return /*#__PURE__*/React.createElement(ColumnContainerRenderer, {
       key: "masonry-column-" + columnIndex,
@@ -988,3 +986,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return React.createElement(PhotoRenderer, {
+      return /*#__PURE__*/React.createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -1001,9 +999,10 @@ photo: photo,
 var _excluded = ["layoutOptions", "renderContainer", "children"];
-var DefaultContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
+var PhotoAlbumContainer = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
   var containerProps = _ref.containerProps,
       children = _ref.children;
-  return React.createElement("div", _extends({
+  return /*#__PURE__*/React.createElement("div", _extends({
     ref: ref
   }, containerProps), children);
 });
+PhotoAlbumContainer.displayName = "PhotoAlbumContainer";
 var ContainerRenderer = /*#__PURE__*/React.forwardRef(function (_ref2, ref) {
@@ -1018,3 +1017,3 @@ var layoutOptions = _ref2.layoutOptions,
     className: "react-photo-album react-photo-album--" + layout,
-    style: layout === Layout$1.Rows ? {
+    style: layout === "rows" ? {
       display: "flex",
@@ -1031,4 +1030,4 @@ flexDirection: "column",
   };
-  var Component = renderContainer || DefaultContainer;
-  return React.createElement(Component, _extends({
+  var Component = renderContainer || PhotoAlbumContainer;
+  return /*#__PURE__*/React.createElement(Component, _extends({
     ref: ref,
@@ -1039,4 +1038,5 @@ layoutOptions: layoutOptions,
 });
+ContainerRenderer.displayName = "ContainerRenderer";
 
-var breakpoints = /*#__PURE__*/Object.freeze([1600, 1200, 768, 480, 300, 0]);
+var breakpoints = Object.freeze([1200, 600, 300, 0]);
 
@@ -1052,6 +1052,6 @@ var unwrap = function unwrap(value, containerWidth) {
 var selectResponsiveValue = function selectResponsiveValue(values, containerWidth) {
-  var index = breakpoints.findIndex(function (x) {
-    return x < containerWidth;
+  var index = breakpoints.findIndex(function (breakpoint) {
+    return breakpoint <= containerWidth;
   });
-  return index === 0 ? values[index] : values[index] + Math.floor((values[index - 1] - values[index]) * (containerWidth - breakpoints[index]) / (breakpoints[index - 1] - breakpoints[index]));
+  return unwrap(values[index >= 0 ? index : 0], containerWidth);
 };
@@ -1082,6 +1082,14 @@
     containerWidth: containerWidth,
-    columns: resolveResponsiveParameter(columns, containerWidth, [6, 5, 4, 3, 2, 1]),
-    spacing: resolveResponsiveParameter(spacing, containerWidth, [20, 16, 12, 8, 4, 2]),
-    padding: resolveResponsiveParameter(padding, containerWidth, [0, 0, 0, 0, 0, 0]),
-    targetRowHeight: resolveResponsiveParameter(targetRowHeight, containerWidth, [300, 250, 200, 150, 100, 80])
+    columns: resolveResponsiveParameter(columns, containerWidth, [5, 4, 3, 2]),
+    spacing: resolveResponsiveParameter(spacing, containerWidth, [20, 15, 10, 5]),
+    padding: resolveResponsiveParameter(padding, containerWidth, [0, 0, 0, 0, 0]),
+    targetRowHeight: resolveResponsiveParameter(targetRowHeight, containerWidth, [function (w) {
+      return w / 5;
+    }, function (w) {
+      return w / 4;
+    }, function (w) {
+      return w / 3;
+    }, function (w) {
+      return w / 2;
+    }])
   };
@@ -1176,13 +1184,13 @@ };
   };
-  return React.createElement(ContainerRenderer, {
+  return /*#__PURE__*/React.createElement(ContainerRenderer, {
     ref: setContainerRef,
     layoutOptions: layoutOptions,
     renderContainer: renderContainer
-  }, layout === Layout$1.Rows ? React.createElement(RowsLayout, _extends({
+  }, layout === "rows" ? /*#__PURE__*/React.createElement(RowsLayout, _extends({
     layoutOptions: layoutOptions,
     renderRowContainer: renderRowContainer
-  }, commonLayoutProps)) : layout === Layout$1.Columns ? React.createElement(ColumnsLayout, _extends({
+  }, commonLayoutProps)) : layout === "columns" ? /*#__PURE__*/React.createElement(ColumnsLayout, _extends({
     layoutOptions: layoutOptions,
     renderColumnContainer: renderColumnContainer
-  }, commonLayoutProps)) : React.createElement(MasonryLayout, _extends({
+  }, commonLayoutProps)) : /*#__PURE__*/React.createElement(MasonryLayout, _extends({
     layoutOptions: layoutOptions,
@@ -1193,3 +1201,3 @@ renderColumnContainer: renderColumnContainer
 
-export { Layout$1 as Layout, PhotoAlbum, PhotoAlbum as default };
+export { PhotoAlbum, PhotoAlbum as default };
 //# sourceMappingURL=react-photo-album.esm.js.map

package.json

 {
     "name": "react-photo-album",
-    "version": "1.2.0",
-    "description": "Responsive photo album component for React",
+    "version": "1.3.0",
+    "description": "Responsive photo gallery component for React",
     "license": "MIT",
@@ -23,7 +23,7 @@ "author": "Igor Danchenko",
     "scripts": {
-        "build": "dts build --rollupTypes",
-        "lint": "dts lint src test ./*.js .eslintrc.js --fix",
         "prepare": "husky install",
-        "start": "dts watch --rollupTypes",
-        "test": "dts test"
+        "build": "rimraf dist && rollup -c",
+        "start": "rimraf dist && rollup -cw",
+        "lint": "eslint .",
+        "test": "jest"
     },
@@ -37,18 +37,41 @@ "peerDependencies": {
     "devDependencies": {
+        "@babel/core": "^7.16.7",
+        "@babel/preset-env": "^7.16.8",
+        "@babel/preset-react": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
         "@commitlint/cli": "^16.0.1",
         "@commitlint/config-conventional": "^16.0.0",
+        "@rollup/plugin-babel": "^5.3.0",
+        "@rollup/plugin-commonjs": "^21.0.1",
+        "@rollup/plugin-node-resolve": "^13.1.3",
         "@semantic-release/changelog": "^6.0.1",
         "@semantic-release/github": "^8.0.2",
         "@testing-library/react": "^12.1.2",
-        "@tsconfig/create-react-app": "^1.0.2",
-        "@tsconfig/recommended": "^1.0.1",
+        "@types/jest": "^27.4.0",
         "@types/react": "^17.0.37",
         "@types/react-dom": "^17.0.11",
         "@types/react-test-renderer": "^17.0.1",
-        "dts-cli": "^1.1.4",
+        "@typescript-eslint/eslint-plugin": "^5.9.1",
+        "@typescript-eslint/parser": "^5.9.1",
+        "eslint": "^8.6.0",
+        "eslint-config-prettier": "^8.3.0",
+        "eslint-plugin-jsx-a11y": "^6.5.1",
+        "eslint-plugin-prettier": "^4.0.0",
+        "eslint-plugin-react": "^7.28.0",
+        "eslint-plugin-react-hooks": "^4.3.0",
         "husky": "^7.0.4",
+        "jest": "^27.4.7",
         "lint-staged": "^12.1.5",
+        "prettier": "^2.5.1",
         "react": "^17.0.2",
         "react-dom": "^17.0.2",
         "react-test-renderer": "^17.0.2",
+        "rimraf": "^3.0.2",
+        "rollup": "^2.63.0",
+        "rollup-plugin-delete": "^2.0.0",
+        "rollup-plugin-dts": "^4.1.0",
+        "rollup-plugin-peer-deps-external": "^2.2.4",
+        "rollup-plugin-terser": "^7.0.2",
+        "rollup-plugin-typescript2": "^0.31.1",
+        "ts-jest": "^27.1.2",
         "tslib": "^2.3.1",
@@ -55,0 +78,0 @@ "typescript": "^4.5.4"

README.md

@@ -8,5 +8,5 @@ # React Photo Album
 
-[![NPM Version](https://badgen.net/npm/v/react-photo-album)](https://www.npmjs.com/package/react-photo-album)
-[![Bundle Size](https://badgen.net/bundlephobia/minzip/react-photo-album)](https://bundlephobia.com/package/react-photo-album)
-[![License MIT](https://badgen.net/npm/license/react-photo-album)](LICENSE)
+[![NPM Version](https://img.shields.io/npm/v/react-photo-album?color=blue)](https://www.npmjs.com/package/react-photo-album)
+[![Bundle Size](https://img.shields.io/bundlephobia/minzip/react-photo-album?color=blue)](https://bundlephobia.com/package/react-photo-album)
+[![License MIT](https://img.shields.io/npm/l/react-photo-album?color=blue)](LICENSE)
 
@@ -13,0 +13,0 @@ - **Built for React:** works with React 17 and 16.8.0+

New alerts

Dynamic require

Supply chain risk

Dynamic require can indicate the package is performing dangerous or unsafe dynamic code execution.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

342539

increased by0.41%

Lines of code

2236

increased by0.22%

Worsened metrics

Dev dependency count

41

increased by127.78%

Number of low supply chain risk alerts

2

increased by100%

No dependency changes