masonic - npm Package Compare versions

Comparing version 3.6.5 to 3.7.0

dist/main/use-positioner.js

@@ -29,2 +29,3 @@ "use strict";
  * @param options.columnCount
+ * @param options.maxColumnCount
  */
@@ -36,6 +37,7 @@ function usePositioner({
   rowGutter,
-  columnCount
+  columnCount,
+  maxColumnCount
 }, deps = emptyArr) {
   const initPositioner = () => {
-    const [computedColumnWidth, computedColumnCount] = getColumns(width, columnWidth, columnGutter, columnCount);
+    const [computedColumnWidth, computedColumnCount] = getColumns(width, columnWidth, columnGutter, columnCount, maxColumnCount);
     return createPositioner(computedColumnCount, computedColumnWidth, columnGutter, rowGutter !== null && rowGutter !== void 0 ? rowGutter : columnGutter);
@@ -47,3 +49,3 @@ };
   const prevDeps = React.useRef(deps);
-  const opts = [width, columnWidth, columnGutter, rowGutter, columnCount];
+  const opts = [width, columnWidth, columnGutter, rowGutter, columnCount, maxColumnCount];
   const prevOpts = React.useRef(opts);
@@ -208,4 +210,4 @@ const optsChanged = !opts.every((item, i) => prevOpts.current[i] === item);
 
-const getColumns = (width = 0, minimumWidth = 0, gutter = 8, columnCount) => {
-  columnCount = columnCount || Math.floor((width + gutter) / (minimumWidth + gutter)) || 1;
+const getColumns = (width = 0, minimumWidth = 0, gutter = 8, columnCount, maxColumnCount) => {
+  columnCount = columnCount || Math.min(Math.floor((width + gutter) / (minimumWidth + gutter)), maxColumnCount || Infinity) || 1;
   const columnWidth = Math.floor((width - gutter * (columnCount - 1)) / columnCount);
@@ -212,0 +214,0 @@ return [columnWidth, columnCount];

dist/module/use-positioner.js

@@ -17,2 +17,3 @@ import * as React from "react";
  * @param options.columnCount
+ * @param options.maxColumnCount
  */
@@ -26,3 +27,4 @@
     rowGutter,
-    columnCount
+    columnCount,
+    maxColumnCount
   } = _ref;
@@ -35,3 +37,3 @@
   const initPositioner = () => {
-    const [computedColumnWidth, computedColumnCount] = getColumns(width, columnWidth, columnGutter, columnCount);
+    const [computedColumnWidth, computedColumnCount] = getColumns(width, columnWidth, columnGutter, columnCount, maxColumnCount);
     return createPositioner(computedColumnCount, computedColumnWidth, columnGutter, rowGutter !== null && rowGutter !== void 0 ? rowGutter : columnGutter);
@@ -43,3 +45,3 @@ };
   const prevDeps = React.useRef(deps);
-  const opts = [width, columnWidth, columnGutter, rowGutter, columnCount];
+  const opts = [width, columnWidth, columnGutter, rowGutter, columnCount, maxColumnCount];
   const prevOpts = React.useRef(opts);
@@ -214,3 +216,3 @@ const optsChanged = !opts.every((item, i) => prevOpts.current[i] === item);
 
-const getColumns = function (width, minimumWidth, gutter, columnCount) {
+const getColumns = function (width, minimumWidth, gutter, columnCount, maxColumnCount) {
   if (width === void 0) {
@@ -228,3 +230,3 @@ width = 0;
 
-  columnCount = columnCount || Math.floor((width + gutter) / (minimumWidth + gutter)) || 1;
+  columnCount = columnCount || Math.min(Math.floor((width + gutter) / (minimumWidth + gutter)), maxColumnCount || Infinity) || 1;
   const columnWidth = Math.floor((width - gutter * (columnCount - 1)) / columnCount);
@@ -231,0 +233,0 @@ return [columnWidth, columnCount];

dist/umd/masonic.js

@@ -1,2 +0,2 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Masonic={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:1,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}function i(e){var t=e.high;e.L===ee&&e.R===ee?e.max=t:e.L===ee?e.max=Math.max(e.R.max,t):e.R===ee?e.max=Math.max(e.L.max,t):e.max=Math.max(Math.max(e.L.max,e.R.max),t)}function o(e){for(var t=e;t.P!==ee;)i(t.P),t=t.P}function u(e,t){if(t.R!==ee){var n=t.R;t.R=n.L,n.L!==ee&&(n.L.P=t),n.P=t.P,t.P===ee?e.root=n:t===t.P.L?t.P.L=n:t.P.R=n,n.L=t,t.P=n,i(t),i(n)}}function s(e,t){if(t.L!==ee){var n=t.L;t.L=n.R,n.R!==ee&&(n.R.P=t),n.P=t.P,t.P===ee?e.root=n:t===t.P.R?t.P.R=n:t.P.L=n,n.R=t,t.P=n,i(t),i(n)}}function c(e,t,n){t.P===ee?e.root=n:t===t.P.L?t.P.L=n:t.P.R=n,n.P=t.P}function a(){var e={root:ee,size:0},t={};return{insert:function(n,r,c){for(var a=e.root,f=ee;a!==ee&&n!==(f=a).low;)a=n<a.low?a.L:a.R;if(n===f.low&&f!==ee){if(!function(e,t,n){for(var r,i=e.list;i;){if(i.index===n)return 0;if(t>i.high)break;r=i,i=i.next}return r||(e.list={index:n,high:t,next:i}),r&&(r.next={index:n,high:t,next:r.next}),1}(f,r,c))return;return f.high=Math.max(f.high,r),i(f),o(f),t[c]=f,void e.size++}var l={low:n,high:r,max:r,C:0,P:f,L:ee,R:ee,list:{index:c,high:r,next:null}};f===ee?e.root=l:(l.low<f.low?f.L=l:f.R=l,o(l)),function(e,t){for(var n;0===t.P.C;)t.P===t.P.P.L?0===(n=t.P.P.R).C?(t.P.C=1,n.C=1,t.P.P.C=0,t=t.P.P):(t===t.P.R&&u(e,t=t.P),t.P.C=1,t.P.P.C=0,s(e,t.P.P)):0===(n=t.P.P.L).C?(t.P.C=1,n.C=1,t.P.P.C=0,t=t.P.P):(t===t.P.L&&s(e,t=t.P),t.P.C=1,t.P.P.C=0,u(e,t.P.P));e.root.C=1}(e,l),t[c]=l,e.size++},remove:function(n){var r=t[n];if(void 0!==r){delete t[n];var a=function(e,t){var n=e.list;if(n.index===t)return null===n.next?0:(e.list=n.next,1);var r=n;for(n=n.next;null!==n;){if(n.index===t)return r.next=n.next,1;r=n,n=n.next}}(r,n);if(void 0!==a){if(1===a)return r.high=r.list.high,i(r),o(r),void e.size--;var f,l=r,d=l.C;r.L===ee?(f=r.R,c(e,r,r.R)):r.R===ee?(f=r.L,c(e,r,r.L)):(d=(l=function(e){for(;e.L!==ee;)e=e.L;return e}(r.R)).C,f=l.R,l.P===r?f.P=l:(c(e,l,l.R),l.R=r.R,l.R.P=l),c(e,r,l),l.L=r.L,l.L.P=l,l.C=r.C),i(f),o(f),1===d&&function(e,t){for(var n;t!==ee&&1===t.C;)t===t.P.L?(0===(n=t.P.R).C&&(n.C=1,t.P.C=0,u(e,t.P),n=t.P.R),1===n.L.C&&1===n.R.C?(n.C=0,t=t.P):(1===n.R.C&&(n.L.C=1,n.C=0,s(e,n),n=t.P.R),n.C=t.P.C,t.P.C=1,n.R.C=1,u(e,t.P),t=e.root)):(0===(n=t.P.L).C&&(n.C=1,t.P.C=0,s(e,t.P),n=t.P.L),1===n.R.C&&1===n.L.C?(n.C=0,t=t.P):(1===n.L.C&&(n.R.C=1,n.C=0,u(e,n),n=t.P.L),n.C=t.P.C,t.P.C=1,n.L.C=1,s(e,t.P),t=e.root));t.C=1}(e,f),e.size--}}},search:function(t,n,r){for(var i=[e.root];0!==i.length;){var o=i.pop();if(o!==ee&&t<=o.max&&(o.L!==ee&&i.push(o.L),o.R!==ee&&i.push(o.R),o.low<=n&&o.high>=t))for(var u=o.list;null!==u;)u.high<t||r(u.index,o.low),u=u.next}},get size(){return e.size}}}function f(){return(f=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t,n,r){var i=Z.useRef(n),o=Z.useRef(r);re((function(){i.current=n,o.current=r})),re((function(){function n(){if(!u){for(var e=arguments.length,t=new Array(e),n=0;e>n;n++)t[n]=arguments[n];i.current.apply(this,t)}}var r=e&&"current"in e?e.current:e;if(r){var u=0;r.addEventListener(t,n);var s=o.current;return function(){u=1,r.removeEventListener(t,n),s&&s()}}}),[e,t])}function d(){var e=Z.useState(ve)[1];return Z.useRef((function(){return e({})})).current}function v(e){var t,n=e.positioner,r=e.resizeObserver,i=e.items,o=e.as,u=void 0===o?"div":o,s=e.id,c=e.className,a=e.style,l=e.role,v=void 0===l?"grid":l,p=e.tabIndex,g=void 0===p?0:p,m=e.containerRef,b=e.itemAs,x=void 0===b?"div":b,w=e.itemStyle,y=e.itemHeightEstimate,P=void 0===y?300:y,R=e.itemKey,T=void 0===R?h:R,C=e.overscanBy,E=void 0===C?2:C,z=e.scrollTop,L=e.isScrolling,S=e.height,M=e.render,O=e.onRender,B=0,k=d(),I=ye(n,r),W=i.length,A=n.columnWidth,N=n.columnCount,H=n.range,j=n.estimateHeight,D=n.size,_=n.shortestColumn,F=D(),X=_(),q=[],G="list"===v?"listitem":"grid"===v?"gridcell":void 0,V=te(O),Y=z+(E*=S),K=Y>X&&W>F;if(H(Math.max(0,z-E/2),Y,(function(e,n,r){var o=i[e],u=T(o,e),s={top:r,left:n,width:A,writingMode:"horizontal-tb",position:"absolute"};q.push(he(x,{key:u,ref:I(e),role:G,style:"object"==typeof w&&null!==w?f({},s,w):s},ge(M,e,o,A))),void 0===t?(B=e,t=e):(B=Math.min(B,e),t=Math.max(t,e))})),K)for(var J=Math.min(W-F,Math.ceil((z+E-X)/P*N)),U=F,Q=we(A);F+J>U;U++){var $=i[U],ee=T($,U);q.push(he(x,{key:ee,ref:I(U),role:G,style:"object"==typeof w?f({},Q,w):Q},ge(M,U,$,A)))}Z.useEffect((function(){"function"==typeof V.current&&void 0!==t&&V.current(B,t,i),pe="1"}),[B,t,i,V]),Z.useEffect((function(){K&&k()}),[K,n]);var ne=me(L,j(W,P));return he(u,{ref:m,key:pe,id:s,role:v,className:c,tabIndex:g,style:"object"==typeof a?xe(ne,a):ne,children:q})}function h(e,t){return t}function p(e,t,n){function r(){u.current=0,c()}void 0===t&&(t=30),void 0===n&&(n=0);var i=te(e),o=1e3/t,u=Z.useRef(0),s=Z.useRef(),c=function(){return s.current&&clearTimeout(s.current)},a=[t,n,i];return Z.useEffect((function(){return r}),a),Z.useCallback((function(){var e=arguments,t=Ie(),r=function(){u.current=t,c(),i.current.apply(null,e)},a=u.current;if(n&&0===a)return r();if(t-a>o){if(a>0)return r();u.current=t}c(),s.current=setTimeout((function(){r(),u.current=0}),o)}),a)}function g(e,t){void 0===e&&(e=0),void 0===t&&(t=12);var n=Ne(t),r=Z.useState(0),i=r[0],o=r[1],u=Z.useRef(0);return Z.useEffect((function(){1===u.current&&o(1);var e,n,r,i,s=0,c=(e=function(){s||o(0)},n=40+1e3/t,r=Ce(),(i={}).v=Se((function t(){Ce()-r<n?i.v=Se(t):e.call(null)})),i);return u.current=1,function(){s=1,function(e){Me(e.v||-1)}(c)}}),[t,n]),{scrollTop:Math.max(0,n-e),isScrolling:i}}function m(e){var t=g(e.offset,e.scrollFps);return v({scrollTop:t.scrollTop,isScrolling:t.isScrolling,positioner:e.positioner,resizeObserver:e.resizeObserver,items:e.items,onRender:e.onRender,as:e.as,id:e.id,className:e.className,style:e.style,role:e.role,tabIndex:e.tabIndex,containerRef:e.containerRef,itemAs:e.itemAs,itemStyle:e.itemStyle,itemHeightEstimate:e.itemHeightEstimate,itemKey:e.itemKey,overscanBy:e.overscanBy,height:e.height,render:e.render})}function b(e,t){void 0===t&&(t=He);var n=Z.useState({offset:0,width:0}),r=n[0],i=n[1];return re((function(){var t=e.current;if(null!==t){var n=0,o=t;do{n+=o.offsetTop||0,o=o.offsetParent}while(o);n===r.offset&&t.offsetWidth===r.width||i({offset:n,width:t.offsetWidth})}}),t),r}function x(e,t){var n=e.width,r=e.columnWidth,i=void 0===r?200:r,o=e.columnGutter,u=void 0===o?0:o,s=e.rowGutter,c=e.columnCount;void 0===t&&(t=Fe);var a=function(){var e=_e(n,i,u,c),t=e[0],r=e[1];return je(r,t,u,null!=s?s:u)},f=Z.useRef();void 0===f.current&&(f.current=a());var l=Z.useRef(t),d=[n,i,u,s,c],v=Z.useRef(d),h=!d.every((function(e,t){return v.current[t]===e}));if(h||!t.every((function(e,t){return l.current[t]===e}))){var p=f.current,g=a();if(l.current=t,v.current=d,h)for(var m=p.size(),b=0;m>b;b++){var x=p.get(b);g.set(b,void 0!==x?x.height:0)}f.current=g}return f.current}function w(e){return e.activeTargets.length>0}function y(e){return e.skippedTargets.length>0}function P(e,t){this.inlineSize=e,this.blockSize=t,Ye(this)}function R(e,t,n,r){return this.x=e,this.y=t,this.width=n,this.height=r,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,Ye(this)}function T(){var e=this;return{x:e.x,y:e.y,top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height}}function C(e){return new R(e.x,e.y,e.width,e.height)}function E(e){var t=st(e);this.target=e,this.contentRect=t.contentRect,this.borderBoxSize=Ye([t.borderBoxSize]),this.contentBoxSize=Ye([t.contentBoxSize]),this.devicePixelContentBoxSize=Ye([t.devicePixelContentBoxSize])}function z(e){return e()}function L(){return vt.splice(0).forEach(z)}function S(){var e=this;this.stopped=1,this.listener=function(){return e.schedule()}}function M(e){var t=this;if(void 0===e&&(e=250),!bt){bt=1;var n,r=mt(e);n=function(){var n=0;try{n=function(){var e,t=0;for(dt(t);qe();)t=lt(),dt(t);return Xe.some(y)&&("function"==typeof ErrorEvent?e=new ErrorEvent("error",{message:Ge}):((e=document.createEvent("Event")).initEvent("error",0,0),e.message=Ge),window.dispatchEvent(e)),t>0}()}finally{if(bt=0,e=r-mt(),!ht)return;n?t.run(1e3):e>0?t.run(e):t.start()}},function(){if(!Ve){var e=0,t=document.createTextNode("");new MutationObserver(L).observe(t,{characterData:1}),Ve=function(){t.textContent=""+(e?e--:e++)}}vt.push((function(){requestAnimationFrame(n)})),Ve()}()}}function O(){this.stop(),this.run()}function B(){var e=this,t=function(){return e.observer&&e.observer.observe(document.body,pt)};document.body?t():$e.addEventListener("DOMContentLoaded",t)}function k(){var e=this;this.stopped&&(this.stopped=0,this.observer=new MutationObserver(this.listener),this.observe(),gt.forEach((function(t){return $e.addEventListener(t,e.listener,1)})))}function I(){var e=this;this.stopped||(this.observer&&this.observer.disconnect(),gt.forEach((function(t){return $e.removeEventListener(t,e.listener,1)})),this.stopped=1)}function W(e,t){this.target=e,this.observedBox=t||Be.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}function A(){var e,t=ct(this.target,this.observedBox,1);return e=this.target,Ue(e)||function(e){switch(e.tagName){case"INPUT":if("image"!==e.type)break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return 1}return 0}(e)||"inline"!==getComputedStyle(e).display||(this.lastReportedSize=t),this.lastReportedSize.inlineSize!==t.inlineSize||this.lastReportedSize.blockSize!==t.blockSize?1:0}function N(e,t){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=e,this.callback=t}function H(){}function j(e,t){var n=new Pt(e,t);Rt.set(e,n)}function D(e,t,n){var r=Rt.get(e),i=0===r.observationTargets.length;0>Tt(r.observationTargets,t)&&(i&&Xe.push(r),r.observationTargets.push(new yt(t,n&&n.box)),wt(1),xt.schedule())}function _(e,t){var n=Rt.get(e),r=Tt(n.observationTargets,t),i=1===n.observationTargets.length;0>r||(i&&Xe.splice(Xe.indexOf(n),1),n.observationTargets.splice(r,1),wt(-1))}function F(e){var t=this,n=Rt.get(e);n.observationTargets.slice().forEach((function(n){return t.unobserve(e,n.target)})),n.activeTargets.splice(0,n.activeTargets.length)}function X(e){if(0===arguments.length)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if("function"!=typeof e)throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");Ct.connect(this,e)}function q(e,t){if(0===arguments.length)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Ze(e))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");Ct.observe(this,e,t)}function G(e){if(0===arguments.length)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Ze(e))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");Ct.unobserve(this,e)}function V(){Ct.disconnect(this)}function Y(){return"function ResizeObserver () { [polyfill code] }"}function K(e){function t(){return r.disconnect()}var n=d(),r=St(e,n);return Z.useEffect((function(){return t}),[r]),r}function J(e){e.cancel()}function U(e,t){var n,r=t.align,i=void 0===r?"top":r,o=t.element,u=void 0===o?"undefined"!=typeof window&&window:o,s=t.offset,c=void 0===s?0:s,a=t.height,f=void 0===a?"undefined"!=typeof window?window.innerHeight:0:a,d=te({positioner:e,element:u,align:i,offset:c,height:f}),v=Z.useRef((function(){var e=d.current.element;return e&&"current"in e?e.current:e})).current,h=Z.useReducer((function(e,t){var n,r={position:e.position,index:e.index,prevTop:e.prevTop};if("scrollToIndex"===t.type)return{position:d.current.positioner.get(null!==(n=t.value)&&void 0!==n?n:-1),index:t.value,prevTop:void 0};if("setPosition"===t.type)r.position=t.value;else if("setPrevTop"===t.type)r.prevTop=t.value;else if("reset"===t.type)return Mt;return r}),Mt),g=h[0],m=h[1],b=p(m,15);l(v(),"scroll",(function(){if(!g.position&&g.index){var e=d.current.positioner.get(g.index);e&&m({type:"setPosition",value:e})}}));var x=void 0!==g.index&&(null===(n=d.current.positioner.get(g.index))||void 0===n?void 0:n.top);return Z.useEffect((function(){var e=v();if(e){var t=d.current,n=t.height,r=t.align,i=t.offset,o=t.positioner;if(g.position){var u=g.position.top;"bottom"===r?u=u-n+g.position.height:"center"===r&&(u-=(n-g.position.height)/2),e.scrollTo(0,Math.max(0,u+=i));var s=0,c=setTimeout((function(){return!s&&m({type:"reset"})}),400);return function(){s=1,clearTimeout(c)}}if(void 0!==g.index){var a=o.shortestColumn()/o.size()*g.index;g.prevTop&&(a=Math.max(a,g.prevTop+n)),e.scrollTo(0,a),b({type:"setPrevTop",value:a})}}}),[x,g,d,v,b]),Z.useRef((function(e){m({type:"scrollToIndex",value:e})})).current}function Q(e){var t=Z.useRef(null),n=function(e){void 0===e&&(e=ie);var t=e,n=t.wait,r=t.leading,i=t.initialWidth,o=void 0===i?0:i,u=t.initialHeight,s=function(e,t,n){var r=Z.useState(e);return[r[0],ne(r[1],t,n)]}("undefined"==typeof document?[o,void 0===u?0:u]:ue,n,r),c=s[0],a=s[1],f=function(){return a(ue)};return l(oe,"resize",f),l(oe,"orientationchange",f),c}({initialWidth:e.ssrWidth,initialHeight:e.ssrHeight}),r=b(t,n),i=f({offset:r.offset,width:r.width||n[0],height:n[1],containerRef:t},e);i.positioner=x(i),i.resizeObserver=K(i.positioner);var o=U(i.positioner,{height:i.height,offset:r.offset,align:"object"==typeof e.scrollToIndex?e.scrollToIndex.align:void 0}),u=e.scrollToIndex&&("number"==typeof e.scrollToIndex?e.scrollToIndex:e.scrollToIndex.index);return Z.useEffect((function(){void 0!==u&&o(u)}),[u,o]),Ot(m,i)}var Z=r(t),$=n(t),ee={low:0,max:0,high:0,C:2,P:void 0,R:void 0,L:void 0,list:void 0};ee.P=ee,ee.L=ee,ee.R=ee;var te=function(e){var t=Z.useRef(e);return Z.useEffect((function(){t.current=e})),t},ne=function(e,t,n){function r(){u.current&&clearTimeout(u.current),u.current=void 0}function i(){u.current=void 0}void 0===t&&(t=100),void 0===n&&(n=0);var o=te(e),u=Z.useRef(),s=[t,n,o];return Z.useEffect((function(){return r}),s),Z.useCallback((function(){var e=arguments,r=u.current;if(void 0===r&&n)return u.current=setTimeout(i,t),o.current.apply(null,e);r&&clearTimeout(r),u.current=setTimeout((function(){u.current=void 0,o.current.apply(null,e)}),t)}),s)},re=$.default["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],ie={},oe="undefined"==typeof window?null:window,ue=function(){return[document.documentElement.clientWidth,document.documentElement.clientHeight]},se=function(e,t){var n,r,i=t||ce;return function(){return n&&i(arguments,n)?r:r=e.apply(null,n=arguments)}},ce=function(e,t){return e[0]===t[0]&&e[1]===t[1]&&e[2]===t[2]&&e[3]===t[3]},ae=function(){var e,t;this.set=void 0,this.get=void 0,this.get=function(n){return n===e?t:void 0},this.set=function(n,r){e=n,t=r}},fe=function(e){try{return new e}catch(e){var t={};return{set:function(e,n){t[e]=n},get:function(e){return t[e]}}}},le=function(e,t){var n,r,i,o,u,s,c,a,f,l=(c=(r=e).length,a=fe(r[0]),f=1===c,3>c?{g:function(e){return void 0===(i=a.get(e[0]))||f?i:i.get(e[1])},s:function(e,t){return f?a.set(e[0],t):void 0===(i=a.get(e[0]))?((o=fe(r[1])).set(e[1],t),a.set(e[0],o)):i.set(e[1],t),t}}:{g:function(e){for(s=a,u=0;c>u;u++)if(void 0===(s=s.get(e[u])))return;return s},s:function(e,t){for(s=a,u=0;c-1>u;u++)void 0===(o=s.get(e[u]))?(o=fe(r[u+1]),s.set(e[u],o),s=o):s=o;return s.set(e[c-1],t),t}}),d=l.g,v=l.s;return function(){return void 0===(n=d(arguments))?v(arguments,t.apply(null,arguments)):n}},de=new WeakMap,ve={},he=Z.createElement,pe="0",ge=le([ae,{},WeakMap,ae],(function(e,t,n,r){return he(e,{index:t,data:n,width:r})})),me=se((function(e,t){return{position:"relative",width:"100%",maxWidth:"100%",height:Math.ceil(t),maxHeight:Math.ceil(t),willChange:e?"contents":void 0,pointerEvents:e?"none":void 0}})),be=function(e,t){return e[0]===t[0]&&e[1]===t[1]},xe=se((function(e,t){return f({},e,t)}),be),we=se((function(e){return{width:e,zIndex:-1e3,visibility:"hidden",position:"absolute",writingMode:"horizontal-tb"}}),(function(e,t){return e[0]===t[0]})),ye=se((function(e,t){return function(n){return function(r){null!==r&&(t&&(t.observe(r),de.set(r,n)),void 0===e.get(n)&&e.set(n,r.offsetHeight))}}}),be),Pe="undefined",Re=typeof window!==Pe?window:{},Te=typeof performance!==Pe?performance:Date,Ce=function(){return Te.now()},Ee="AnimationFrame",ze="cancel"+Ee,Le="request"+Ee,Se=Re[Le]&&Re[Le].bind(Re),Me=Re[ze]&&Re[ze].bind(Re);if(!Se||!Me){var Oe=0;Se=function(e){var t=Ce(),n=Math.max(Oe+1e3/60,t);return setTimeout((function(){e(Oe=n)}),n-t)},Me=function(e){return clearTimeout(e)}}var Be,ke="undefined"!=typeof performance?performance:Date,Ie=function(){return ke.now()},We="undefined"==typeof window?null:window,Ae=function(){return void 0!==We.scrollY?We.scrollY:void 0===We.pageYOffset?0:We.pageYOffset},Ne=function(e){void 0===e&&(e=30);var t=function(e,t){var n=Z.useState(e);return[n[0],p(n[1],t,1)]}("undefined"==typeof window?0:Ae,e);return l(We,"scroll",(function(){return t[1](Ae())})),t[0]},He=[],je=function(e,t,n,r){void 0===n&&(n=0),void 0===r&&(r=n);for(var i=a(),o=new Array(e),u=[],s=new Array(e),c=0;e>c;c++)o[c]=0,s[c]=[];return{columnCount:e,columnWidth:t,set:function(e,c){void 0===c&&(c=0);for(var a=0,f=1;f<o.length;f++)o[f]<o[a]&&(a=f);var l=o[a]||0;o[a]=l+c+r,s[a].push(e),u[e]={left:a*(t+n),top:l,height:c,column:a},i.insert(l,l+c,e)},get:function(e){return u[e]},update:function(t){for(var n=new Array(e),c=0,a=0;c<t.length-1;c++){var f=t[c],l=u[f];l.height=t[++c],i.remove(f),i.insert(l.top,l.top+l.height,f),n[l.column]=void 0===n[l.column]?f:Math.min(f,n[l.column])}for(c=0;c<n.length;c++)if(void 0!==n[c]){var d=s[c],v=De(d,n[c]),h=s[c][v],p=u[h];for(o[c]=p.top+p.height+r,a=v+1;a<d.length;a++){var g=d[a],m=u[g];m.top=o[c],o[c]=m.top+m.height+r,i.remove(g),i.insert(m.top,m.top+m.height,g)}}},range:function(e,t,n){return i.search(e,t,(function(e,t){return n(e,u[e].left,t)}))},estimateHeight:function(t,n){var r=Math.max(0,Math.max.apply(null,o));return t===i.size?r:r+Math.ceil((t-i.size)/e)*n},shortestColumn:function(){return o.length>1?Math.min.apply(null,o):o[0]||0},size:function(){return i.size},all:function(){return u}}},De=function(e,t){for(var n=0,r=e.length-1;r>=n;){var i=n+r>>>1,o=e[i];if(o===t)return i;o>t?r=i-1:n=i+1}return-1},_e=function(e,t,n,r){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===n&&(n=8),r=r||Math.floor((e+n)/(t+n))||1,[Math.floor((e-n*(r-1))/r),r]},Fe=[],Xe=[],qe=function(){return Xe.some(w)},Ge="ResizeObserver loop completed with undelivered notifications.";!function(e){e.BORDER_BOX="border-box",e.CONTENT_BOX="content-box",e.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"}(Be||(Be={}));var Ve,Ye=function(e){return Object.freeze(e)},Ke=function(){return P}(),Je=function(){return R.prototype.toJSON=T,R.fromRect=C,R}(),Ue=function(e){return e instanceof SVGElement&&"getBBox"in e},Qe=function(e){if(Ue(e)){var t=e.getBBox(),n=t.width,r=t.height;return!n&&!r}var i=e,o=i.offsetWidth,u=i.offsetHeight;return!(o||u||e.getClientRects().length)},Ze=function(e){var t,n;if(e instanceof Element)return 1;var r=null===(n=null===(t=e)||void 0===t?void 0:t.ownerDocument)||void 0===n?void 0:n.defaultView;return!!(r&&e instanceof r.Element)},$e="undefined"!=typeof window?window:{},et=new WeakMap,tt=/auto|scroll/,nt=/^tb|vertical/,rt=/msie|trident/i.test($e.navigator&&$e.navigator.userAgent),it=function(e){return parseFloat(e||"0")},ot=function(e,t,n){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===n&&(n=0),new Ke((n?t:e)||0,(n?e:t)||0)},ut=Ye({devicePixelContentBoxSize:ot(),borderBoxSize:ot(),contentBoxSize:ot(),contentRect:new Je(0,0,0,0)}),st=function(e,t){if(void 0===t&&(t=0),et.has(e)&&!t)return et.get(e);if(Qe(e))return et.set(e,ut),ut;var n=getComputedStyle(e),r=Ue(e)&&e.ownerSVGElement&&e.getBBox(),i=!rt&&"border-box"===n.boxSizing,o=nt.test(n.writingMode||""),u=!r&&tt.test(n.overflowY||""),s=!r&&tt.test(n.overflowX||""),c=r?0:it(n.paddingTop),a=r?0:it(n.paddingRight),f=r?0:it(n.paddingBottom),l=r?0:it(n.paddingLeft),d=r?0:it(n.borderTopWidth),v=r?0:it(n.borderRightWidth),h=r?0:it(n.borderBottomWidth),p=l+a,g=c+f,m=(r?0:it(n.borderLeftWidth))+v,b=d+h,x=s?e.offsetHeight-b-e.clientHeight:0,w=u?e.offsetWidth-m-e.clientWidth:0,y=i?p+m:0,P=i?g+b:0,R=r?r.width:it(n.width)-y-w,T=r?r.height:it(n.height)-P-x,C=R+p+w+m,E=T+g+x+b,z=Ye({devicePixelContentBoxSize:ot(Math.round(R*devicePixelRatio),Math.round(T*devicePixelRatio),o),borderBoxSize:ot(C,E,o),contentBoxSize:ot(R,T,o),contentRect:new Je(l,c,R,T)});return et.set(e,z),z},ct=function(e,t,n){var r=st(e,n),i=r.borderBoxSize,o=r.contentBoxSize,u=r.devicePixelContentBoxSize;switch(t){case Be.DEVICE_PIXEL_CONTENT_BOX:return u;case Be.BORDER_BOX:return i;default:return o}},at=function(){return E}(),ft=function(e){if(Qe(e))return 1/0;for(var t=0,n=e.parentNode;n;)t+=1,n=n.parentNode;return t},lt=function(){var e=1/0,t=[];Xe.forEach((function(n){if(0!==n.activeTargets.length){var r=[];n.activeTargets.forEach((function(t){var n=new at(t.target),i=ft(t.target);r.push(n),t.lastReportedSize=ct(t.target,t.observedBox),e>i&&(e=i)})),t.push((function(){n.callback.call(n.observer,r,n.observer)})),n.activeTargets.splice(0,n.activeTargets.length)}}));for(var n=0,r=t;n<r.length;n++)(0,r[n])();return e},dt=function(e){Xe.forEach((function(t){t.activeTargets.splice(0,t.activeTargets.length),t.skippedTargets.splice(0,t.skippedTargets.length),t.observationTargets.forEach((function(n){n.isActive()&&(ft(n.target)>e?t.activeTargets.push(n):t.skippedTargets.push(n))}))}))},vt=[],ht=0,pt={attributes:1,characterData:1,childList:1,subtree:1},gt=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],mt=function(e){return void 0===e&&(e=0),Date.now()+e},bt=0,xt=new(function(){return S.prototype.run=M,S.prototype.schedule=O,S.prototype.observe=B,S.prototype.start=k,S.prototype.stop=I,S}()),wt=function(e){!ht&&e>0&&xt.start(),!(ht+=e)&&xt.stop()},yt=function(){return W.prototype.isActive=A,W}(),Pt=function(){return N}(),Rt=new WeakMap,Tt=function(e,t){for(var n=0;n<e.length;n+=1)if(e[n].target===t)return n;return-1},Ct=function(){return H.connect=j,H.observe=D,H.unobserve=_,H.disconnect=F,H}(),Et=function(){return X.prototype.observe=q,X.prototype.unobserve=G,X.prototype.disconnect=V,X.toString=Y,X}(),zt=function(e){function t(){r=null,e.apply(void 0,n)}var n=[],r=null,i=function(){for(var e=arguments.length,i=new Array(e),o=0;e>o;o++)i[o]=arguments[o];n=i,r||(r=requestAnimationFrame(t))};return i.cancel=function(){r&&(cancelAnimationFrame(r),r=null)},i},Lt="undefined"!=typeof window&&"ResizeObserver"in window?window.ResizeObserver:Et,St=le([WeakMap],(function(e,t){var n=[],r=zt((function(){n.length>0&&(e.update(n),t(n)),n.length=0})),i=function(t){var i=t.offsetHeight;if(i>0){var o=de.get(t);if(void 0!==o){var u=e.get(o);void 0!==u&&i!==u.height&&n.push(o,i)}}r()},o=new Map,u=new Lt((function(e){for(var t=0;t<e.length;t++){var n=e[t],r=de.get(n.target);if(void 0!==r){var u=o.get(r);u||(u=zt(i),o.set(r,u)),u(n.target)}}})),s=u.disconnect.bind(u);return u.disconnect=function(){s(),o.forEach(J)},u})),Mt={index:void 0,position:void 0,prevTop:void 0},Ot=Z.createElement,Bt=Z.createElement,kt=function(e,t){return void 0!==t[e]},It={};e.List=function(e){return Bt(Q,f({role:"list",rowGutter:e.rowGutter,columnCount:1,columnWidth:1},e))},e.Masonry=Q,e.MasonryScroller=m,e.createIntervalTree=a,e.createPositioner=je,e.createResizeObserver=St,e.useContainerPosition=b,e.useInfiniteLoader=function(e,t){void 0===t&&(t=It);var n=t,r=n.isItemLoaded,i=n.minimumBatchSize,o=void 0===i?16:i,u=n.threshold,s=void 0===u?16:u,c=n.totalItems,a=void 0===c?9e9:c,f=te(e),l=te(r);return Z.useCallback((function(e,t,n){for(var r=function(e,t,n,r,i,o){void 0===e&&(e=kt),void 0===t&&(t=16),void 0===r&&(r=9e9);for(var u,s,c=[],a=i;o>=a;a++)e(a,n)?void 0!==u&&void 0!==s&&(c.push(u,s),u=s=void 0):(s=a,void 0===u&&(u=a));if(void 0!==u&&void 0!==s){var f=Math.min(Math.max(s,u+t-1),r-1);for(a=s+1;f>=a&&!e(a,n);a++)s=a;c.push(u,s)}if(c.length)for(var l=c[0],d=c[1];t>d-l+1&&l>0;){var v=l-1;if(e(v,n))break;c[0]=l=v}return c}(l.current,o,n,a,Math.max(0,e-s),Math.min(a-1,(t||0)+s)),i=0;i<r.length-1;++i)f.current(r[i],r[++i],n)}),[a,o,s,f,l])},e.useMasonry=v,e.usePositioner=x,e.useResizeObserver=K,e.useScrollToIndex=U,e.useScroller=g,Object.defineProperty(e,"__esModule",{value:1})}));
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).Masonic={},e.React)}(this,(function(e,t){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}function r(e){if(e&&e.__esModule)return e;var t=Object.create(null);return e&&Object.keys(e).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(e,n);Object.defineProperty(t,n,r.get?r:{enumerable:1,get:function(){return e[n]}})}})),t.default=e,Object.freeze(t)}function i(e){var t=e.high;e.L===ee&&e.R===ee?e.max=t:e.L===ee?e.max=Math.max(e.R.max,t):e.R===ee?e.max=Math.max(e.L.max,t):e.max=Math.max(Math.max(e.L.max,e.R.max),t)}function o(e){for(var t=e;t.P!==ee;)i(t.P),t=t.P}function u(e,t){if(t.R!==ee){var n=t.R;t.R=n.L,n.L!==ee&&(n.L.P=t),n.P=t.P,t.P===ee?e.root=n:t===t.P.L?t.P.L=n:t.P.R=n,n.L=t,t.P=n,i(t),i(n)}}function s(e,t){if(t.L!==ee){var n=t.L;t.L=n.R,n.R!==ee&&(n.R.P=t),n.P=t.P,t.P===ee?e.root=n:t===t.P.R?t.P.R=n:t.P.L=n,n.R=t,t.P=n,i(t),i(n)}}function c(e,t,n){t.P===ee?e.root=n:t===t.P.L?t.P.L=n:t.P.R=n,n.P=t.P}function a(){var e={root:ee,size:0},t={};return{insert:function(n,r,c){for(var a=e.root,f=ee;a!==ee&&n!==(f=a).low;)a=n<a.low?a.L:a.R;if(n===f.low&&f!==ee){if(!function(e,t,n){for(var r,i=e.list;i;){if(i.index===n)return 0;if(t>i.high)break;r=i,i=i.next}return r||(e.list={index:n,high:t,next:i}),r&&(r.next={index:n,high:t,next:r.next}),1}(f,r,c))return;return f.high=Math.max(f.high,r),i(f),o(f),t[c]=f,void e.size++}var l={low:n,high:r,max:r,C:0,P:f,L:ee,R:ee,list:{index:c,high:r,next:null}};f===ee?e.root=l:(l.low<f.low?f.L=l:f.R=l,o(l)),function(e,t){for(var n;0===t.P.C;)t.P===t.P.P.L?0===(n=t.P.P.R).C?(t.P.C=1,n.C=1,t.P.P.C=0,t=t.P.P):(t===t.P.R&&u(e,t=t.P),t.P.C=1,t.P.P.C=0,s(e,t.P.P)):0===(n=t.P.P.L).C?(t.P.C=1,n.C=1,t.P.P.C=0,t=t.P.P):(t===t.P.L&&s(e,t=t.P),t.P.C=1,t.P.P.C=0,u(e,t.P.P));e.root.C=1}(e,l),t[c]=l,e.size++},remove:function(n){var r=t[n];if(void 0!==r){delete t[n];var a=function(e,t){var n=e.list;if(n.index===t)return null===n.next?0:(e.list=n.next,1);var r=n;for(n=n.next;null!==n;){if(n.index===t)return r.next=n.next,1;r=n,n=n.next}}(r,n);if(void 0!==a){if(1===a)return r.high=r.list.high,i(r),o(r),void e.size--;var f,l=r,d=l.C;r.L===ee?(f=r.R,c(e,r,r.R)):r.R===ee?(f=r.L,c(e,r,r.L)):(d=(l=function(e){for(;e.L!==ee;)e=e.L;return e}(r.R)).C,f=l.R,l.P===r?f.P=l:(c(e,l,l.R),l.R=r.R,l.R.P=l),c(e,r,l),l.L=r.L,l.L.P=l,l.C=r.C),i(f),o(f),1===d&&function(e,t){for(var n;t!==ee&&1===t.C;)t===t.P.L?(0===(n=t.P.R).C&&(n.C=1,t.P.C=0,u(e,t.P),n=t.P.R),1===n.L.C&&1===n.R.C?(n.C=0,t=t.P):(1===n.R.C&&(n.L.C=1,n.C=0,s(e,n),n=t.P.R),n.C=t.P.C,t.P.C=1,n.R.C=1,u(e,t.P),t=e.root)):(0===(n=t.P.L).C&&(n.C=1,t.P.C=0,s(e,t.P),n=t.P.L),1===n.R.C&&1===n.L.C?(n.C=0,t=t.P):(1===n.L.C&&(n.R.C=1,n.C=0,u(e,n),n=t.P.L),n.C=t.P.C,t.P.C=1,n.L.C=1,s(e,t.P),t=e.root));t.C=1}(e,f),e.size--}}},search:function(t,n,r){for(var i=[e.root];0!==i.length;){var o=i.pop();if(o!==ee&&t<=o.max&&(o.L!==ee&&i.push(o.L),o.R!==ee&&i.push(o.R),o.low<=n&&o.high>=t))for(var u=o.list;null!==u;)u.high<t||r(u.index,o.low),u=u.next}},get size(){return e.size}}}function f(){return(f=Object.assign||function(e){for(var t=1;arguments.length>t;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(this,arguments)}function l(e,t,n,r){var i=Z.useRef(n),o=Z.useRef(r);re((function(){i.current=n,o.current=r})),re((function(){function n(){if(!u){for(var e=arguments.length,t=new Array(e),n=0;e>n;n++)t[n]=arguments[n];i.current.apply(this,t)}}var r=e&&"current"in e?e.current:e;if(r){var u=0;r.addEventListener(t,n);var s=o.current;return function(){u=1,r.removeEventListener(t,n),s&&s()}}}),[e,t])}function d(){var e=Z.useState(ve)[1];return Z.useRef((function(){return e({})})).current}function v(e){var t,n=e.positioner,r=e.resizeObserver,i=e.items,o=e.as,u=void 0===o?"div":o,s=e.id,c=e.className,a=e.style,l=e.role,v=void 0===l?"grid":l,p=e.tabIndex,g=void 0===p?0:p,m=e.containerRef,b=e.itemAs,x=void 0===b?"div":b,w=e.itemStyle,y=e.itemHeightEstimate,P=void 0===y?300:y,R=e.itemKey,T=void 0===R?h:R,C=e.overscanBy,E=void 0===C?2:C,z=e.scrollTop,L=e.isScrolling,S=e.height,M=e.render,O=e.onRender,B=0,k=d(),I=ye(n,r),W=i.length,A=n.columnWidth,N=n.columnCount,H=n.range,j=n.estimateHeight,D=n.size,_=n.shortestColumn,F=D(),X=_(),q=[],G="list"===v?"listitem":"grid"===v?"gridcell":void 0,V=te(O),Y=z+(E*=S),K=Y>X&&W>F;if(H(Math.max(0,z-E/2),Y,(function(e,n,r){var o=i[e],u=T(o,e),s={top:r,left:n,width:A,writingMode:"horizontal-tb",position:"absolute"};q.push(he(x,{key:u,ref:I(e),role:G,style:"object"==typeof w&&null!==w?f({},s,w):s},ge(M,e,o,A))),void 0===t?(B=e,t=e):(B=Math.min(B,e),t=Math.max(t,e))})),K)for(var J=Math.min(W-F,Math.ceil((z+E-X)/P*N)),U=F,Q=we(A);F+J>U;U++){var $=i[U],ee=T($,U);q.push(he(x,{key:ee,ref:I(U),role:G,style:"object"==typeof w?f({},Q,w):Q},ge(M,U,$,A)))}Z.useEffect((function(){"function"==typeof V.current&&void 0!==t&&V.current(B,t,i),pe="1"}),[B,t,i,V]),Z.useEffect((function(){K&&k()}),[K,n]);var ne=me(L,j(W,P));return he(u,{ref:m,key:pe,id:s,role:v,className:c,tabIndex:g,style:"object"==typeof a?xe(ne,a):ne,children:q})}function h(e,t){return t}function p(e,t,n){function r(){u.current=0,c()}void 0===t&&(t=30),void 0===n&&(n=0);var i=te(e),o=1e3/t,u=Z.useRef(0),s=Z.useRef(),c=function(){return s.current&&clearTimeout(s.current)},a=[t,n,i];return Z.useEffect((function(){return r}),a),Z.useCallback((function(){var e=arguments,t=Ie(),r=function(){u.current=t,c(),i.current.apply(null,e)},a=u.current;if(n&&0===a)return r();if(t-a>o){if(a>0)return r();u.current=t}c(),s.current=setTimeout((function(){r(),u.current=0}),o)}),a)}function g(e,t){void 0===e&&(e=0),void 0===t&&(t=12);var n=Ne(t),r=Z.useState(0),i=r[0],o=r[1],u=Z.useRef(0);return Z.useEffect((function(){1===u.current&&o(1);var e,n,r,i,s=0,c=(e=function(){s||o(0)},n=40+1e3/t,r=Ce(),(i={}).v=Se((function t(){Ce()-r<n?i.v=Se(t):e.call(null)})),i);return u.current=1,function(){s=1,function(e){Me(e.v||-1)}(c)}}),[t,n]),{scrollTop:Math.max(0,n-e),isScrolling:i}}function m(e){var t=g(e.offset,e.scrollFps);return v({scrollTop:t.scrollTop,isScrolling:t.isScrolling,positioner:e.positioner,resizeObserver:e.resizeObserver,items:e.items,onRender:e.onRender,as:e.as,id:e.id,className:e.className,style:e.style,role:e.role,tabIndex:e.tabIndex,containerRef:e.containerRef,itemAs:e.itemAs,itemStyle:e.itemStyle,itemHeightEstimate:e.itemHeightEstimate,itemKey:e.itemKey,overscanBy:e.overscanBy,height:e.height,render:e.render})}function b(e,t){void 0===t&&(t=He);var n=Z.useState({offset:0,width:0}),r=n[0],i=n[1];return re((function(){var t=e.current;if(null!==t){var n=0,o=t;do{n+=o.offsetTop||0,o=o.offsetParent}while(o);n===r.offset&&t.offsetWidth===r.width||i({offset:n,width:t.offsetWidth})}}),t),r}function x(e,t){var n=e.width,r=e.columnWidth,i=void 0===r?200:r,o=e.columnGutter,u=void 0===o?0:o,s=e.rowGutter,c=e.columnCount,a=e.maxColumnCount;void 0===t&&(t=Fe);var f=function(){var e=_e(n,i,u,c,a),t=e[0],r=e[1];return je(r,t,u,null!=s?s:u)},l=Z.useRef();void 0===l.current&&(l.current=f());var d=Z.useRef(t),v=[n,i,u,s,c,a],h=Z.useRef(v),p=!v.every((function(e,t){return h.current[t]===e}));if(p||!t.every((function(e,t){return d.current[t]===e}))){var g=l.current,m=f();if(d.current=t,h.current=v,p)for(var b=g.size(),x=0;b>x;x++){var w=g.get(x);m.set(x,void 0!==w?w.height:0)}l.current=m}return l.current}function w(e){return e.activeTargets.length>0}function y(e){return e.skippedTargets.length>0}function P(e,t){this.inlineSize=e,this.blockSize=t,Ye(this)}function R(e,t,n,r){return this.x=e,this.y=t,this.width=n,this.height=r,this.top=this.y,this.left=this.x,this.bottom=this.top+this.height,this.right=this.left+this.width,Ye(this)}function T(){var e=this;return{x:e.x,y:e.y,top:e.top,right:e.right,bottom:e.bottom,left:e.left,width:e.width,height:e.height}}function C(e){return new R(e.x,e.y,e.width,e.height)}function E(e){var t=st(e);this.target=e,this.contentRect=t.contentRect,this.borderBoxSize=Ye([t.borderBoxSize]),this.contentBoxSize=Ye([t.contentBoxSize]),this.devicePixelContentBoxSize=Ye([t.devicePixelContentBoxSize])}function z(e){return e()}function L(){return vt.splice(0).forEach(z)}function S(){var e=this;this.stopped=1,this.listener=function(){return e.schedule()}}function M(e){var t=this;if(void 0===e&&(e=250),!bt){bt=1;var n,r=mt(e);n=function(){var n=0;try{n=function(){var e,t=0;for(dt(t);qe();)t=lt(),dt(t);return Xe.some(y)&&("function"==typeof ErrorEvent?e=new ErrorEvent("error",{message:Ge}):((e=document.createEvent("Event")).initEvent("error",0,0),e.message=Ge),window.dispatchEvent(e)),t>0}()}finally{if(bt=0,e=r-mt(),!ht)return;n?t.run(1e3):e>0?t.run(e):t.start()}},function(){if(!Ve){var e=0,t=document.createTextNode("");new MutationObserver(L).observe(t,{characterData:1}),Ve=function(){t.textContent=""+(e?e--:e++)}}vt.push((function(){requestAnimationFrame(n)})),Ve()}()}}function O(){this.stop(),this.run()}function B(){var e=this,t=function(){return e.observer&&e.observer.observe(document.body,pt)};document.body?t():$e.addEventListener("DOMContentLoaded",t)}function k(){var e=this;this.stopped&&(this.stopped=0,this.observer=new MutationObserver(this.listener),this.observe(),gt.forEach((function(t){return $e.addEventListener(t,e.listener,1)})))}function I(){var e=this;this.stopped||(this.observer&&this.observer.disconnect(),gt.forEach((function(t){return $e.removeEventListener(t,e.listener,1)})),this.stopped=1)}function W(e,t){this.target=e,this.observedBox=t||Be.CONTENT_BOX,this.lastReportedSize={inlineSize:0,blockSize:0}}function A(){var e,t=ct(this.target,this.observedBox,1);return e=this.target,Ue(e)||function(e){switch(e.tagName){case"INPUT":if("image"!==e.type)break;case"VIDEO":case"AUDIO":case"EMBED":case"OBJECT":case"CANVAS":case"IFRAME":case"IMG":return 1}return 0}(e)||"inline"!==getComputedStyle(e).display||(this.lastReportedSize=t),this.lastReportedSize.inlineSize!==t.inlineSize||this.lastReportedSize.blockSize!==t.blockSize?1:0}function N(e,t){this.activeTargets=[],this.skippedTargets=[],this.observationTargets=[],this.observer=e,this.callback=t}function H(){}function j(e,t){var n=new Pt(e,t);Rt.set(e,n)}function D(e,t,n){var r=Rt.get(e),i=0===r.observationTargets.length;0>Tt(r.observationTargets,t)&&(i&&Xe.push(r),r.observationTargets.push(new yt(t,n&&n.box)),wt(1),xt.schedule())}function _(e,t){var n=Rt.get(e),r=Tt(n.observationTargets,t),i=1===n.observationTargets.length;0>r||(i&&Xe.splice(Xe.indexOf(n),1),n.observationTargets.splice(r,1),wt(-1))}function F(e){var t=this,n=Rt.get(e);n.observationTargets.slice().forEach((function(n){return t.unobserve(e,n.target)})),n.activeTargets.splice(0,n.activeTargets.length)}function X(e){if(0===arguments.length)throw new TypeError("Failed to construct 'ResizeObserver': 1 argument required, but only 0 present.");if("function"!=typeof e)throw new TypeError("Failed to construct 'ResizeObserver': The callback provided as parameter 1 is not a function.");Ct.connect(this,e)}function q(e,t){if(0===arguments.length)throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Ze(e))throw new TypeError("Failed to execute 'observe' on 'ResizeObserver': parameter 1 is not of type 'Element");Ct.observe(this,e,t)}function G(e){if(0===arguments.length)throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': 1 argument required, but only 0 present.");if(!Ze(e))throw new TypeError("Failed to execute 'unobserve' on 'ResizeObserver': parameter 1 is not of type 'Element");Ct.unobserve(this,e)}function V(){Ct.disconnect(this)}function Y(){return"function ResizeObserver () { [polyfill code] }"}function K(e){function t(){return r.disconnect()}var n=d(),r=St(e,n);return Z.useEffect((function(){return t}),[r]),r}function J(e){e.cancel()}function U(e,t){var n,r=t.align,i=void 0===r?"top":r,o=t.element,u=void 0===o?"undefined"!=typeof window&&window:o,s=t.offset,c=void 0===s?0:s,a=t.height,f=void 0===a?"undefined"!=typeof window?window.innerHeight:0:a,d=te({positioner:e,element:u,align:i,offset:c,height:f}),v=Z.useRef((function(){var e=d.current.element;return e&&"current"in e?e.current:e})).current,h=Z.useReducer((function(e,t){var n,r={position:e.position,index:e.index,prevTop:e.prevTop};if("scrollToIndex"===t.type)return{position:d.current.positioner.get(null!==(n=t.value)&&void 0!==n?n:-1),index:t.value,prevTop:void 0};if("setPosition"===t.type)r.position=t.value;else if("setPrevTop"===t.type)r.prevTop=t.value;else if("reset"===t.type)return Mt;return r}),Mt),g=h[0],m=h[1],b=p(m,15);l(v(),"scroll",(function(){if(!g.position&&g.index){var e=d.current.positioner.get(g.index);e&&m({type:"setPosition",value:e})}}));var x=void 0!==g.index&&(null===(n=d.current.positioner.get(g.index))||void 0===n?void 0:n.top);return Z.useEffect((function(){var e=v();if(e){var t=d.current,n=t.height,r=t.align,i=t.offset,o=t.positioner;if(g.position){var u=g.position.top;"bottom"===r?u=u-n+g.position.height:"center"===r&&(u-=(n-g.position.height)/2),e.scrollTo(0,Math.max(0,u+=i));var s=0,c=setTimeout((function(){return!s&&m({type:"reset"})}),400);return function(){s=1,clearTimeout(c)}}if(void 0!==g.index){var a=o.shortestColumn()/o.size()*g.index;g.prevTop&&(a=Math.max(a,g.prevTop+n)),e.scrollTo(0,a),b({type:"setPrevTop",value:a})}}}),[x,g,d,v,b]),Z.useRef((function(e){m({type:"scrollToIndex",value:e})})).current}function Q(e){var t=Z.useRef(null),n=function(e){void 0===e&&(e=ie);var t=e,n=t.wait,r=t.leading,i=t.initialWidth,o=void 0===i?0:i,u=t.initialHeight,s=function(e,t,n){var r=Z.useState(e);return[r[0],ne(r[1],t,n)]}("undefined"==typeof document?[o,void 0===u?0:u]:ue,n,r),c=s[0],a=s[1],f=function(){return a(ue)};return l(oe,"resize",f),l(oe,"orientationchange",f),c}({initialWidth:e.ssrWidth,initialHeight:e.ssrHeight}),r=b(t,n),i=f({offset:r.offset,width:r.width||n[0],height:n[1],containerRef:t},e);i.positioner=x(i),i.resizeObserver=K(i.positioner);var o=U(i.positioner,{height:i.height,offset:r.offset,align:"object"==typeof e.scrollToIndex?e.scrollToIndex.align:void 0}),u=e.scrollToIndex&&("number"==typeof e.scrollToIndex?e.scrollToIndex:e.scrollToIndex.index);return Z.useEffect((function(){void 0!==u&&o(u)}),[u,o]),Ot(m,i)}var Z=r(t),$=n(t),ee={low:0,max:0,high:0,C:2,P:void 0,R:void 0,L:void 0,list:void 0};ee.P=ee,ee.L=ee,ee.R=ee;var te=function(e){var t=Z.useRef(e);return Z.useEffect((function(){t.current=e})),t},ne=function(e,t,n){function r(){u.current&&clearTimeout(u.current),u.current=void 0}function i(){u.current=void 0}void 0===t&&(t=100),void 0===n&&(n=0);var o=te(e),u=Z.useRef(),s=[t,n,o];return Z.useEffect((function(){return r}),s),Z.useCallback((function(){var e=arguments,r=u.current;if(void 0===r&&n)return u.current=setTimeout(i,t),o.current.apply(null,e);r&&clearTimeout(r),u.current=setTimeout((function(){u.current=void 0,o.current.apply(null,e)}),t)}),s)},re=$.default["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],ie={},oe="undefined"==typeof window?null:window,ue=function(){return[document.documentElement.clientWidth,document.documentElement.clientHeight]},se=function(e,t){var n,r,i=t||ce;return function(){return n&&i(arguments,n)?r:r=e.apply(null,n=arguments)}},ce=function(e,t){return e[0]===t[0]&&e[1]===t[1]&&e[2]===t[2]&&e[3]===t[3]},ae=function(){var e,t;this.set=void 0,this.get=void 0,this.get=function(n){return n===e?t:void 0},this.set=function(n,r){e=n,t=r}},fe=function(e){try{return new e}catch(e){var t={};return{set:function(e,n){t[e]=n},get:function(e){return t[e]}}}},le=function(e,t){var n,r,i,o,u,s,c,a,f,l=(c=(r=e).length,a=fe(r[0]),f=1===c,3>c?{g:function(e){return void 0===(i=a.get(e[0]))||f?i:i.get(e[1])},s:function(e,t){return f?a.set(e[0],t):void 0===(i=a.get(e[0]))?((o=fe(r[1])).set(e[1],t),a.set(e[0],o)):i.set(e[1],t),t}}:{g:function(e){for(s=a,u=0;c>u;u++)if(void 0===(s=s.get(e[u])))return;return s},s:function(e,t){for(s=a,u=0;c-1>u;u++)void 0===(o=s.get(e[u]))?(o=fe(r[u+1]),s.set(e[u],o),s=o):s=o;return s.set(e[c-1],t),t}}),d=l.g,v=l.s;return function(){return void 0===(n=d(arguments))?v(arguments,t.apply(null,arguments)):n}},de=new WeakMap,ve={},he=Z.createElement,pe="0",ge=le([ae,{},WeakMap,ae],(function(e,t,n,r){return he(e,{index:t,data:n,width:r})})),me=se((function(e,t){return{position:"relative",width:"100%",maxWidth:"100%",height:Math.ceil(t),maxHeight:Math.ceil(t),willChange:e?"contents":void 0,pointerEvents:e?"none":void 0}})),be=function(e,t){return e[0]===t[0]&&e[1]===t[1]},xe=se((function(e,t){return f({},e,t)}),be),we=se((function(e){return{width:e,zIndex:-1e3,visibility:"hidden",position:"absolute",writingMode:"horizontal-tb"}}),(function(e,t){return e[0]===t[0]})),ye=se((function(e,t){return function(n){return function(r){null!==r&&(t&&(t.observe(r),de.set(r,n)),void 0===e.get(n)&&e.set(n,r.offsetHeight))}}}),be),Pe="undefined",Re=typeof window!==Pe?window:{},Te=typeof performance!==Pe?performance:Date,Ce=function(){return Te.now()},Ee="AnimationFrame",ze="cancel"+Ee,Le="request"+Ee,Se=Re[Le]&&Re[Le].bind(Re),Me=Re[ze]&&Re[ze].bind(Re);if(!Se||!Me){var Oe=0;Se=function(e){var t=Ce(),n=Math.max(Oe+1e3/60,t);return setTimeout((function(){e(Oe=n)}),n-t)},Me=function(e){return clearTimeout(e)}}var Be,ke="undefined"!=typeof performance?performance:Date,Ie=function(){return ke.now()},We="undefined"==typeof window?null:window,Ae=function(){return void 0!==We.scrollY?We.scrollY:void 0===We.pageYOffset?0:We.pageYOffset},Ne=function(e){void 0===e&&(e=30);var t=function(e,t){var n=Z.useState(e);return[n[0],p(n[1],t,1)]}("undefined"==typeof window?0:Ae,e);return l(We,"scroll",(function(){return t[1](Ae())})),t[0]},He=[],je=function(e,t,n,r){void 0===n&&(n=0),void 0===r&&(r=n);for(var i=a(),o=new Array(e),u=[],s=new Array(e),c=0;e>c;c++)o[c]=0,s[c]=[];return{columnCount:e,columnWidth:t,set:function(e,c){void 0===c&&(c=0);for(var a=0,f=1;f<o.length;f++)o[f]<o[a]&&(a=f);var l=o[a]||0;o[a]=l+c+r,s[a].push(e),u[e]={left:a*(t+n),top:l,height:c,column:a},i.insert(l,l+c,e)},get:function(e){return u[e]},update:function(t){for(var n=new Array(e),c=0,a=0;c<t.length-1;c++){var f=t[c],l=u[f];l.height=t[++c],i.remove(f),i.insert(l.top,l.top+l.height,f),n[l.column]=void 0===n[l.column]?f:Math.min(f,n[l.column])}for(c=0;c<n.length;c++)if(void 0!==n[c]){var d=s[c],v=De(d,n[c]),h=s[c][v],p=u[h];for(o[c]=p.top+p.height+r,a=v+1;a<d.length;a++){var g=d[a],m=u[g];m.top=o[c],o[c]=m.top+m.height+r,i.remove(g),i.insert(m.top,m.top+m.height,g)}}},range:function(e,t,n){return i.search(e,t,(function(e,t){return n(e,u[e].left,t)}))},estimateHeight:function(t,n){var r=Math.max(0,Math.max.apply(null,o));return t===i.size?r:r+Math.ceil((t-i.size)/e)*n},shortestColumn:function(){return o.length>1?Math.min.apply(null,o):o[0]||0},size:function(){return i.size},all:function(){return u}}},De=function(e,t){for(var n=0,r=e.length-1;r>=n;){var i=n+r>>>1,o=e[i];if(o===t)return i;o>t?r=i-1:n=i+1}return-1},_e=function(e,t,n,r,i){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===n&&(n=8),r=r||Math.min(Math.floor((e+n)/(t+n)),i||1/0)||1,[Math.floor((e-n*(r-1))/r),r]},Fe=[],Xe=[],qe=function(){return Xe.some(w)},Ge="ResizeObserver loop completed with undelivered notifications.";!function(e){e.BORDER_BOX="border-box",e.CONTENT_BOX="content-box",e.DEVICE_PIXEL_CONTENT_BOX="device-pixel-content-box"}(Be||(Be={}));var Ve,Ye=function(e){return Object.freeze(e)},Ke=function(){return P}(),Je=function(){return R.prototype.toJSON=T,R.fromRect=C,R}(),Ue=function(e){return e instanceof SVGElement&&"getBBox"in e},Qe=function(e){if(Ue(e)){var t=e.getBBox(),n=t.width,r=t.height;return!n&&!r}var i=e,o=i.offsetWidth,u=i.offsetHeight;return!(o||u||e.getClientRects().length)},Ze=function(e){var t,n;if(e instanceof Element)return 1;var r=null===(n=null===(t=e)||void 0===t?void 0:t.ownerDocument)||void 0===n?void 0:n.defaultView;return!!(r&&e instanceof r.Element)},$e="undefined"!=typeof window?window:{},et=new WeakMap,tt=/auto|scroll/,nt=/^tb|vertical/,rt=/msie|trident/i.test($e.navigator&&$e.navigator.userAgent),it=function(e){return parseFloat(e||"0")},ot=function(e,t,n){return void 0===e&&(e=0),void 0===t&&(t=0),void 0===n&&(n=0),new Ke((n?t:e)||0,(n?e:t)||0)},ut=Ye({devicePixelContentBoxSize:ot(),borderBoxSize:ot(),contentBoxSize:ot(),contentRect:new Je(0,0,0,0)}),st=function(e,t){if(void 0===t&&(t=0),et.has(e)&&!t)return et.get(e);if(Qe(e))return et.set(e,ut),ut;var n=getComputedStyle(e),r=Ue(e)&&e.ownerSVGElement&&e.getBBox(),i=!rt&&"border-box"===n.boxSizing,o=nt.test(n.writingMode||""),u=!r&&tt.test(n.overflowY||""),s=!r&&tt.test(n.overflowX||""),c=r?0:it(n.paddingTop),a=r?0:it(n.paddingRight),f=r?0:it(n.paddingBottom),l=r?0:it(n.paddingLeft),d=r?0:it(n.borderTopWidth),v=r?0:it(n.borderRightWidth),h=r?0:it(n.borderBottomWidth),p=l+a,g=c+f,m=(r?0:it(n.borderLeftWidth))+v,b=d+h,x=s?e.offsetHeight-b-e.clientHeight:0,w=u?e.offsetWidth-m-e.clientWidth:0,y=i?p+m:0,P=i?g+b:0,R=r?r.width:it(n.width)-y-w,T=r?r.height:it(n.height)-P-x,C=R+p+w+m,E=T+g+x+b,z=Ye({devicePixelContentBoxSize:ot(Math.round(R*devicePixelRatio),Math.round(T*devicePixelRatio),o),borderBoxSize:ot(C,E,o),contentBoxSize:ot(R,T,o),contentRect:new Je(l,c,R,T)});return et.set(e,z),z},ct=function(e,t,n){var r=st(e,n),i=r.borderBoxSize,o=r.contentBoxSize,u=r.devicePixelContentBoxSize;switch(t){case Be.DEVICE_PIXEL_CONTENT_BOX:return u;case Be.BORDER_BOX:return i;default:return o}},at=function(){return E}(),ft=function(e){if(Qe(e))return 1/0;for(var t=0,n=e.parentNode;n;)t+=1,n=n.parentNode;return t},lt=function(){var e=1/0,t=[];Xe.forEach((function(n){if(0!==n.activeTargets.length){var r=[];n.activeTargets.forEach((function(t){var n=new at(t.target),i=ft(t.target);r.push(n),t.lastReportedSize=ct(t.target,t.observedBox),e>i&&(e=i)})),t.push((function(){n.callback.call(n.observer,r,n.observer)})),n.activeTargets.splice(0,n.activeTargets.length)}}));for(var n=0,r=t;n<r.length;n++)(0,r[n])();return e},dt=function(e){Xe.forEach((function(t){t.activeTargets.splice(0,t.activeTargets.length),t.skippedTargets.splice(0,t.skippedTargets.length),t.observationTargets.forEach((function(n){n.isActive()&&(ft(n.target)>e?t.activeTargets.push(n):t.skippedTargets.push(n))}))}))},vt=[],ht=0,pt={attributes:1,characterData:1,childList:1,subtree:1},gt=["resize","load","transitionend","animationend","animationstart","animationiteration","keyup","keydown","mouseup","mousedown","mouseover","mouseout","blur","focus"],mt=function(e){return void 0===e&&(e=0),Date.now()+e},bt=0,xt=new(function(){return S.prototype.run=M,S.prototype.schedule=O,S.prototype.observe=B,S.prototype.start=k,S.prototype.stop=I,S}()),wt=function(e){!ht&&e>0&&xt.start(),!(ht+=e)&&xt.stop()},yt=function(){return W.prototype.isActive=A,W}(),Pt=function(){return N}(),Rt=new WeakMap,Tt=function(e,t){for(var n=0;n<e.length;n+=1)if(e[n].target===t)return n;return-1},Ct=function(){return H.connect=j,H.observe=D,H.unobserve=_,H.disconnect=F,H}(),Et=function(){return X.prototype.observe=q,X.prototype.unobserve=G,X.prototype.disconnect=V,X.toString=Y,X}(),zt=function(e){function t(){r=null,e.apply(void 0,n)}var n=[],r=null,i=function(){for(var e=arguments.length,i=new Array(e),o=0;e>o;o++)i[o]=arguments[o];n=i,r||(r=requestAnimationFrame(t))};return i.cancel=function(){r&&(cancelAnimationFrame(r),r=null)},i},Lt="undefined"!=typeof window&&"ResizeObserver"in window?window.ResizeObserver:Et,St=le([WeakMap],(function(e,t){var n=[],r=zt((function(){n.length>0&&(e.update(n),t(n)),n.length=0})),i=function(t){var i=t.offsetHeight;if(i>0){var o=de.get(t);if(void 0!==o){var u=e.get(o);void 0!==u&&i!==u.height&&n.push(o,i)}}r()},o=new Map,u=new Lt((function(e){for(var t=0;t<e.length;t++){var n=e[t],r=de.get(n.target);if(void 0!==r){var u=o.get(r);u||(u=zt(i),o.set(r,u)),u(n.target)}}})),s=u.disconnect.bind(u);return u.disconnect=function(){s(),o.forEach(J)},u})),Mt={index:void 0,position:void 0,prevTop:void 0},Ot=Z.createElement,Bt=Z.createElement,kt=function(e,t){return void 0!==t[e]},It={};e.List=function(e){return Bt(Q,f({role:"list",rowGutter:e.rowGutter,columnCount:1,columnWidth:1},e))},e.Masonry=Q,e.MasonryScroller=m,e.createIntervalTree=a,e.createPositioner=je,e.createResizeObserver=St,e.useContainerPosition=b,e.useInfiniteLoader=function(e,t){void 0===t&&(t=It);var n=t,r=n.isItemLoaded,i=n.minimumBatchSize,o=void 0===i?16:i,u=n.threshold,s=void 0===u?16:u,c=n.totalItems,a=void 0===c?9e9:c,f=te(e),l=te(r);return Z.useCallback((function(e,t,n){for(var r=function(e,t,n,r,i,o){void 0===e&&(e=kt),void 0===t&&(t=16),void 0===r&&(r=9e9);for(var u,s,c=[],a=i;o>=a;a++)e(a,n)?void 0!==u&&void 0!==s&&(c.push(u,s),u=s=void 0):(s=a,void 0===u&&(u=a));if(void 0!==u&&void 0!==s){var f=Math.min(Math.max(s,u+t-1),r-1);for(a=s+1;f>=a&&!e(a,n);a++)s=a;c.push(u,s)}if(c.length)for(var l=c[0],d=c[1];t>d-l+1&&l>0;){var v=l-1;if(e(v,n))break;c[0]=l=v}return c}(l.current,o,n,a,Math.max(0,e-s),Math.min(a-1,(t||0)+s)),i=0;i<r.length-1;++i)f.current(r[i],r[++i],n)}),[a,o,s,f,l])},e.useMasonry=v,e.usePositioner=x,e.useResizeObserver=K,e.useScrollToIndex=U,e.useScroller=g,Object.defineProperty(e,"__esModule",{value:1})}));
 //# sourceMappingURL=masonic.js.map

package.json

 {
   "name": "masonic",
-  "version": "3.6.5",
+  "version": "3.7.0",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

src/use-positioner.ts

@@ -18,2 +18,3 @@ import * as React from "react";
  * @param options.columnCount
+ * @param options.maxColumnCount
  */
@@ -27,2 +28,3 @@ export function usePositioner(
     columnCount,
+    maxColumnCount,
   }: UsePositionerOptions,
@@ -36,3 +38,4 @@ deps: React.DependencyList = emptyArr
       columnGutter,
-      columnCount
+      columnCount,
+      maxColumnCount
     );
@@ -51,3 +54,10 @@ return createPositioner(
   const prevDeps = React.useRef(deps);
-  const opts = [width, columnWidth, columnGutter, rowGutter, columnCount];
+  const opts = [
+    width,
+    columnWidth,
+    columnGutter,
+    rowGutter,
+    columnCount,
+    maxColumnCount,
+  ];
   const prevOpts = React.useRef(opts);
@@ -120,2 +130,6 @@ const optsChanged = !opts.every((item, i) => prevOpts.current[i] === item);
   columnCount?: number;
+  /**
+   * The upper bound of column count. This property won't work if `columnCount` is set.
+   */
+  maxColumnCount?: number;
 }
@@ -342,5 +356,12 @@
   gutter = 8,
-  columnCount?: number
+  columnCount?: number,
+  maxColumnCount?: number
 ): [number, number] => {
-  columnCount = columnCount || Math.floor((width + gutter) / (minimumWidth + gutter)) || 1;
+  columnCount =
+    columnCount ||
+    Math.min(
+      Math.floor((width + gutter) / (minimumWidth + gutter)),
+      maxColumnCount || Infinity
+    ) ||
+    1;
   const columnWidth = Math.floor(
@@ -347,0 +368,0 @@ (width - gutter * (columnCount - 1)) / columnCount

types/masonry.d.ts

@@ -13,34 +13,50 @@ import * as React from "react";
  */
-export declare function Masonry<Item>(props: MasonryProps<Item>): React.FunctionComponentElement<MasonryScrollerProps<unknown>>;
+export declare function Masonry<Item>(
+  props: MasonryProps<Item>
+): React.FunctionComponentElement<MasonryScrollerProps<unknown>>;
 export declare namespace Masonry {
-    var displayName: string;
+  var displayName: string;
 }
-export interface MasonryProps<Item> extends Omit<MasonryScrollerProps<Item>, "offset" | "width" | "height" | "containerRef" | "positioner">, Pick<UsePositionerOptions, "columnWidth" | "columnGutter" | "rowGutter" | "columnCount"> {
-    /**
-     * Scrolls to a given index within the grid. The grid will re-scroll
-     * any time the index changes.
-     */
-    scrollToIndex?: number | {
+export interface MasonryProps<Item>
+  extends Omit<
+      MasonryScrollerProps<Item>,
+      "offset" | "width" | "height" | "containerRef" | "positioner"
+    >,
+    Pick<
+      UsePositionerOptions,
+      | "columnWidth"
+      | "columnGutter"
+      | "rowGutter"
+      | "columnCount"
+      | "maxColumnCount"
+    > {
+  /**
+   * Scrolls to a given index within the grid. The grid will re-scroll
+   * any time the index changes.
+   */
+  scrollToIndex?:
+    | number
+    | {
         index: number;
         align: UseScrollToIndexOptions["align"];
-    };
-    /**
-     * This is the width that will be used for the browser `window` when rendering this component in SSR.
-     * This prop isn't relevant for client-side only apps.
-     */
-    ssrWidth?: number;
-    /**
-     * This is the height that will be used for the browser `window` when rendering this component in SSR.
-     * This prop isn't relevant for client-side only apps.
-     */
-    ssrHeight?: number;
-    /**
-     * This determines how often (in frames per second) to update the scroll position of the
-     * browser `window` in state, and as a result the rate the masonry grid recalculates its visible cells.
-     * The default value of `12` has been very reasonable in my own testing, but if you have particularly
-     * heavy `render` components it may be prudent to reduce this number.
-     *
-     * @default 12
-     */
-    scrollFps?: number;
+      };
+  /**
+   * This is the width that will be used for the browser `window` when rendering this component in SSR.
+   * This prop isn't relevant for client-side only apps.
+   */
+  ssrWidth?: number;
+  /**
+   * This is the height that will be used for the browser `window` when rendering this component in SSR.
+   * This prop isn't relevant for client-side only apps.
+   */
+  ssrHeight?: number;
+  /**
+   * This determines how often (in frames per second) to update the scroll position of the
+   * browser `window` in state, and as a result the rate the masonry grid recalculates its visible cells.
+   * The default value of `12` has been very reasonable in my own testing, but if you have particularly
+   * heavy `render` components it may be prudent to reduce this number.
+   *
+   * @default 12
+   */
+  scrollFps?: number;
 }

types/use-positioner.d.ts

@@ -16,37 +16,52 @@ import * as React from "react";
  * @param options.columnCount
+ * @param options.maxColumnCount
  */
-export declare function usePositioner({ width, columnWidth, columnGutter, rowGutter, columnCount, }: UsePositionerOptions, deps?: React.DependencyList): Positioner;
+export declare function usePositioner(
+  {
+    width,
+    columnWidth,
+    columnGutter,
+    rowGutter,
+    columnCount,
+    maxColumnCount,
+  }: UsePositionerOptions,
+  deps?: React.DependencyList
+): Positioner;
 export interface UsePositionerOptions {
-    /**
-     * The width of the container you're rendering the grid within, i.e. the container
-     * element's `element.offsetWidth`
-     */
-    width: number;
-    /**
-     * The minimum column width. The `usePositioner()` hook will automatically size the
-     * columns to fill their container based upon the `columnWidth` and `columnGutter` values.
-     * It will never render anything smaller than this width unless its container itself is
-     * smaller than its value. This property is optional if you're using a static `columnCount`.
-     *
-     * @default 200
-     */
-    columnWidth?: number;
-    /**
-     * This sets the horizontal space between grid columns in pixels. If `rowGutter` is not set, this
-     * also sets the vertical space between cells within a column in pixels.
-     *
-     * @default 0
-     */
-    columnGutter?: number;
-    /**
-     * This sets the vertical space between cells within a column in pixels. If not set, the value of
-     * `columnGutter` is used instead.
-     */
-    rowGutter?: number;
-    /**
-     * By default, `usePositioner()` derives the column count from the `columnWidth`, `columnGutter`,
-     * and `width` props. However, in some situations it is nice to be able to override that behavior
-     * (e.g. creating a `List` component).
-     */
-    columnCount?: number;
+  /**
+   * The width of the container you're rendering the grid within, i.e. the container
+   * element's `element.offsetWidth`
+   */
+  width: number;
+  /**
+   * The minimum column width. The `usePositioner()` hook will automatically size the
+   * columns to fill their container based upon the `columnWidth` and `columnGutter` values.
+   * It will never render anything smaller than this width unless its container itself is
+   * smaller than its value. This property is optional if you're using a static `columnCount`.
+   *
+   * @default 200
+   */
+  columnWidth?: number;
+  /**
+   * This sets the horizontal space between grid columns in pixels. If `rowGutter` is not set, this
+   * also sets the vertical space between cells within a column in pixels.
+   *
+   * @default 0
+   */
+  columnGutter?: number;
+  /**
+   * This sets the vertical space between cells within a column in pixels. If not set, the value of
+   * `columnGutter` is used instead.
+   */
+  rowGutter?: number;
+  /**
+   * By default, `usePositioner()` derives the column count from the `columnWidth`, `columnGutter`,
+   * and `width` props. However, in some situations it is nice to be able to override that behavior
+   * (e.g. creating a `List` component).
+   */
+  columnCount?: number;
+  /**
+   * The upper bound of column count. This property won't work if `columnCount` is set.
+   */
+  maxColumnCount?: number;
 }
@@ -63,67 +78,76 @@ /**
  */
-export declare const createPositioner: (columnCount: number, columnWidth: number, columnGutter?: number, rowGutter?: number) => Positioner;
+export declare const createPositioner: (
+  columnCount: number,
+  columnWidth: number,
+  columnGutter?: number,
+  rowGutter?: number
+) => Positioner;
 export interface Positioner {
-    /**
-     * The number of columns in the grid
-     */
-    columnCount: number;
-    /**
-     * The width of each column in the grid
-     */
-    columnWidth: number;
-    /**
-     * Sets the position for the cell at `index` based upon the cell's height
-     */
-    set: (index: number, height: number) => void;
-    /**
-     * Gets the `PositionerItem` for the cell at `index`
-     */
-    get: (index: number) => PositionerItem | undefined;
-    /**
-     * Updates cells based on their indexes and heights
-     * positioner.update([index, height, index, height, index, height...])
-     */
-    update: (updates: number[]) => void;
-    /**
-     * Searches the interval tree for grid cells with a `top` value in
-     * betwen `lo` and `hi` and invokes the callback for each item that
-     * is discovered
-     */
-    range: (lo: number, hi: number, renderCallback: (index: number, left: number, top: number) => void) => void;
-    /**
-     * Returns the number of grid cells in the cache
-     */
-    size: () => number;
-    /**
-     * Estimates the total height of the grid
-     */
-    estimateHeight: (itemCount: number, defaultItemHeight: number) => number;
-    /**
-     * Returns the height of the shortest column in the grid
-     */
-    shortestColumn: () => number;
-    /**
-     * Returns all `PositionerItem` items
-     */
-    all: () => PositionerItem[];
+  /**
+   * The number of columns in the grid
+   */
+  columnCount: number;
+  /**
+   * The width of each column in the grid
+   */
+  columnWidth: number;
+  /**
+   * Sets the position for the cell at `index` based upon the cell's height
+   */
+  set: (index: number, height: number) => void;
+  /**
+   * Gets the `PositionerItem` for the cell at `index`
+   */
+  get: (index: number) => PositionerItem | undefined;
+  /**
+   * Updates cells based on their indexes and heights
+   * positioner.update([index, height, index, height, index, height...])
+   */
+  update: (updates: number[]) => void;
+  /**
+   * Searches the interval tree for grid cells with a `top` value in
+   * betwen `lo` and `hi` and invokes the callback for each item that
+   * is discovered
+   */
+  range: (
+    lo: number,
+    hi: number,
+    renderCallback: (index: number, left: number, top: number) => void
+  ) => void;
+  /**
+   * Returns the number of grid cells in the cache
+   */
+  size: () => number;
+  /**
+   * Estimates the total height of the grid
+   */
+  estimateHeight: (itemCount: number, defaultItemHeight: number) => number;
+  /**
+   * Returns the height of the shortest column in the grid
+   */
+  shortestColumn: () => number;
+  /**
+   * Returns all `PositionerItem` items
+   */
+  all: () => PositionerItem[];
 }
 export interface PositionerItem {
-    /**
-     * This is how far from the top edge of the grid container in pixels the
-     * item is placed
-     */
-    top: number;
-    /**
-     * This is how far from the left edge of the grid container in pixels the
-     * item is placed
-     */
-    left: number;
-    /**
-     * This is the height of the grid cell
-     */
-    height: number;
-    /**
-     * This is the column number containing the grid cell
-     */
-    column: number;
+  /**
+   * This is how far from the top edge of the grid container in pixels the
+   * item is placed
+   */
+  top: number;
+  /**
+   * This is how far from the left edge of the grid container in pixels the
+   * item is placed
+   */
+  left: number;
+  /**
+   * This is the height of the grid cell
+   */
+  height: number;
+  /**
+   * This is the column number containing the grid cell
+   */
+  column: number;
 }

No alert changes

Improved metrics

Total package byte prevSize

970148

increased by0.55%

Lines of code

9629

increased by1.09%

Number of lines in readme file

847

increased by0.47%

No dependency changes