react-photo-album - npm Package Compare versions

Comparing version 1.5.3 to 1.5.4

dist/index.cjs.js

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

dist/index.esm.js

 import * as React from 'react';
-import React__default, { useLayoutEffect as useLayoutEffect$1, useEffect } from 'react';
+import { useLayoutEffect as useLayoutEffect$1, useEffect } from 'react';
 
@@ -858,8 +858,8 @@ function _extends() {
   });
-  if (columnsLayout === undefined) return /*#__PURE__*/React__default.createElement(React__default.Fragment, null);
+  if (columnsLayout === undefined) return /*#__PURE__*/React.createElement(React.Fragment, null);
   var columnsModel = columnsLayout.columnsModel,
       columnsRatios = columnsLayout.columnsRatios,
       columnsGaps = columnsLayout.columnsGaps;
-  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, columnsModel.map(function (column, columnIndex) {
-    return /*#__PURE__*/React__default.createElement(ColumnContainerRenderer, {
+  return /*#__PURE__*/React.createElement(React.Fragment, null, columnsModel.map(function (column, columnIndex) {
+    return /*#__PURE__*/React.createElement(ColumnContainerRenderer, {
       key: "column-" + columnIndex,
@@ -875,3 +875,3 @@ layoutOptions: layoutOptions,
           layout = _ref.layout;
-      return /*#__PURE__*/React__default.createElement(PhotoRenderer, {
+      return /*#__PURE__*/React.createElement(PhotoRenderer, {
         key: photo.key || photo.src,
@@ -1156,2 +1156,3 @@ photo: photo,
   }, [updateDimensions, resizeObserverProvider]);
+  if (!layout || !Array.isArray(photos)) return /*#__PURE__*/React.createElement(React.Fragment, null);
   var layoutOptions = resolveLayoutOptions({
@@ -1158,0 +1159,0 @@ containerWidth: containerWidth || defaultContainerWidth,

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 e(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(e){if("default"!==e){var o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:function(){return n[e]}})}})),t.default=n,Object.freeze(t)}var r=o(t),i=e(t);function u(){return u=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n},u.apply(this,arguments)}function a(n,t){if(null==n)return{};var e,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)e=i[o],t.indexOf(e)>=0||(r[e]=n[e]);return r}var l=function(n,t){void 0===t&&(t=0);var e=Math.pow(10,t);return Math.round((n+Number.EPSILON)*e)/e},c=["src","alt","srcSet","sizes"],s=function(n,t,e){var o=t.width,r=t.photosCount,i=e.spacing,u=e.padding,a=e.containerWidth,c=i*(r-1)+2*u*r;return"calc(("+n+" - "+c+"px) / "+l((a-c)/o,5)+")"},p=function(n,t){return"rows"!==t.layout?"calc(100% - "+2*t.padding+"px)":s("100%",n,t)},d=function(n,t,e){var o,r;return s(null!==(r=null===(o=n.match(/calc\((.*)\)/))||void 0===o?void 0:o[1])&&void 0!==r?r:n,t,e)},h=function(n){var t=n.imageProps,e=t.src,o=t.alt,i=t.srcSet,l=t.sizes,s=a(t,c);return r.createElement("img",u({src:e,alt:o},i?{srcSet:i,sizes:l}:null,s))},f=function(n){var t,e=n.photo,o=n.layout,i=n.layoutOptions,a=n.renderPhoto,l=i.onClick,c=u({display:"block",boxSizing:"content-box",width:p(o,i),height:"auto",aspectRatio:e.width+" / "+e.height},i.padding?{padding:i.padding+"px"}:null,("columns"===i.layout||"masonry"===i.layout)&&o.photoIndex<o.photosCount-1?{marginBottom:i.spacing+"px"}:null,l?{cursor:"pointer"}:null),s=l?function(n){l(n,e)}:void 0,f=u({src:e.src,alt:null!==(t=e.alt)&&void 0!==t?t:"",title:e.title,onClick:s,style:c,className:"react-photo-album--photo"},function(n,t,e){var o;return n.images&&n.images.length>0&&(o=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:o,sizes:e.sizes?(e.sizes.sizes||[]).map((function(n){var o=n.viewport,r=n.size;return o+" "+d(r,t,e)})).concat(d(e.sizes.size,t,e)).join(", "):Math.ceil(t.width/(e.viewportWidth||e.containerWidth)*100)+"vw"}}(e,o,i)),m=a||h;return r.createElement(m,{photo:e,layoutOptions:i,layout:o,imageProps:f})},m=function(n){return n.width/n.height},v=function(n){var t=[],e=n,o=0,r=function(n,o){return e(t[n],t[o])<0},i=function(n,e){var o=t[n];t[n]=t[e],t[e]=o};return{push:function(n){t[o+=1]=n,function(n){for(var t=n>>1;n>1&&r(t,n);)i(t,n),t=(n=t)>>1}(o)},pop:function(){if(0!==o){i(1,o),o-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=o&&(t<o&&r(t,t+1)&&t++,r(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return o}}},g=function(n,t,e){var o=function(n,t,e){var o={},r={},i={};i[t]=0;var u,a,l=v((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||o[p]<c))&&(i[p]=d,l.push({id:p,weight:d}),o[p]=c)}}}if(void 0!==i[e])return o}(n,t,e);return void 0!==o?function(n,t){for(var e=[],o=t;o;)e.push(o),o=n[o];return e.reverse()}(o,e):void 0},y=function(n,t,e,o){return(t-(n.length-1)*e-2*o*n.length)/n.reduce((function(n,t){return n+m(t)}),0)},w=function(n,t,e,o,r,i,u){var a=n.slice(t,e),l=y(a,o,i,u);return l>0?Math.pow(l-r,2)*a.length:void 0},C=function(n){var t,e,o=n.photos,r=n.layoutOptions,i=n.instrumentation,u=r.spacing,a=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,e=n.targetRowHeight,o=n.containerWidth,r=t.reduce((function(n,t){return Math.min(m(t),n)}),Number.MAX_VALUE);return l(o/e/r)+2}({photos:o,containerWidth:c,targetRowHeight:s}),d=function(n){var t=n.photos,e=n.layoutOptions,o=n.targetRowHeight,r=n.limitNodeSearch,i=n.instrumentation;return function(n){var u=e.containerWidth,a=e.spacing,l=e.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=w(t,s,p,u,o,a,l);if(void 0===d)break;c[p.toString()]=d}return c}}({photos:o,layoutOptions:r,targetRowHeight:s,limitNodeSearch:p,instrumentation:i}),h=g(d,"0",""+o.length);if(void 0!==h){for(var f=[],v=function(n){var t=o.slice(+h[n-1],+h[n]),e=y(t,c,u,a);f.push(t.map((function(n,o){return{photo:n,layout:{height:e,width:e*m(n),photoIndex:o,photosCount:t.length}}})))},C=1;C<h.length;C+=1)v(C);return null===(e=null==i?void 0:i.onFinishLayoutComputation)||void 0===e||e.call(i,f),f}},O=["layoutOptions","rowIndex","rowsCount","renderRowContainer","children"],b=function(n){var t=n.rowContainerProps,e=n.children;return r.createElement("div",u({},t),e)},x=function(n){var t=n.layoutOptions,e=n.rowIndex,o=n.rowsCount,i=n.renderRowContainer,l=n.children,c=a(n,O),s={className:"react-photo-album--row",style:u({display:"flex",flexDirection:"row",flexWrap:"nowrap",alignItems:"flex-start",justifyContent:"space-between"},e<o-1?{marginBottom:t.spacing+"px"}:null)},p=i||b;return r.createElement(p,u({layoutOptions:t,rowIndex:e,rowsCount:o,rowContainerProps:s},c),l)},R=function(n){var t=n.photos,e=n.layoutOptions,o=n.renderPhoto,i=n.renderRowContainer,u=n.instrumentation,a=C({photos:t,layoutOptions:e,instrumentation:u});return void 0===a?r.createElement(r.Fragment,null):r.createElement(r.Fragment,null,a.map((function(n,t){return r.createElement(x,{key:"row-"+t,layoutOptions:e,rowIndex:t,rowsCount:a.length,renderRowContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return r.createElement(f,{key:t.key||t.src,photo:t,layout:i,layoutOptions:e,renderPhoto:o})})))})))},E=["layoutOptions","renderColumnContainer","children"],W=function(n){var t=n.columnContainerProps,e=n.children;return r.createElement("div",u({},t),e)},P=function(n){var t=n.layoutOptions,e=n.columnIndex,o=n.columnsCount,r=n.columnsGaps,i=n.columnsRatios,u=t.layout,a=t.spacing,c=t.padding;if("masonry"===u||!r||!i)return"calc((100% - "+a*(o-1)+"px) / "+o+")";var s=i.reduce((function(n,t){return n+t}),0),p=i.reduce((function(n,t,o){return n+(r[e]-r[o])*t}),0);return"calc((100% - "+l((o-1)*a+2*o*c+p,3)+"px) * "+l(i[e]/s,5)+" + "+2*c+"px)"},k=function(n){var t=n.layoutOptions,e=n.renderColumnContainer,o=n.children,i=a(n,E),l={className:"react-photo-album--column",style:{display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:P(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"}},c=e||W;return r.createElement(c,u({layoutOptions:t,columnContainerProps:l},i),o)},z=function(n,t,e,o){return function(n,t,e){for(var o=[e],r=e,i=t;i>0;i-=1)r=n[r][i][0],o.push(r);return o.reverse()}(function(n,t,e,o){for(var r,i=[],u={0:(r={},r[e]=null,r)},a=function(e){Object.keys(u[e]).forEach((function(r){var a=+r,l=e>0&&i[a][e]?i[a][e][1]:0;n(a).forEach((function(n){var r=n.neighbor,c=n.weight;i[r]||(i[r]=[]);var s=l+c;(!i[r][e+1]||i[r][e+1][1]>s&&(i[r][e+1][1]/s>1.0001||a<i[r][e+1][0]))&&(i[r][e+1]=[a,s]),e<t-1&&r!==o&&(u[e+1]||(u[e+1]={}),u[e+1][r]=null)}))}))},l=0;l<t;l+=1)a(l);return i}(n,t,e,o),t,o)},j=function(n){for(var t=n.path,e=n.photos,o=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=e.slice(t[n],t[n+1]),p=i.reduce((function(t,e,o){return t+(r[n]-r[o])*e}),0),d=(o-(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:d,height:d/m(n),photoIndex:t,photosCount:s.length}}})))},p=0;p<t.length-1;p+=1)s(p);return l},I=function(n){var t=n.photos,e=n.layoutOptions,o=n.targetColumnWidth,r=n.instrumentation,i=e.columns,u=e.spacing,a=e.padding,l=e.containerWidth,c=[],s=[];if(t.length<=i){for(var p=0;p<t.length;p+=1)c[p]=2*a,s[p]=m(t[p]);var d=j({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:d}}for(var h=(t.reduce((function(n,t){return n+o/m(t)}),0)+u*(t.length-i)+2*a*t.length)/i,f=function(n){var t=n.photos,e=n.spacing,o=n.padding,r=n.targetColumnWidth,i=n.targetColumnHeight,u=n.instrumentation;return function(n){for(var a=[],l=1.5*i,c=r/m(t[n])+2*o,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/m(t[s])+e+2*o;return a}}({photos:t,targetColumnWidth:o,targetColumnHeight:h,spacing:u,padding:a,instrumentation:r}),v=z(f,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/m(t)}),0)}return{columnsGaps:c,columnsRatios:s,columnsModel:j({path:v,photos:t,columnsRatios:s,columnsGaps:c,containerWidth:l,spacing:u,padding:a})}},M=function n(t){var e=t.photos,o=t.layoutOptions,r=t.instrumentation,i=o.columns,a=o.spacing,l=o.padding,c=o.containerWidth,s=I({photos:e,layoutOptions:o,targetColumnWidth:(c-a*(i-1)-2*l*i)/i,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,e=t.width,o=t.height;return e<0||o<0}))>=0}))>=0?i>1?n({photos:e,layoutOptions:u({},o,{columns:i-1}),instrumentation:r}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},S=function(n){var t,e,o=n.photos,r=n.layoutOptions,i=n.instrumentation;null===(t=null==i?void 0:i.onStartLayoutComputation)||void 0===t||t.call(i);var a=M({photos:o,layoutOptions:u({},r,{columns:Math.min(r.columns,o.length)}),instrumentation:i});return null===(e=null==i?void 0:i.onFinishLayoutComputation)||void 0===e||e.call(i,a),a},G=function(n){var t=n.photos,e=n.layoutOptions,o=n.renderPhoto,r=n.renderColumnContainer,u=n.instrumentation,a=S({photos:t,layoutOptions:e,instrumentation:u});if(void 0===a)return i.default.createElement(i.default.Fragment,null);var l=a.columnsModel,c=a.columnsRatios,s=a.columnsGaps;return i.default.createElement(i.default.Fragment,null,l.map((function(n,t){return i.default.createElement(k,{key:"column-"+t,layoutOptions:e,columnIndex:t,columnsCount:l.length,columnsGaps:s,columnsRatios:c,renderColumnContainer:r},n.map((function(n){var t=n.photo,r=n.layout;return i.default.createElement(f,{key:t.key||t.src,photo:t,layout:r,layoutOptions:e,renderPhoto:o})})))})))},H=function n(t){var e,o,r=t.photos,i=t.layoutOptions,a=t.instrumentation,l=i.spacing,c=i.padding,s=i.containerWidth,p=Math.min(i.columns,r.length);null===(e=null==a?void 0:a.onStartLayoutComputation)||void 0===e||e.call(a);var d=(s-l*(p-1)-2*c*p)/p;if(d<=0)return p>1?n(u({},t,{layoutOptions:u({},i,{columns:p-1})})):void 0;for(var h=[],f=0;f<p;f+=1)h[f]=0;var v=r.reduce((function(n,t){var e=h.reduce((function(n,t,e){return t<h[n]-1?e:n}),0);return h[e]=h[e]+d/m(t)+l+2*c,n[e]||(n[e]=[]),n[e].push(t),n}),[]),g=v.map((function(n){return n.map((function(t,e){return{photo:t,layout:{width:d,height:d/m(t),photoIndex:e,photosCount:n.length}}}))}));return null===(o=null==a?void 0:a.onFinishLayoutComputation)||void 0===o||o.call(a,g),g},N=function(n){var t=n.photos,e=n.layoutOptions,o=n.renderPhoto,i=n.renderColumnContainer,u=n.instrumentation,a=H({photos:t,layoutOptions:e,instrumentation:u});return void 0===a?r.createElement(r.Fragment,null):r.createElement(r.Fragment,null,a.map((function(n,t){return r.createElement(k,{key:"masonry-column-"+t,layoutOptions:e,columnsCount:a.length,columnIndex:t,renderColumnContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return r.createElement(f,{key:t.key||t.src,photo:t,layout:i,layoutOptions:e,renderPhoto:o})})))})))},F=["layoutOptions","renderContainer","children"],L=r.forwardRef((function(n,t){var e=n.containerProps,o=n.children;return r.createElement("div",u({ref:t},e),o)}));L.displayName="PhotoAlbumContainer";var A=r.forwardRef((function(n,t){var e=n.layoutOptions,o=n.renderContainer,i=n.children,l=a(n,F),c=e.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=o||L;return r.createElement(p,u({ref:t,layoutOptions:e,containerProps:s},l),i)}));A.displayName="ContainerRenderer";var D=Object.freeze([1200,600,300,0]),_=function(n,t){return"function"==typeof n?n(t):n},B=function(n,t,e){var o=function(n,t){return void 0!==n?_(n,t):void 0}(n,t);return void 0===o?function(n,t){var e=D.findIndex((function(n){return n<=t}));return _(n[e>=0?e:0],t)}(e,t):o},T="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,q=function(n){var t=n.photos,e=n.layout,o=n.columns,i=n.spacing,a=n.padding,l=n.sizes,c=n.onClick,s=n.targetRowHeight,p=n.defaultContainerWidth,d=void 0===p?800:p,h=n.renderPhoto,f=n.renderContainer,m=n.renderRowContainer,v=n.renderColumnContainer,g=n.resizeObserverProvider,y=n.instrumentation,w=r.useState(),C=w[0],O=w[1],b=r.useState(),x=b[0],E=b[1],W=r.useRef(null),P=r.useRef(null),k=r.useCallback((function(){"undefined"!=typeof window&&O(window.innerWidth),P.current&&E(P.current.clientWidth)}),[]),z=r.useCallback((function(n){W.current&&P.current&&W.current.unobserve(P.current),P.current=n,n&&W.current&&W.current.observe(n)}),[]);T((function(){k();var n=function(){return k()};return"undefined"!=typeof ResizeObserver?W.current=new ResizeObserver(n):g&&(W.current=g(n)),W.current&&P.current&&W.current.observe(P.current),function(){W.current&&(W.current.disconnect(),W.current=null)}}),[k,g]);var j=function(n){var t=n.layout,e=n.onClick,o=n.viewportWidth,r=n.containerWidth,i=n.targetRowHeight,u=n.columns,a=n.spacing,l=n.padding,c=n.sizes;return{layout:t,onClick:e,viewportWidth:o,containerWidth:r,columns:B(u,r,[5,4,3,2]),spacing:B(a,r,[20,15,10,5]),padding:B(l,r,[0,0,0,0,0]),targetRowHeight:B(i,r,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}]),sizes:c}}({containerWidth:x||d,viewportWidth:C,layout:e,onClick:c,spacing:i,padding:a,columns:o,targetRowHeight:s,sizes:l}),I={photos:t,renderPhoto:h,instrumentation:y};return r.createElement(A,{ref:z,layoutOptions:j,renderContainer:f},"rows"===e?r.createElement(R,u({layoutOptions:j,renderRowContainer:m},I)):"columns"===e?r.createElement(G,u({layoutOptions:j,renderColumnContainer:v},I)):r.createElement(N,u({layoutOptions:j,renderColumnContainer:v},I)))};n.PhotoAlbum=q,n.default=q,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 e(n){if(n&&n.__esModule)return n;var t=Object.create(null);return n&&Object.keys(n).forEach((function(e){if("default"!==e){var o=Object.getOwnPropertyDescriptor(n,e);Object.defineProperty(t,e,o.get?o:{enumerable:!0,get:function(){return n[e]}})}})),t.default=n,Object.freeze(t)}var o=e(t);function r(){return r=Object.assign||function(n){for(var t=1;t<arguments.length;t++){var e=arguments[t];for(var o in e)Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o])}return n},r.apply(this,arguments)}function i(n,t){if(null==n)return{};var e,o,r={},i=Object.keys(n);for(o=0;o<i.length;o++)e=i[o],t.indexOf(e)>=0||(r[e]=n[e]);return r}var u=function(n,t){void 0===t&&(t=0);var e=Math.pow(10,t);return Math.round((n+Number.EPSILON)*e)/e},a=["src","alt","srcSet","sizes"],l=function(n,t,e){var o=t.width,r=t.photosCount,i=e.spacing,a=e.padding,l=e.containerWidth,c=i*(r-1)+2*a*r;return"calc(("+n+" - "+c+"px) / "+u((l-c)/o,5)+")"},c=function(n,t){return"rows"!==t.layout?"calc(100% - "+2*t.padding+"px)":l("100%",n,t)},s=function(n,t,e){var o,r;return l(null!==(r=null===(o=n.match(/calc\((.*)\)/))||void 0===o?void 0:o[1])&&void 0!==r?r:n,t,e)},p=function(n){var t=n.imageProps,e=t.src,u=t.alt,l=t.srcSet,c=t.sizes,s=i(t,a);return o.createElement("img",r({src:e,alt:u},l?{srcSet:l,sizes:c}:null,s))},d=function(n){var t,e=n.photo,i=n.layout,u=n.layoutOptions,a=n.renderPhoto,l=u.onClick,d=r({display:"block",boxSizing:"content-box",width:c(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,l?{cursor:"pointer"}:null),h=l?function(n){l(n,e)}:void 0,f=r({src:e.src,alt:null!==(t=e.alt)&&void 0!==t?t:"",title:e.title,onClick:h,style:d,className:"react-photo-album--photo"},function(n,t,e){var o;return n.images&&n.images.length>0&&(o=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:o,sizes:e.sizes?(e.sizes.sizes||[]).map((function(n){var o=n.viewport,r=n.size;return o+" "+s(r,t,e)})).concat(s(e.sizes.size,t,e)).join(", "):Math.ceil(t.width/(e.viewportWidth||e.containerWidth)*100)+"vw"}}(e,i,u)),m=a||p;return o.createElement(m,{photo:e,layoutOptions:u,layout:i,imageProps:f})},h=function(n){return n.width/n.height},f=function(n){var t=[],e=n,o=0,r=function(n,o){return e(t[n],t[o])<0},i=function(n,e){var o=t[n];t[n]=t[e],t[e]=o};return{push:function(n){t[o+=1]=n,function(n){for(var t=n>>1;n>1&&r(t,n);)i(t,n),t=(n=t)>>1}(o)},pop:function(){if(0!==o){i(1,o),o-=1;var n=t.pop();return function(n){for(var t=n<<1;t<=o&&(t<o&&r(t,t+1)&&t++,r(n,t));)i(n,t),t=(n=t)<<1}(1),n}},size:function(){return o}}},m=function(n,t,e){var o=function(n,t,e){var o={},r={},i={};i[t]=0;var u,a,l=f((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||o[p]<c))&&(i[p]=d,l.push({id:p,weight:d}),o[p]=c)}}}if(void 0!==i[e])return o}(n,t,e);return void 0!==o?function(n,t){for(var e=[],o=t;o;)e.push(o),o=n[o];return e.reverse()}(o,e):void 0},v=function(n,t,e,o){return(t-(n.length-1)*e-2*o*n.length)/n.reduce((function(n,t){return n+h(t)}),0)},g=function(n,t,e,o,r,i,u){var a=n.slice(t,e),l=v(a,o,i,u);return l>0?Math.pow(l-r,2)*a.length:void 0},y=function(n){var t,e,o=n.photos,r=n.layoutOptions,i=n.instrumentation,a=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,e=n.targetRowHeight,o=n.containerWidth,r=t.reduce((function(n,t){return Math.min(h(t),n)}),Number.MAX_VALUE);return u(o/e/r)+2}({photos:o,containerWidth:c,targetRowHeight:s}),d=function(n){var t=n.photos,e=n.layoutOptions,o=n.targetRowHeight,r=n.limitNodeSearch,i=n.instrumentation;return function(n){var u=e.containerWidth,a=e.spacing,l=e.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=g(t,s,p,u,o,a,l);if(void 0===d)break;c[p.toString()]=d}return c}}({photos:o,layoutOptions:r,targetRowHeight:s,limitNodeSearch:p,instrumentation:i}),f=m(d,"0",""+o.length);if(void 0!==f){for(var y=[],w=function(n){var t=o.slice(+f[n-1],+f[n]),e=v(t,c,a,l);y.push(t.map((function(n,o){return{photo:n,layout:{height:e,width:e*h(n),photoIndex:o,photosCount:t.length}}})))},C=1;C<f.length;C+=1)w(C);return null===(e=null==i?void 0:i.onFinishLayoutComputation)||void 0===e||e.call(i,y),y}},w=["layoutOptions","rowIndex","rowsCount","renderRowContainer","children"],C=function(n){var t=n.rowContainerProps,e=n.children;return o.createElement("div",r({},t),e)},O=function(n){var t=n.layoutOptions,e=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"},e<u-1?{marginBottom:t.spacing+"px"}:null)},p=a||C;return o.createElement(p,r({layoutOptions:t,rowIndex:e,rowsCount:u,rowContainerProps:s},c),l)},b=function(n){var t=n.photos,e=n.layoutOptions,r=n.renderPhoto,i=n.renderRowContainer,u=n.instrumentation,a=y({photos:t,layoutOptions:e,instrumentation:u});return void 0===a?o.createElement(o.Fragment,null):o.createElement(o.Fragment,null,a.map((function(n,t){return o.createElement(O,{key:"row-"+t,layoutOptions:e,rowIndex:t,rowsCount:a.length,renderRowContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return o.createElement(d,{key:t.key||t.src,photo:t,layout:i,layoutOptions:e,renderPhoto:r})})))})))},x=["layoutOptions","renderColumnContainer","children"],R=function(n){var t=n.columnContainerProps,e=n.children;return o.createElement("div",r({},t),e)},E=function(n){var t=n.layoutOptions,e=n.columnIndex,o=n.columnsCount,r=n.columnsGaps,i=n.columnsRatios,a=t.layout,l=t.spacing,c=t.padding;if("masonry"===a||!r||!i)return"calc((100% - "+l*(o-1)+"px) / "+o+")";var s=i.reduce((function(n,t){return n+t}),0),p=i.reduce((function(n,t,o){return n+(r[e]-r[o])*t}),0);return"calc((100% - "+u((o-1)*l+2*o*c+p,3)+"px) * "+u(i[e]/s,5)+" + "+2*c+"px)"},W=function(n){var t=n.layoutOptions,e=n.renderColumnContainer,u=n.children,a=i(n,x),l={className:"react-photo-album--column",style:{display:"flex",flexDirection:"column",flexWrap:"nowrap",alignItems:"flex-start",width:E(n),justifyContent:"columns"===t.layout?"space-between":"flex-start"}},c=e||R;return o.createElement(c,r({layoutOptions:t,columnContainerProps:l},a),u)},P=function(n,t,e,o){return function(n,t,e){for(var o=[e],r=e,i=t;i>0;i-=1)r=n[r][i][0],o.push(r);return o.reverse()}(function(n,t,e,o){for(var r,i=[],u={0:(r={},r[e]=null,r)},a=function(e){Object.keys(u[e]).forEach((function(r){var a=+r,l=e>0&&i[a][e]?i[a][e][1]:0;n(a).forEach((function(n){var r=n.neighbor,c=n.weight;i[r]||(i[r]=[]);var s=l+c;(!i[r][e+1]||i[r][e+1][1]>s&&(i[r][e+1][1]/s>1.0001||a<i[r][e+1][0]))&&(i[r][e+1]=[a,s]),e<t-1&&r!==o&&(u[e+1]||(u[e+1]={}),u[e+1][r]=null)}))}))},l=0;l<t;l+=1)a(l);return i}(n,t,e,o),t,o)},k=function(n){for(var t=n.path,e=n.photos,o=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=e.slice(t[n],t[n+1]),p=i.reduce((function(t,e,o){return t+(r[n]-r[o])*e}),0),d=(o-(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:d,height:d/h(n),photoIndex:t,photosCount:s.length}}})))},p=0;p<t.length-1;p+=1)s(p);return l},z=function(n){var t=n.photos,e=n.layoutOptions,o=n.targetColumnWidth,r=n.instrumentation,i=e.columns,u=e.spacing,a=e.padding,l=e.containerWidth,c=[],s=[];if(t.length<=i){for(var p=0;p<t.length;p+=1)c[p]=2*a,s[p]=h(t[p]);var d=k({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:d}}for(var f=(t.reduce((function(n,t){return n+o/h(t)}),0)+u*(t.length-i)+2*a*t.length)/i,m=function(n){var t=n.photos,e=n.spacing,o=n.padding,r=n.targetColumnWidth,i=n.targetColumnHeight,u=n.instrumentation;return function(n){for(var a=[],l=1.5*i,c=r/h(t[n])+2*o,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/h(t[s])+e+2*o;return a}}({photos:t,targetColumnWidth:o,targetColumnHeight:f,spacing:u,padding:a,instrumentation:r}),v=P(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/h(t)}),0)}return{columnsGaps:c,columnsRatios:s,columnsModel:k({path:v,photos:t,columnsRatios:s,columnsGaps:c,containerWidth:l,spacing:u,padding:a})}},j=function n(t){var e=t.photos,o=t.layoutOptions,i=t.instrumentation,u=o.columns,a=o.spacing,l=o.padding,c=o.containerWidth,s=z({photos:e,layoutOptions:o,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,e=t.width,o=t.height;return e<0||o<0}))>=0}))>=0?u>1?n({photos:e,layoutOptions:r({},o,{columns:u-1}),instrumentation:i}):void 0:{columnsModel:h,columnsGaps:p,columnsRatios:d}},I=function(n){var t,e,o=n.photos,i=n.layoutOptions,u=n.instrumentation;null===(t=null==u?void 0:u.onStartLayoutComputation)||void 0===t||t.call(u);var a=j({photos:o,layoutOptions:r({},i,{columns:Math.min(i.columns,o.length)}),instrumentation:u});return null===(e=null==u?void 0:u.onFinishLayoutComputation)||void 0===e||e.call(u,a),a},M=function(n){var t=n.photos,e=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.instrumentation,a=I({photos:t,layoutOptions:e,instrumentation:u});if(void 0===a)return o.createElement(o.Fragment,null);var l=a.columnsModel,c=a.columnsRatios,s=a.columnsGaps;return o.createElement(o.Fragment,null,l.map((function(n,t){return o.createElement(W,{key:"column-"+t,layoutOptions:e,columnIndex:t,columnsCount:l.length,columnsGaps:s,columnsRatios:c,renderColumnContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return o.createElement(d,{key:t.key||t.src,photo:t,layout:i,layoutOptions:e,renderPhoto:r})})))})))},S=function n(t){var e,o,i=t.photos,u=t.layoutOptions,a=t.instrumentation,l=u.spacing,c=u.padding,s=u.containerWidth,p=Math.min(u.columns,i.length);null===(e=null==a?void 0:a.onStartLayoutComputation)||void 0===e||e.call(a);var d=(s-l*(p-1)-2*c*p)/p;if(d<=0)return p>1?n(r({},t,{layoutOptions:r({},u,{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 e=f.reduce((function(n,t,e){return t<f[n]-1?e:n}),0);return f[e]=f[e]+d/h(t)+l+2*c,n[e]||(n[e]=[]),n[e].push(t),n}),[]),g=v.map((function(n){return n.map((function(t,e){return{photo:t,layout:{width:d,height:d/h(t),photoIndex:e,photosCount:n.length}}}))}));return null===(o=null==a?void 0:a.onFinishLayoutComputation)||void 0===o||o.call(a,g),g},G=function(n){var t=n.photos,e=n.layoutOptions,r=n.renderPhoto,i=n.renderColumnContainer,u=n.instrumentation,a=S({photos:t,layoutOptions:e,instrumentation:u});return void 0===a?o.createElement(o.Fragment,null):o.createElement(o.Fragment,null,a.map((function(n,t){return o.createElement(W,{key:"masonry-column-"+t,layoutOptions:e,columnsCount:a.length,columnIndex:t,renderColumnContainer:i},n.map((function(n){var t=n.photo,i=n.layout;return o.createElement(d,{key:t.key||t.src,photo:t,layout:i,layoutOptions:e,renderPhoto:r})})))})))},H=["layoutOptions","renderContainer","children"],N=o.forwardRef((function(n,t){var e=n.containerProps,i=n.children;return o.createElement("div",r({ref:t},e),i)}));N.displayName="PhotoAlbumContainer";var F=o.forwardRef((function(n,t){var e=n.layoutOptions,u=n.renderContainer,a=n.children,l=i(n,H),c=e.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=u||N;return o.createElement(p,r({ref:t,layoutOptions:e,containerProps:s},l),a)}));F.displayName="ContainerRenderer";var L=Object.freeze([1200,600,300,0]),A=function(n,t){return"function"==typeof n?n(t):n},D=function(n,t,e){var o=function(n,t){return void 0!==n?A(n,t):void 0}(n,t);return void 0===o?function(n,t){var e=L.findIndex((function(n){return n<=t}));return A(n[e>=0?e:0],t)}(e,t):o},_="undefined"!=typeof document?t.useLayoutEffect:t.useEffect,B=function(n){var t=n.photos,e=n.layout,i=n.columns,u=n.spacing,a=n.padding,l=n.sizes,c=n.onClick,s=n.targetRowHeight,p=n.defaultContainerWidth,d=void 0===p?800:p,h=n.renderPhoto,f=n.renderContainer,m=n.renderRowContainer,v=n.renderColumnContainer,g=n.resizeObserverProvider,y=n.instrumentation,w=o.useState(),C=w[0],O=w[1],x=o.useState(),R=x[0],E=x[1],W=o.useRef(null),P=o.useRef(null),k=o.useCallback((function(){"undefined"!=typeof window&&O(window.innerWidth),P.current&&E(P.current.clientWidth)}),[]),z=o.useCallback((function(n){W.current&&P.current&&W.current.unobserve(P.current),P.current=n,n&&W.current&&W.current.observe(n)}),[]);if(_((function(){k();var n=function(){return k()};return"undefined"!=typeof ResizeObserver?W.current=new ResizeObserver(n):g&&(W.current=g(n)),W.current&&P.current&&W.current.observe(P.current),function(){W.current&&(W.current.disconnect(),W.current=null)}}),[k,g]),!e||!Array.isArray(t))return o.createElement(o.Fragment,null);var j=function(n){var t=n.layout,e=n.onClick,o=n.viewportWidth,r=n.containerWidth,i=n.targetRowHeight,u=n.columns,a=n.spacing,l=n.padding,c=n.sizes;return{layout:t,onClick:e,viewportWidth:o,containerWidth:r,columns:D(u,r,[5,4,3,2]),spacing:D(a,r,[20,15,10,5]),padding:D(l,r,[0,0,0,0,0]),targetRowHeight:D(i,r,[function(n){return n/5},function(n){return n/4},function(n){return n/3},function(n){return n/2}]),sizes:c}}({containerWidth:R||d,viewportWidth:C,layout:e,onClick:c,spacing:u,padding:a,columns:i,targetRowHeight:s,sizes:l}),I={photos:t,renderPhoto:h,instrumentation:y};return o.createElement(F,{ref:z,layoutOptions:j,renderContainer:f},"rows"===e?o.createElement(b,r({layoutOptions:j,renderRowContainer:m},I)):"columns"===e?o.createElement(M,r({layoutOptions:j,renderColumnContainer:v},I)):o.createElement(G,r({layoutOptions:j,renderColumnContainer:v},I)))};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.5.3",
+    "version": "1.5.4",
     "description": "Responsive photo gallery component for React",
@@ -60,5 +60,5 @@ "license": "MIT",
         "@types/react-test-renderer": "^17.0.1",
-        "@typescript-eslint/eslint-plugin": "^5.10.1",
-        "@typescript-eslint/parser": "^5.10.1",
-        "eslint": "^8.7.0",
+        "@typescript-eslint/eslint-plugin": "^5.10.2",
+        "@typescript-eslint/parser": "^5.10.2",
+        "eslint": "^8.8.0",
         "eslint-config-prettier": "^8.3.0",
@@ -71,3 +71,3 @@ "eslint-plugin-jsx-a11y": "^6.5.1",
         "jest": "^27.4.7",
-        "lint-staged": "^12.3.1",
+        "lint-staged": "^12.3.2",
         "prettier": "^2.5.1",
@@ -74,0 +74,0 @@ "react": "^17.0.2",

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

303124

increased by0.1%

Lines of code

1294

increased by0.08%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes