react-photo-album - npm Package Compare versions

Comparing version 1.7.0 to 1.8.0

dist/index.cjs.js

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

dist/index.d.ts

@@ -1,2 +0,2 @@
-import { MouseEvent, ImgHTMLAttributes, HTMLAttributes, ForwardRefExoticComponent, PropsWithoutRef, PropsWithChildren, RefAttributes } from 'react';
+import { MouseEvent, ImgHTMLAttributes, ReactElement, HTMLAttributes, PropsWithChildren, RefCallback, ForwardRefExoticComponent, RefAttributes } from 'react';
 
@@ -92,3 +92,3 @@ declare type LayoutType = "columns" | "rows" | "masonry";
 };
-declare type RenderPhoto<T extends Photo = Photo> = (props: PhotoProps<T>) => JSX.Element;
+declare type RenderPhoto<T extends Photo = Photo> = (props: PhotoProps<T>) => ReactElement;
 declare type GenericLayoutOptions = {
@@ -129,3 +129,7 @@ /** layout spacing (gaps between photos) */
 };
-declare type RenderContainer = ForwardRefExoticComponent<PropsWithoutRef<PropsWithChildren<ContainerProps>> & RefAttributes<HTMLDivElement>>;
+declare type RenderContainerProps = PropsWithChildren<ContainerProps> & {
+    containerRef?: RefCallback<HTMLDivElement>;
+};
+/** ForwardRefExoticComponent (forwardRef) variant is deprecated and will be removed in the next major release */
+declare type RenderContainer = ((props: RenderContainerProps) => ReactElement) | ForwardRefExoticComponent<PropsWithChildren<ContainerProps> & RefAttributes<HTMLDivElement>>;
 declare type RowContainerProps = {
@@ -141,3 +145,3 @@ /** layout options */
 };
-declare type RenderRowContainer = (props: PropsWithChildren<RowContainerProps>) => JSX.Element;
+declare type RenderRowContainer = (props: PropsWithChildren<RowContainerProps>) => ReactElement;
 declare type ColumnContainerProps = {
@@ -156,8 +160,8 @@ layoutOptions: ColumnsLayoutOptions;
 };
-declare type RenderColumnContainer = (props: PropsWithChildren<ColumnContainerProps>) => JSX.Element;
+declare type RenderColumnContainer = (props: PropsWithChildren<ColumnContainerProps>) => ReactElement;
 declare type ResizeObserverProvider = (callback: (entries: ResizeObserverEntry[], observer: ResizeObserver) => void) => ResizeObserver;
 declare type RowConstraints = {
-    /** minimum number of photos in a row in 'rows' layout */
+    /** minimum number of photos per row in 'rows' layout */
     minPhotos?: number;
-    /** maximum number of photos in a row in 'rows' layout */
+    /** maximum number of photos per row in 'rows' layout */
     maxPhotos?: number;
@@ -174,2 +178,2 @@ };
 
-export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowConstraints, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };
+export { ClickHandler, ColumnContainerProps, ColumnsLayoutOptions, ContainerProps, GenericLayoutOptions, Image, Instrumentation, LayoutOptions, LayoutType, Photo, PhotoAlbum, PhotoAlbumProps, PhotoLayout, PhotoProps, RenderColumnContainer, RenderContainer, RenderContainerProps, RenderPhoto, RenderRowContainer, ResizeObserverProvider, ResponsiveParameter, ResponsiveParameterProvider, ResponsiveSizes, RowConstraints, RowContainerProps, RowsLayoutOptions, PhotoAlbum as default };

dist/index.esm.js

 import { jsx, Fragment } from 'react/jsx-runtime';
-import { forwardRef, useLayoutEffect as useLayoutEffect$1, useEffect, useState, useMemo, useRef, useCallback } from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect, useState, useMemo, useRef, useCallback } from 'react';
 
@@ -379,3 +379,3 @@ function _extends() {
 
-var DefaultPhotoRenderer = function DefaultPhotoRenderer(_ref4) {
+var defaultRenderPhoto = function defaultRenderPhoto(_ref4) {
   var imageProps = _ref4.imageProps;
@@ -434,9 +434,8 @@
 
-  var Component = renderPhoto || DefaultPhotoRenderer;
-  return jsx(Component, {
+  return (renderPhoto !== null && renderPhoto !== void 0 ? renderPhoto : defaultRenderPhoto)({
     photo: photo,
+    layout: layout,
     layoutOptions: layoutOptions,
-    layout: layout,
     imageProps: imageProps
-  }, void 0);
+  });
 };
@@ -446,3 +445,3 @@
 
-var RowContainer = function RowContainer(_ref) {
+var defaultRenderRowContainer = function defaultRenderRowContainer(_ref) {
   var rowContainerProps = _ref.rowContainerProps,
@@ -475,11 +474,9 @@ children = _ref.children;
   };
-  var Component = renderRowContainer || RowContainer;
-  return jsx(Component, _extends({
+  return (renderRowContainer !== null && renderRowContainer !== void 0 ? renderRowContainer : defaultRenderRowContainer)(_extends({
     layoutOptions: layoutOptions,
     rowIndex: rowIndex,
     rowsCount: rowsCount,
-    rowContainerProps: rowContainerProps
-  }, rest, {
+    rowContainerProps: rowContainerProps,
     children: children
-  }), void 0);
+  }, rest));
 };
@@ -810,3 +807,3 @@
 
-var ColumnContainer = function ColumnContainer(_ref) {
+var defaultRenderColumnContainer = function defaultRenderColumnContainer(_ref) {
   var columnContainerProps = _ref.columnContainerProps,
@@ -859,9 +856,7 @@ children = _ref.children;
   };
-  var Component = renderColumnContainer || ColumnContainer;
-  return jsx(Component, _extends({
+  return (renderColumnContainer !== null && renderColumnContainer !== void 0 ? renderColumnContainer : defaultRenderColumnContainer)(_extends({
     layoutOptions: layoutOptions,
-    columnContainerProps: columnContainerProps
-  }, rest, {
+    columnContainerProps: columnContainerProps,
     children: children
-  }), void 0);
+  }, rest));
 };
@@ -1010,17 +1005,20 @@
 
-var _excluded = ["layoutOptions", "renderContainer", "children"];
-var PhotoAlbumContainer = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var _excluded = ["layoutOptions", "renderContainer", "children", "containerRef"];
+
+var defaultRenderContainer = function defaultRenderContainer(_ref) {
   var containerProps = _ref.containerProps,
-      children = _ref.children;
+      children = _ref.children,
+      containerRef = _ref.containerRef;
   return jsx("div", _extends({
-    ref: ref
+    ref: containerRef
   }, containerProps, {
     children: children
   }), void 0);
-});
-PhotoAlbumContainer.displayName = "PhotoAlbumContainer";
-var ContainerRenderer = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+};
+
+var ContainerRenderer = function ContainerRenderer(_ref2) {
   var layoutOptions = _ref2.layoutOptions,
       renderContainer = _ref2.renderContainer,
       children = _ref2.children,
+      containerRef = _ref2.containerRef,
       rest = _objectWithoutPropertiesLoose(_ref2, _excluded);
@@ -1042,13 +1040,22 @@
     }
-  };
-  var Component = renderContainer || PhotoAlbumContainer;
-  return jsx(Component, _extends({
-    ref: ref,
+  }; // we are dealing with deprecated exotic component returned by forwardRef
+
+  if (renderContainer && typeof renderContainer === "object") {
+    var Component = renderContainer;
+    return jsx(Component, _extends({
+      ref: containerRef,
+      layoutOptions: layoutOptions,
+      containerProps: containerProps
+    }, rest, {
+      children: children
+    }), void 0);
+  }
+
+  return (renderContainer !== null && renderContainer !== void 0 ? renderContainer : defaultRenderContainer)(_extends({
+    containerProps: containerProps,
+    containerRef: containerRef,
     layoutOptions: layoutOptions,
-    containerProps: containerProps
-  }, rest, {
     children: children
-  }), void 0);
-});
-ContainerRenderer.displayName = "ContainerRenderer";
+  }, rest));
+};
 
@@ -1075,31 +1082,10 @@ /* istanbul ignore next */
   var observerRef = useRef();
-  var containerRef = useRef();
 
   var _useState = useState(),
-      width = _useState[0],
-      setWidth = _useState[1];
+      containerWidth = _useState[0],
+      setContainerWidth = _useState[1];
 
-  var updateWidth = useCallback(function () {
+  var containerRef = useCallback(function (node) {
     var _a;
 
-    var newWidth = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
-
-    if (newWidth !== undefined && breakpoints && breakpoints.length > 0) {
-      var containerWidth = newWidth;
-      var sortedBreakpoints = [].concat(breakpoints.filter(function (x) {
-        return x > 0;
-      })).sort(function (a, b) {
-        return b - a;
-      });
-      sortedBreakpoints.push(Math.floor(sortedBreakpoints[sortedBreakpoints.length - 1] / 2));
-      newWidth = sortedBreakpoints.find(function (breakpoint, index) {
-        return breakpoint <= containerWidth || index === sortedBreakpoints.length - 1;
-      });
-    }
-
-    setWidth(newWidth);
-  }, [breakpoints]);
-  var ref = useCallback(function (node) {
-    var _a;
-
     if (observerRef.current) {
@@ -1110,3 +1096,20 @@ observerRef.current.disconnect();
 
-    containerRef.current = node;
+    var updateWidth = function updateWidth() {
+      var newWidth = node === null || node === void 0 ? void 0 : node.clientWidth;
+
+      if (newWidth !== undefined && breakpoints && breakpoints.length > 0) {
+        var sortedBreakpoints = [].concat(breakpoints.filter(function (x) {
+          return x > 0;
+        })).sort(function (a, b) {
+          return b - a;
+        });
+        sortedBreakpoints.push(Math.floor(sortedBreakpoints[sortedBreakpoints.length - 1] / 2));
+        newWidth = sortedBreakpoints.find(function (breakpoint, index) {
+          return breakpoint <= newWidth || index === sortedBreakpoints.length - 1;
+        });
+      }
+
+      setContainerWidth(newWidth);
+    };
+
     updateWidth();
@@ -1118,9 +1121,9 @@
     }
-  }, [resizeObserverProvider, updateWidth]);
+  }, [resizeObserverProvider, breakpoints]);
   return useMemo(function () {
     return {
-      ref: ref,
-      width: width
+      containerRef: containerRef,
+      containerWidth: containerWidth
     };
-  }, [ref, width]);
+  }, [containerRef, containerWidth]);
 };
@@ -1197,4 +1200,4 @@
   var _useContainerWidth = useContainerWidth(resizeObserverProvider, breakpoints),
-      ref = _useContainerWidth.ref,
-      width = _useContainerWidth.width; // safeguard against incorrect usage
+      containerRef = _useContainerWidth.containerRef,
+      containerWidth = _useContainerWidth.containerWidth; // safeguard against incorrect usage
 
@@ -1204,3 +1207,3 @@
   var layoutOptions = resolveLayoutOptions(_extends({
-    containerWidth: mounted && width || defaultContainerWidth || 800,
+    containerWidth: mounted && containerWidth || defaultContainerWidth || 800,
     viewportWidth: mounted && window.innerWidth || undefined
@@ -1214,3 +1217,3 @@ }, props));
   return jsx(ContainerRenderer, {
-    ref: ref,
+    containerRef: containerRef,
     layoutOptions: layoutOptions,
@@ -1217,0 +1220,0 @@ renderContainer: renderContainer,

dist/index.umd.js

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

package.json

 {
     "name": "react-photo-album",
-    "version": "1.7.0",
+    "version": "1.8.0",
     "description": "Responsive photo gallery component for React",
@@ -50,4 +50,4 @@ "author": "Igor Danchenko",
         "@commitlint/config-conventional": "^16.2.1",
-        "@rollup/plugin-babel": "^5.3.0",
-        "@rollup/plugin-commonjs": "^21.0.1",
+        "@rollup/plugin-babel": "^5.3.1",
+        "@rollup/plugin-commonjs": "^21.0.2",
         "@rollup/plugin-node-resolve": "^13.1.3",
@@ -57,3 +57,3 @@ "@semantic-release/changelog": "^6.0.1",
         "@testing-library/react": "^12.1.3",
-        "@types/jest": "^27.4.0",
+        "@types/jest": "^27.4.1",
         "@types/react": "^17.0.39",
@@ -60,0 +60,0 @@ "@types/react-dom": "^17.0.11",

No alert changes

Improved metrics

Total package byte prevSize

308751

increased by0.36%

Lines of code

1335

increased by0.23%

No dependency changes