masonic - npm Package Compare versions

Comparing version 3.6.1 to 3.6.2

dist/main/use-resize-observer.js

@@ -43,2 +43,9 @@ "use strict";
 }
+
+const _handlerForType = /*#__PURE__*/(0, _rafSchd.default)(target => {});
+
+function _ref2(handler) {
+  handler.cancel();
+}
+
 /**
@@ -51,4 +58,2 @@ * Creates a resize observer that fires an `updater` callback whenever the height of
  */
-
-
 const createResizeObserver = /*#__PURE__*/(0, _trieMemoize.default)([WeakMap], // TODO: figure out a way to test this
@@ -58,4 +63,32 @@
 (positioner, updater) => {
-  const handleEntries = (0, _rafSchd.default)(entries => {
-    const updates = [];
+  const updates = [];
+  const update = (0, _rafSchd.default)(() => {
+    if (updates.length > 0) {
+      // Updates the size/positions of the cell with the resize
+      // observer updates
+      positioner.update(updates);
+      updater(updates);
+    }
+
+    updates.length = 0;
+  });
+
+  const commonHandler = target => {
+    const height = target.offsetHeight;
+
+    if (height > 0) {
+      const index = _elementsCache.elementsCache.get(target);
+
+      if (index !== void 0) {
+        const position = positioner.get(index);
+        if (position !== void 0 && height !== position.height) updates.push(index, height);
+      }
+    }
+
+    update();
+  };
+
+  const handlers = new Map();
+
+  const handleEntries = entries => {
     let i = 0;
@@ -65,21 +98,17 @@
       const entry = entries[i];
-      const height = entry.target.offsetHeight;
 
-      if (height > 0) {
-        const index = _elementsCache.elementsCache.get(entry.target);
+      const index = _elementsCache.elementsCache.get(entry.target);
 
-        if (index !== void 0) {
-          const position = positioner.get(index);
-          if (position !== void 0 && height !== position.height) updates.push(index, height);
-        }
+      if (index === void 0) continue;
+      let handler = handlers.get(index);
+
+      if (!handler) {
+        handler = (0, _rafSchd.default)(commonHandler);
+        handlers.set(index, handler);
       }
+
+      handler(entry.target);
     }
+  };
 
-    if (updates.length > 0) {
-      // Updates the size/positions of the cell with the resize
-      // observer updates
-      positioner.update(updates);
-      updater(updates);
-    }
-  });
   const ro = new _resizeObserverPolyfill.default(handleEntries); // Overrides the original disconnect to include cancelling handling the entries.
@@ -93,3 +122,3 @@ // Ideally this would be its own method but that would result in a breaking
     disconnect();
-    handleEntries.cancel();
+    handlers.forEach(_ref2);
   };
@@ -96,0 +125,0 @@

dist/module/use-resize-observer.js

@@ -26,2 +26,9 @@ import rafSchd from "raf-schd";
 }
+
+const _handlerForType = /*#__PURE__*/rafSchd(target => {});
+
+function _ref2(handler) {
+  handler.cancel();
+}
+
 /**
@@ -34,3 +41,2 @@ * Creates a resize observer that fires an `updater` callback whenever the height of
  */
-
 export const createResizeObserver = /*#__PURE__*/trieMemoize([WeakMap], // TODO: figure out a way to test this
@@ -40,4 +46,32 @@
 (positioner, updater) => {
-  const handleEntries = rafSchd(entries => {
-    const updates = [];
+  const updates = [];
+  const update = rafSchd(() => {
+    if (updates.length > 0) {
+      // Updates the size/positions of the cell with the resize
+      // observer updates
+      positioner.update(updates);
+      updater(updates);
+    }
+
+    updates.length = 0;
+  });
+
+  const commonHandler = target => {
+    const height = target.offsetHeight;
+
+    if (height > 0) {
+      const index = elementsCache.get(target);
+
+      if (index !== void 0) {
+        const position = positioner.get(index);
+        if (position !== void 0 && height !== position.height) updates.push(index, height);
+      }
+    }
+
+    update();
+  };
+
+  const handlers = new Map();
+
+  const handleEntries = entries => {
     let i = 0;
@@ -47,21 +81,15 @@
       const entry = entries[i];
-      const height = entry.target.offsetHeight;
+      const index = elementsCache.get(entry.target);
+      if (index === void 0) continue;
+      let handler = handlers.get(index);
 
-      if (height > 0) {
-        const index = elementsCache.get(entry.target);
+      if (!handler) {
+        handler = rafSchd(commonHandler);
+        handlers.set(index, handler);
+      }
 
-        if (index !== void 0) {
-          const position = positioner.get(index);
-          if (position !== void 0 && height !== position.height) updates.push(index, height);
-        }
-      }
+      handler(entry.target);
     }
+  };
 
-    if (updates.length > 0) {
-      // Updates the size/positions of the cell with the resize
-      // observer updates
-      positioner.update(updates);
-      updater(updates);
-    }
-  });
   const ro = new ResizeObserver(handleEntries); // Overrides the original disconnect to include cancelling handling the entries.
@@ -75,3 +103,3 @@ // Ideally this would be its own method but that would result in a breaking
     disconnect();
-    handleEntries.cancel();
+    handlers.forEach(_ref2);
   };
@@ -78,0 +106,0 @@

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===de&&e.R===de?e.max=t:e.L===de?e.max=Math.max(e.R.max,t):e.R===de?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!==de;)i(t.P),t=t.P}function u(e,t){if(t.R!==de){var n=t.R;t.R=n.L,n.L!==de&&(n.L.P=t),n.P=t.P,t.P===de?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!==de){var n=t.L;t.L=n.R,n.R!==de&&(n.R.P=t),n.P=t.P,t.P===de?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===de?e.root=n:t===t.P.L?t.P.L=n:t.P.R=n,n.P=t.P}function a(){var e={root:de,size:0},t={};return{insert:function(n,r,c){for(var a=e.root,f=de;a!==de&&n!==(f=a).low;)a=n<a.low?a.L:a.R;if(n===f.low&&f!==de){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 d={low:n,high:r,max:r,C:0,P:f,L:de,R:de,list:{index:c,high:r,next:null}};f===de?e.root=d:(d.low<f.low?f.L=d:f.R=d,o(d)),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,d),t[c]=d,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,d=r,l=d.C;r.L===de?(f=r.R,c(e,r,r.R)):r.R===de?(f=r.L,c(e,r,r.L)):(l=(d=function(e){for(;e.L!==de;)e=e.L;return e}(r.R)).C,f=d.R,d.P===r?f.P=d:(c(e,d,d.R),d.R=r.R,d.R.P=d),c(e,r,d),d.L=r.L,d.L.P=d,d.C=r.C),i(f),o(f),1===l&&function(e,t){for(var n;t!==de&&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!==de&&t<=o.max&&(o.L!==de&&i.push(o.L),o.R!==de&&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 d(e,t,n,r){var i=ae.useRef(n),o=ae.useRef(r);ve((function(){i.current=n,o.current=r})),ve((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 l(){var e=ae.useState(Re)[1];return ae.useRef((function(){return e({})})).current}function h(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,d=e.role,h=void 0===d?"grid":d,p=e.tabIndex,m=void 0===p?0:p,g=e.containerRef,y=e.itemAs,b=void 0===y?"div":y,w=e.itemStyle,_=e.itemHeightEstimate,P=void 0===_?300:_,x=e.itemKey,R=void 0===x?v:x,C=e.overscanBy,E=void 0===C?2:C,M=e.scrollTop,L=e.isScrolling,O=e.height,T=e.render,z=e.onRender,A=0,S=l(),j=Ae(n,r),k=i.length,I=n.columnWidth,W=n.columnCount,H=n.range,D=n.estimateHeight,G=n.size,q=n.shortestColumn,B=G(),F=q(),N=[],V="list"===h?"listitem":"grid"===h?"gridcell":void 0,Y=le(z),K=M+(E*=O),J=K>F&&k>B;if(H(Math.max(0,M-E/2),K,(function(e,n,r){var o=i[e],u=R(o,e),s={top:r,left:n,width:I,writingMode:"horizontal-tb",position:"absolute"};N.push(Ce(b,{key:u,ref:j(e),role:V,style:"object"==typeof w&&null!==w?f({},s,w):s},Me(T,e,o,I))),void 0===t?(A=e,t=e):(A=Math.min(A,e),t=Math.max(t,e))})),J)for(var Q=Math.min(k-B,Math.ceil((M+E-F)/P*W)),U=B,X=ze(I);B+Q>U;U++){var Z=i[U],$=R(Z,U);N.push(Ce(b,{key:$,ref:j(U),role:V,style:"object"==typeof w?f({},X,w):X},Me(T,U,Z,I)))}ae.useEffect((function(){"function"==typeof Y.current&&void 0!==t&&Y.current(A,t,i),Ee="1"}),[A,t,i,Y]),ae.useEffect((function(){J&&S()}),[J]);var ee=Le(L,D(k,P));return Ce(u,{ref:g,key:Ee,id:s,role:h,className:c,tabIndex:m,style:"object"==typeof a?Te(ee,a):ee,children:N})}function v(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=le(e),o=1e3/t,u=ae.useRef(0),s=ae.useRef(),c=function(){return s.current&&clearTimeout(s.current)},a=[t,n,i];return ae.useEffect((function(){return r}),a),ae.useCallback((function(){var e=arguments,t=Ne(),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 m(e,t){void 0===e&&(e=0),void 0===t&&(t=12);var n=Ke(t),r=ae.useState(0),i=r[0],o=r[1],u=ae.useRef(0);return ae.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=Ie(),(i={}).v=Ge((function t(){Ie()-r<n?i.v=Ge(t):e.call(null)})),i);return u.current=1,function(){s=1,function(e){qe(e.v||-1)}(c)}}),[t,n]),{scrollTop:Math.max(0,n-e),isScrolling:i}}function g(e){var t=m(e.offset,e.scrollFps);return h({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 y(e,t){void 0===t&&(t=Je);var n=ae.useState({offset:0,width:0}),r=n[0],i=n[1];return ve((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 b(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=Ze);var a=function(){var e=Xe(n,i,u,c),t=e[0],r=e[1];return Qe(r,t,u,null!=s?s:u)},f=ae.useRef();void 0===f.current&&(f.current=a());var d=ae.useRef(t),l=[n,i,u,s,c],h=ae.useRef(l),v=!l.every((function(e,t){return h.current[t]===e}));if(v||!t.every((function(e,t){return d.current[t]===e}))){var p=f.current,m=a();if(d.current=t,h.current=l,v)for(var g=p.size(),y=0;g>y;y++){var b=p.get(y);m.set(y,void 0!==b?b.height:0)}f.current=m}return f.current}function w(e,t){var n=-1;return e.some((function(e,r){return e[0]===t?(n=r,1):0})),n}function _(){this.__entries__=[]}function P(){return this.__entries__.length}function x(e){var t=w(this.__entries__,e),n=this.__entries__[t];return n&&n[1]}function R(e,t){var n=w(this.__entries__,e);~n?this.__entries__[n][1]=t:this.__entries__.push([e,t])}function C(e){var t=this.__entries__,n=w(t,e);~n&&t.splice(n,1)}function E(e){return!!~w(this.__entries__,e)}function M(){this.__entries__.splice(0)}function L(e,t){void 0===t&&(t=null);for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];e.call(t,i[1],i[0])}}function O(e){return setTimeout((function(){return e(Date.now())}),1e3/60)}function T(){this.connected_=0,this.mutationEventsAdded_=0,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(e){function t(){i&&(i=0,e()),o&&r()}function n(){nt(t)}function r(){var e=Date.now();if(i){if(2>e-u)return;o=1}else i=1,o=0,setTimeout(n,20);u=e}var i=0,o=0,u=0;return r}(this.refresh.bind(this))}function z(e){~this.observers_.indexOf(e)||this.observers_.push(e),this.connected_||this.connect_()}function A(e){var t=this.observers_,n=t.indexOf(e);~n&&t.splice(n,1),!t.length&&this.connected_&&this.disconnect_()}function S(){this.updateObservers_()&&this.refresh()}function j(e){return e.gatherActive(),e.hasActive()}function k(e){return e.broadcastActive()}function I(){var e=this.observers_.filter(j);return e.forEach(k),e.length>0}function W(){et&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),it?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:1,childList:1,characterData:1,subtree:1})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=1),this.connected_=1)}function H(){et&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=0,this.connected_=0)}function D(e){var t=e.propertyName,n=void 0===t?"":t;rt.some((function(e){return!!~n.indexOf(e)}))&&this.refresh()}function G(){return this.instance_||(this.instance_=new T),this.instance_}function q(e){return parseFloat(e)||0}function B(e){for(var t=[],n=1;arguments.length>n;n++)t[n-1]=arguments[n];return t.reduce((function(t,n){return t+q(e["border-"+n+"-width"])}),0)}function F(e){return e instanceof st(e).SVGGraphicsElement}function N(e){return e instanceof st(e).SVGElement&&"function"==typeof e.getBBox}function V(e){return et?at(e)?function(e){var t=e.getBBox();return Y(0,0,t.width,t.height)}(e):function(e){var t=e.clientWidth,n=e.clientHeight;if(!t&&!n)return ct;var r=st(e).getComputedStyle(e),i=function(e){for(var t={},n=0,r=["top","right","bottom","left"];r.length>n;n++){var i=r[n],o=e["padding-"+i];t[i]=q(o)}return t}(r),o=i.left+i.right,u=i.top+i.bottom,s=q(r.width),c=q(r.height);if("border-box"===r.boxSizing&&(Math.round(s+o)!==t&&(s-=B(r,"left","right")+o),Math.round(c+u)!==n&&(c-=B(r,"top","bottom")+u)),!function(e){return e===st(e).document.documentElement}(e)){var a=Math.round(s+o)-t,f=Math.round(c+u)-n;1!==Math.abs(a)&&(s-=a),1!==Math.abs(f)&&(c-=f)}return Y(i.left,i.top,s,c)}(e):ct}function Y(e,t,n,r){return{x:e,y:t,width:n,height:r}}function K(e){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=Y(0,0,0,0),this.target=e}function J(){var e=V(this.target);return this.contentRect_=e,e.width!==this.broadcastWidth||e.height!==this.broadcastHeight}function Q(){var e=this.contentRect_;return this.broadcastWidth=e.width,this.broadcastHeight=e.height,e}function U(e,t){var n,r,i,o,u,s,c,a=(r=(n=t).x,i=n.y,o=n.width,u=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,c=Object.create(s.prototype),ut(c,{x:r,y:i,width:o,height:u,top:i,right:r+o,bottom:u+i,left:r}),c);ut(this,{target:e,contentRect:a})}function X(e,t,n){if(this.activeObservations_=[],this.observations_=new $e,"function"!=typeof e)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=e,this.controller_=t,this.callbackCtx_=n}function Z(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof st(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)||(t.set(e,new ft(e)),this.controller_.addObserver(this),this.controller_.refresh())}}function $(e){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(e instanceof st(e).Element))throw new TypeError('parameter 1 is not of type "Element".');var t=this.observations_;t.has(e)&&(t.delete(e),t.size||this.controller_.removeObserver(this))}}function ee(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)}function te(){var e=this;this.clearActive(),this.observations_.forEach((function(t){t.isActive()&&e.activeObservations_.push(t)}))}function ne(e){return new dt(e.target,e.broadcastRect())}function re(){if(this.hasActive()){var e=this.callbackCtx_,t=this.activeObservations_.map(ne);this.callback_.call(e,t,e),this.clearActive()}}function ie(){this.activeObservations_.splice(0)}function oe(){return this.activeObservations_.length>0}function ue(e){function t(){return r.disconnect()}var n=l(),r=mt(e,n);return ae.useEffect((function(){return t}),[r]),r}function se(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,l=le({positioner:e,element:u,align:i,offset:c,height:f}),h=ae.useRef((function(){var e=l.current.element;return e&&"current"in e?e.current:e})).current,v=ae.useReducer((function(e,t){var n,r={position:e.position,index:e.index,prevTop:e.prevTop};if("scrollToIndex"===t.type)return{position:l.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 gt;return r}),gt),m=v[0],g=v[1],y=p(g,15);d(h(),"scroll",(function(){if(!m.position&&m.index){var e=l.current.positioner.get(m.index);e&&g({type:"setPosition",value:e})}}));var b=void 0!==m.index&&(null===(n=l.current.positioner.get(m.index))||void 0===n?void 0:n.top);return ae.useEffect((function(){var e=h();if(e){var t=l.current,n=t.height,r=t.align,i=t.offset,o=t.positioner;if(m.position){var u=m.position.top;"bottom"===r?u=u-n+m.position.height:"center"===r&&(u-=(n-m.position.height)/2),e.scrollTo(0,Math.max(0,u+=i));var s=0,c=setTimeout((function(){return!s&&g({type:"reset"})}),400);return function(){s=1,clearTimeout(c)}}if(void 0!==m.index){var a=o.shortestColumn()/o.size()*m.index;m.prevTop&&(a=Math.max(a,m.prevTop+n)),e.scrollTo(0,a),y({type:"setPrevTop",value:a})}}}),[b,m,l,h,y]),ae.useRef((function(e){g({type:"scrollToIndex",value:e})})).current}function ce(e){var t=ae.useRef(null),n=function(e){void 0===e&&(e=pe);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=ae.useState(e);return[r[0],he(r[1],t,n)]}("undefined"==typeof document?[o,void 0===u?0:u]:ge,n,r),c=s[0],a=s[1],f=function(){return a(ge)};return d(me,"resize",f),d(me,"orientationchange",f),c}({initialWidth:e.ssrWidth,initialHeight:e.ssrHeight}),r=y(t,n),i=f({offset:r.offset,width:r.width||n[0],height:n[1],containerRef:t},e);i.positioner=b(i),i.resizeObserver=ue(i.positioner);var o=se(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 ae.useEffect((function(){void 0!==u&&o(u)}),[u,o]),yt(g,i)}var ae=r(t),fe=n(t),de={low:0,max:0,high:0,C:2,P:void 0,R:void 0,L:void 0,list:void 0};de.P=de,de.L=de,de.R=de;var le=function(e){var t=ae.useRef(e);return ae.useEffect((function(){t.current=e})),t},he=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=le(e),u=ae.useRef(),s=[t,n,o];return ae.useEffect((function(){return r}),s),ae.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)},ve=fe.default["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],pe={},me="undefined"==typeof window?null:window,ge=function(){return[document.documentElement.clientWidth,document.documentElement.clientHeight]},ye=function(e,t){var n,r,i=t||be;return function(){return n&&i(arguments,n)?r:r=e.apply(null,n=arguments)}},be=function(e,t){return e[0]===t[0]&&e[1]===t[1]&&e[2]===t[2]&&e[3]===t[3]},we=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}},_e=function(e){try{return new e}catch(e){var t={};return{set:function(e,n){t[e]=n},get:function(e){return t[e]}}}},Pe=function(e,t){var n,r,i,o,u,s,c,a,f,d=(c=(r=e).length,a=_e(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=_e(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=_e(r[u+1]),s.set(e[u],o),s=o):s=o;return s.set(e[c-1],t),t}}),l=d.g,h=d.s;return function(){return void 0===(n=l(arguments))?h(arguments,t.apply(null,arguments)):n}},xe=new WeakMap,Re={},Ce=ae.createElement,Ee="0",Me=Pe([we,{},WeakMap,we],(function(e,t,n,r){return Ce(e,{index:t,data:n,width:r})})),Le=ye((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}})),Oe=function(e,t){return e[0]===t[0]&&e[1]===t[1]},Te=ye((function(e,t){return f({},e,t)}),Oe),ze=ye((function(e){return{width:e,zIndex:-1e3,visibility:"hidden",position:"absolute",writingMode:"horizontal-tb"}}),(function(e,t){return e[0]===t[0]})),Ae=ye((function(e,t){return function(n){return function(r){null!==r&&(t&&(t.observe(r),xe.set(r,n)),void 0===e.get(n)&&e.set(n,r.offsetHeight))}}}),Oe),Se="undefined",je=typeof window!==Se?window:{},ke=typeof performance!==Se?performance:Date,Ie=function(){return ke.now()},We="AnimationFrame",He="cancel"+We,De="request"+We,Ge=je[De]&&je[De].bind(je),qe=je[He]&&je[He].bind(je);if(!Ge||!qe){var Be=0;Ge=function(e){var t=Ie(),n=Math.max(Be+1e3/60,t);return setTimeout((function(){e(Be=n)}),n-t)},qe=function(e){return clearTimeout(e)}}var Fe="undefined"!=typeof performance?performance:Date,Ne=function(){return Fe.now()},Ve="undefined"==typeof window?null:window,Ye=function(){return void 0!==Ve.scrollY?Ve.scrollY:void 0===Ve.pageYOffset?0:Ve.pageYOffset},Ke=function(e){void 0===e&&(e=30);var t=function(e,t){var n=ae.useState(e);return[n[0],p(n[1],t,1)]}("undefined"==typeof window?0:Ye,e);return d(Ve,"scroll",(function(){return t[1](Ye())})),t[0]},Je=[],Qe=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 d=o[a]||0;o[a]=d+c+r,s[a].push(e),u[e]={left:a*(t+n),top:d,height:c,column:a},i.insert(d,d+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],d=u[f];d.height=t[++c],i.remove(f),i.insert(d.top,d.top+d.height,f),n[d.column]=void 0===n[d.column]?f:Math.min(f,n[d.column])}for(c=0;c<n.length;c++)if(void 0!==n[c]){var l=s[c],h=Ue(l,n[c]),v=s[c][h],p=u[v];for(o[c]=p.top+p.height+r,a=h+1;a<l.length;a++){var m=l[a],g=u[m];g.top=o[c],o[c]=g.top+g.height+r,i.remove(m),i.insert(g.top,g.top+g.height,m)}}},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}}},Ue=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},Xe=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/(t+n))||1,[Math.floor((e-n*(r-1))/r),r]},Ze=[],$e=function(){return"undefined"!=typeof Map?Map:(Object.defineProperty(_.prototype,"size",{get:P,enumerable:1,configurable:1}),_.prototype.get=x,_.prototype.set=R,_.prototype.delete=C,_.prototype.has=E,_.prototype.clear=M,_.prototype.forEach=L,_)}(),et="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,tt=function(){return"undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")()}(),nt=function(){return"function"==typeof requestAnimationFrame?requestAnimationFrame.bind(tt):O}(),rt=["top","right","bottom","left","width","height","size","weight"],it="undefined"!=typeof MutationObserver,ot=function(){return T.prototype.addObserver=z,T.prototype.removeObserver=A,T.prototype.refresh=S,T.prototype.updateObservers_=I,T.prototype.connect_=W,T.prototype.disconnect_=H,T.prototype.onTransitionEnd_=D,T.getInstance=G,T.instance_=null,T}(),ut=function(e,t){for(var n=0,r=Object.keys(t);n<r.length;n++){var i=r[n];Object.defineProperty(e,i,{value:t[i],enumerable:0,writable:0,configurable:1})}return e},st=function(e){return e&&e.ownerDocument&&e.ownerDocument.defaultView||tt},ct=Y(0,0,0,0),at=function(){return"undefined"!=typeof SVGGraphicsElement?F:N}(),ft=function(){return K.prototype.isActive=J,K.prototype.broadcastRect=Q,K}(),dt=function(){return U}(),lt=function(){return X.prototype.observe=Z,X.prototype.unobserve=$,X.prototype.disconnect=ee,X.prototype.gatherActive=te,X.prototype.broadcastActive=re,X.prototype.clearActive=ie,X.prototype.hasActive=oe,X}(),ht="undefined"!=typeof WeakMap?new WeakMap:new $e,vt=function(){return function e(t){if(!(this instanceof e))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=ot.getInstance(),r=new lt(t,n,this);ht.set(this,r)}}();["observe","unobserve","disconnect"].forEach((function(e){vt.prototype[e]=function(){var t;return(t=ht.get(this))[e].apply(t,arguments)}}));var pt=function(){return void 0!==tt.ResizeObserver?tt.ResizeObserver:vt}(),mt=Pe([WeakMap],(function(e,t){var n=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}((function(n){for(var r=[],i=0;i<n.length;i++){var o=n[i],u=o.target.offsetHeight;if(u>0){var s=xe.get(o.target);if(void 0!==s){var c=e.get(s);void 0!==c&&u!==c.height&&r.push(s,u)}}}r.length>0&&(e.update(r),t(r))})),r=new pt(n),i=r.disconnect.bind(r);return r.disconnect=function(){i(),n.cancel()},r})),gt={index:void 0,position:void 0,prevTop:void 0},yt=ae.createElement,bt=ae.createElement,wt=function(e,t){return void 0!==t[e]},_t={};e.List=function(e){return bt(ce,f({role:"list",rowGutter:e.rowGutter,columnCount:1,columnWidth:1},e))},e.Masonry=ce,e.MasonryScroller=g,e.createIntervalTree=a,e.createPositioner=Qe,e.createResizeObserver=mt,e.useContainerPosition=y,e.useInfiniteLoader=function(e,t){void 0===t&&(t=_t);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=le(e),d=le(r);return ae.useCallback((function(e,t,n){for(var r=function(e,t,n,r,i,o){void 0===e&&(e=wt),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 d=c[0],l=c[1];t>l-d+1&&d>0;){var h=d-1;if(e(h,n))break;c[0]=d=h}return c}(d.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,d])},e.useMasonry=h,e.usePositioner=b,e.useResizeObserver=ue,e.useScrollToIndex=se,e.useScroller=m,Object.defineProperty(e,"__esModule",{value:1})}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("react")):"function"==typeof define&&define.amd?define(["exports","react"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).Masonic={},t.React)}(this,(function(t,e){"use strict";function n(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}function r(t){if(t&&t.__esModule)return t;var e=Object.create(null);return t&&Object.keys(t).forEach((function(n){if("default"!==n){var r=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(e,n,r.get?r:{enumerable:1,get:function(){return t[n]}})}})),e.default=t,Object.freeze(e)}function i(t){var e=t.high;t.L===lt&&t.R===lt?t.max=e:t.L===lt?t.max=Math.max(t.R.max,e):t.R===lt?t.max=Math.max(t.L.max,e):t.max=Math.max(Math.max(t.L.max,t.R.max),e)}function o(t){for(var e=t;e.P!==lt;)i(e.P),e=e.P}function u(t,e){if(e.R!==lt){var n=e.R;e.R=n.L,n.L!==lt&&(n.L.P=e),n.P=e.P,e.P===lt?t.root=n:e===e.P.L?e.P.L=n:e.P.R=n,n.L=e,e.P=n,i(e),i(n)}}function s(t,e){if(e.L!==lt){var n=e.L;e.L=n.R,n.R!==lt&&(n.R.P=e),n.P=e.P,e.P===lt?t.root=n:e===e.P.R?e.P.R=n:e.P.L=n,n.R=e,e.P=n,i(e),i(n)}}function c(t,e,n){e.P===lt?t.root=n:e===e.P.L?e.P.L=n:e.P.R=n,n.P=e.P}function a(){var t={root:lt,size:0},e={};return{insert:function(n,r,c){for(var a=t.root,f=lt;a!==lt&&n!==(f=a).low;)a=n<a.low?a.L:a.R;if(n===f.low&&f!==lt){if(!function(t,e,n){for(var r,i=t.list;i;){if(i.index===n)return 0;if(e>i.high)break;r=i,i=i.next}return r||(t.list={index:n,high:e,next:i}),r&&(r.next={index:n,high:e,next:r.next}),1}(f,r,c))return;return f.high=Math.max(f.high,r),i(f),o(f),e[c]=f,void t.size++}var d={low:n,high:r,max:r,C:0,P:f,L:lt,R:lt,list:{index:c,high:r,next:null}};f===lt?t.root=d:(d.low<f.low?f.L=d:f.R=d,o(d)),function(t,e){for(var n;0===e.P.C;)e.P===e.P.P.L?0===(n=e.P.P.R).C?(e.P.C=1,n.C=1,e.P.P.C=0,e=e.P.P):(e===e.P.R&&u(t,e=e.P),e.P.C=1,e.P.P.C=0,s(t,e.P.P)):0===(n=e.P.P.L).C?(e.P.C=1,n.C=1,e.P.P.C=0,e=e.P.P):(e===e.P.L&&s(t,e=e.P),e.P.C=1,e.P.P.C=0,u(t,e.P.P));t.root.C=1}(t,d),e[c]=d,t.size++},remove:function(n){var r=e[n];if(void 0!==r){delete e[n];var a=function(t,e){var n=t.list;if(n.index===e)return null===n.next?0:(t.list=n.next,1);var r=n;for(n=n.next;null!==n;){if(n.index===e)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 t.size--;var f,d=r,l=d.C;r.L===lt?(f=r.R,c(t,r,r.R)):r.R===lt?(f=r.L,c(t,r,r.L)):(l=(d=function(t){for(;t.L!==lt;)t=t.L;return t}(r.R)).C,f=d.R,d.P===r?f.P=d:(c(t,d,d.R),d.R=r.R,d.R.P=d),c(t,r,d),d.L=r.L,d.L.P=d,d.C=r.C),i(f),o(f),1===l&&function(t,e){for(var n;e!==lt&&1===e.C;)e===e.P.L?(0===(n=e.P.R).C&&(n.C=1,e.P.C=0,u(t,e.P),n=e.P.R),1===n.L.C&&1===n.R.C?(n.C=0,e=e.P):(1===n.R.C&&(n.L.C=1,n.C=0,s(t,n),n=e.P.R),n.C=e.P.C,e.P.C=1,n.R.C=1,u(t,e.P),e=t.root)):(0===(n=e.P.L).C&&(n.C=1,e.P.C=0,s(t,e.P),n=e.P.L),1===n.R.C&&1===n.L.C?(n.C=0,e=e.P):(1===n.L.C&&(n.R.C=1,n.C=0,u(t,n),n=e.P.L),n.C=e.P.C,e.P.C=1,n.L.C=1,s(t,e.P),e=t.root));e.C=1}(t,f),t.size--}}},search:function(e,n,r){for(var i=[t.root];0!==i.length;){var o=i.pop();if(o!==lt&&e<=o.max&&(o.L!==lt&&i.push(o.L),o.R!==lt&&i.push(o.R),o.low<=n&&o.high>=e))for(var u=o.list;null!==u;)u.high<e||r(u.index,o.low),u=u.next}},get size(){return t.size}}}function f(){return(f=Object.assign||function(t){for(var e=1;arguments.length>e;e++){var n=arguments[e];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(t[r]=n[r])}return t}).apply(this,arguments)}function d(t,e,n,r){var i=ft.useRef(n),o=ft.useRef(r);pt((function(){i.current=n,o.current=r})),pt((function(){function n(){if(!u){for(var t=arguments.length,e=new Array(t),n=0;t>n;n++)e[n]=arguments[n];i.current.apply(this,e)}}var r=t&&"current"in t?t.current:t;if(r){var u=0;r.addEventListener(e,n);var s=o.current;return function(){u=1,r.removeEventListener(e,n),s&&s()}}}),[t,e])}function l(){var t=ft.useState(Ct)[1];return ft.useRef((function(){return t({})})).current}function h(t){var e,n=t.positioner,r=t.resizeObserver,i=t.items,o=t.as,u=void 0===o?"div":o,s=t.id,c=t.className,a=t.style,d=t.role,h=void 0===d?"grid":d,p=t.tabIndex,m=void 0===p?0:p,g=t.containerRef,y=t.itemAs,b=void 0===y?"div":y,w=t.itemStyle,_=t.itemHeightEstimate,P=void 0===_?300:_,x=t.itemKey,R=void 0===x?v:x,C=t.overscanBy,E=void 0===C?2:C,M=t.scrollTop,L=t.isScrolling,O=t.height,T=t.render,z=t.onRender,A=0,S=l(),j=St(n,r),k=i.length,I=n.columnWidth,W=n.columnCount,H=n.range,D=n.estimateHeight,G=n.size,q=n.shortestColumn,B=G(),F=q(),N=[],V="list"===h?"listitem":"grid"===h?"gridcell":void 0,Y=ht(z),K=M+(E*=O),J=K>F&&k>B;if(H(Math.max(0,M-E/2),K,(function(t,n,r){var o=i[t],u=R(o,t),s={top:r,left:n,width:I,writingMode:"horizontal-tb",position:"absolute"};N.push(Et(b,{key:u,ref:j(t),role:V,style:"object"==typeof w&&null!==w?f({},s,w):s},Lt(T,t,o,I))),void 0===e?(A=t,e=t):(A=Math.min(A,t),e=Math.max(e,t))})),J)for(var Q=Math.min(k-B,Math.ceil((M+E-F)/P*W)),U=B,X=At(I);B+Q>U;U++){var Z=i[U],$=R(Z,U);N.push(Et(b,{key:$,ref:j(U),role:V,style:"object"==typeof w?f({},X,w):X},Lt(T,U,Z,I)))}ft.useEffect((function(){"function"==typeof Y.current&&void 0!==e&&Y.current(A,e,i),Mt="1"}),[A,e,i,Y]),ft.useEffect((function(){J&&S()}),[J]);var tt=Ot(L,D(k,P));return Et(u,{ref:g,key:Mt,id:s,role:h,className:c,tabIndex:m,style:"object"==typeof a?zt(tt,a):tt,children:N})}function v(t,e){return e}function p(t,e,n){function r(){u.current=0,c()}void 0===e&&(e=30),void 0===n&&(n=0);var i=ht(t),o=1e3/e,u=ft.useRef(0),s=ft.useRef(),c=function(){return s.current&&clearTimeout(s.current)},a=[e,n,i];return ft.useEffect((function(){return r}),a),ft.useCallback((function(){var t=arguments,e=Vt(),r=function(){u.current=e,c(),i.current.apply(null,t)},a=u.current;if(n&&0===a)return r();if(e-a>o){if(a>0)return r();u.current=e}c(),s.current=setTimeout((function(){r(),u.current=0}),o)}),a)}function m(t,e){void 0===t&&(t=0),void 0===e&&(e=12);var n=Jt(e),r=ft.useState(0),i=r[0],o=r[1],u=ft.useRef(0);return ft.useEffect((function(){1===u.current&&o(1);var t,n,r,i,s=0,c=(t=function(){s||o(0)},n=40+1e3/e,r=Wt(),(i={}).v=qt((function e(){Wt()-r<n?i.v=qt(e):t.call(null)})),i);return u.current=1,function(){s=1,function(t){Bt(t.v||-1)}(c)}}),[e,n]),{scrollTop:Math.max(0,n-t),isScrolling:i}}function g(t){var e=m(t.offset,t.scrollFps);return h({scrollTop:e.scrollTop,isScrolling:e.isScrolling,positioner:t.positioner,resizeObserver:t.resizeObserver,items:t.items,onRender:t.onRender,as:t.as,id:t.id,className:t.className,style:t.style,role:t.role,tabIndex:t.tabIndex,containerRef:t.containerRef,itemAs:t.itemAs,itemStyle:t.itemStyle,itemHeightEstimate:t.itemHeightEstimate,itemKey:t.itemKey,overscanBy:t.overscanBy,height:t.height,render:t.render})}function y(t,e){void 0===e&&(e=Qt);var n=ft.useState({offset:0,width:0}),r=n[0],i=n[1];return pt((function(){var e=t.current;if(null!==e){var n=0,o=e;do{n+=o.offsetTop||0,o=o.offsetParent}while(o);n===r.offset&&e.offsetWidth===r.width||i({offset:n,width:e.offsetWidth})}}),e),r}function b(t,e){var n=t.width,r=t.columnWidth,i=void 0===r?200:r,o=t.columnGutter,u=void 0===o?0:o,s=t.rowGutter,c=t.columnCount;void 0===e&&(e=$t);var a=function(){var t=Zt(n,i,u,c),e=t[0],r=t[1];return Ut(r,e,u,null!=s?s:u)},f=ft.useRef();void 0===f.current&&(f.current=a());var d=ft.useRef(e),l=[n,i,u,s,c],h=ft.useRef(l),v=!l.every((function(t,e){return h.current[e]===t}));if(v||!e.every((function(t,e){return d.current[e]===t}))){var p=f.current,m=a();if(d.current=e,h.current=l,v)for(var g=p.size(),y=0;g>y;y++){var b=p.get(y);m.set(y,void 0!==b?b.height:0)}f.current=m}return f.current}function w(t,e){var n=-1;return t.some((function(t,r){return t[0]===e?(n=r,1):0})),n}function _(){this.__entries__=[]}function P(){return this.__entries__.length}function x(t){var e=w(this.__entries__,t),n=this.__entries__[e];return n&&n[1]}function R(t,e){var n=w(this.__entries__,t);~n?this.__entries__[n][1]=e:this.__entries__.push([t,e])}function C(t){var e=this.__entries__,n=w(e,t);~n&&e.splice(n,1)}function E(t){return!!~w(this.__entries__,t)}function M(){this.__entries__.splice(0)}function L(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var i=r[n];t.call(e,i[1],i[0])}}function O(t){return setTimeout((function(){return t(Date.now())}),1e3/60)}function T(){this.connected_=0,this.mutationEventsAdded_=0,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t){function e(){i&&(i=0,t()),o&&r()}function n(){ie(e)}function r(){var t=Date.now();if(i){if(2>t-u)return;o=1}else i=1,o=0,setTimeout(n,20);u=t}var i=0,o=0,u=0;return r}(this.refresh.bind(this))}function z(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()}function A(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()}function S(){this.updateObservers_()&&this.refresh()}function j(t){return t.gatherActive(),t.hasActive()}function k(t){return t.broadcastActive()}function I(){var t=this.observers_.filter(j);return t.forEach(k),t.length>0}function W(){ne&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),ue?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:1,childList:1,characterData:1,subtree:1})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=1),this.connected_=1)}function H(){ne&&this.connected_&&(document.removeEventListener("transitionend",this.onTransitionEnd_),window.removeEventListener("resize",this.refresh),this.mutationsObserver_&&this.mutationsObserver_.disconnect(),this.mutationEventsAdded_&&document.removeEventListener("DOMSubtreeModified",this.refresh),this.mutationsObserver_=null,this.mutationEventsAdded_=0,this.connected_=0)}function D(t){var e=t.propertyName,n=void 0===e?"":e;oe.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()}function G(){return this.instance_||(this.instance_=new T),this.instance_}function q(t){return parseFloat(t)||0}function B(t){for(var e=[],n=1;arguments.length>n;n++)e[n-1]=arguments[n];return e.reduce((function(e,n){return e+q(t["border-"+n+"-width"])}),0)}function F(t){return t instanceof ae(t).SVGGraphicsElement}function N(t){return t instanceof ae(t).SVGElement&&"function"==typeof t.getBBox}function V(t){return ne?de(t)?function(t){var e=t.getBBox();return Y(0,0,e.width,e.height)}(t):function(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return fe;var r=ae(t).getComputedStyle(t),i=function(t){for(var e={},n=0,r=["top","right","bottom","left"];r.length>n;n++){var i=r[n],o=t["padding-"+i];e[i]=q(o)}return e}(r),o=i.left+i.right,u=i.top+i.bottom,s=q(r.width),c=q(r.height);if("border-box"===r.boxSizing&&(Math.round(s+o)!==e&&(s-=B(r,"left","right")+o),Math.round(c+u)!==n&&(c-=B(r,"top","bottom")+u)),!function(t){return t===ae(t).document.documentElement}(t)){var a=Math.round(s+o)-e,f=Math.round(c+u)-n;1!==Math.abs(a)&&(s-=a),1!==Math.abs(f)&&(c-=f)}return Y(i.left,i.top,s,c)}(t):fe}function Y(t,e,n,r){return{x:t,y:e,width:n,height:r}}function K(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=Y(0,0,0,0),this.target=t}function J(){var t=V(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight}function Q(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t}function U(t,e){var n,r,i,o,u,s,c,a=(r=(n=e).x,i=n.y,o=n.width,u=n.height,s="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,c=Object.create(s.prototype),ce(c,{x:r,y:i,width:o,height:u,top:i,right:r+o,bottom:u+i,left:r}),c);ce(this,{target:t,contentRect:a})}function X(t,e,n){if(this.activeObservations_=[],this.observations_=new ee,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=n}function Z(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof ae(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new le(t)),this.controller_.addObserver(this),this.controller_.refresh())}}function $(t){if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");if("undefined"!=typeof Element&&Element instanceof Object){if(!(t instanceof ae(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)&&(e.delete(t),e.size||this.controller_.removeObserver(this))}}function tt(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)}function et(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))}function nt(t){return new he(t.target,t.broadcastRect())}function rt(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map(nt);this.callback_.call(t,e,t),this.clearActive()}}function it(){this.activeObservations_.splice(0)}function ot(){return this.activeObservations_.length>0}function ut(t){function e(){return r.disconnect()}var n=l(),r=ye(t,n);return ft.useEffect((function(){return e}),[r]),r}function st(t){t.cancel()}function ct(t,e){var n,r=e.align,i=void 0===r?"top":r,o=e.element,u=void 0===o?"undefined"!=typeof window&&window:o,s=e.offset,c=void 0===s?0:s,a=e.height,f=void 0===a?"undefined"!=typeof window?window.innerHeight:0:a,l=ht({positioner:t,element:u,align:i,offset:c,height:f}),h=ft.useRef((function(){var t=l.current.element;return t&&"current"in t?t.current:t})).current,v=ft.useReducer((function(t,e){var n,r={position:t.position,index:t.index,prevTop:t.prevTop};if("scrollToIndex"===e.type)return{position:l.current.positioner.get(null!==(n=e.value)&&void 0!==n?n:-1),index:e.value,prevTop:void 0};if("setPosition"===e.type)r.position=e.value;else if("setPrevTop"===e.type)r.prevTop=e.value;else if("reset"===e.type)return be;return r}),be),m=v[0],g=v[1],y=p(g,15);d(h(),"scroll",(function(){if(!m.position&&m.index){var t=l.current.positioner.get(m.index);t&&g({type:"setPosition",value:t})}}));var b=void 0!==m.index&&(null===(n=l.current.positioner.get(m.index))||void 0===n?void 0:n.top);return ft.useEffect((function(){var t=h();if(t){var e=l.current,n=e.height,r=e.align,i=e.offset,o=e.positioner;if(m.position){var u=m.position.top;"bottom"===r?u=u-n+m.position.height:"center"===r&&(u-=(n-m.position.height)/2),t.scrollTo(0,Math.max(0,u+=i));var s=0,c=setTimeout((function(){return!s&&g({type:"reset"})}),400);return function(){s=1,clearTimeout(c)}}if(void 0!==m.index){var a=o.shortestColumn()/o.size()*m.index;m.prevTop&&(a=Math.max(a,m.prevTop+n)),t.scrollTo(0,a),y({type:"setPrevTop",value:a})}}}),[b,m,l,h,y]),ft.useRef((function(t){g({type:"scrollToIndex",value:t})})).current}function at(t){var e=ft.useRef(null),n=function(t){void 0===t&&(t=mt);var e=t,n=e.wait,r=e.leading,i=e.initialWidth,o=void 0===i?0:i,u=e.initialHeight,s=function(t,e,n){var r=ft.useState(t);return[r[0],vt(r[1],e,n)]}("undefined"==typeof document?[o,void 0===u?0:u]:yt,n,r),c=s[0],a=s[1],f=function(){return a(yt)};return d(gt,"resize",f),d(gt,"orientationchange",f),c}({initialWidth:t.ssrWidth,initialHeight:t.ssrHeight}),r=y(e,n),i=f({offset:r.offset,width:r.width||n[0],height:n[1],containerRef:e},t);i.positioner=b(i),i.resizeObserver=ut(i.positioner);var o=ct(i.positioner,{height:i.height,offset:r.offset,align:"object"==typeof t.scrollToIndex?t.scrollToIndex.align:void 0}),u=t.scrollToIndex&&("number"==typeof t.scrollToIndex?t.scrollToIndex:t.scrollToIndex.index);return ft.useEffect((function(){void 0!==u&&o(u)}),[u,o]),we(g,i)}var ft=r(e),dt=n(e),lt={low:0,max:0,high:0,C:2,P:void 0,R:void 0,L:void 0,list:void 0};lt.P=lt,lt.L=lt,lt.R=lt;var ht=function(t){var e=ft.useRef(t);return ft.useEffect((function(){e.current=t})),e},vt=function(t,e,n){function r(){u.current&&clearTimeout(u.current),u.current=void 0}function i(){u.current=void 0}void 0===e&&(e=100),void 0===n&&(n=0);var o=ht(t),u=ft.useRef(),s=[e,n,o];return ft.useEffect((function(){return r}),s),ft.useCallback((function(){var t=arguments,r=u.current;if(void 0===r&&n)return u.current=setTimeout(i,e),o.current.apply(null,t);r&&clearTimeout(r),u.current=setTimeout((function(){u.current=void 0,o.current.apply(null,t)}),e)}),s)},pt=dt.default["undefined"!=typeof document&&void 0!==document.createElement?"useLayoutEffect":"useEffect"],mt={},gt="undefined"==typeof window?null:window,yt=function(){return[document.documentElement.clientWidth,document.documentElement.clientHeight]},bt=function(t,e){var n,r,i=e||wt;return function(){return n&&i(arguments,n)?r:r=t.apply(null,n=arguments)}},wt=function(t,e){return t[0]===e[0]&&t[1]===e[1]&&t[2]===e[2]&&t[3]===e[3]},_t=function(){var t,e;this.set=void 0,this.get=void 0,this.get=function(n){return n===t?e:void 0},this.set=function(n,r){t=n,e=r}},Pt=function(t){try{return new t}catch(t){var e={};return{set:function(t,n){e[t]=n},get:function(t){return e[t]}}}},xt=function(t,e){var n,r,i,o,u,s,c,a,f,d=(c=(r=t).length,a=Pt(r[0]),f=1===c,3>c?{g:function(t){return void 0===(i=a.get(t[0]))||f?i:i.get(t[1])},s:function(t,e){return f?a.set(t[0],e):void 0===(i=a.get(t[0]))?((o=Pt(r[1])).set(t[1],e),a.set(t[0],o)):i.set(t[1],e),e}}:{g:function(t){for(s=a,u=0;c>u;u++)if(void 0===(s=s.get(t[u])))return;return s},s:function(t,e){for(s=a,u=0;c-1>u;u++)void 0===(o=s.get(t[u]))?(o=Pt(r[u+1]),s.set(t[u],o),s=o):s=o;return s.set(t[c-1],e),e}}),l=d.g,h=d.s;return function(){return void 0===(n=l(arguments))?h(arguments,e.apply(null,arguments)):n}},Rt=new WeakMap,Ct={},Et=ft.createElement,Mt="0",Lt=xt([_t,{},WeakMap,_t],(function(t,e,n,r){return Et(t,{index:e,data:n,width:r})})),Ot=bt((function(t,e){return{position:"relative",width:"100%",maxWidth:"100%",height:Math.ceil(e),maxHeight:Math.ceil(e),willChange:t?"contents":void 0,pointerEvents:t?"none":void 0}})),Tt=function(t,e){return t[0]===e[0]&&t[1]===e[1]},zt=bt((function(t,e){return f({},t,e)}),Tt),At=bt((function(t){return{width:t,zIndex:-1e3,visibility:"hidden",position:"absolute",writingMode:"horizontal-tb"}}),(function(t,e){return t[0]===e[0]})),St=bt((function(t,e){return function(n){return function(r){null!==r&&(e&&(e.observe(r),Rt.set(r,n)),void 0===t.get(n)&&t.set(n,r.offsetHeight))}}}),Tt),jt="undefined",kt=typeof window!==jt?window:{},It=typeof performance!==jt?performance:Date,Wt=function(){return It.now()},Ht="AnimationFrame",Dt="cancel"+Ht,Gt="request"+Ht,qt=kt[Gt]&&kt[Gt].bind(kt),Bt=kt[Dt]&&kt[Dt].bind(kt);if(!qt||!Bt){var Ft=0;qt=function(t){var e=Wt(),n=Math.max(Ft+1e3/60,e);return setTimeout((function(){t(Ft=n)}),n-e)},Bt=function(t){return clearTimeout(t)}}var Nt="undefined"!=typeof performance?performance:Date,Vt=function(){return Nt.now()},Yt="undefined"==typeof window?null:window,Kt=function(){return void 0!==Yt.scrollY?Yt.scrollY:void 0===Yt.pageYOffset?0:Yt.pageYOffset},Jt=function(t){void 0===t&&(t=30);var e=function(t,e){var n=ft.useState(t);return[n[0],p(n[1],e,1)]}("undefined"==typeof window?0:Kt,t);return d(Yt,"scroll",(function(){return e[1](Kt())})),e[0]},Qt=[],Ut=function(t,e,n,r){void 0===n&&(n=0),void 0===r&&(r=n);for(var i=a(),o=new Array(t),u=[],s=new Array(t),c=0;t>c;c++)o[c]=0,s[c]=[];return{columnCount:t,columnWidth:e,set:function(t,c){void 0===c&&(c=0);for(var a=0,f=1;f<o.length;f++)o[f]<o[a]&&(a=f);var d=o[a]||0;o[a]=d+c+r,s[a].push(t),u[t]={left:a*(e+n),top:d,height:c,column:a},i.insert(d,d+c,t)},get:function(t){return u[t]},update:function(e){for(var n=new Array(t),c=0,a=0;c<e.length-1;c++){var f=e[c],d=u[f];d.height=e[++c],i.remove(f),i.insert(d.top,d.top+d.height,f),n[d.column]=void 0===n[d.column]?f:Math.min(f,n[d.column])}for(c=0;c<n.length;c++)if(void 0!==n[c]){var l=s[c],h=Xt(l,n[c]),v=s[c][h],p=u[v];for(o[c]=p.top+p.height+r,a=h+1;a<l.length;a++){var m=l[a],g=u[m];g.top=o[c],o[c]=g.top+g.height+r,i.remove(m),i.insert(g.top,g.top+g.height,m)}}},range:function(t,e,n){return i.search(t,e,(function(t,e){return n(t,u[t].left,e)}))},estimateHeight:function(e,n){var r=Math.max(0,Math.max.apply(null,o));return e===i.size?r:r+Math.ceil((e-i.size)/t)*n},shortestColumn:function(){return o.length>1?Math.min.apply(null,o):o[0]||0},size:function(){return i.size},all:function(){return u}}},Xt=function(t,e){for(var n=0,r=t.length-1;r>=n;){var i=n+r>>>1,o=t[i];if(o===e)return i;o>e?r=i-1:n=i+1}return-1},Zt=function(t,e,n,r){return void 0===t&&(t=0),void 0===e&&(e=0),void 0===n&&(n=8),r=r||Math.floor(t/(e+n))||1,[Math.floor((t-n*(r-1))/r),r]},$t=[],te=function(t){function e(){r=null,t.apply(void 0,n)}var n=[],r=null,i=function(){for(var t=arguments.length,i=new Array(t),o=0;t>o;o++)i[o]=arguments[o];n=i,r||(r=requestAnimationFrame(e))};return i.cancel=function(){r&&(cancelAnimationFrame(r),r=null)},i},ee=function(){return"undefined"!=typeof Map?Map:(Object.defineProperty(_.prototype,"size",{get:P,enumerable:1,configurable:1}),_.prototype.get=x,_.prototype.set=R,_.prototype.delete=C,_.prototype.has=E,_.prototype.clear=M,_.prototype.forEach=L,_)}(),ne="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,re=function(){return"undefined"!=typeof global&&global.Math===Math?global:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")()}(),ie=function(){return"function"==typeof requestAnimationFrame?requestAnimationFrame.bind(re):O}(),oe=["top","right","bottom","left","width","height","size","weight"],ue="undefined"!=typeof MutationObserver,se=function(){return T.prototype.addObserver=z,T.prototype.removeObserver=A,T.prototype.refresh=S,T.prototype.updateObservers_=I,T.prototype.connect_=W,T.prototype.disconnect_=H,T.prototype.onTransitionEnd_=D,T.getInstance=G,T.instance_=null,T}(),ce=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var i=r[n];Object.defineProperty(t,i,{value:e[i],enumerable:0,writable:0,configurable:1})}return t},ae=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||re},fe=Y(0,0,0,0),de=function(){return"undefined"!=typeof SVGGraphicsElement?F:N}(),le=function(){return K.prototype.isActive=J,K.prototype.broadcastRect=Q,K}(),he=function(){return U}(),ve=function(){return X.prototype.observe=Z,X.prototype.unobserve=$,X.prototype.disconnect=tt,X.prototype.gatherActive=et,X.prototype.broadcastActive=rt,X.prototype.clearActive=it,X.prototype.hasActive=ot,X}(),pe="undefined"!=typeof WeakMap?new WeakMap:new ee,me=function(){return function t(e){if(!(this instanceof t))throw new TypeError("Cannot call a class as a function.");if(!arguments.length)throw new TypeError("1 argument required, but only 0 present.");var n=se.getInstance(),r=new ve(e,n,this);pe.set(this,r)}}();["observe","unobserve","disconnect"].forEach((function(t){me.prototype[t]=function(){var e;return(e=pe.get(this))[t].apply(e,arguments)}}));var ge=function(){return void 0!==re.ResizeObserver?re.ResizeObserver:me}(),ye=xt([WeakMap],(function(t,e){var n=[],r=te((function(){n.length>0&&(t.update(n),e(n)),n.length=0})),i=function(e){var i=e.offsetHeight;if(i>0){var o=Rt.get(e);if(void 0!==o){var u=t.get(o);void 0!==u&&i!==u.height&&n.push(o,i)}}r()},o=new Map,u=new ge((function(t){for(var e=0;e<t.length;e++){var n=t[e],r=Rt.get(n.target);if(void 0!==r){var u=o.get(r);u||(u=te(i),o.set(r,u)),u(n.target)}}})),s=u.disconnect.bind(u);return u.disconnect=function(){s(),o.forEach(st)},u})),be={index:void 0,position:void 0,prevTop:void 0},we=ft.createElement,_e=ft.createElement,Pe=function(t,e){return void 0!==e[t]},xe={};t.List=function(t){return _e(at,f({role:"list",rowGutter:t.rowGutter,columnCount:1,columnWidth:1},t))},t.Masonry=at,t.MasonryScroller=g,t.createIntervalTree=a,t.createPositioner=Ut,t.createResizeObserver=ye,t.useContainerPosition=y,t.useInfiniteLoader=function(t,e){void 0===e&&(e=xe);var n=e,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=ht(t),d=ht(r);return ft.useCallback((function(t,e,n){for(var r=function(t,e,n,r,i,o){void 0===t&&(t=Pe),void 0===e&&(e=16),void 0===r&&(r=9e9);for(var u,s,c=[],a=i;o>=a;a++)t(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+e-1),r-1);for(a=s+1;f>=a&&!t(a,n);a++)s=a;c.push(u,s)}if(c.length)for(var d=c[0],l=c[1];e>l-d+1&&d>0;){var h=d-1;if(t(h,n))break;c[0]=d=h}return c}(d.current,o,n,a,Math.max(0,t-s),Math.min(a-1,(e||0)+s)),i=0;i<r.length-1;++i)f.current(r[i],r[++i],n)}),[a,o,s,f,d])},t.useMasonry=h,t.usePositioner=b,t.useResizeObserver=ut,t.useScrollToIndex=ct,t.useScroller=m,Object.defineProperty(t,"__esModule",{value:1})}));
 //# sourceMappingURL=masonic.js.map

package.json

 {
   "name": "masonic",
-  "version": "3.6.1",
+  "version": "3.6.2",
   "description": "",
@@ -5,0 +5,0 @@ "license": "MIT",

src/use-resize-observer.ts

@@ -24,2 +24,6 @@ import rafSchd from "raf-schd";
 
+const _handlerForType = rafSchd((target: HTMLElement) => {});
+
+type IHandler = typeof _handlerForType;
+
 /**
@@ -37,4 +41,29 @@ * Creates a resize observer that fires an `updater` callback whenever the height of
   (positioner: Positioner, updater: (updates: number[]) => void) => {
-    const handleEntries = rafSchd(((entries) => {
-      const updates: number[] = [];
+    const updates: number[] = [];
+
+    const update = rafSchd(() => {
+      if (updates.length > 0) {
+        // Updates the size/positions of the cell with the resize
+        // observer updates
+        positioner.update(updates);
+        updater(updates);
+      }
+      updates.length = 0;
+    });
+
+    const commonHandler = (target: HTMLElement) => {
+      const height = target.offsetHeight;
+      if (height > 0) {
+        const index = elementsCache.get(target);
+        if (index !== void 0) {
+          const position = positioner.get(index);
+          if (position !== void 0 && height !== position.height)
+            updates.push(index, height);
+        }
+      }
+      update();
+    };
+
+    const handlers = new Map<number, IHandler>();
+    const handleEntries: ResizeObserverCallback = (entries) => {
       let i = 0;
@@ -44,24 +73,14 @@
         const entry = entries[i];
-        const height = (entry.target as HTMLElement).offsetHeight;
+        const index = elementsCache.get(entry.target);
 
-        if (height > 0) {
-          const index = elementsCache.get(entry.target);
-
-          if (index !== void 0) {
-            const position = positioner.get(index);
-
-            if (position !== void 0 && height !== position.height)
-              updates.push(index, height);
-          }
+        if (index === void 0) continue;
+        let handler = handlers.get(index);
+        if (!handler) {
+          handler = rafSchd(commonHandler);
+          handlers.set(index, handler);
         }
+        handler(entry.target as HTMLElement);
       }
+    };
 
-      if (updates.length > 0) {
-        // Updates the size/positions of the cell with the resize
-        // observer updates
-        positioner.update(updates);
-        updater(updates);
-      }
-    }) as ResizeObserverCallback);
-
     const ro = new ResizeObserver(handleEntries);
@@ -74,3 +93,5 @@ // Overrides the original disconnect to include cancelling handling the entries.
       disconnect();
-      handleEntries.cancel();
+      handlers.forEach((handler) => {
+        handler.cancel();
+      });
     };
@@ -77,0 +98,0 @@

No alert changes

Improved metrics

Total package byte prevSize

990483

increased by0.93%

Number of package files

73

increased by1.39%

Lines of code

9912

increased by1.72%

No dependency changes