react-stone-mason 1.0.22 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/build/index.js CHANGED
@@ -1,2 +1,8 @@
1
- module.exports=function(t){var e={};function n(r){if(e[r])return e[r].exports;var o=e[r]={i:r,l:!1,exports:{}};return t[r].call(o.exports,o,o.exports,n),o.l=!0,o.exports}return n.m=t,n.c=e,n.d=function(t,e,r){n.o(t,e)||Object.defineProperty(t,e,{enumerable:!0,get:r})},n.r=function(t){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(t,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(t,"__esModule",{value:!0})},n.t=function(t,e){if(1&e&&(t=n(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var r=Object.create(null);if(n.r(r),Object.defineProperty(r,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)n.d(r,o,function(e){return t[e]}.bind(null,o));return r},n.n=function(t){var e=t&&t.__esModule?function(){return t.default}:function(){return t};return n.d(e,"a",e),e},n.o=function(t,e){return Object.prototype.hasOwnProperty.call(t,e)},n.p="",n(n.s=0)}([function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});const r=n(1),o=n(2);n(4);const i={childList:!0,subtree:!0},s=(t,e,n)=>{if(!e)return;let r;if(Object.keys(n).forEach(t=>{const e=!n[t].query;(window.matchMedia(n[t].query).matches||e)&&(r=t)}),!r)return;let o=+n[r].columns||1,i=Array.from(e.children);const s=t.reduce((t,e)=>Math.min(t,i.indexOf(e)),i.length),c=Math.max(0,s-o);i.forEach((t,e)=>{if(e>=c){const n=e%o,r=i.slice(e-n,e-n+o),s=i[e-o],c=Number((null==s?void 0:s.getAttribute("data-debt"))||0),a=Math.max(...r.map(t=>t.getBoundingClientRect().height)),u=c+Math.ceil(a-t.getBoundingClientRect().height);t.setAttribute("data-debt",String(u)),t.style.transform=e>o-1?`translateY(-${c}px)`:""}}),window.requestAnimationFrame(()=>{var t,n;const r=i.slice(-1*o),s=Math.max(...r.map(t=>t.getBoundingClientRect().bottom)),c=null!==(n=null===(t=i[0])||void 0===t?void 0:t.getBoundingClientRect().top)&&void 0!==n?n:0;e.style.height=s-c+"px"})};e.default=function({children:t=[],columns:e}){const n=r.useRef();return r.useLayoutEffect(()=>{const t=Array.from(n.current.children);s(t,n.current,e)},[n,e]),r.useEffect(()=>{const t={},r=n.current.style,o=()=>{Object.keys(t).forEach(o=>{const i=Array.from(n.current.children),c=(100/e[o].columns).toFixed(3)+"%";!t[o].matches&&e[o].query||(r.setProperty("--cell-width",c),window.requestAnimationFrame(()=>s(i,n.current,e)))})};return Object.keys(e).forEach(n=>{t[n]=window.matchMedia(e[n].query),t[n].addListener(o),o()}),()=>{Object.keys(t).forEach(e=>t[e].removeListener(o))}},[e,n]),r.useEffect(()=>{const t=t=>{const o=Array.from(n.current.children),i=(null==t?void 0:t.length)?t.map(t=>t.target):o;s(i,r,e)},r=n.current,c=new o.default(e=>{t(e)}),a=new MutationObserver(e=>{t(e)});return Array.from(n.current.children).forEach(t=>c.observe(t)),c.observe(r),a.observe(r,i),()=>{c.disconnect(),a.disconnect()}},[n,e,t]),r.createElement("div",{className:"mason-container",ref:n},r.Children.toArray(t).filter(t=>t).map((t,e)=>r.createElement("div",{key:"child-"+e},t)))}},function(t,e){t.exports=require("react")},function(t,e,n){"use strict";n.r(e),function(t){var n=function(){if("undefined"!=typeof Map)return Map;function t(t,e){var n=-1;return t.some((function(t,r){return t[0]===e&&(n=r,!0)})),n}return function(){function e(){this.__entries__=[]}return Object.defineProperty(e.prototype,"size",{get:function(){return this.__entries__.length},enumerable:!0,configurable:!0}),e.prototype.get=function(e){var n=t(this.__entries__,e),r=this.__entries__[n];return r&&r[1]},e.prototype.set=function(e,n){var r=t(this.__entries__,e);~r?this.__entries__[r][1]=n:this.__entries__.push([e,n])},e.prototype.delete=function(e){var n=this.__entries__,r=t(n,e);~r&&n.splice(r,1)},e.prototype.has=function(e){return!!~t(this.__entries__,e)},e.prototype.clear=function(){this.__entries__.splice(0)},e.prototype.forEach=function(t,e){void 0===e&&(e=null);for(var n=0,r=this.__entries__;n<r.length;n++){var o=r[n];t.call(e,o[1],o[0])}},e}()}(),r="undefined"!=typeof window&&"undefined"!=typeof document&&window.document===document,o=void 0!==t&&t.Math===Math?t:"undefined"!=typeof self&&self.Math===Math?self:"undefined"!=typeof window&&window.Math===Math?window:Function("return this")(),i="function"==typeof requestAnimationFrame?requestAnimationFrame.bind(o):function(t){return setTimeout((function(){return t(Date.now())}),1e3/60)};var s=["top","right","bottom","left","width","height","size","weight"],c="undefined"!=typeof MutationObserver,a=function(){function t(){this.connected_=!1,this.mutationEventsAdded_=!1,this.mutationsObserver_=null,this.observers_=[],this.onTransitionEnd_=this.onTransitionEnd_.bind(this),this.refresh=function(t,e){var n=!1,r=!1,o=0;function s(){n&&(n=!1,t()),r&&a()}function c(){i(s)}function a(){var t=Date.now();if(n){if(t-o<2)return;r=!0}else n=!0,r=!1,setTimeout(c,e);o=t}return a}(this.refresh.bind(this),20)}return t.prototype.addObserver=function(t){~this.observers_.indexOf(t)||this.observers_.push(t),this.connected_||this.connect_()},t.prototype.removeObserver=function(t){var e=this.observers_,n=e.indexOf(t);~n&&e.splice(n,1),!e.length&&this.connected_&&this.disconnect_()},t.prototype.refresh=function(){this.updateObservers_()&&this.refresh()},t.prototype.updateObservers_=function(){var t=this.observers_.filter((function(t){return t.gatherActive(),t.hasActive()}));return t.forEach((function(t){return t.broadcastActive()})),t.length>0},t.prototype.connect_=function(){r&&!this.connected_&&(document.addEventListener("transitionend",this.onTransitionEnd_),window.addEventListener("resize",this.refresh),c?(this.mutationsObserver_=new MutationObserver(this.refresh),this.mutationsObserver_.observe(document,{attributes:!0,childList:!0,characterData:!0,subtree:!0})):(document.addEventListener("DOMSubtreeModified",this.refresh),this.mutationEventsAdded_=!0),this.connected_=!0)},t.prototype.disconnect_=function(){r&&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_=!1,this.connected_=!1)},t.prototype.onTransitionEnd_=function(t){var e=t.propertyName,n=void 0===e?"":e;s.some((function(t){return!!~n.indexOf(t)}))&&this.refresh()},t.getInstance=function(){return this.instance_||(this.instance_=new t),this.instance_},t.instance_=null,t}(),u=function(t,e){for(var n=0,r=Object.keys(e);n<r.length;n++){var o=r[n];Object.defineProperty(t,o,{value:e[o],enumerable:!1,writable:!1,configurable:!0})}return t},f=function(t){return t&&t.ownerDocument&&t.ownerDocument.defaultView||o},h=m(0,0,0,0);function d(t){return parseFloat(t)||0}function l(t){for(var e=[],n=1;n<arguments.length;n++)e[n-1]=arguments[n];return e.reduce((function(e,n){return e+d(t["border-"+n+"-width"])}),0)}function p(t){var e=t.clientWidth,n=t.clientHeight;if(!e&&!n)return h;var r=f(t).getComputedStyle(t),o=function(t){for(var e={},n=0,r=["top","right","bottom","left"];n<r.length;n++){var o=r[n],i=t["padding-"+o];e[o]=d(i)}return e}(r),i=o.left+o.right,s=o.top+o.bottom,c=d(r.width),a=d(r.height);if("border-box"===r.boxSizing&&(Math.round(c+i)!==e&&(c-=l(r,"left","right")+i),Math.round(a+s)!==n&&(a-=l(r,"top","bottom")+s)),!function(t){return t===f(t).document.documentElement}(t)){var u=Math.round(c+i)-e,p=Math.round(a+s)-n;1!==Math.abs(u)&&(c-=u),1!==Math.abs(p)&&(a-=p)}return m(o.left,o.top,c,a)}var v="undefined"!=typeof SVGGraphicsElement?function(t){return t instanceof f(t).SVGGraphicsElement}:function(t){return t instanceof f(t).SVGElement&&"function"==typeof t.getBBox};function b(t){return r?v(t)?function(t){var e=t.getBBox();return m(0,0,e.width,e.height)}(t):p(t):h}function m(t,e,n,r){return{x:t,y:e,width:n,height:r}}var y=function(){function t(t){this.broadcastWidth=0,this.broadcastHeight=0,this.contentRect_=m(0,0,0,0),this.target=t}return t.prototype.isActive=function(){var t=b(this.target);return this.contentRect_=t,t.width!==this.broadcastWidth||t.height!==this.broadcastHeight},t.prototype.broadcastRect=function(){var t=this.contentRect_;return this.broadcastWidth=t.width,this.broadcastHeight=t.height,t},t}(),_=function(t,e){var n,r,o,i,s,c,a,f=(r=(n=e).x,o=n.y,i=n.width,s=n.height,c="undefined"!=typeof DOMRectReadOnly?DOMRectReadOnly:Object,a=Object.create(c.prototype),u(a,{x:r,y:o,width:i,height:s,top:o,right:r+i,bottom:s+o,left:r}),a);u(this,{target:t,contentRect:f})},g=function(){function t(t,e,r){if(this.activeObservations_=[],this.observations_=new n,"function"!=typeof t)throw new TypeError("The callback provided as parameter 1 is not a function.");this.callback_=t,this.controller_=e,this.callbackCtx_=r}return t.prototype.observe=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 f(t).Element))throw new TypeError('parameter 1 is not of type "Element".');var e=this.observations_;e.has(t)||(e.set(t,new y(t)),this.controller_.addObserver(this),this.controller_.refresh())}},t.prototype.unobserve=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 f(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))}},t.prototype.disconnect=function(){this.clearActive(),this.observations_.clear(),this.controller_.removeObserver(this)},t.prototype.gatherActive=function(){var t=this;this.clearActive(),this.observations_.forEach((function(e){e.isActive()&&t.activeObservations_.push(e)}))},t.prototype.broadcastActive=function(){if(this.hasActive()){var t=this.callbackCtx_,e=this.activeObservations_.map((function(t){return new _(t.target,t.broadcastRect())}));this.callback_.call(t,e,t),this.clearActive()}},t.prototype.clearActive=function(){this.activeObservations_.splice(0)},t.prototype.hasActive=function(){return this.activeObservations_.length>0},t}(),w="undefined"!=typeof WeakMap?new WeakMap:new n,O=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=a.getInstance(),r=new g(e,n,this);w.set(this,r)};["observe","unobserve","disconnect"].forEach((function(t){O.prototype[t]=function(){var e;return(e=w.get(this))[t].apply(e,arguments)}}));var E=void 0!==o.ResizeObserver?o.ResizeObserver:O;e.default=E}.call(this,n(3))},function(t,e){var n;n=function(){return this}();try{n=n||new Function("return this")()}catch(t){"object"==typeof window&&(n=window)}t.exports=n},function(t,e,n){var r=n(5);"string"==typeof r&&(r=[[t.i,r,""]]);var o={hmr:!0,transform:void 0,insertInto:void 0};n(7)(r,o);r.locals&&(t.exports=r.locals)},function(t,e,n){(e=n(6)(!1)).push([t.i,".mason-container {\r\n position: relative;\r\n overflow: hidden;\r\n --cell-width: 100%;\r\n box-sizing: border-box;\r\n margin: 0;\r\n padding: 0;\r\n}\r\n\r\n.mason-container > * {\r\n box-sizing: inherit;\r\n display: inline-block;\r\n vertical-align: top;\r\n width: var(--cell-width);\r\n}",""]),t.exports=e},function(t,e,n){"use strict";t.exports=function(t){var e=[];return e.toString=function(){return this.map((function(e){var n=function(t,e){var n=t[1]||"",r=t[3];if(!r)return n;if(e&&"function"==typeof btoa){var o=(s=r,c=btoa(unescape(encodeURIComponent(JSON.stringify(s)))),a="sourceMappingURL=data:application/json;charset=utf-8;base64,".concat(c),"/*# ".concat(a," */")),i=r.sources.map((function(t){return"/*# sourceURL=".concat(r.sourceRoot||"").concat(t," */")}));return[n].concat(i).concat([o]).join("\n")}var s,c,a;return[n].join("\n")}(e,t);return e[2]?"@media ".concat(e[2]," {").concat(n,"}"):n})).join("")},e.i=function(t,n,r){"string"==typeof t&&(t=[[null,t,""]]);var o={};if(r)for(var i=0;i<this.length;i++){var s=this[i][0];null!=s&&(o[s]=!0)}for(var c=0;c<t.length;c++){var a=[].concat(t[c]);r&&o[a[0]]||(n&&(a[2]?a[2]="".concat(n," and ").concat(a[2]):a[2]=n),e.push(a))}},e}},function(t,e,n){var r,o,i={},s=(r=function(){return window&&document&&document.all&&!window.atob},function(){return void 0===o&&(o=r.apply(this,arguments)),o}),c=function(t,e){return e?e.querySelector(t):document.querySelector(t)},a=function(t){var e={};return function(t,n){if("function"==typeof t)return t();if(void 0===e[t]){var r=c.call(this,t,n);if(window.HTMLIFrameElement&&r instanceof window.HTMLIFrameElement)try{r=r.contentDocument.head}catch(t){r=null}e[t]=r}return e[t]}}(),u=null,f=0,h=[],d=n(8);function l(t,e){for(var n=0;n<t.length;n++){var r=t[n],o=i[r.id];if(o){o.refs++;for(var s=0;s<o.parts.length;s++)o.parts[s](r.parts[s]);for(;s<r.parts.length;s++)o.parts.push(_(r.parts[s],e))}else{var c=[];for(s=0;s<r.parts.length;s++)c.push(_(r.parts[s],e));i[r.id]={id:r.id,refs:1,parts:c}}}}function p(t,e){for(var n=[],r={},o=0;o<t.length;o++){var i=t[o],s=e.base?i[0]+e.base:i[0],c={css:i[1],media:i[2],sourceMap:i[3]};r[s]?r[s].parts.push(c):n.push(r[s]={id:s,parts:[c]})}return n}function v(t,e){var n=a(t.insertInto);if(!n)throw new Error("Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.");var r=h[h.length-1];if("top"===t.insertAt)r?r.nextSibling?n.insertBefore(e,r.nextSibling):n.appendChild(e):n.insertBefore(e,n.firstChild),h.push(e);else if("bottom"===t.insertAt)n.appendChild(e);else{if("object"!=typeof t.insertAt||!t.insertAt.before)throw new Error("[Style Loader]\n\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\n Must be 'top', 'bottom', or Object.\n (https://github.com/webpack-contrib/style-loader#insertat)\n");var o=a(t.insertAt.before,n);n.insertBefore(e,o)}}function b(t){if(null===t.parentNode)return!1;t.parentNode.removeChild(t);var e=h.indexOf(t);e>=0&&h.splice(e,1)}function m(t){var e=document.createElement("style");if(void 0===t.attrs.type&&(t.attrs.type="text/css"),void 0===t.attrs.nonce){var r=function(){0;return n.nc}();r&&(t.attrs.nonce=r)}return y(e,t.attrs),v(t,e),e}function y(t,e){Object.keys(e).forEach((function(n){t.setAttribute(n,e[n])}))}function _(t,e){var n,r,o,i;if(e.transform&&t.css){if(!(i="function"==typeof e.transform?e.transform(t.css):e.transform.default(t.css)))return function(){};t.css=i}if(e.singleton){var s=f++;n=u||(u=m(e)),r=O.bind(null,n,s,!1),o=O.bind(null,n,s,!0)}else t.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(n=function(t){var e=document.createElement("link");return void 0===t.attrs.type&&(t.attrs.type="text/css"),t.attrs.rel="stylesheet",y(e,t.attrs),v(t,e),e}(e),r=x.bind(null,n,e),o=function(){b(n),n.href&&URL.revokeObjectURL(n.href)}):(n=m(e),r=E.bind(null,n),o=function(){b(n)});return r(t),function(e){if(e){if(e.css===t.css&&e.media===t.media&&e.sourceMap===t.sourceMap)return;r(t=e)}else o()}}t.exports=function(t,e){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");(e=e||{}).attrs="object"==typeof e.attrs?e.attrs:{},e.singleton||"boolean"==typeof e.singleton||(e.singleton=s()),e.insertInto||(e.insertInto="head"),e.insertAt||(e.insertAt="bottom");var n=p(t,e);return l(n,e),function(t){for(var r=[],o=0;o<n.length;o++){var s=n[o];(c=i[s.id]).refs--,r.push(c)}t&&l(p(t,e),e);for(o=0;o<r.length;o++){var c;if(0===(c=r[o]).refs){for(var a=0;a<c.parts.length;a++)c.parts[a]();delete i[c.id]}}}};var g,w=(g=[],function(t,e){return g[t]=e,g.filter(Boolean).join("\n")});function O(t,e,n,r){var o=n?"":r.css;if(t.styleSheet)t.styleSheet.cssText=w(e,o);else{var i=document.createTextNode(o),s=t.childNodes;s[e]&&t.removeChild(s[e]),s.length?t.insertBefore(i,s[e]):t.appendChild(i)}}function E(t,e){var n=e.css,r=e.media;if(r&&t.setAttribute("media",r),t.styleSheet)t.styleSheet.cssText=n;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(n))}}function x(t,e,n){var r=n.css,o=n.sourceMap,i=void 0===e.convertToAbsoluteUrls&&o;(e.convertToAbsoluteUrls||i)&&(r=d(r)),o&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(o))))+" */");var s=new Blob([r],{type:"text/css"}),c=t.href;t.href=URL.createObjectURL(s),c&&URL.revokeObjectURL(c)}},function(t,e){t.exports=function(t){var e="undefined"!=typeof window&&window.location;if(!e)throw new Error("fixUrls requires window.location");if(!t||"string"!=typeof t)return t;var n=e.protocol+"//"+e.host,r=n+e.pathname.replace(/\/[^\/]*$/,"/");return t.replace(/url\s*\(((?:[^)(]|\((?:[^)(]+|\([^)(]*\))*\))*)\)/gi,(function(t,e){var o,i=e.trim().replace(/^"(.*)"$/,(function(t,e){return e})).replace(/^'(.*)'$/,(function(t,e){return e}));return/^(#|data:|http:\/\/|https:\/\/|file:\/\/\/|\s*$)/i.test(i)?t:(o=0===i.indexOf("//")?i:0===i.indexOf("/")?n+i:r+i.replace(/^\.\//,""),"url("+JSON.stringify(o)+")")}))}}]);
1
+ "use strict";
2
+ var __importDefault = (this && this.__importDefault) || function (mod) {
3
+ return (mod && mod.__esModule) ? mod : { "default": mod };
4
+ };
5
+ Object.defineProperty(exports, "__esModule", { value: true });
6
+ const react_stone_mason_1 = __importDefault(require("./react-stone-mason"));
7
+ exports.default = react_stone_mason_1.default;
2
8
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/index.tsx","webpack:///external \"react\"","webpack:///./node_modules/resize-observer-polyfill/dist/ResizeObserver.es.js","webpack:///(webpack)/buildin/global.js","webpack:///./src/index.css?7d1f","webpack:///./src/index.css","webpack:///./node_modules/css-loader/dist/runtime/api.js","webpack:///./node_modules/style-loader/lib/addStyles.js","webpack:///./node_modules/style-loader/lib/urls.js"],"names":["installedModules","__webpack_require__","moduleId","exports","module","i","l","modules","call","m","c","d","name","getter","o","Object","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","prototype","hasOwnProperty","p","s","mutationConfig","childList","subtree","positionChildren","targets","container","columnConfig","breakPoint","keys","forEach","thisBreakPoint","defaultValue","query","window","matchMedia","matches","columns","children","Array","from","firstTarget","reduce","a","Math","min","indexOf","length","firstTargetRow","max","child","index","column","rowChildren","slice","prevChild","prevDebt","Number","getAttribute","maxHeight","map","rowChild","getBoundingClientRect","height","debt","ceil","setAttribute","String","style","transform","requestAnimationFrame","lastChildren","childBottomEdge","bottom","childTopEdge","top","containerRef","React","useRef","useLayoutEffect","containerChildren","current","useEffect","mqListeners","containerStyle","getQueryMatches","cellWidth","toFixed","setProperty","addListener","removeListener","doPositionChildren","entries","entry","target","containerNode","sizeObserver","domObserver","MutationObserver","observe","disconnect","className","ref","Children","toArray","filter","require","MapShim","Map","getIndex","arr","result","some","class_1","this","__entries__","configurable","set","push","delete","splice","has","clear","callback","ctx","_i","_a","isBrowser","document","global$1","global","self","Function","requestAnimationFrame$1","setTimeout","Date","now","transitionKeys","mutationObserverSupported","ResizeObserverController","connected_","mutationEventsAdded_","mutationsObserver_","observers_","onTransitionEnd_","refresh","delay","leadingCall","trailingCall","lastCallTime","resolvePending","proxy","timeoutCallback","timeStamp","throttle","addObserver","observer","connect_","removeObserver","observers","disconnect_","updateObservers_","activeObservers","gatherActive","hasActive","broadcastActive","addEventListener","attributes","characterData","removeEventListener","_b","propertyName","getInstance","instance_","defineConfigurable","props","writable","getWindowOf","ownerDocument","defaultView","emptyRect","createRectInit","toFloat","parseFloat","getBordersSize","styles","positions","arguments","size","position","getHTMLElementContentRect","clientWidth","clientHeight","getComputedStyle","paddings","positions_1","getPaddings","horizPad","left","right","vertPad","width","boxSizing","round","documentElement","isDocumentElement","vertScrollbar","horizScrollbar","abs","isSVGGraphicsElement","SVGGraphicsElement","SVGElement","getBBox","getContentRect","bbox","getSVGContentRect","x","y","ResizeObservation","broadcastWidth","broadcastHeight","contentRect_","isActive","rect","broadcastRect","ResizeObserverEntry","rectInit","Constr","contentRect","DOMRectReadOnly","ResizeObserverSPI","controller","callbackCtx","activeObservations_","observations_","TypeError","callback_","controller_","callbackCtx_","Element","observations","unobserve","clearActive","_this","observation","WeakMap","ResizeObserver","method","apply","g","e","content","options","undefined","locals","___CSS_LOADER_API_IMPORT___","useSourceMap","list","toString","item","cssMapping","btoa","sourceMapping","sourceMap","base64","unescape","encodeURIComponent","JSON","stringify","data","concat","sourceURLs","sources","source","sourceRoot","join","cssWithMappingToString","mediaQuery","dedupe","alreadyImportedModules","id","fn","memo","stylesInDom","isOldIE","all","atob","getTarget","parent","querySelector","getElement","styleTarget","HTMLIFrameElement","contentDocument","head","singleton","singletonCounter","stylesInsertedAtTop","fixUrls","addStylesToDom","domStyle","refs","j","parts","addStyle","listToStyles","newStyles","base","part","css","media","insertStyleElement","insertInto","Error","lastStyleElementInsertedAtTop","insertAt","nextSibling","insertBefore","appendChild","firstChild","before","removeStyleElement","parentNode","removeChild","idx","createStyleElement","createElement","attrs","type","nonce","getNonce","addAttrs","el","obj","update","remove","default","styleIndex","applyToSingletonTag","URL","createObjectURL","revokeObjectURL","Blob","link","rel","createLinkElement","updateLink","href","applyToTag","newObj","DEBUG","newList","mayRemove","textStore","replaceText","replacement","Boolean","styleSheet","cssText","cssNode","createTextNode","childNodes","autoFixUrls","convertToAbsoluteUrls","blob","oldSrc","location","baseUrl","protocol","host","currentDir","pathname","replace","fullMatch","origUrl","newUrl","unquotedOrigUrl","trim","$1","test"],"mappings":"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","file":"../build/index.js","sourcesContent":[" \t// The module cache\n \tvar installedModules = {};\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"\";\n\n\n \t// Load entry module and return exports\n \treturn __webpack_require__(__webpack_require__.s = 0);\n","import * as React from 'react'\r\nimport ResizeObserver from 'resize-observer-polyfill'\r\n\r\nimport './index.css'\r\n\r\ninterface MutationConfiguration {\r\n childList: boolean,\r\n subtree: boolean\r\n}\r\n\r\ninterface BreakPointData {\r\n query?: string,\r\n columns: number\r\n}\r\n\r\ninterface MasonryConfig {\r\n [key: string]: BreakPointData\r\n}\r\n\r\nexport interface MasonProps {\r\n children?: React.ReactNode[] | undefined,\r\n columns: MasonryConfig\r\n}\r\n\r\ntype entryWithTarget = {\r\n target: Node\r\n}\r\n\r\nconst mutationConfig = { childList: true, subtree: true } as MutationConfiguration\r\n\r\nconst positionChildren = (targets: HTMLElement[], container: HTMLElement, columnConfig: MasonryConfig): void => {\r\n // iterate through children - by column. find gap under each child and the element in the row below it.\r\n // add the gap to the 'column debt' and move the child vertically accordingly.\r\n\r\n if (!container) { return }\r\n let breakPoint: string\r\n\r\n Object.keys(columnConfig).forEach(thisBreakPoint => {\r\n const defaultValue = !columnConfig[thisBreakPoint].query\r\n const matchesThisBreakPoint = window.matchMedia(columnConfig[thisBreakPoint].query).matches\r\n if (matchesThisBreakPoint || defaultValue) { breakPoint = thisBreakPoint }\r\n })\r\n\r\n if (!breakPoint) { return }\r\n let columns: number = +columnConfig[breakPoint].columns || 1\r\n let children: HTMLElement[] = Array.from(container.children) as HTMLElement[]\r\n\r\n // find the first row of items impacted by the reposition, and begin positioning south of there\r\n const firstTarget = targets.reduce((a, c) => Math.min(a, children.indexOf(c)), children.length)\r\n const firstTargetRow = Math.max(0, firstTarget - columns)\r\n\r\n children.forEach((child: HTMLElement, index: number) => {\r\n if (index >= firstTargetRow) {\r\n const column: number = index % columns\r\n const rowChildren: HTMLElement[] = children.slice(index - column, index - column + columns)\r\n\r\n const prevChild: HTMLElement = children[index - columns]\r\n const prevDebt: number = Number(prevChild?.getAttribute('data-debt') || 0)\r\n\r\n const maxHeight: number = Math.max( ...rowChildren.map((rowChild: HTMLElement) => rowChild.getBoundingClientRect().height))\r\n const debt: number = prevDebt + Math.ceil(maxHeight - child.getBoundingClientRect().height)\r\n\r\n child.setAttribute('data-debt', String(debt))\r\n child.style.transform = index > columns - 1 ? `translateY(-${prevDebt}px)` : ''\r\n }\r\n })\r\n\r\n window.requestAnimationFrame(() => {\r\n const lastChildren = children.slice(-1 * (columns))\r\n const childBottomEdge = Math.max(...lastChildren.map((c: HTMLElement) => c.getBoundingClientRect().bottom))\r\n const childTopEdge = (children[0]?.getBoundingClientRect().top) ?? 0\r\n container.style.height = (childBottomEdge - childTopEdge) + 'px'\r\n })\r\n}\r\n\r\nexport default function Mason ({ children = [], columns } : MasonProps) {\r\n const containerRef = React.useRef<HTMLDivElement>()\r\n\r\n React.useLayoutEffect(() => {\r\n const containerChildren = Array.from(containerRef.current.children) as HTMLElement[]\r\n positionChildren(containerChildren, containerRef.current, columns)\r\n }, [ containerRef, columns ])\r\n\r\n React.useEffect(() => {\r\n\r\n // Listen for mediaQuery matches, and set the number of columns.\r\n const mqListeners: { [key: string]: MediaQueryList } = {}\r\n const containerStyle = containerRef.current.style\r\n\r\n // handle media query match changes\r\n const getQueryMatches = (): void => {\r\n Object.keys(mqListeners).forEach((breakPoint: string) => {\r\n const containerChildren = Array.from(containerRef.current.children) as HTMLElement[]\r\n const cellWidth: string = (100 / columns[breakPoint].columns).toFixed(3) + '%'\r\n if (mqListeners[breakPoint].matches || !columns[breakPoint].query) {\r\n containerStyle.setProperty('--cell-width', cellWidth)\r\n window.requestAnimationFrame(() => positionChildren(containerChildren, containerRef.current, columns))\r\n }\r\n })\r\n }\r\n\r\n // listen for query matches, attach listener\r\n Object.keys(columns).forEach((breakPoint: string) => {\r\n mqListeners[breakPoint] = window.matchMedia(columns[breakPoint].query)\r\n mqListeners[breakPoint].addListener(getQueryMatches)\r\n getQueryMatches()\r\n })\r\n\r\n return () => {\r\n // stop listening for query matches, and set number of columns\r\n Object.keys(mqListeners).forEach(breakPoint => mqListeners[breakPoint].removeListener(getQueryMatches))\r\n }\r\n }, [ columns, containerRef ])\r\n\r\n React.useEffect(() => {\r\n // listen for document resizing, and dom tree changes. recalculate transforms as needed.\r\n const doPositionChildren = (entries: entryWithTarget[] ): void => {\r\n\r\n const containerChildren = Array.from(containerRef.current.children) as HTMLElement[]\r\n const targets = entries?.length ? entries.map(entry => entry.target) as HTMLElement[] : containerChildren\r\n positionChildren(targets, containerNode, columns)\r\n }\r\n\r\n const containerNode = containerRef.current as HTMLElement\r\n const sizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { doPositionChildren(entries) })\r\n const domObserver = new MutationObserver((entries: MutationRecord[]) => { doPositionChildren(entries) })\r\n\r\n Array.from(containerRef.current.children).forEach(child => sizeObserver.observe(child))\r\n sizeObserver.observe(containerNode)\r\n domObserver.observe(containerNode, mutationConfig)\r\n\r\n return () => {\r\n sizeObserver.disconnect()\r\n domObserver.disconnect()\r\n }\r\n }, [containerRef, columns, children])\r\n\r\n\r\n return <div className={'mason-container'} ref={containerRef}>\r\n {React.Children.toArray(children).filter(c => c).map((child: React.ReactNode, i: number) => <div key={`child-${i}`}>{child}</div>)}\r\n </div>\r\n}\r\n","module.exports = require(\"react\");","/**\r\n * A collection of shims that provide minimal functionality of the ES6 collections.\r\n *\r\n * These implementations are not meant to be used outside of the ResizeObserver\r\n * modules as they cover only a limited range of use cases.\r\n */\r\n/* eslint-disable require-jsdoc, valid-jsdoc */\r\nvar MapShim = (function () {\r\n if (typeof Map !== 'undefined') {\r\n return Map;\r\n }\r\n /**\r\n * Returns index in provided array that matches the specified key.\r\n *\r\n * @param {Array<Array>} arr\r\n * @param {*} key\r\n * @returns {number}\r\n */\r\n function getIndex(arr, key) {\r\n var result = -1;\r\n arr.some(function (entry, index) {\r\n if (entry[0] === key) {\r\n result = index;\r\n return true;\r\n }\r\n return false;\r\n });\r\n return result;\r\n }\r\n return /** @class */ (function () {\r\n function class_1() {\r\n this.__entries__ = [];\r\n }\r\n Object.defineProperty(class_1.prototype, \"size\", {\r\n /**\r\n * @returns {boolean}\r\n */\r\n get: function () {\r\n return this.__entries__.length;\r\n },\r\n enumerable: true,\r\n configurable: true\r\n });\r\n /**\r\n * @param {*} key\r\n * @returns {*}\r\n */\r\n class_1.prototype.get = function (key) {\r\n var index = getIndex(this.__entries__, key);\r\n var entry = this.__entries__[index];\r\n return entry && entry[1];\r\n };\r\n /**\r\n * @param {*} key\r\n * @param {*} value\r\n * @returns {void}\r\n */\r\n class_1.prototype.set = function (key, value) {\r\n var index = getIndex(this.__entries__, key);\r\n if (~index) {\r\n this.__entries__[index][1] = value;\r\n }\r\n else {\r\n this.__entries__.push([key, value]);\r\n }\r\n };\r\n /**\r\n * @param {*} key\r\n * @returns {void}\r\n */\r\n class_1.prototype.delete = function (key) {\r\n var entries = this.__entries__;\r\n var index = getIndex(entries, key);\r\n if (~index) {\r\n entries.splice(index, 1);\r\n }\r\n };\r\n /**\r\n * @param {*} key\r\n * @returns {void}\r\n */\r\n class_1.prototype.has = function (key) {\r\n return !!~getIndex(this.__entries__, key);\r\n };\r\n /**\r\n * @returns {void}\r\n */\r\n class_1.prototype.clear = function () {\r\n this.__entries__.splice(0);\r\n };\r\n /**\r\n * @param {Function} callback\r\n * @param {*} [ctx=null]\r\n * @returns {void}\r\n */\r\n class_1.prototype.forEach = function (callback, ctx) {\r\n if (ctx === void 0) { ctx = null; }\r\n for (var _i = 0, _a = this.__entries__; _i < _a.length; _i++) {\r\n var entry = _a[_i];\r\n callback.call(ctx, entry[1], entry[0]);\r\n }\r\n };\r\n return class_1;\r\n }());\r\n})();\n\n/**\r\n * Detects whether window and document objects are available in current environment.\r\n */\r\nvar isBrowser = typeof window !== 'undefined' && typeof document !== 'undefined' && window.document === document;\n\n// Returns global object of a current environment.\r\nvar global$1 = (function () {\r\n if (typeof global !== 'undefined' && global.Math === Math) {\r\n return global;\r\n }\r\n if (typeof self !== 'undefined' && self.Math === Math) {\r\n return self;\r\n }\r\n if (typeof window !== 'undefined' && window.Math === Math) {\r\n return window;\r\n }\r\n // eslint-disable-next-line no-new-func\r\n return Function('return this')();\r\n})();\n\n/**\r\n * A shim for the requestAnimationFrame which falls back to the setTimeout if\r\n * first one is not supported.\r\n *\r\n * @returns {number} Requests' identifier.\r\n */\r\nvar requestAnimationFrame$1 = (function () {\r\n if (typeof requestAnimationFrame === 'function') {\r\n // It's required to use a bounded function because IE sometimes throws\r\n // an \"Invalid calling object\" error if rAF is invoked without the global\r\n // object on the left hand side.\r\n return requestAnimationFrame.bind(global$1);\r\n }\r\n return function (callback) { return setTimeout(function () { return callback(Date.now()); }, 1000 / 60); };\r\n})();\n\n// Defines minimum timeout before adding a trailing call.\r\nvar trailingTimeout = 2;\r\n/**\r\n * Creates a wrapper function which ensures that provided callback will be\r\n * invoked only once during the specified delay period.\r\n *\r\n * @param {Function} callback - Function to be invoked after the delay period.\r\n * @param {number} delay - Delay after which to invoke callback.\r\n * @returns {Function}\r\n */\r\nfunction throttle (callback, delay) {\r\n var leadingCall = false, trailingCall = false, lastCallTime = 0;\r\n /**\r\n * Invokes the original callback function and schedules new invocation if\r\n * the \"proxy\" was called during current request.\r\n *\r\n * @returns {void}\r\n */\r\n function resolvePending() {\r\n if (leadingCall) {\r\n leadingCall = false;\r\n callback();\r\n }\r\n if (trailingCall) {\r\n proxy();\r\n }\r\n }\r\n /**\r\n * Callback invoked after the specified delay. It will further postpone\r\n * invocation of the original function delegating it to the\r\n * requestAnimationFrame.\r\n *\r\n * @returns {void}\r\n */\r\n function timeoutCallback() {\r\n requestAnimationFrame$1(resolvePending);\r\n }\r\n /**\r\n * Schedules invocation of the original function.\r\n *\r\n * @returns {void}\r\n */\r\n function proxy() {\r\n var timeStamp = Date.now();\r\n if (leadingCall) {\r\n // Reject immediately following calls.\r\n if (timeStamp - lastCallTime < trailingTimeout) {\r\n return;\r\n }\r\n // Schedule new call to be in invoked when the pending one is resolved.\r\n // This is important for \"transitions\" which never actually start\r\n // immediately so there is a chance that we might miss one if change\r\n // happens amids the pending invocation.\r\n trailingCall = true;\r\n }\r\n else {\r\n leadingCall = true;\r\n trailingCall = false;\r\n setTimeout(timeoutCallback, delay);\r\n }\r\n lastCallTime = timeStamp;\r\n }\r\n return proxy;\r\n}\n\n// Minimum delay before invoking the update of observers.\r\nvar REFRESH_DELAY = 20;\r\n// A list of substrings of CSS properties used to find transition events that\r\n// might affect dimensions of observed elements.\r\nvar transitionKeys = ['top', 'right', 'bottom', 'left', 'width', 'height', 'size', 'weight'];\r\n// Check if MutationObserver is available.\r\nvar mutationObserverSupported = typeof MutationObserver !== 'undefined';\r\n/**\r\n * Singleton controller class which handles updates of ResizeObserver instances.\r\n */\r\nvar ResizeObserverController = /** @class */ (function () {\r\n /**\r\n * Creates a new instance of ResizeObserverController.\r\n *\r\n * @private\r\n */\r\n function ResizeObserverController() {\r\n /**\r\n * Indicates whether DOM listeners have been added.\r\n *\r\n * @private {boolean}\r\n */\r\n this.connected_ = false;\r\n /**\r\n * Tells that controller has subscribed for Mutation Events.\r\n *\r\n * @private {boolean}\r\n */\r\n this.mutationEventsAdded_ = false;\r\n /**\r\n * Keeps reference to the instance of MutationObserver.\r\n *\r\n * @private {MutationObserver}\r\n */\r\n this.mutationsObserver_ = null;\r\n /**\r\n * A list of connected observers.\r\n *\r\n * @private {Array<ResizeObserverSPI>}\r\n */\r\n this.observers_ = [];\r\n this.onTransitionEnd_ = this.onTransitionEnd_.bind(this);\r\n this.refresh = throttle(this.refresh.bind(this), REFRESH_DELAY);\r\n }\r\n /**\r\n * Adds observer to observers list.\r\n *\r\n * @param {ResizeObserverSPI} observer - Observer to be added.\r\n * @returns {void}\r\n */\r\n ResizeObserverController.prototype.addObserver = function (observer) {\r\n if (!~this.observers_.indexOf(observer)) {\r\n this.observers_.push(observer);\r\n }\r\n // Add listeners if they haven't been added yet.\r\n if (!this.connected_) {\r\n this.connect_();\r\n }\r\n };\r\n /**\r\n * Removes observer from observers list.\r\n *\r\n * @param {ResizeObserverSPI} observer - Observer to be removed.\r\n * @returns {void}\r\n */\r\n ResizeObserverController.prototype.removeObserver = function (observer) {\r\n var observers = this.observers_;\r\n var index = observers.indexOf(observer);\r\n // Remove observer if it's present in registry.\r\n if (~index) {\r\n observers.splice(index, 1);\r\n }\r\n // Remove listeners if controller has no connected observers.\r\n if (!observers.length && this.connected_) {\r\n this.disconnect_();\r\n }\r\n };\r\n /**\r\n * Invokes the update of observers. It will continue running updates insofar\r\n * it detects changes.\r\n *\r\n * @returns {void}\r\n */\r\n ResizeObserverController.prototype.refresh = function () {\r\n var changesDetected = this.updateObservers_();\r\n // Continue running updates if changes have been detected as there might\r\n // be future ones caused by CSS transitions.\r\n if (changesDetected) {\r\n this.refresh();\r\n }\r\n };\r\n /**\r\n * Updates every observer from observers list and notifies them of queued\r\n * entries.\r\n *\r\n * @private\r\n * @returns {boolean} Returns \"true\" if any observer has detected changes in\r\n * dimensions of it's elements.\r\n */\r\n ResizeObserverController.prototype.updateObservers_ = function () {\r\n // Collect observers that have active observations.\r\n var activeObservers = this.observers_.filter(function (observer) {\r\n return observer.gatherActive(), observer.hasActive();\r\n });\r\n // Deliver notifications in a separate cycle in order to avoid any\r\n // collisions between observers, e.g. when multiple instances of\r\n // ResizeObserver are tracking the same element and the callback of one\r\n // of them changes content dimensions of the observed target. Sometimes\r\n // this may result in notifications being blocked for the rest of observers.\r\n activeObservers.forEach(function (observer) { return observer.broadcastActive(); });\r\n return activeObservers.length > 0;\r\n };\r\n /**\r\n * Initializes DOM listeners.\r\n *\r\n * @private\r\n * @returns {void}\r\n */\r\n ResizeObserverController.prototype.connect_ = function () {\r\n // Do nothing if running in a non-browser environment or if listeners\r\n // have been already added.\r\n if (!isBrowser || this.connected_) {\r\n return;\r\n }\r\n // Subscription to the \"Transitionend\" event is used as a workaround for\r\n // delayed transitions. This way it's possible to capture at least the\r\n // final state of an element.\r\n document.addEventListener('transitionend', this.onTransitionEnd_);\r\n window.addEventListener('resize', this.refresh);\r\n if (mutationObserverSupported) {\r\n this.mutationsObserver_ = new MutationObserver(this.refresh);\r\n this.mutationsObserver_.observe(document, {\r\n attributes: true,\r\n childList: true,\r\n characterData: true,\r\n subtree: true\r\n });\r\n }\r\n else {\r\n document.addEventListener('DOMSubtreeModified', this.refresh);\r\n this.mutationEventsAdded_ = true;\r\n }\r\n this.connected_ = true;\r\n };\r\n /**\r\n * Removes DOM listeners.\r\n *\r\n * @private\r\n * @returns {void}\r\n */\r\n ResizeObserverController.prototype.disconnect_ = function () {\r\n // Do nothing if running in a non-browser environment or if listeners\r\n // have been already removed.\r\n if (!isBrowser || !this.connected_) {\r\n return;\r\n }\r\n document.removeEventListener('transitionend', this.onTransitionEnd_);\r\n window.removeEventListener('resize', this.refresh);\r\n if (this.mutationsObserver_) {\r\n this.mutationsObserver_.disconnect();\r\n }\r\n if (this.mutationEventsAdded_) {\r\n document.removeEventListener('DOMSubtreeModified', this.refresh);\r\n }\r\n this.mutationsObserver_ = null;\r\n this.mutationEventsAdded_ = false;\r\n this.connected_ = false;\r\n };\r\n /**\r\n * \"Transitionend\" event handler.\r\n *\r\n * @private\r\n * @param {TransitionEvent} event\r\n * @returns {void}\r\n */\r\n ResizeObserverController.prototype.onTransitionEnd_ = function (_a) {\r\n var _b = _a.propertyName, propertyName = _b === void 0 ? '' : _b;\r\n // Detect whether transition may affect dimensions of an element.\r\n var isReflowProperty = transitionKeys.some(function (key) {\r\n return !!~propertyName.indexOf(key);\r\n });\r\n if (isReflowProperty) {\r\n this.refresh();\r\n }\r\n };\r\n /**\r\n * Returns instance of the ResizeObserverController.\r\n *\r\n * @returns {ResizeObserverController}\r\n */\r\n ResizeObserverController.getInstance = function () {\r\n if (!this.instance_) {\r\n this.instance_ = new ResizeObserverController();\r\n }\r\n return this.instance_;\r\n };\r\n /**\r\n * Holds reference to the controller's instance.\r\n *\r\n * @private {ResizeObserverController}\r\n */\r\n ResizeObserverController.instance_ = null;\r\n return ResizeObserverController;\r\n}());\n\n/**\r\n * Defines non-writable/enumerable properties of the provided target object.\r\n *\r\n * @param {Object} target - Object for which to define properties.\r\n * @param {Object} props - Properties to be defined.\r\n * @returns {Object} Target object.\r\n */\r\nvar defineConfigurable = (function (target, props) {\r\n for (var _i = 0, _a = Object.keys(props); _i < _a.length; _i++) {\r\n var key = _a[_i];\r\n Object.defineProperty(target, key, {\r\n value: props[key],\r\n enumerable: false,\r\n writable: false,\r\n configurable: true\r\n });\r\n }\r\n return target;\r\n});\n\n/**\r\n * Returns the global object associated with provided element.\r\n *\r\n * @param {Object} target\r\n * @returns {Object}\r\n */\r\nvar getWindowOf = (function (target) {\r\n // Assume that the element is an instance of Node, which means that it\r\n // has the \"ownerDocument\" property from which we can retrieve a\r\n // corresponding global object.\r\n var ownerGlobal = target && target.ownerDocument && target.ownerDocument.defaultView;\r\n // Return the local global object if it's not possible extract one from\r\n // provided element.\r\n return ownerGlobal || global$1;\r\n});\n\n// Placeholder of an empty content rectangle.\r\nvar emptyRect = createRectInit(0, 0, 0, 0);\r\n/**\r\n * Converts provided string to a number.\r\n *\r\n * @param {number|string} value\r\n * @returns {number}\r\n */\r\nfunction toFloat(value) {\r\n return parseFloat(value) || 0;\r\n}\r\n/**\r\n * Extracts borders size from provided styles.\r\n *\r\n * @param {CSSStyleDeclaration} styles\r\n * @param {...string} positions - Borders positions (top, right, ...)\r\n * @returns {number}\r\n */\r\nfunction getBordersSize(styles) {\r\n var positions = [];\r\n for (var _i = 1; _i < arguments.length; _i++) {\r\n positions[_i - 1] = arguments[_i];\r\n }\r\n return positions.reduce(function (size, position) {\r\n var value = styles['border-' + position + '-width'];\r\n return size + toFloat(value);\r\n }, 0);\r\n}\r\n/**\r\n * Extracts paddings sizes from provided styles.\r\n *\r\n * @param {CSSStyleDeclaration} styles\r\n * @returns {Object} Paddings box.\r\n */\r\nfunction getPaddings(styles) {\r\n var positions = ['top', 'right', 'bottom', 'left'];\r\n var paddings = {};\r\n for (var _i = 0, positions_1 = positions; _i < positions_1.length; _i++) {\r\n var position = positions_1[_i];\r\n var value = styles['padding-' + position];\r\n paddings[position] = toFloat(value);\r\n }\r\n return paddings;\r\n}\r\n/**\r\n * Calculates content rectangle of provided SVG element.\r\n *\r\n * @param {SVGGraphicsElement} target - Element content rectangle of which needs\r\n * to be calculated.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getSVGContentRect(target) {\r\n var bbox = target.getBBox();\r\n return createRectInit(0, 0, bbox.width, bbox.height);\r\n}\r\n/**\r\n * Calculates content rectangle of provided HTMLElement.\r\n *\r\n * @param {HTMLElement} target - Element for which to calculate the content rectangle.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getHTMLElementContentRect(target) {\r\n // Client width & height properties can't be\r\n // used exclusively as they provide rounded values.\r\n var clientWidth = target.clientWidth, clientHeight = target.clientHeight;\r\n // By this condition we can catch all non-replaced inline, hidden and\r\n // detached elements. Though elements with width & height properties less\r\n // than 0.5 will be discarded as well.\r\n //\r\n // Without it we would need to implement separate methods for each of\r\n // those cases and it's not possible to perform a precise and performance\r\n // effective test for hidden elements. E.g. even jQuery's ':visible' filter\r\n // gives wrong results for elements with width & height less than 0.5.\r\n if (!clientWidth && !clientHeight) {\r\n return emptyRect;\r\n }\r\n var styles = getWindowOf(target).getComputedStyle(target);\r\n var paddings = getPaddings(styles);\r\n var horizPad = paddings.left + paddings.right;\r\n var vertPad = paddings.top + paddings.bottom;\r\n // Computed styles of width & height are being used because they are the\r\n // only dimensions available to JS that contain non-rounded values. It could\r\n // be possible to utilize the getBoundingClientRect if only it's data wasn't\r\n // affected by CSS transformations let alone paddings, borders and scroll bars.\r\n var width = toFloat(styles.width), height = toFloat(styles.height);\r\n // Width & height include paddings and borders when the 'border-box' box\r\n // model is applied (except for IE).\r\n if (styles.boxSizing === 'border-box') {\r\n // Following conditions are required to handle Internet Explorer which\r\n // doesn't include paddings and borders to computed CSS dimensions.\r\n //\r\n // We can say that if CSS dimensions + paddings are equal to the \"client\"\r\n // properties then it's either IE, and thus we don't need to subtract\r\n // anything, or an element merely doesn't have paddings/borders styles.\r\n if (Math.round(width + horizPad) !== clientWidth) {\r\n width -= getBordersSize(styles, 'left', 'right') + horizPad;\r\n }\r\n if (Math.round(height + vertPad) !== clientHeight) {\r\n height -= getBordersSize(styles, 'top', 'bottom') + vertPad;\r\n }\r\n }\r\n // Following steps can't be applied to the document's root element as its\r\n // client[Width/Height] properties represent viewport area of the window.\r\n // Besides, it's as well not necessary as the <html> itself neither has\r\n // rendered scroll bars nor it can be clipped.\r\n if (!isDocumentElement(target)) {\r\n // In some browsers (only in Firefox, actually) CSS width & height\r\n // include scroll bars size which can be removed at this step as scroll\r\n // bars are the only difference between rounded dimensions + paddings\r\n // and \"client\" properties, though that is not always true in Chrome.\r\n var vertScrollbar = Math.round(width + horizPad) - clientWidth;\r\n var horizScrollbar = Math.round(height + vertPad) - clientHeight;\r\n // Chrome has a rather weird rounding of \"client\" properties.\r\n // E.g. for an element with content width of 314.2px it sometimes gives\r\n // the client width of 315px and for the width of 314.7px it may give\r\n // 314px. And it doesn't happen all the time. So just ignore this delta\r\n // as a non-relevant.\r\n if (Math.abs(vertScrollbar) !== 1) {\r\n width -= vertScrollbar;\r\n }\r\n if (Math.abs(horizScrollbar) !== 1) {\r\n height -= horizScrollbar;\r\n }\r\n }\r\n return createRectInit(paddings.left, paddings.top, width, height);\r\n}\r\n/**\r\n * Checks whether provided element is an instance of the SVGGraphicsElement.\r\n *\r\n * @param {Element} target - Element to be checked.\r\n * @returns {boolean}\r\n */\r\nvar isSVGGraphicsElement = (function () {\r\n // Some browsers, namely IE and Edge, don't have the SVGGraphicsElement\r\n // interface.\r\n if (typeof SVGGraphicsElement !== 'undefined') {\r\n return function (target) { return target instanceof getWindowOf(target).SVGGraphicsElement; };\r\n }\r\n // If it's so, then check that element is at least an instance of the\r\n // SVGElement and that it has the \"getBBox\" method.\r\n // eslint-disable-next-line no-extra-parens\r\n return function (target) { return (target instanceof getWindowOf(target).SVGElement &&\r\n typeof target.getBBox === 'function'); };\r\n})();\r\n/**\r\n * Checks whether provided element is a document element (<html>).\r\n *\r\n * @param {Element} target - Element to be checked.\r\n * @returns {boolean}\r\n */\r\nfunction isDocumentElement(target) {\r\n return target === getWindowOf(target).document.documentElement;\r\n}\r\n/**\r\n * Calculates an appropriate content rectangle for provided html or svg element.\r\n *\r\n * @param {Element} target - Element content rectangle of which needs to be calculated.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction getContentRect(target) {\r\n if (!isBrowser) {\r\n return emptyRect;\r\n }\r\n if (isSVGGraphicsElement(target)) {\r\n return getSVGContentRect(target);\r\n }\r\n return getHTMLElementContentRect(target);\r\n}\r\n/**\r\n * Creates rectangle with an interface of the DOMRectReadOnly.\r\n * Spec: https://drafts.fxtf.org/geometry/#domrectreadonly\r\n *\r\n * @param {DOMRectInit} rectInit - Object with rectangle's x/y coordinates and dimensions.\r\n * @returns {DOMRectReadOnly}\r\n */\r\nfunction createReadOnlyRect(_a) {\r\n var x = _a.x, y = _a.y, width = _a.width, height = _a.height;\r\n // If DOMRectReadOnly is available use it as a prototype for the rectangle.\r\n var Constr = typeof DOMRectReadOnly !== 'undefined' ? DOMRectReadOnly : Object;\r\n var rect = Object.create(Constr.prototype);\r\n // Rectangle's properties are not writable and non-enumerable.\r\n defineConfigurable(rect, {\r\n x: x, y: y, width: width, height: height,\r\n top: y,\r\n right: x + width,\r\n bottom: height + y,\r\n left: x\r\n });\r\n return rect;\r\n}\r\n/**\r\n * Creates DOMRectInit object based on the provided dimensions and the x/y coordinates.\r\n * Spec: https://drafts.fxtf.org/geometry/#dictdef-domrectinit\r\n *\r\n * @param {number} x - X coordinate.\r\n * @param {number} y - Y coordinate.\r\n * @param {number} width - Rectangle's width.\r\n * @param {number} height - Rectangle's height.\r\n * @returns {DOMRectInit}\r\n */\r\nfunction createRectInit(x, y, width, height) {\r\n return { x: x, y: y, width: width, height: height };\r\n}\n\n/**\r\n * Class that is responsible for computations of the content rectangle of\r\n * provided DOM element and for keeping track of it's changes.\r\n */\r\nvar ResizeObservation = /** @class */ (function () {\r\n /**\r\n * Creates an instance of ResizeObservation.\r\n *\r\n * @param {Element} target - Element to be observed.\r\n */\r\n function ResizeObservation(target) {\r\n /**\r\n * Broadcasted width of content rectangle.\r\n *\r\n * @type {number}\r\n */\r\n this.broadcastWidth = 0;\r\n /**\r\n * Broadcasted height of content rectangle.\r\n *\r\n * @type {number}\r\n */\r\n this.broadcastHeight = 0;\r\n /**\r\n * Reference to the last observed content rectangle.\r\n *\r\n * @private {DOMRectInit}\r\n */\r\n this.contentRect_ = createRectInit(0, 0, 0, 0);\r\n this.target = target;\r\n }\r\n /**\r\n * Updates content rectangle and tells whether it's width or height properties\r\n * have changed since the last broadcast.\r\n *\r\n * @returns {boolean}\r\n */\r\n ResizeObservation.prototype.isActive = function () {\r\n var rect = getContentRect(this.target);\r\n this.contentRect_ = rect;\r\n return (rect.width !== this.broadcastWidth ||\r\n rect.height !== this.broadcastHeight);\r\n };\r\n /**\r\n * Updates 'broadcastWidth' and 'broadcastHeight' properties with a data\r\n * from the corresponding properties of the last observed content rectangle.\r\n *\r\n * @returns {DOMRectInit} Last observed content rectangle.\r\n */\r\n ResizeObservation.prototype.broadcastRect = function () {\r\n var rect = this.contentRect_;\r\n this.broadcastWidth = rect.width;\r\n this.broadcastHeight = rect.height;\r\n return rect;\r\n };\r\n return ResizeObservation;\r\n}());\n\nvar ResizeObserverEntry = /** @class */ (function () {\r\n /**\r\n * Creates an instance of ResizeObserverEntry.\r\n *\r\n * @param {Element} target - Element that is being observed.\r\n * @param {DOMRectInit} rectInit - Data of the element's content rectangle.\r\n */\r\n function ResizeObserverEntry(target, rectInit) {\r\n var contentRect = createReadOnlyRect(rectInit);\r\n // According to the specification following properties are not writable\r\n // and are also not enumerable in the native implementation.\r\n //\r\n // Property accessors are not being used as they'd require to define a\r\n // private WeakMap storage which may cause memory leaks in browsers that\r\n // don't support this type of collections.\r\n defineConfigurable(this, { target: target, contentRect: contentRect });\r\n }\r\n return ResizeObserverEntry;\r\n}());\n\nvar ResizeObserverSPI = /** @class */ (function () {\r\n /**\r\n * Creates a new instance of ResizeObserver.\r\n *\r\n * @param {ResizeObserverCallback} callback - Callback function that is invoked\r\n * when one of the observed elements changes it's content dimensions.\r\n * @param {ResizeObserverController} controller - Controller instance which\r\n * is responsible for the updates of observer.\r\n * @param {ResizeObserver} callbackCtx - Reference to the public\r\n * ResizeObserver instance which will be passed to callback function.\r\n */\r\n function ResizeObserverSPI(callback, controller, callbackCtx) {\r\n /**\r\n * Collection of resize observations that have detected changes in dimensions\r\n * of elements.\r\n *\r\n * @private {Array<ResizeObservation>}\r\n */\r\n this.activeObservations_ = [];\r\n /**\r\n * Registry of the ResizeObservation instances.\r\n *\r\n * @private {Map<Element, ResizeObservation>}\r\n */\r\n this.observations_ = new MapShim();\r\n if (typeof callback !== 'function') {\r\n throw new TypeError('The callback provided as parameter 1 is not a function.');\r\n }\r\n this.callback_ = callback;\r\n this.controller_ = controller;\r\n this.callbackCtx_ = callbackCtx;\r\n }\r\n /**\r\n * Starts observing provided element.\r\n *\r\n * @param {Element} target - Element to be observed.\r\n * @returns {void}\r\n */\r\n ResizeObserverSPI.prototype.observe = function (target) {\r\n if (!arguments.length) {\r\n throw new TypeError('1 argument required, but only 0 present.');\r\n }\r\n // Do nothing if current environment doesn't have the Element interface.\r\n if (typeof Element === 'undefined' || !(Element instanceof Object)) {\r\n return;\r\n }\r\n if (!(target instanceof getWindowOf(target).Element)) {\r\n throw new TypeError('parameter 1 is not of type \"Element\".');\r\n }\r\n var observations = this.observations_;\r\n // Do nothing if element is already being observed.\r\n if (observations.has(target)) {\r\n return;\r\n }\r\n observations.set(target, new ResizeObservation(target));\r\n this.controller_.addObserver(this);\r\n // Force the update of observations.\r\n this.controller_.refresh();\r\n };\r\n /**\r\n * Stops observing provided element.\r\n *\r\n * @param {Element} target - Element to stop observing.\r\n * @returns {void}\r\n */\r\n ResizeObserverSPI.prototype.unobserve = function (target) {\r\n if (!arguments.length) {\r\n throw new TypeError('1 argument required, but only 0 present.');\r\n }\r\n // Do nothing if current environment doesn't have the Element interface.\r\n if (typeof Element === 'undefined' || !(Element instanceof Object)) {\r\n return;\r\n }\r\n if (!(target instanceof getWindowOf(target).Element)) {\r\n throw new TypeError('parameter 1 is not of type \"Element\".');\r\n }\r\n var observations = this.observations_;\r\n // Do nothing if element is not being observed.\r\n if (!observations.has(target)) {\r\n return;\r\n }\r\n observations.delete(target);\r\n if (!observations.size) {\r\n this.controller_.removeObserver(this);\r\n }\r\n };\r\n /**\r\n * Stops observing all elements.\r\n *\r\n * @returns {void}\r\n */\r\n ResizeObserverSPI.prototype.disconnect = function () {\r\n this.clearActive();\r\n this.observations_.clear();\r\n this.controller_.removeObserver(this);\r\n };\r\n /**\r\n * Collects observation instances the associated element of which has changed\r\n * it's content rectangle.\r\n *\r\n * @returns {void}\r\n */\r\n ResizeObserverSPI.prototype.gatherActive = function () {\r\n var _this = this;\r\n this.clearActive();\r\n this.observations_.forEach(function (observation) {\r\n if (observation.isActive()) {\r\n _this.activeObservations_.push(observation);\r\n }\r\n });\r\n };\r\n /**\r\n * Invokes initial callback function with a list of ResizeObserverEntry\r\n * instances collected from active resize observations.\r\n *\r\n * @returns {void}\r\n */\r\n ResizeObserverSPI.prototype.broadcastActive = function () {\r\n // Do nothing if observer doesn't have active observations.\r\n if (!this.hasActive()) {\r\n return;\r\n }\r\n var ctx = this.callbackCtx_;\r\n // Create ResizeObserverEntry instance for every active observation.\r\n var entries = this.activeObservations_.map(function (observation) {\r\n return new ResizeObserverEntry(observation.target, observation.broadcastRect());\r\n });\r\n this.callback_.call(ctx, entries, ctx);\r\n this.clearActive();\r\n };\r\n /**\r\n * Clears the collection of active observations.\r\n *\r\n * @returns {void}\r\n */\r\n ResizeObserverSPI.prototype.clearActive = function () {\r\n this.activeObservations_.splice(0);\r\n };\r\n /**\r\n * Tells whether observer has active observations.\r\n *\r\n * @returns {boolean}\r\n */\r\n ResizeObserverSPI.prototype.hasActive = function () {\r\n return this.activeObservations_.length > 0;\r\n };\r\n return ResizeObserverSPI;\r\n}());\n\n// Registry of internal observers. If WeakMap is not available use current shim\r\n// for the Map collection as it has all required methods and because WeakMap\r\n// can't be fully polyfilled anyway.\r\nvar observers = typeof WeakMap !== 'undefined' ? new WeakMap() : new MapShim();\r\n/**\r\n * ResizeObserver API. Encapsulates the ResizeObserver SPI implementation\r\n * exposing only those methods and properties that are defined in the spec.\r\n */\r\nvar ResizeObserver = /** @class */ (function () {\r\n /**\r\n * Creates a new instance of ResizeObserver.\r\n *\r\n * @param {ResizeObserverCallback} callback - Callback that is invoked when\r\n * dimensions of the observed elements change.\r\n */\r\n function ResizeObserver(callback) {\r\n if (!(this instanceof ResizeObserver)) {\r\n throw new TypeError('Cannot call a class as a function.');\r\n }\r\n if (!arguments.length) {\r\n throw new TypeError('1 argument required, but only 0 present.');\r\n }\r\n var controller = ResizeObserverController.getInstance();\r\n var observer = new ResizeObserverSPI(callback, controller, this);\r\n observers.set(this, observer);\r\n }\r\n return ResizeObserver;\r\n}());\r\n// Expose public methods of ResizeObserver.\r\n[\r\n 'observe',\r\n 'unobserve',\r\n 'disconnect'\r\n].forEach(function (method) {\r\n ResizeObserver.prototype[method] = function () {\r\n var _a;\r\n return (_a = observers.get(this))[method].apply(_a, arguments);\r\n };\r\n});\n\nvar index = (function () {\r\n // Export existing implementation if available.\r\n if (typeof global$1.ResizeObserver !== 'undefined') {\r\n return global$1.ResizeObserver;\r\n }\r\n return ResizeObserver;\r\n})();\n\nexport default index;\n","var g;\n\n// This works in non-strict mode\ng = (function() {\n\treturn this;\n})();\n\ntry {\n\t// This works if eval is allowed (see CSP)\n\tg = g || new Function(\"return this\")();\n} catch (e) {\n\t// This works if the window reference is available\n\tif (typeof window === \"object\") g = window;\n}\n\n// g can still be undefined, but nothing to do about it...\n// We return undefined, instead of nothing here, so it's\n// easier to handle this case. if(!global) { ...}\n\nmodule.exports = g;\n","\nvar content = require(\"!!../node_modules/css-loader/dist/cjs.js!./index.css\");\n\nif(typeof content === 'string') content = [[module.id, content, '']];\n\nvar transform;\nvar insertInto;\n\n\n\nvar options = {\"hmr\":true}\n\noptions.transform = transform\noptions.insertInto = undefined;\n\nvar update = require(\"!../node_modules/style-loader/lib/addStyles.js\")(content, options);\n\nif(content.locals) module.exports = content.locals;\n\nif(module.hot) {\n\tmodule.hot.accept(\"!!../node_modules/css-loader/dist/cjs.js!./index.css\", function() {\n\t\tvar newContent = require(\"!!../node_modules/css-loader/dist/cjs.js!./index.css\");\n\n\t\tif(typeof newContent === 'string') newContent = [[module.id, newContent, '']];\n\n\t\tvar locals = (function(a, b) {\n\t\t\tvar key, idx = 0;\n\n\t\t\tfor(key in a) {\n\t\t\t\tif(!b || a[key] !== b[key]) return false;\n\t\t\t\tidx++;\n\t\t\t}\n\n\t\t\tfor(key in b) idx--;\n\n\t\t\treturn idx === 0;\n\t\t}(content.locals, newContent.locals));\n\n\t\tif(!locals) throw new Error('Aborting CSS HMR due to changed css-modules locals.');\n\n\t\tupdate(newContent);\n\t});\n\n\tmodule.hot.dispose(function() { update(); });\n}","// Imports\nvar ___CSS_LOADER_API_IMPORT___ = require(\"../node_modules/css-loader/dist/runtime/api.js\");\nexports = ___CSS_LOADER_API_IMPORT___(false);\n// Module\nexports.push([module.id, \".mason-container {\\r\\n position: relative;\\r\\n overflow: hidden;\\r\\n --cell-width: 100%;\\r\\n box-sizing: border-box;\\r\\n margin: 0;\\r\\n padding: 0;\\r\\n}\\r\\n\\r\\n.mason-container > * {\\r\\n box-sizing: inherit;\\r\\n display: inline-block;\\r\\n vertical-align: top;\\r\\n width: var(--cell-width);\\r\\n}\", \"\"]);\n// Exports\nmodule.exports = exports;\n","\"use strict\";\n\n/*\n MIT License http://www.opensource.org/licenses/mit-license.php\n Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (useSourceMap) {\n var list = []; // return the list of modules as css string\n\n list.toString = function toString() {\n return this.map(function (item) {\n var content = cssWithMappingToString(item, useSourceMap);\n\n if (item[2]) {\n return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n }\n\n return content;\n }).join('');\n }; // import a list of modules into the list\n // eslint-disable-next-line func-names\n\n\n list.i = function (modules, mediaQuery, dedupe) {\n if (typeof modules === 'string') {\n // eslint-disable-next-line no-param-reassign\n modules = [[null, modules, '']];\n }\n\n var alreadyImportedModules = {};\n\n if (dedupe) {\n for (var i = 0; i < this.length; i++) {\n // eslint-disable-next-line prefer-destructuring\n var id = this[i][0];\n\n if (id != null) {\n alreadyImportedModules[id] = true;\n }\n }\n }\n\n for (var _i = 0; _i < modules.length; _i++) {\n var item = [].concat(modules[_i]);\n\n if (dedupe && alreadyImportedModules[item[0]]) {\n // eslint-disable-next-line no-continue\n continue;\n }\n\n if (mediaQuery) {\n if (!item[2]) {\n item[2] = mediaQuery;\n } else {\n item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n }\n }\n\n list.push(item);\n }\n };\n\n return list;\n};\n\nfunction cssWithMappingToString(item, useSourceMap) {\n var content = item[1] || ''; // eslint-disable-next-line prefer-destructuring\n\n var cssMapping = item[3];\n\n if (!cssMapping) {\n return content;\n }\n\n if (useSourceMap && typeof btoa === 'function') {\n var sourceMapping = toComment(cssMapping);\n var sourceURLs = cssMapping.sources.map(function (source) {\n return \"/*# sourceURL=\".concat(cssMapping.sourceRoot || '').concat(source, \" */\");\n });\n return [content].concat(sourceURLs).concat([sourceMapping]).join('\\n');\n }\n\n return [content].join('\\n');\n} // Adapted from convert-source-map (MIT)\n\n\nfunction toComment(sourceMap) {\n // eslint-disable-next-line no-undef\n var base64 = btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap))));\n var data = \"sourceMappingURL=data:application/json;charset=utf-8;base64,\".concat(base64);\n return \"/*# \".concat(data, \" */\");\n}","/*\n\tMIT License http://www.opensource.org/licenses/mit-license.php\n\tAuthor Tobias Koppers @sokra\n*/\n\nvar stylesInDom = {};\n\nvar\tmemoize = function (fn) {\n\tvar memo;\n\n\treturn function () {\n\t\tif (typeof memo === \"undefined\") memo = fn.apply(this, arguments);\n\t\treturn memo;\n\t};\n};\n\nvar isOldIE = memoize(function () {\n\t// Test for IE <= 9 as proposed by Browserhacks\n\t// @see http://browserhacks.com/#hack-e71d8692f65334173fee715c222cb805\n\t// Tests for existence of standard globals is to allow style-loader\n\t// to operate correctly into non-standard environments\n\t// @see https://github.com/webpack-contrib/style-loader/issues/177\n\treturn window && document && document.all && !window.atob;\n});\n\nvar getTarget = function (target, parent) {\n if (parent){\n return parent.querySelector(target);\n }\n return document.querySelector(target);\n};\n\nvar getElement = (function (fn) {\n\tvar memo = {};\n\n\treturn function(target, parent) {\n // If passing function in options, then use it for resolve \"head\" element.\n // Useful for Shadow Root style i.e\n // {\n // insertInto: function () { return document.querySelector(\"#foo\").shadowRoot }\n // }\n if (typeof target === 'function') {\n return target();\n }\n if (typeof memo[target] === \"undefined\") {\n\t\t\tvar styleTarget = getTarget.call(this, target, parent);\n\t\t\t// Special case to return head of iframe instead of iframe itself\n\t\t\tif (window.HTMLIFrameElement && styleTarget instanceof window.HTMLIFrameElement) {\n\t\t\t\ttry {\n\t\t\t\t\t// This will throw an exception if access to iframe is blocked\n\t\t\t\t\t// due to cross-origin restrictions\n\t\t\t\t\tstyleTarget = styleTarget.contentDocument.head;\n\t\t\t\t} catch(e) {\n\t\t\t\t\tstyleTarget = null;\n\t\t\t\t}\n\t\t\t}\n\t\t\tmemo[target] = styleTarget;\n\t\t}\n\t\treturn memo[target]\n\t};\n})();\n\nvar singleton = null;\nvar\tsingletonCounter = 0;\nvar\tstylesInsertedAtTop = [];\n\nvar\tfixUrls = require(\"./urls\");\n\nmodule.exports = function(list, options) {\n\tif (typeof DEBUG !== \"undefined\" && DEBUG) {\n\t\tif (typeof document !== \"object\") throw new Error(\"The style-loader cannot be used in a non-browser environment\");\n\t}\n\n\toptions = options || {};\n\n\toptions.attrs = typeof options.attrs === \"object\" ? options.attrs : {};\n\n\t// Force single-tag solution on IE6-9, which has a hard limit on the # of <style>\n\t// tags it will allow on a page\n\tif (!options.singleton && typeof options.singleton !== \"boolean\") options.singleton = isOldIE();\n\n\t// By default, add <style> tags to the <head> element\n if (!options.insertInto) options.insertInto = \"head\";\n\n\t// By default, add <style> tags to the bottom of the target\n\tif (!options.insertAt) options.insertAt = \"bottom\";\n\n\tvar styles = listToStyles(list, options);\n\n\taddStylesToDom(styles, options);\n\n\treturn function update (newList) {\n\t\tvar mayRemove = [];\n\n\t\tfor (var i = 0; i < styles.length; i++) {\n\t\t\tvar item = styles[i];\n\t\t\tvar domStyle = stylesInDom[item.id];\n\n\t\t\tdomStyle.refs--;\n\t\t\tmayRemove.push(domStyle);\n\t\t}\n\n\t\tif(newList) {\n\t\t\tvar newStyles = listToStyles(newList, options);\n\t\t\taddStylesToDom(newStyles, options);\n\t\t}\n\n\t\tfor (var i = 0; i < mayRemove.length; i++) {\n\t\t\tvar domStyle = mayRemove[i];\n\n\t\t\tif(domStyle.refs === 0) {\n\t\t\t\tfor (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();\n\n\t\t\t\tdelete stylesInDom[domStyle.id];\n\t\t\t}\n\t\t}\n\t};\n};\n\nfunction addStylesToDom (styles, options) {\n\tfor (var i = 0; i < styles.length; i++) {\n\t\tvar item = styles[i];\n\t\tvar domStyle = stylesInDom[item.id];\n\n\t\tif(domStyle) {\n\t\t\tdomStyle.refs++;\n\n\t\t\tfor(var j = 0; j < domStyle.parts.length; j++) {\n\t\t\t\tdomStyle.parts[j](item.parts[j]);\n\t\t\t}\n\n\t\t\tfor(; j < item.parts.length; j++) {\n\t\t\t\tdomStyle.parts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\t\t} else {\n\t\t\tvar parts = [];\n\n\t\t\tfor(var j = 0; j < item.parts.length; j++) {\n\t\t\t\tparts.push(addStyle(item.parts[j], options));\n\t\t\t}\n\n\t\t\tstylesInDom[item.id] = {id: item.id, refs: 1, parts: parts};\n\t\t}\n\t}\n}\n\nfunction listToStyles (list, options) {\n\tvar styles = [];\n\tvar newStyles = {};\n\n\tfor (var i = 0; i < list.length; i++) {\n\t\tvar item = list[i];\n\t\tvar id = options.base ? item[0] + options.base : item[0];\n\t\tvar css = item[1];\n\t\tvar media = item[2];\n\t\tvar sourceMap = item[3];\n\t\tvar part = {css: css, media: media, sourceMap: sourceMap};\n\n\t\tif(!newStyles[id]) styles.push(newStyles[id] = {id: id, parts: [part]});\n\t\telse newStyles[id].parts.push(part);\n\t}\n\n\treturn styles;\n}\n\nfunction insertStyleElement (options, style) {\n\tvar target = getElement(options.insertInto)\n\n\tif (!target) {\n\t\tthrow new Error(\"Couldn't find a style target. This probably means that the value for the 'insertInto' parameter is invalid.\");\n\t}\n\n\tvar lastStyleElementInsertedAtTop = stylesInsertedAtTop[stylesInsertedAtTop.length - 1];\n\n\tif (options.insertAt === \"top\") {\n\t\tif (!lastStyleElementInsertedAtTop) {\n\t\t\ttarget.insertBefore(style, target.firstChild);\n\t\t} else if (lastStyleElementInsertedAtTop.nextSibling) {\n\t\t\ttarget.insertBefore(style, lastStyleElementInsertedAtTop.nextSibling);\n\t\t} else {\n\t\t\ttarget.appendChild(style);\n\t\t}\n\t\tstylesInsertedAtTop.push(style);\n\t} else if (options.insertAt === \"bottom\") {\n\t\ttarget.appendChild(style);\n\t} else if (typeof options.insertAt === \"object\" && options.insertAt.before) {\n\t\tvar nextSibling = getElement(options.insertAt.before, target);\n\t\ttarget.insertBefore(style, nextSibling);\n\t} else {\n\t\tthrow new Error(\"[Style Loader]\\n\\n Invalid value for parameter 'insertAt' ('options.insertAt') found.\\n Must be 'top', 'bottom', or Object.\\n (https://github.com/webpack-contrib/style-loader#insertat)\\n\");\n\t}\n}\n\nfunction removeStyleElement (style) {\n\tif (style.parentNode === null) return false;\n\tstyle.parentNode.removeChild(style);\n\n\tvar idx = stylesInsertedAtTop.indexOf(style);\n\tif(idx >= 0) {\n\t\tstylesInsertedAtTop.splice(idx, 1);\n\t}\n}\n\nfunction createStyleElement (options) {\n\tvar style = document.createElement(\"style\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\n\tif(options.attrs.nonce === undefined) {\n\t\tvar nonce = getNonce();\n\t\tif (nonce) {\n\t\t\toptions.attrs.nonce = nonce;\n\t\t}\n\t}\n\n\taddAttrs(style, options.attrs);\n\tinsertStyleElement(options, style);\n\n\treturn style;\n}\n\nfunction createLinkElement (options) {\n\tvar link = document.createElement(\"link\");\n\n\tif(options.attrs.type === undefined) {\n\t\toptions.attrs.type = \"text/css\";\n\t}\n\toptions.attrs.rel = \"stylesheet\";\n\n\taddAttrs(link, options.attrs);\n\tinsertStyleElement(options, link);\n\n\treturn link;\n}\n\nfunction addAttrs (el, attrs) {\n\tObject.keys(attrs).forEach(function (key) {\n\t\tel.setAttribute(key, attrs[key]);\n\t});\n}\n\nfunction getNonce() {\n\tif (typeof __webpack_nonce__ === 'undefined') {\n\t\treturn null;\n\t}\n\n\treturn __webpack_nonce__;\n}\n\nfunction addStyle (obj, options) {\n\tvar style, update, remove, result;\n\n\t// If a transform function was defined, run it on the css\n\tif (options.transform && obj.css) {\n\t result = typeof options.transform === 'function'\n\t\t ? options.transform(obj.css) \n\t\t : options.transform.default(obj.css);\n\n\t if (result) {\n\t \t// If transform returns a value, use that instead of the original css.\n\t \t// This allows running runtime transformations on the css.\n\t \tobj.css = result;\n\t } else {\n\t \t// If the transform function returns a falsy value, don't add this css.\n\t \t// This allows conditional loading of css\n\t \treturn function() {\n\t \t\t// noop\n\t \t};\n\t }\n\t}\n\n\tif (options.singleton) {\n\t\tvar styleIndex = singletonCounter++;\n\n\t\tstyle = singleton || (singleton = createStyleElement(options));\n\n\t\tupdate = applyToSingletonTag.bind(null, style, styleIndex, false);\n\t\tremove = applyToSingletonTag.bind(null, style, styleIndex, true);\n\n\t} else if (\n\t\tobj.sourceMap &&\n\t\ttypeof URL === \"function\" &&\n\t\ttypeof URL.createObjectURL === \"function\" &&\n\t\ttypeof URL.revokeObjectURL === \"function\" &&\n\t\ttypeof Blob === \"function\" &&\n\t\ttypeof btoa === \"function\"\n\t) {\n\t\tstyle = createLinkElement(options);\n\t\tupdate = updateLink.bind(null, style, options);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\n\t\t\tif(style.href) URL.revokeObjectURL(style.href);\n\t\t};\n\t} else {\n\t\tstyle = createStyleElement(options);\n\t\tupdate = applyToTag.bind(null, style);\n\t\tremove = function () {\n\t\t\tremoveStyleElement(style);\n\t\t};\n\t}\n\n\tupdate(obj);\n\n\treturn function updateStyle (newObj) {\n\t\tif (newObj) {\n\t\t\tif (\n\t\t\t\tnewObj.css === obj.css &&\n\t\t\t\tnewObj.media === obj.media &&\n\t\t\t\tnewObj.sourceMap === obj.sourceMap\n\t\t\t) {\n\t\t\t\treturn;\n\t\t\t}\n\n\t\t\tupdate(obj = newObj);\n\t\t} else {\n\t\t\tremove();\n\t\t}\n\t};\n}\n\nvar replaceText = (function () {\n\tvar textStore = [];\n\n\treturn function (index, replacement) {\n\t\ttextStore[index] = replacement;\n\n\t\treturn textStore.filter(Boolean).join('\\n');\n\t};\n})();\n\nfunction applyToSingletonTag (style, index, remove, obj) {\n\tvar css = remove ? \"\" : obj.css;\n\n\tif (style.styleSheet) {\n\t\tstyle.styleSheet.cssText = replaceText(index, css);\n\t} else {\n\t\tvar cssNode = document.createTextNode(css);\n\t\tvar childNodes = style.childNodes;\n\n\t\tif (childNodes[index]) style.removeChild(childNodes[index]);\n\n\t\tif (childNodes.length) {\n\t\t\tstyle.insertBefore(cssNode, childNodes[index]);\n\t\t} else {\n\t\t\tstyle.appendChild(cssNode);\n\t\t}\n\t}\n}\n\nfunction applyToTag (style, obj) {\n\tvar css = obj.css;\n\tvar media = obj.media;\n\n\tif(media) {\n\t\tstyle.setAttribute(\"media\", media)\n\t}\n\n\tif(style.styleSheet) {\n\t\tstyle.styleSheet.cssText = css;\n\t} else {\n\t\twhile(style.firstChild) {\n\t\t\tstyle.removeChild(style.firstChild);\n\t\t}\n\n\t\tstyle.appendChild(document.createTextNode(css));\n\t}\n}\n\nfunction updateLink (link, options, obj) {\n\tvar css = obj.css;\n\tvar sourceMap = obj.sourceMap;\n\n\t/*\n\t\tIf convertToAbsoluteUrls isn't defined, but sourcemaps are enabled\n\t\tand there is no publicPath defined then lets turn convertToAbsoluteUrls\n\t\ton by default. Otherwise default to the convertToAbsoluteUrls option\n\t\tdirectly\n\t*/\n\tvar autoFixUrls = options.convertToAbsoluteUrls === undefined && sourceMap;\n\n\tif (options.convertToAbsoluteUrls || autoFixUrls) {\n\t\tcss = fixUrls(css);\n\t}\n\n\tif (sourceMap) {\n\t\t// http://stackoverflow.com/a/26603875\n\t\tcss += \"\\n/*# sourceMappingURL=data:application/json;base64,\" + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + \" */\";\n\t}\n\n\tvar blob = new Blob([css], { type: \"text/css\" });\n\n\tvar oldSrc = link.href;\n\n\tlink.href = URL.createObjectURL(blob);\n\n\tif(oldSrc) URL.revokeObjectURL(oldSrc);\n}\n","\n/**\n * When source maps are enabled, `style-loader` uses a link element with a data-uri to\n * embed the css on the page. This breaks all relative urls because now they are relative to a\n * bundle instead of the current page.\n *\n * One solution is to only use full urls, but that may be impossible.\n *\n * Instead, this function \"fixes\" the relative urls to be absolute according to the current page location.\n *\n * A rudimentary test suite is located at `test/fixUrls.js` and can be run via the `npm test` command.\n *\n */\n\nmodule.exports = function (css) {\n // get current location\n var location = typeof window !== \"undefined\" && window.location;\n\n if (!location) {\n throw new Error(\"fixUrls requires window.location\");\n }\n\n\t// blank or null?\n\tif (!css || typeof css !== \"string\") {\n\t return css;\n }\n\n var baseUrl = location.protocol + \"//\" + location.host;\n var currentDir = baseUrl + location.pathname.replace(/\\/[^\\/]*$/, \"/\");\n\n\t// convert each url(...)\n\t/*\n\tThis regular expression is just a way to recursively match brackets within\n\ta string.\n\n\t /url\\s*\\( = Match on the word \"url\" with any whitespace after it and then a parens\n\t ( = Start a capturing group\n\t (?: = Start a non-capturing group\n\t [^)(] = Match anything that isn't a parentheses\n\t | = OR\n\t \\( = Match a start parentheses\n\t (?: = Start another non-capturing groups\n\t [^)(]+ = Match anything that isn't a parentheses\n\t | = OR\n\t \\( = Match a start parentheses\n\t [^)(]* = Match anything that isn't a parentheses\n\t \\) = Match a end parentheses\n\t ) = End Group\n *\\) = Match anything and then a close parens\n ) = Close non-capturing group\n * = Match anything\n ) = Close capturing group\n\t \\) = Match a close parens\n\n\t /gi = Get all matches, not the first. Be case insensitive.\n\t */\n\tvar fixedCss = css.replace(/url\\s*\\(((?:[^)(]|\\((?:[^)(]+|\\([^)(]*\\))*\\))*)\\)/gi, function(fullMatch, origUrl) {\n\t\t// strip quotes (if they exist)\n\t\tvar unquotedOrigUrl = origUrl\n\t\t\t.trim()\n\t\t\t.replace(/^\"(.*)\"$/, function(o, $1){ return $1; })\n\t\t\t.replace(/^'(.*)'$/, function(o, $1){ return $1; });\n\n\t\t// already a full url? no change\n\t\tif (/^(#|data:|http:\\/\\/|https:\\/\\/|file:\\/\\/\\/|\\s*$)/i.test(unquotedOrigUrl)) {\n\t\t return fullMatch;\n\t\t}\n\n\t\t// convert the url to a full url\n\t\tvar newUrl;\n\n\t\tif (unquotedOrigUrl.indexOf(\"//\") === 0) {\n\t\t \t//TODO: should we add protocol?\n\t\t\tnewUrl = unquotedOrigUrl;\n\t\t} else if (unquotedOrigUrl.indexOf(\"/\") === 0) {\n\t\t\t// path should be relative to the base url\n\t\t\tnewUrl = baseUrl + unquotedOrigUrl; // already starts with '/'\n\t\t} else {\n\t\t\t// path should be relative to current directory\n\t\t\tnewUrl = currentDir + unquotedOrigUrl.replace(/^\\.\\//, \"\"); // Strip leading './'\n\t\t}\n\n\t\t// send back the fixed url(...)\n\t\treturn \"url(\" + JSON.stringify(newUrl) + \")\";\n\t});\n\n\t// send back the fixed css\n\treturn fixedCss;\n};\n"],"sourceRoot":""}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,4EAAwC;AAIxC,kBAAe,2BAAK,CAAC"}
@@ -0,0 +1,115 @@
1
+ "use strict";
2
+ var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
+ if (k2 === undefined) k2 = k;
4
+ var desc = Object.getOwnPropertyDescriptor(m, k);
5
+ if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
+ desc = { enumerable: true, get: function() { return m[k]; } };
7
+ }
8
+ Object.defineProperty(o, k2, desc);
9
+ }) : (function(o, m, k, k2) {
10
+ if (k2 === undefined) k2 = k;
11
+ o[k2] = m[k];
12
+ }));
13
+ var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
+ Object.defineProperty(o, "default", { enumerable: true, value: v });
15
+ }) : function(o, v) {
16
+ o["default"] = v;
17
+ });
18
+ var __importStar = (this && this.__importStar) || (function () {
19
+ var ownKeys = function(o) {
20
+ ownKeys = Object.getOwnPropertyNames || function (o) {
21
+ var ar = [];
22
+ for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
23
+ return ar;
24
+ };
25
+ return ownKeys(o);
26
+ };
27
+ return function (mod) {
28
+ if (mod && mod.__esModule) return mod;
29
+ var result = {};
30
+ if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
31
+ __setModuleDefault(result, mod);
32
+ return result;
33
+ };
34
+ })();
35
+ Object.defineProperty(exports, "__esModule", { value: true });
36
+ exports.default = Mason;
37
+ const jsx_runtime_1 = require("react/jsx-runtime");
38
+ const React = __importStar(require("react"));
39
+ const util_1 = require("./util");
40
+ require("./react-stone-mason.css");
41
+ function Mason({ children = [], columns, style = {} }) {
42
+ const containerRef = React.useRef(null);
43
+ React.useLayoutEffect(() => {
44
+ if (!containerRef.current)
45
+ return;
46
+ const containerChildren = Array.from(containerRef.current.children);
47
+ (0, util_1.positionChildren)(containerChildren, containerRef.current, columns);
48
+ }, [containerRef, columns]);
49
+ React.useEffect(() => {
50
+ // Listen for mediaQuery matches, and set the number of columns.
51
+ if (!containerRef.current)
52
+ return;
53
+ const queryListeners = {};
54
+ const containerStyle = containerRef.current.style;
55
+ // handle media query match changes
56
+ const getQueryMatches = () => {
57
+ Object.keys(columns).forEach((thisPoint) => {
58
+ const container = containerRef.current;
59
+ const breakPointColumns = columns[thisPoint];
60
+ const queryListener = queryListeners[thisPoint];
61
+ if (!container || !breakPointColumns)
62
+ return;
63
+ const containerChildren = Array.from(container.children);
64
+ const cellWidth = (100 / breakPointColumns.columns).toFixed(3) + "%";
65
+ if ((queryListener === null || queryListener === void 0 ? void 0 : queryListener.matches) || !breakPointColumns.query) {
66
+ containerStyle.setProperty("--cell-width", cellWidth);
67
+ window.requestAnimationFrame(() => (0, util_1.positionChildren)(containerChildren, container, columns));
68
+ }
69
+ });
70
+ };
71
+ // listen for query matches, attach listener
72
+ Object.keys(columns).forEach((thisPoint) => {
73
+ const pointColumns = columns[thisPoint];
74
+ if (!pointColumns || !pointColumns.query)
75
+ return;
76
+ queryListeners[thisPoint] = window.matchMedia(pointColumns.query);
77
+ queryListeners[thisPoint].addEventListener("change", getQueryMatches);
78
+ });
79
+ getQueryMatches();
80
+ return () => {
81
+ // stop listening for query matches
82
+ Object.keys(queryListeners).forEach((breakPoint) => { var _a; return (_a = queryListeners[breakPoint]) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", getQueryMatches); });
83
+ };
84
+ }, [columns, containerRef]);
85
+ React.useEffect(() => {
86
+ // listen for document resizing, and dom tree changes. recalculate transforms as needed.
87
+ if (!containerRef.current)
88
+ return;
89
+ const doPositionChildren = (entries) => {
90
+ if (!containerRef.current)
91
+ return;
92
+ const containerChildren = Array.from(containerRef.current.children);
93
+ const targets = (entries === null || entries === void 0 ? void 0 : entries.length) ? entries.map((entry) => entry.target) : containerChildren;
94
+ (0, util_1.positionChildren)(targets, containerNode, columns);
95
+ };
96
+ const containerNode = containerRef.current;
97
+ const sizeObserver = new ResizeObserver((entries) => {
98
+ doPositionChildren(entries);
99
+ });
100
+ const domObserver = new MutationObserver((entries) => {
101
+ doPositionChildren(entries);
102
+ });
103
+ Array.from(containerRef.current.children).forEach((child) => sizeObserver.observe(child));
104
+ sizeObserver.observe(containerNode);
105
+ domObserver.observe(containerNode, util_1.mutationConfig);
106
+ return () => {
107
+ sizeObserver.disconnect();
108
+ domObserver.disconnect();
109
+ };
110
+ }, [containerRef, columns]);
111
+ return ((0, jsx_runtime_1.jsx)("div", { className: "mason-container", ref: containerRef, style: style, children: React.Children.toArray(children)
112
+ .filter((c) => c)
113
+ .map((child, i) => ((0, jsx_runtime_1.jsx)("div", { children: child }, `child-${i}`))) }));
114
+ }
115
+ //# sourceMappingURL=react-stone-mason.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"react-stone-mason.js","sourceRoot":"","sources":["../src/react-stone-mason.tsx"],"names":[],"mappings":"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"}
package/build/types.js ADDED
@@ -0,0 +1,3 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}
package/build/util.js ADDED
@@ -0,0 +1,47 @@
1
+ "use strict";
2
+ Object.defineProperty(exports, "__esModule", { value: true });
3
+ exports.positionChildren = exports.mutationConfig = void 0;
4
+ exports.mutationConfig = { childList: true, subtree: true };
5
+ const getBreakPoint = (config) => {
6
+ const fallBack = Object.keys(config).find((thisBreakPoint) => { var _a; return !((_a = config[thisBreakPoint]) === null || _a === void 0 ? void 0 : _a.query); });
7
+ const matchingPoint = Object.keys(config).find((thisBreakPoint) => {
8
+ var _a;
9
+ const breakpointQuery = (_a = config[thisBreakPoint]) === null || _a === void 0 ? void 0 : _a.query;
10
+ return breakpointQuery && window.matchMedia(breakpointQuery).matches;
11
+ });
12
+ return matchingPoint || fallBack;
13
+ };
14
+ const positionChildren = (targets, container, columnConfig) => {
15
+ // iterate through children - by column. find gap under each child and the element in the row below it.
16
+ // add the gap to the 'column debt' and move the child vertically accordingly.
17
+ var _a;
18
+ const breakPoint = getBreakPoint(columnConfig);
19
+ if (!breakPoint || !container)
20
+ return;
21
+ const columns = +(((_a = columnConfig[breakPoint]) === null || _a === void 0 ? void 0 : _a.columns) || 1);
22
+ const children = Array.from(container.children);
23
+ // find the first row of items impacted by the reposition, and begin positioning south of there
24
+ const firstTarget = targets.reduce((a, c) => Math.min(a, children.indexOf(c)), children.length);
25
+ const firstTargetRow = Math.max(0, firstTarget - columns);
26
+ children.forEach((child, index) => {
27
+ if (index >= firstTargetRow) {
28
+ const column = index % columns;
29
+ const rowChildren = children.slice(index - column, index - column + columns);
30
+ const prevChild = children[index - columns];
31
+ const prevDebt = Number((prevChild === null || prevChild === void 0 ? void 0 : prevChild.getAttribute("data-debt")) || 0);
32
+ const maxHeight = Math.max(...rowChildren.map((rowChild) => rowChild.getBoundingClientRect().height));
33
+ const debt = prevDebt + Math.ceil(maxHeight - child.getBoundingClientRect().height);
34
+ child.setAttribute("data-debt", String(debt));
35
+ child.style.transform = index > columns - 1 ? `translateY(-${prevDebt}px)` : "";
36
+ }
37
+ });
38
+ window.requestAnimationFrame(() => {
39
+ var _a, _b;
40
+ const lastChildren = children.slice(-1 * columns);
41
+ const childBottomEdge = Math.max(...lastChildren.map((c) => c.getBoundingClientRect().bottom));
42
+ const childTopEdge = (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) !== null && _b !== void 0 ? _b : 0;
43
+ container.style.height = childBottomEdge - childTopEdge + "px";
44
+ });
45
+ };
46
+ exports.positionChildren = positionChildren;
47
+ //# sourceMappingURL=util.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}
package/dev/App.css ADDED
@@ -0,0 +1,33 @@
1
+ body {
2
+ background: #eee;
3
+ }
4
+
5
+ .App {
6
+ max-width: 60rem;
7
+ margin: auto;
8
+ padding: 5rem 1rem;
9
+ }
10
+
11
+ h1,
12
+ h2 {
13
+ padding: 0.5rem;
14
+ }
15
+
16
+ .App img {
17
+ max-width: 100%;
18
+ }
19
+
20
+ .App .random-entry .entry-content {
21
+ margin: calc(1vw + 0.25rem);
22
+ background: white;
23
+ box-shadow:
24
+ 0 0 0 1px #0003,
25
+ 0 0.75rem 0.75rem -0.5rem #0004;
26
+ border-radius: 3px;
27
+ padding: 0.5rem;
28
+ }
29
+
30
+ .App .random-entry .entry-content p {
31
+ margin: 0.5rem 0;
32
+ font-size: 0.85rem;
33
+ }
package/dev/App.tsx ADDED
@@ -0,0 +1,22 @@
1
+ import Mason from "../src/react-stone-mason";
2
+ import { columnConfig, columnConfigImages, randomColors, randomEntries, staticColumn } from "./util";
3
+
4
+ import "./App.css";
5
+
6
+ const App = () => {
7
+ return (
8
+ <div className="App">
9
+ <h1>Responsive</h1>
10
+ <h2>HTML children with gutter</h2>
11
+ <Mason columns={columnConfig}>{randomEntries.slice(0, 16)}</Mason>
12
+
13
+ <h2>Plain image children, no gutter</h2>
14
+ <Mason columns={columnConfigImages}>{randomColors.slice(0, 24)}</Mason>
15
+
16
+ <h1>Static</h1>
17
+ <Mason columns={staticColumn}>{randomEntries.slice(0, 16)}</Mason>
18
+ </div>
19
+ );
20
+ };
21
+
22
+ export default App;
package/dev/main.tsx ADDED
@@ -0,0 +1,10 @@
1
+ import React from "react";
2
+ import { createRoot } from "react-dom/client";
3
+ import App from "./App";
4
+
5
+ const container = document.getElementById("root");
6
+
7
+ if (container) {
8
+ const root = createRoot(container);
9
+ root.render(<App />);
10
+ }
package/dev/util.tsx ADDED
@@ -0,0 +1,70 @@
1
+ const hipsum = `Taxidermy proident hoodie brooklyn PBR&B godard succulents actually. Vice exercitation banh mi kombucha sed squid. Aliqua mumblecore raw denim pitchfork, intelligentsia in blog tote bag glossier normcore vice sartorial narwhal dolore echo park. Irony heirloom do, subway tile XOXO gluten-free magna. Normcore pok pok seitan hella roof party iceland humblebrag disrupt lumbersexual flexitarian mumblecore fingerstache helvetica. Yr laboris iceland, wayfarers proident hell of kitsch tilde palo santo dreamcatcher cupidatat gastropub ea. Tbh sriracha crucifix jianbing semiotics typewriter in et migas tacos.`;
2
+
3
+ function toHex(n: number) {
4
+ var hex = n.toString(16);
5
+ while (hex.length < 2) {
6
+ hex = "0" + hex;
7
+ }
8
+ return hex;
9
+ }
10
+ const getRandomColor = () => {
11
+ const r = Math.round(Math.random() * 255);
12
+ const g = Math.round(Math.random() * 255);
13
+ const b = Math.round(Math.random() * 255);
14
+ return toHex(r) + toHex(g) + toHex(b);
15
+ };
16
+
17
+ export const randomEntries = new Array(80).fill(".").map(() => {
18
+ const textStart = Math.round(Math.random() * 400);
19
+ const height = Math.round(Math.random() * 300) + 100;
20
+ const text = hipsum.slice(textStart, textStart + height / 5);
21
+ return (
22
+ <div className="random-entry">
23
+ <div className="entry-content">
24
+ <img src={`https://dummyimage.com/300x${height}/${getRandomColor()}.png&text=+`} alt="colors!" />
25
+ <p>{text}</p>
26
+ </div>
27
+ </div>
28
+ );
29
+ });
30
+
31
+ export const randomColors = new Array(80).fill(".").map(() => {
32
+ const height = Math.round(Math.random() * 300) + 100;
33
+ return <img style={{ display: "block" }} src={`https://dummyimage.com/300x${height}/${getRandomColor()}.png&text=+`} alt="colors!" />;
34
+ });
35
+
36
+ export const columnConfig = {
37
+ small: {
38
+ query: "(max-width: 720px)",
39
+ columns: 2,
40
+ },
41
+ medium: {
42
+ query: "(min-width: calc(720px + 1px)) and (max-width: calc(1023px - 1px) )",
43
+ columns: 3,
44
+ },
45
+ large: {
46
+ query: "(min-width: 1023px)",
47
+ columns: 4,
48
+ },
49
+ };
50
+
51
+ export const columnConfigImages = {
52
+ small: {
53
+ query: "(max-width: 720px)",
54
+ columns: 3,
55
+ },
56
+ medium: {
57
+ query: "(min-width: calc(720px + 1px)) and (max-width: calc(1023px - 1px) )",
58
+ columns: 4,
59
+ },
60
+ large: {
61
+ query: "(min-width: 1023px)",
62
+ columns: 5,
63
+ },
64
+ };
65
+
66
+ export const staticColumn = {
67
+ default: {
68
+ columns: 3,
69
+ },
70
+ };
@@ -0,0 +1,4 @@
1
+ import { default as Mason } from './react-stone-mason';
2
+ import { MasonProps } from './types';
3
+ export type { MasonProps };
4
+ export default Mason;
@@ -0,0 +1 @@
1
+ "use strict";const y=require("react/jsx-runtime"),v=require("react");function C(s){const n=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(s){for(const u in s)if(u!=="default"){const e=Object.getOwnPropertyDescriptor(s,u);Object.defineProperty(n,u,e.get?e:{enumerable:!0,get:()=>s[u]})}}return n.default=s,Object.freeze(n)}const m=C(v),j={childList:!0,subtree:!0},E=s=>{const n=Object.keys(s).find(e=>{var t;return!((t=s[e])!=null&&t.query)});return Object.keys(s).find(e=>{var c;const t=(c=s[e])==null?void 0:c.query;return t&&window.matchMedia(t).matches})||n},b=(s,n,u)=>{var r;const e=E(u);if(!e||!n)return;const t=+(((r=u[e])==null?void 0:r.columns)||1),c=Array.from(n.children),d=s.reduce((a,o)=>Math.min(a,c.indexOf(o)),c.length),i=Math.max(0,d-t);c.forEach((a,o)=>{if(o>=i){const l=o%t,h=c.slice(o-l,o-l+t),f=c[o-t],g=Number((f==null?void 0:f.getAttribute("data-debt"))||0),p=Math.max(...h.map(w=>w.getBoundingClientRect().height)),O=g+Math.ceil(p-a.getBoundingClientRect().height);a.setAttribute("data-debt",String(O)),a.style.transform=o>t-1?`translateY(-${g}px)`:""}}),window.requestAnimationFrame(()=>{var h;const a=c.slice(-1*t),o=Math.max(...a.map(f=>f.getBoundingClientRect().bottom)),l=((h=c[0])==null?void 0:h.getBoundingClientRect().top)??0;n.style.height=o-l+"px"})};function k({children:s=[],columns:n,style:u={}}){const e=m.useRef(null);return m.useLayoutEffect(()=>{if(!e.current)return;const t=Array.from(e.current.children);b(t,e.current,n)},[e,n]),m.useEffect(()=>{if(!e.current)return;const t={},c=e.current.style,d=()=>{Object.keys(n).forEach(i=>{const r=e.current,a=n[i],o=t[i];if(!r||!a)return;const l=Array.from(r.children),h=(100/a.columns).toFixed(3)+"%";(o!=null&&o.matches||!a.query)&&(c.setProperty("--cell-width",h),window.requestAnimationFrame(()=>b(l,r,n)))})};return Object.keys(n).forEach(i=>{const r=n[i];!r||!r.query||(t[i]=window.matchMedia(r.query),t[i].addEventListener("change",d))}),d(),()=>{Object.keys(t).forEach(i=>{var r;return(r=t[i])==null?void 0:r.removeEventListener("change",d)})}},[n,e]),m.useEffect(()=>{if(!e.current)return;const t=r=>{if(!e.current)return;const a=Array.from(e.current.children),o=r!=null&&r.length?r.map(l=>l.target):a;b(o,c,n)},c=e.current,d=new ResizeObserver(r=>{t(r)}),i=new MutationObserver(r=>{t(r)});return Array.from(e.current.children).forEach(r=>d.observe(r)),d.observe(c),i.observe(c,j),()=>{d.disconnect(),i.disconnect()}},[e,n]),y.jsx("div",{className:"mason-container",ref:e,style:u,children:m.Children.toArray(s).filter(t=>t).map((t,c)=>y.jsx("div",{children:t},`child-${c}`))})}module.exports=k;
@@ -0,0 +1 @@
1
+ .mason-container{position:relative;overflow:hidden;--cell-width: 100%;box-sizing:border-box;margin:0;padding:0}.mason-container>*{box-sizing:inherit;display:inline-block;vertical-align:top;width:var(--cell-width)}
@@ -0,0 +1,2 @@
1
+ import { MasonProps } from './types';
2
+ export default function Mason({ children, columns, style }: MasonProps): import("react/jsx-runtime").JSX.Element;
@@ -0,0 +1,72 @@
1
+ import { jsx as y } from "react/jsx-runtime";
2
+ import * as m from "react";
3
+ const v = { childList: !0, subtree: !0 }, E = (u) => {
4
+ const o = Object.keys(u).find((r) => {
5
+ var t;
6
+ return !((t = u[r]) != null && t.query);
7
+ });
8
+ return Object.keys(u).find((r) => {
9
+ var n;
10
+ const t = (n = u[r]) == null ? void 0 : n.query;
11
+ return t && window.matchMedia(t).matches;
12
+ }) || o;
13
+ }, g = (u, o, l) => {
14
+ var e;
15
+ const r = E(l);
16
+ if (!r || !o) return;
17
+ const t = +(((e = l[r]) == null ? void 0 : e.columns) || 1), n = Array.from(o.children), a = u.reduce((s, c) => Math.min(s, n.indexOf(c)), n.length), i = Math.max(0, a - t);
18
+ n.forEach((s, c) => {
19
+ if (c >= i) {
20
+ const d = c % t, h = n.slice(c - d, c - d + t), f = n[c - t], b = Number((f == null ? void 0 : f.getAttribute("data-debt")) || 0), p = Math.max(...h.map((C) => C.getBoundingClientRect().height)), w = b + Math.ceil(p - s.getBoundingClientRect().height);
21
+ s.setAttribute("data-debt", String(w)), s.style.transform = c > t - 1 ? `translateY(-${b}px)` : "";
22
+ }
23
+ }), window.requestAnimationFrame(() => {
24
+ var h;
25
+ const s = n.slice(-1 * t), c = Math.max(...s.map((f) => f.getBoundingClientRect().bottom)), d = ((h = n[0]) == null ? void 0 : h.getBoundingClientRect().top) ?? 0;
26
+ o.style.height = c - d + "px";
27
+ });
28
+ };
29
+ function A({ children: u = [], columns: o, style: l = {} }) {
30
+ const r = m.useRef(null);
31
+ return m.useLayoutEffect(() => {
32
+ if (!r.current) return;
33
+ const t = Array.from(r.current.children);
34
+ g(t, r.current, o);
35
+ }, [r, o]), m.useEffect(() => {
36
+ if (!r.current) return;
37
+ const t = {}, n = r.current.style, a = () => {
38
+ Object.keys(o).forEach((i) => {
39
+ const e = r.current, s = o[i], c = t[i];
40
+ if (!e || !s) return;
41
+ const d = Array.from(e.children), h = (100 / s.columns).toFixed(3) + "%";
42
+ (c != null && c.matches || !s.query) && (n.setProperty("--cell-width", h), window.requestAnimationFrame(() => g(d, e, o)));
43
+ });
44
+ };
45
+ return Object.keys(o).forEach((i) => {
46
+ const e = o[i];
47
+ !e || !e.query || (t[i] = window.matchMedia(e.query), t[i].addEventListener("change", a));
48
+ }), a(), () => {
49
+ Object.keys(t).forEach((i) => {
50
+ var e;
51
+ return (e = t[i]) == null ? void 0 : e.removeEventListener("change", a);
52
+ });
53
+ };
54
+ }, [o, r]), m.useEffect(() => {
55
+ if (!r.current) return;
56
+ const t = (e) => {
57
+ if (!r.current) return;
58
+ const s = Array.from(r.current.children), c = e != null && e.length ? e.map((d) => d.target) : s;
59
+ g(c, n, o);
60
+ }, n = r.current, a = new ResizeObserver((e) => {
61
+ t(e);
62
+ }), i = new MutationObserver((e) => {
63
+ t(e);
64
+ });
65
+ return Array.from(r.current.children).forEach((e) => a.observe(e)), a.observe(n), i.observe(n, v), () => {
66
+ a.disconnect(), i.disconnect();
67
+ };
68
+ }, [r, o]), /* @__PURE__ */ y("div", { className: "mason-container", ref: r, style: l, children: m.Children.toArray(u).filter((t) => t).map((t, n) => /* @__PURE__ */ y("div", { children: t }, `child-${n}`)) });
69
+ }
70
+ export {
71
+ A as default
72
+ };
@@ -0,0 +1,19 @@
1
+ export interface MutationConfiguration {
2
+ childList: boolean;
3
+ subtree: boolean;
4
+ }
5
+ export interface BreakPointData {
6
+ query?: string;
7
+ columns: number;
8
+ }
9
+ export interface MasonryConfig {
10
+ [key: string]: BreakPointData;
11
+ }
12
+ export interface MasonProps {
13
+ children?: React.ReactNode[] | undefined;
14
+ columns: MasonryConfig;
15
+ style?: React.CSSProperties;
16
+ }
17
+ export type entryWithTarget = {
18
+ target: Node;
19
+ };
package/dist/util.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { MasonryConfig, MutationConfiguration } from './types';
2
+ export declare const mutationConfig: MutationConfiguration;
3
+ export declare const positionChildren: (targets: HTMLElement[], container: HTMLElement, columnConfig: MasonryConfig) => void;
package/index.html ADDED
@@ -0,0 +1,4 @@
1
+ <body>
2
+ <div id="root"></div>
3
+ <script type="module" src="./dev/main.tsx"></script>
4
+ </body>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "react-stone-mason",
3
- "version": "1.0.22",
3
+ "version": "2.0.0",
4
4
  "author": {
5
5
  "name": "Greg Archer",
6
6
  "email": "greg.taff@gmail.com"
@@ -10,39 +10,38 @@
10
10
  "url": "git+https://github.com/nihlton/mason"
11
11
  },
12
12
  "homepage": "https://github.com/nihlton/mason",
13
- "main": "build/index.js",
13
+ "main": "./dist/react-stone-mason.umd.js",
14
+ "module": "./dist/react-stone-mason.es.js",
15
+ "types": "./dist/index.d.ts",
14
16
  "peerDependencies": {
15
- "react": "^16.8.6",
16
- "react-dom": "^16.8.6"
17
+ "react": ">=16.8.6",
18
+ "react-dom": ">=16.8.6"
17
19
  },
18
20
  "dependencies": {
19
- "resize-observer-polyfill": "^1.5.1",
20
- "webpack": "^4.35.0",
21
- "@types/react": "^16.9.34",
22
- "@types/react-dom": "^16.9.6",
23
- "typescript": "^3.8.3"
21
+ "typescript": "^5.9.3",
22
+ "webpack": "^4.35.0"
24
23
  },
25
24
  "scripts": {
26
- "test": "echo \"Error: no test specified\" && exit 1",
27
- "start": "webpack --watch",
28
- "build": "webpack"
25
+ "dev": "vite",
26
+ "build": "tsc && vite build",
27
+ "preview": "vite preview"
29
28
  },
30
29
  "devDependencies": {
31
- "@babel/core": "^7.4.5",
32
- "@babel/plugin-proposal-class-properties": "^7.4.4",
33
- "@babel/plugin-proposal-object-rest-spread": "^7.4.4",
34
- "@babel/plugin-transform-react-jsx": "^7.3.0",
35
- "@babel/preset-env": "^7.4.5",
36
- "@babel/preset-es2015": "^7.0.0-beta.53",
37
- "@babel/preset-react": "^7.0.0",
38
- "awesome-typescript-loader": "^5.2.1",
39
- "babel-cli": "^6.26.0",
40
- "babel-loader": "^8.0.6",
41
- "css-loader": "^3.0.0",
42
- "html-webpack-plugin": "^3.2.0",
30
+ "@types/node": "^25.0.3",
31
+ "@types/react": "^19.2.0",
32
+ "@types/react-dom": "^19.2.0",
33
+ "@vitejs/plugin-react": "^4.7.0",
34
+ "eslint": "^9.39.2",
35
+ "eslint-plugin-jsx-a11y": "^6.10.2",
36
+ "eslint-plugin-react": "^7.37.5",
37
+ "eslint-plugin-react-hooks": "^7.0.1",
38
+ "react": "^19.2.0",
39
+ "react-dom": "^19.2.0",
40
+ "sass": "^1.95.1",
43
41
  "source-map-loader": "^0.2.4",
44
- "style-loader": "^0.23.1",
45
42
  "ts-loader": "^7.0.0",
46
- "webpack-cli": "^3.0.4"
43
+ "typescript-eslint": "^8.50.1",
44
+ "vite": "^6.4.1",
45
+ "vite-plugin-dts": "^4.5.4"
47
46
  }
48
47
  }
package/src/index.ts ADDED
@@ -0,0 +1,5 @@
1
+ import Mason from "./react-stone-mason";
2
+ import type { MasonProps } from "./types";
3
+
4
+ export type { MasonProps };
5
+ export default Mason;
@@ -0,0 +1,15 @@
1
+ .mason-container {
2
+ position: relative;
3
+ overflow: hidden;
4
+ --cell-width: 100%;
5
+ box-sizing: border-box;
6
+ margin: 0;
7
+ padding: 0;
8
+ }
9
+
10
+ .mason-container > * {
11
+ box-sizing: inherit;
12
+ display: inline-block;
13
+ vertical-align: top;
14
+ width: var(--cell-width);
15
+ }
@@ -0,0 +1,98 @@
1
+ import * as React from "react";
2
+
3
+ import { mutationConfig, positionChildren } from "./util";
4
+ import { entryWithTarget, MasonProps } from "./types";
5
+
6
+ import "./react-stone-mason.css";
7
+
8
+ export default function Mason({ children = [], columns, style = {} }: MasonProps) {
9
+ const containerRef = React.useRef<HTMLDivElement>(null);
10
+
11
+ React.useLayoutEffect(() => {
12
+ if (!containerRef.current) return;
13
+ const containerChildren = Array.from(containerRef.current.children) as HTMLElement[];
14
+ positionChildren(containerChildren, containerRef.current, columns);
15
+ }, [containerRef, columns]);
16
+
17
+ React.useEffect(() => {
18
+ // Listen for mediaQuery matches, and set the number of columns.
19
+ if (!containerRef.current) return;
20
+
21
+ const queryListeners: { [key: string]: MediaQueryList } = {};
22
+ const containerStyle = containerRef.current.style;
23
+
24
+ // handle media query match changes
25
+ const getQueryMatches = (): void => {
26
+ Object.keys(columns).forEach((thisPoint: string) => {
27
+ const container = containerRef.current;
28
+ const breakPointColumns = columns[thisPoint];
29
+ const queryListener = queryListeners[thisPoint];
30
+
31
+ if (!container || !breakPointColumns) return;
32
+
33
+ const containerChildren = Array.from(container.children) as HTMLElement[];
34
+ const cellWidth: string = (100 / breakPointColumns.columns).toFixed(3) + "%";
35
+
36
+ if (queryListener?.matches || !breakPointColumns.query) {
37
+ containerStyle.setProperty("--cell-width", cellWidth);
38
+ window.requestAnimationFrame(() => positionChildren(containerChildren, container, columns));
39
+ }
40
+ });
41
+ };
42
+
43
+ // listen for query matches, attach listener
44
+ Object.keys(columns).forEach((thisPoint: string) => {
45
+ const pointColumns = columns[thisPoint];
46
+ if (!pointColumns || !pointColumns.query) return;
47
+ queryListeners[thisPoint] = window.matchMedia(pointColumns.query);
48
+ queryListeners[thisPoint].addEventListener("change", getQueryMatches);
49
+ });
50
+
51
+ getQueryMatches();
52
+
53
+ return () => {
54
+ // stop listening for query matches
55
+ Object.keys(queryListeners).forEach((breakPoint) => queryListeners[breakPoint]?.removeEventListener("change", getQueryMatches));
56
+ };
57
+ }, [columns, containerRef]);
58
+
59
+ React.useEffect(() => {
60
+ // listen for document resizing, and dom tree changes. recalculate transforms as needed.
61
+ if (!containerRef.current) return;
62
+
63
+ const doPositionChildren = (entries: entryWithTarget[]): void => {
64
+ if (!containerRef.current) return;
65
+
66
+ const containerChildren = Array.from(containerRef.current.children) as HTMLElement[];
67
+ const targets = entries?.length ? (entries.map((entry) => entry.target) as HTMLElement[]) : containerChildren;
68
+ positionChildren(targets, containerNode, columns);
69
+ };
70
+
71
+ const containerNode = containerRef.current as HTMLElement;
72
+ const sizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
73
+ doPositionChildren(entries);
74
+ });
75
+ const domObserver = new MutationObserver((entries: MutationRecord[]) => {
76
+ doPositionChildren(entries);
77
+ });
78
+
79
+ Array.from(containerRef.current.children).forEach((child) => sizeObserver.observe(child));
80
+ sizeObserver.observe(containerNode);
81
+ domObserver.observe(containerNode, mutationConfig);
82
+
83
+ return () => {
84
+ sizeObserver.disconnect();
85
+ domObserver.disconnect();
86
+ };
87
+ }, [containerRef, columns]);
88
+
89
+ return (
90
+ <div className={"mason-container"} ref={containerRef} style={style}>
91
+ {React.Children.toArray(children)
92
+ .filter((c) => c)
93
+ .map((child: React.ReactNode, i: number) => (
94
+ <div key={`child-${i}`}>{child}</div>
95
+ ))}
96
+ </div>
97
+ );
98
+ }
package/src/types.ts ADDED
@@ -0,0 +1,23 @@
1
+ export interface MutationConfiguration {
2
+ childList: boolean;
3
+ subtree: boolean;
4
+ }
5
+
6
+ export interface BreakPointData {
7
+ query?: string;
8
+ columns: number;
9
+ }
10
+
11
+ export interface MasonryConfig {
12
+ [key: string]: BreakPointData;
13
+ }
14
+
15
+ export interface MasonProps {
16
+ children?: React.ReactNode[] | undefined;
17
+ columns: MasonryConfig;
18
+ style?: React.CSSProperties;
19
+ }
20
+
21
+ export type entryWithTarget = {
22
+ target: Node;
23
+ };
package/src/util.ts ADDED
@@ -0,0 +1,52 @@
1
+ import { MasonryConfig, MutationConfiguration } from "./types";
2
+
3
+ export const mutationConfig = { childList: true, subtree: true } as MutationConfiguration;
4
+
5
+ const getBreakPoint = (config: MasonryConfig) => {
6
+ const fallBack = Object.keys(config).find((thisBreakPoint) => !config[thisBreakPoint]?.query);
7
+ const matchingPoint = Object.keys(config).find((thisBreakPoint) => {
8
+ const breakpointQuery = config[thisBreakPoint]?.query;
9
+ return breakpointQuery && window.matchMedia(breakpointQuery).matches;
10
+ });
11
+
12
+ return matchingPoint || fallBack;
13
+ };
14
+
15
+ export const positionChildren = (targets: HTMLElement[], container: HTMLElement, columnConfig: MasonryConfig): void => {
16
+ // iterate through children - by column. find gap under each child and the element in the row below it.
17
+ // add the gap to the 'column debt' and move the child vertically accordingly.
18
+
19
+ const breakPoint = getBreakPoint(columnConfig);
20
+
21
+ if (!breakPoint || !container) return;
22
+
23
+ const columns: number = +(columnConfig[breakPoint]?.columns || 1);
24
+ const children: HTMLElement[] = Array.from(container.children) as HTMLElement[];
25
+
26
+ // find the first row of items impacted by the reposition, and begin positioning south of there
27
+ const firstTarget = targets.reduce((a, c) => Math.min(a, children.indexOf(c)), children.length);
28
+ const firstTargetRow = Math.max(0, firstTarget - columns);
29
+
30
+ children.forEach((child: HTMLElement, index: number) => {
31
+ if (index >= firstTargetRow) {
32
+ const column: number = index % columns;
33
+ const rowChildren: HTMLElement[] = children.slice(index - column, index - column + columns);
34
+
35
+ const prevChild = children[index - columns];
36
+ const prevDebt = Number(prevChild?.getAttribute("data-debt") || 0);
37
+
38
+ const maxHeight: number = Math.max(...rowChildren.map((rowChild: HTMLElement) => rowChild.getBoundingClientRect().height));
39
+ const debt: number = prevDebt + Math.ceil(maxHeight - child.getBoundingClientRect().height);
40
+
41
+ child.setAttribute("data-debt", String(debt));
42
+ child.style.transform = index > columns - 1 ? `translateY(-${prevDebt}px)` : "";
43
+ }
44
+ });
45
+
46
+ window.requestAnimationFrame(() => {
47
+ const lastChildren = children.slice(-1 * columns);
48
+ const childBottomEdge = Math.max(...lastChildren.map((c: HTMLElement) => c.getBoundingClientRect().bottom));
49
+ const childTopEdge = children[0]?.getBoundingClientRect().top ?? 0;
50
+ container.style.height = childBottomEdge - childTopEdge + "px";
51
+ });
52
+ };
package/tsconfig.json CHANGED
@@ -1,10 +1,14 @@
1
1
  {
2
2
  "compilerOptions": {
3
+ "strict": true,
4
+ "esModuleInterop": true,
3
5
  "outDir": "./build/",
4
6
  "sourceMap": true,
5
7
  "noImplicitAny": true,
6
8
  "module": "commonjs",
7
9
  "target": "es6",
8
- "jsx": "react"
9
- }
10
- }
10
+ "jsx": "react-jsx",
11
+ "types": ["node"]
12
+ },
13
+ "include": ["src/**/*"]
14
+ }
package/vite.config.ts ADDED
@@ -0,0 +1,30 @@
1
+ import { defineConfig } from "vite";
2
+ import react from "@vitejs/plugin-react";
3
+ import dts from "vite-plugin-dts";
4
+ import { resolve } from "path";
5
+
6
+ export default defineConfig({
7
+ plugins: [
8
+ react(),
9
+ dts({ insertTypesEntry: true }), // Generates the .d.ts files
10
+ ],
11
+ build: {
12
+ lib: {
13
+ // Could also be a dictionary or array of multiple entry points
14
+ entry: resolve(__dirname, "src/index.ts"),
15
+ name: "react-stone-mason",
16
+ fileName: (format) => `react-stone-mason.${format}.js`,
17
+ formats: ["es", "cjs"],
18
+ },
19
+ rollupOptions: {
20
+ // Externalize deps that shouldn't be bundled into your library
21
+ external: ["react", "react-dom", "react/jsx-runtime"],
22
+ output: {
23
+ globals: {
24
+ react: "React",
25
+ "react-dom": "ReactDOM",
26
+ },
27
+ },
28
+ },
29
+ },
30
+ });
package/src/index.css DELETED
@@ -1,15 +0,0 @@
1
- .mason-container {
2
- position: relative;
3
- overflow: hidden;
4
- --cell-width: 100%;
5
- box-sizing: border-box;
6
- margin: 0;
7
- padding: 0;
8
- }
9
-
10
- .mason-container > * {
11
- box-sizing: inherit;
12
- display: inline-block;
13
- vertical-align: top;
14
- width: var(--cell-width);
15
- }
package/src/index.tsx DELETED
@@ -1,142 +0,0 @@
1
- import * as React from 'react'
2
- import ResizeObserver from 'resize-observer-polyfill'
3
-
4
- import './index.css'
5
-
6
- interface MutationConfiguration {
7
- childList: boolean,
8
- subtree: boolean
9
- }
10
-
11
- interface BreakPointData {
12
- query?: string,
13
- columns: number
14
- }
15
-
16
- interface MasonryConfig {
17
- [key: string]: BreakPointData
18
- }
19
-
20
- export interface MasonProps {
21
- children?: React.ReactNode[] | undefined,
22
- columns: MasonryConfig
23
- }
24
-
25
- type entryWithTarget = {
26
- target: Node
27
- }
28
-
29
- const mutationConfig = { childList: true, subtree: true } as MutationConfiguration
30
-
31
- const positionChildren = (targets: HTMLElement[], container: HTMLElement, columnConfig: MasonryConfig): void => {
32
- // iterate through children - by column. find gap under each child and the element in the row below it.
33
- // add the gap to the 'column debt' and move the child vertically accordingly.
34
-
35
- if (!container) { return }
36
- let breakPoint: string
37
-
38
- Object.keys(columnConfig).forEach(thisBreakPoint => {
39
- const defaultValue = !columnConfig[thisBreakPoint].query
40
- const matchesThisBreakPoint = window.matchMedia(columnConfig[thisBreakPoint].query).matches
41
- if (matchesThisBreakPoint || defaultValue) { breakPoint = thisBreakPoint }
42
- })
43
-
44
- if (!breakPoint) { return }
45
- let columns: number = +columnConfig[breakPoint].columns || 1
46
- let children: HTMLElement[] = Array.from(container.children) as HTMLElement[]
47
-
48
- // find the first row of items impacted by the reposition, and begin positioning south of there
49
- const firstTarget = targets.reduce((a, c) => Math.min(a, children.indexOf(c)), children.length)
50
- const firstTargetRow = Math.max(0, firstTarget - columns)
51
-
52
- children.forEach((child: HTMLElement, index: number) => {
53
- if (index >= firstTargetRow) {
54
- const column: number = index % columns
55
- const rowChildren: HTMLElement[] = children.slice(index - column, index - column + columns)
56
-
57
- const prevChild: HTMLElement = children[index - columns]
58
- const prevDebt: number = Number(prevChild?.getAttribute('data-debt') || 0)
59
-
60
- const maxHeight: number = Math.max( ...rowChildren.map((rowChild: HTMLElement) => rowChild.getBoundingClientRect().height))
61
- const debt: number = prevDebt + Math.ceil(maxHeight - child.getBoundingClientRect().height)
62
-
63
- child.setAttribute('data-debt', String(debt))
64
- child.style.transform = index > columns - 1 ? `translateY(-${prevDebt}px)` : ''
65
- }
66
- })
67
-
68
- window.requestAnimationFrame(() => {
69
- const lastChildren = children.slice(-1 * (columns))
70
- const childBottomEdge = Math.max(...lastChildren.map((c: HTMLElement) => c.getBoundingClientRect().bottom))
71
- const childTopEdge = (children[0]?.getBoundingClientRect().top) ?? 0
72
- container.style.height = (childBottomEdge - childTopEdge) + 'px'
73
- })
74
- }
75
-
76
- export default function Mason ({ children = [], columns } : MasonProps) {
77
- const containerRef = React.useRef<HTMLDivElement>()
78
-
79
- React.useLayoutEffect(() => {
80
- const containerChildren = Array.from(containerRef.current.children) as HTMLElement[]
81
- positionChildren(containerChildren, containerRef.current, columns)
82
- }, [ containerRef, columns ])
83
-
84
- React.useEffect(() => {
85
-
86
- // Listen for mediaQuery matches, and set the number of columns.
87
- const mqListeners: { [key: string]: MediaQueryList } = {}
88
- const containerStyle = containerRef.current.style
89
-
90
- // handle media query match changes
91
- const getQueryMatches = (): void => {
92
- Object.keys(mqListeners).forEach((breakPoint: string) => {
93
- const containerChildren = Array.from(containerRef.current.children) as HTMLElement[]
94
- const cellWidth: string = (100 / columns[breakPoint].columns).toFixed(3) + '%'
95
- if (mqListeners[breakPoint].matches || !columns[breakPoint].query) {
96
- containerStyle.setProperty('--cell-width', cellWidth)
97
- window.requestAnimationFrame(() => positionChildren(containerChildren, containerRef.current, columns))
98
- }
99
- })
100
- }
101
-
102
- // listen for query matches, attach listener
103
- Object.keys(columns).forEach((breakPoint: string) => {
104
- mqListeners[breakPoint] = window.matchMedia(columns[breakPoint].query)
105
- mqListeners[breakPoint].addListener(getQueryMatches)
106
- getQueryMatches()
107
- })
108
-
109
- return () => {
110
- // stop listening for query matches, and set number of columns
111
- Object.keys(mqListeners).forEach(breakPoint => mqListeners[breakPoint].removeListener(getQueryMatches))
112
- }
113
- }, [ columns, containerRef ])
114
-
115
- React.useEffect(() => {
116
- // listen for document resizing, and dom tree changes. recalculate transforms as needed.
117
- const doPositionChildren = (entries: entryWithTarget[] ): void => {
118
-
119
- const containerChildren = Array.from(containerRef.current.children) as HTMLElement[]
120
- const targets = entries?.length ? entries.map(entry => entry.target) as HTMLElement[] : containerChildren
121
- positionChildren(targets, containerNode, columns)
122
- }
123
-
124
- const containerNode = containerRef.current as HTMLElement
125
- const sizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => { doPositionChildren(entries) })
126
- const domObserver = new MutationObserver((entries: MutationRecord[]) => { doPositionChildren(entries) })
127
-
128
- Array.from(containerRef.current.children).forEach(child => sizeObserver.observe(child))
129
- sizeObserver.observe(containerNode)
130
- domObserver.observe(containerNode, mutationConfig)
131
-
132
- return () => {
133
- sizeObserver.disconnect()
134
- domObserver.disconnect()
135
- }
136
- }, [containerRef, columns, children])
137
-
138
-
139
- return <div className={'mason-container'} ref={containerRef}>
140
- {React.Children.toArray(children).filter(c => c).map((child: React.ReactNode, i: number) => <div key={`child-${i}`}>{child}</div>)}
141
- </div>
142
- }