react-stone-mason 2.0.1 → 2.0.2

package/dist/react-stone-mason.umd.js

@@ -0,0 +1,2 @@
+(function(l,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],m):(l=typeof globalThis<"u"?globalThis:l||self,l["react-stone-mason"]=m(l.jsxRuntime,l.React))})(this,(function(l,m){"use strict";var p=document.createElement("style");p.textContent=`.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)}
+/*$vite$:1*/`,document.head.appendChild(p);function w(i){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(i){for(const d in i)if(d!=="default"){const t=Object.getOwnPropertyDescriptor(i,d);Object.defineProperty(r,d,t.get?t:{enumerable:!0,get:()=>i[d]})}}return r.default=i,Object.freeze(r)}const b=w(m),C={childList:!0,subtree:!0},O=i=>{const r=Object.keys(i).find(t=>{var e;return!((e=i[t])!=null&&e.query)});return Object.keys(i).find(t=>{var o;const e=(o=i[t])==null?void 0:o.query;return e&&window.matchMedia(e).matches})||r},y=(i,r,d)=>{var n;const t=O(d);if(!t||!r)return;const e=+(((n=d[t])==null?void 0:n.columns)||1),o=Array.from(r.children),u=i.reduce((a,c)=>Math.min(a,o.indexOf(c)),o.length),s=Math.max(0,u-e);o.forEach((a,c)=>{if(c>=s){const f=c%e,h=o.slice(c-f,c-f+e),g=o[c-e],v=Number((g==null?void 0:g.getAttribute("data-debt"))||0),x=Math.max(...h.map(k=>k.getBoundingClientRect().height)),E=v+Math.ceil(x-a.getBoundingClientRect().height);a.setAttribute("data-debt",String(E)),a.style.transform=c>e-1?`translateY(-${v}px)`:""}}),window.requestAnimationFrame(()=>{var h;const a=o.slice(-1*e),c=Math.max(...a.map(g=>g.getBoundingClientRect().bottom)),f=((h=o[0])==null?void 0:h.getBoundingClientRect().top)??0;r.style.height=c-f+"px"})};function j({children:i=[],columns:r,style:d={}}){const t=b.useRef(null);return b.useLayoutEffect(()=>{if(!t.current)return;const e=Array.from(t.current.children);y(e,t.current,r)},[t,r]),b.useEffect(()=>{if(!t.current)return;const e={},o=t.current.style,u=()=>{Object.keys(r).forEach(s=>{const n=t.current,a=r[s],c=e[s];if(!n||!a)return;const f=Array.from(n.children),h=(100/a.columns).toFixed(3)+"%";(c!=null&&c.matches||!a.query)&&(o.setProperty("--cell-width",h),window.requestAnimationFrame(()=>y(f,n,r)))})};return Object.keys(r).forEach(s=>{const n=r[s];!n||!n.query||(e[s]=window.matchMedia(n.query),e[s].addEventListener("change",u))}),u(),()=>{Object.keys(e).forEach(s=>{var n;return(n=e[s])==null?void 0:n.removeEventListener("change",u)})}},[r,t]),b.useEffect(()=>{if(!t.current)return;const e=n=>{if(!t.current)return;const a=Array.from(t.current.children),c=n!=null&&n.length?n.map(f=>f.target):a;y(c,o,r)},o=t.current,u=new ResizeObserver(n=>{e(n)}),s=new MutationObserver(n=>{e(n)});return Array.from(t.current.children).forEach(n=>u.observe(n)),u.observe(o),s.observe(o,C),()=>{u.disconnect(),s.disconnect()}},[t,r]),l.jsx("div",{className:"mason-container",ref:t,style:d,children:b.Children.toArray(i).filter(e=>e).map((e,o)=>l.jsx("div",{children:e},`child-${o}`))})}return j}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stone-mason",
-  "version": "2.0.1",
+  "version": "2.0.2",
   "author": {
     "name": "Greg Archer",
     "email": "greg.taff@gmail.com"
@@ -10,17 +10,24 @@
     "url": "git+https://github.com/nihlton/mason"
   },
   "homepage": "https://github.com/nihlton/mason",
+  "files": [
+    "dist"
+  ],
   "main": "./dist/react-stone-mason.umd.js",
-  "module": "./dist/react-stone-mason.es.js",
+  "module": "./dist/react-stone-mason.mjs",
   "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/react-stone-mason.mjs",
+      "require": "./dist/react-stone-mason.umd.js"
+    }
+  },
   "peerDependencies": {
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
-  "dependencies": {
-    "typescript": "^5.9.3",
-    "webpack": "^4.35.0"
-  },
+  "dependencies": {},
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
@@ -40,6 +47,7 @@
     "sass": "^1.95.1",
     "source-map-loader": "^0.2.4",
     "ts-loader": "^7.0.0",
+    "typescript": "^5.9.3",
     "typescript-eslint": "^8.50.1",
     "vite": "^6.4.1",
     "vite-plugin-dts": "^4.5.4",

package/.babelrc

@@ -1,8 +0,0 @@
-{
-  "presets": [ "@babel/preset-react", "@babel/preset-env"],
-  "plugins": [
-    "@babel/plugin-proposal-object-rest-spread",
-    "@babel/plugin-transform-react-jsx",
-    "@babel/plugin-proposal-class-properties"
-  ]
-}

package/build/index.js

@@ -1,8 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-const react_stone_mason_1 = __importDefault(require("./react-stone-mason"));
-exports.default = react_stone_mason_1.default;
-//# sourceMappingURL=index.js.map

package/build/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;;AAAA,4EAAwC;AAIxC,kBAAe,2BAAK,CAAC"}

package/build/react-stone-mason.js

@@ -1,115 +0,0 @@
-"use strict";
-var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    var desc = Object.getOwnPropertyDescriptor(m, k);
-    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
-      desc = { enumerable: true, get: function() { return m[k]; } };
-    }
-    Object.defineProperty(o, k2, desc);
-}) : (function(o, m, k, k2) {
-    if (k2 === undefined) k2 = k;
-    o[k2] = m[k];
-}));
-var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
-    Object.defineProperty(o, "default", { enumerable: true, value: v });
-}) : function(o, v) {
-    o["default"] = v;
-});
-var __importStar = (this && this.__importStar) || (function () {
-    var ownKeys = function(o) {
-        ownKeys = Object.getOwnPropertyNames || function (o) {
-            var ar = [];
-            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
-            return ar;
-        };
-        return ownKeys(o);
-    };
-    return function (mod) {
-        if (mod && mod.__esModule) return mod;
-        var result = {};
-        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
-        __setModuleDefault(result, mod);
-        return result;
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.default = Mason;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const React = __importStar(require("react"));
-const util_1 = require("./util");
-require("./react-stone-mason.css");
-function Mason({ children = [], columns, style = {} }) {
-    const containerRef = React.useRef(null);
-    React.useLayoutEffect(() => {
-        if (!containerRef.current)
-            return;
-        const containerChildren = Array.from(containerRef.current.children);
-        (0, util_1.positionChildren)(containerChildren, containerRef.current, columns);
-    }, [containerRef, columns]);
-    React.useEffect(() => {
-        // Listen for mediaQuery matches, and set the number of columns.
-        if (!containerRef.current)
-            return;
-        const queryListeners = {};
-        const containerStyle = containerRef.current.style;
-        // handle media query match changes
-        const getQueryMatches = () => {
-            Object.keys(columns).forEach((thisPoint) => {
-                const container = containerRef.current;
-                const breakPointColumns = columns[thisPoint];
-                const queryListener = queryListeners[thisPoint];
-                if (!container || !breakPointColumns)
-                    return;
-                const containerChildren = Array.from(container.children);
-                const cellWidth = (100 / breakPointColumns.columns).toFixed(3) + "%";
-                if ((queryListener === null || queryListener === void 0 ? void 0 : queryListener.matches) || !breakPointColumns.query) {
-                    containerStyle.setProperty("--cell-width", cellWidth);
-                    window.requestAnimationFrame(() => (0, util_1.positionChildren)(containerChildren, container, columns));
-                }
-            });
-        };
-        // listen for query matches, attach listener
-        Object.keys(columns).forEach((thisPoint) => {
-            const pointColumns = columns[thisPoint];
-            if (!pointColumns || !pointColumns.query)
-                return;
-            queryListeners[thisPoint] = window.matchMedia(pointColumns.query);
-            queryListeners[thisPoint].addEventListener("change", getQueryMatches);
-        });
-        getQueryMatches();
-        return () => {
-            // stop listening for query matches
-            Object.keys(queryListeners).forEach((breakPoint) => { var _a; return (_a = queryListeners[breakPoint]) === null || _a === void 0 ? void 0 : _a.removeEventListener("change", getQueryMatches); });
-        };
-    }, [columns, containerRef]);
-    React.useEffect(() => {
-        // listen for document resizing, and dom tree changes.  recalculate transforms as needed.
-        if (!containerRef.current)
-            return;
-        const doPositionChildren = (entries) => {
-            if (!containerRef.current)
-                return;
-            const containerChildren = Array.from(containerRef.current.children);
-            const targets = (entries === null || entries === void 0 ? void 0 : entries.length) ? entries.map((entry) => entry.target) : containerChildren;
-            (0, util_1.positionChildren)(targets, containerNode, columns);
-        };
-        const containerNode = containerRef.current;
-        const sizeObserver = new ResizeObserver((entries) => {
-            doPositionChildren(entries);
-        });
-        const domObserver = new MutationObserver((entries) => {
-            doPositionChildren(entries);
-        });
-        Array.from(containerRef.current.children).forEach((child) => sizeObserver.observe(child));
-        sizeObserver.observe(containerNode);
-        domObserver.observe(containerNode, util_1.mutationConfig);
-        return () => {
-            sizeObserver.disconnect();
-            domObserver.disconnect();
-        };
-    }, [containerRef, columns]);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "mason-container", ref: containerRef, style: style, children: React.Children.toArray(children)
-            .filter((c) => c)
-            .map((child, i) => ((0, jsx_runtime_1.jsx)("div", { children: child }, `child-${i}`))) }));
-}
-//# sourceMappingURL=react-stone-mason.js.map

package/build/react-stone-mason.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"react-stone-mason.js","sourceRoot":"","sources":["../src/react-stone-mason.tsx"],"names":[],"mappings":"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"}

package/build/types.js

@@ -1,3 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-//# sourceMappingURL=types.js.map

package/build/types.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/build/util.js

@@ -1,47 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.positionChildren = exports.mutationConfig = void 0;
-exports.mutationConfig = { childList: true, subtree: true };
-const getBreakPoint = (config) => {
-    const fallBack = Object.keys(config).find((thisBreakPoint) => { var _a; return !((_a = config[thisBreakPoint]) === null || _a === void 0 ? void 0 : _a.query); });
-    const matchingPoint = Object.keys(config).find((thisBreakPoint) => {
-        var _a;
-        const breakpointQuery = (_a = config[thisBreakPoint]) === null || _a === void 0 ? void 0 : _a.query;
-        return breakpointQuery && window.matchMedia(breakpointQuery).matches;
-    });
-    return matchingPoint || fallBack;
-};
-const positionChildren = (targets, container, columnConfig) => {
-    // iterate through children - by column.  find gap under each child and the element in the row below it.
-    // add the gap to the 'column debt' and move the child vertically accordingly.
-    var _a;
-    const breakPoint = getBreakPoint(columnConfig);
-    if (!breakPoint || !container)
-        return;
-    const columns = +(((_a = columnConfig[breakPoint]) === null || _a === void 0 ? void 0 : _a.columns) || 1);
-    const children = Array.from(container.children);
-    // find the first row of items impacted by the reposition, and begin positioning south of there
-    const firstTarget = targets.reduce((a, c) => Math.min(a, children.indexOf(c)), children.length);
-    const firstTargetRow = Math.max(0, firstTarget - columns);
-    children.forEach((child, index) => {
-        if (index >= firstTargetRow) {
-            const column = index % columns;
-            const rowChildren = children.slice(index - column, index - column + columns);
-            const prevChild = children[index - columns];
-            const prevDebt = Number((prevChild === null || prevChild === void 0 ? void 0 : prevChild.getAttribute("data-debt")) || 0);
-            const maxHeight = Math.max(...rowChildren.map((rowChild) => rowChild.getBoundingClientRect().height));
-            const debt = prevDebt + Math.ceil(maxHeight - child.getBoundingClientRect().height);
-            child.setAttribute("data-debt", String(debt));
-            child.style.transform = index > columns - 1 ? `translateY(-${prevDebt}px)` : "";
-        }
-    });
-    window.requestAnimationFrame(() => {
-        var _a, _b;
-        const lastChildren = children.slice(-1 * columns);
-        const childBottomEdge = Math.max(...lastChildren.map((c) => c.getBoundingClientRect().bottom));
-        const childTopEdge = (_b = (_a = children[0]) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect().top) !== null && _b !== void 0 ? _b : 0;
-        container.style.height = childBottomEdge - childTopEdge + "px";
-    });
-};
-exports.positionChildren = positionChildren;
-//# sourceMappingURL=util.js.map

package/build/util.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"util.js","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"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"}

package/dev/App.css

@@ -1,33 +0,0 @@
-body {
-  background: #eee;
-}
-
-.App {
-  max-width: 60rem;
-  margin: auto;
-  padding: 5rem 1rem;
-}
-
-h1,
-h2 {
-  padding: 0.5rem;
-}
-
-.App img {
-  max-width: 100%;
-}
-
-.App .random-entry .entry-content {
-  margin: calc(1vw + 0.25rem);
-  background: white;
-  box-shadow:
-    0 0 0 1px #0003,
-    0 0.75rem 0.75rem -0.5rem #0004;
-  border-radius: 3px;
-  padding: 0.5rem;
-}
-
-.App .random-entry .entry-content p {
-  margin: 0.5rem 0;
-  font-size: 0.85rem;
-}

package/dev/App.tsx

@@ -1,22 +0,0 @@
-import Mason from "../src/react-stone-mason";
-import { columnConfig, columnConfigImages, randomColors, randomEntries, staticColumn } from "./util";
-
-import "./App.css";
-
-const App = () => {
-  return (
-    <div className="App">
-      <h1>Responsive</h1>
-      <h2>HTML children with gutter</h2>
-      <Mason columns={columnConfig}>{randomEntries.slice(0, 16)}</Mason>
-
-      <h2>Plain image children, no gutter</h2>
-      <Mason columns={columnConfigImages}>{randomColors.slice(0, 24)}</Mason>
-
-      <h1>Static</h1>
-      <Mason columns={staticColumn}>{randomEntries.slice(0, 16)}</Mason>
-    </div>
-  );
-};
-
-export default App;

package/dev/main.tsx

@@ -1,10 +0,0 @@
-import React from "react";
-import { createRoot } from "react-dom/client";
-import App from "./App";
-
-const container = document.getElementById("root");
-
-if (container) {
-  const root = createRoot(container);
-  root.render(<App />);
-}

package/dev/util.tsx

@@ -1,70 +0,0 @@
-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.`;
-
-function toHex(n: number) {
-  var hex = n.toString(16);
-  while (hex.length < 2) {
-    hex = "0" + hex;
-  }
-  return hex;
-}
-const getRandomColor = () => {
-  const r = Math.round(Math.random() * 255);
-  const g = Math.round(Math.random() * 255);
-  const b = Math.round(Math.random() * 255);
-  return toHex(r) + toHex(g) + toHex(b);
-};
-
-export const randomEntries = new Array(80).fill(".").map(() => {
-  const textStart = Math.round(Math.random() * 400);
-  const height = Math.round(Math.random() * 300) + 100;
-  const text = hipsum.slice(textStart, textStart + height / 5);
-  return (
-    <div className="random-entry">
-      <div className="entry-content">
-        <img src={`https://dummyimage.com/300x${height}/${getRandomColor()}.png&text=+`} alt="colors!" />
-        <p>{text}</p>
-      </div>
-    </div>
-  );
-});
-
-export const randomColors = new Array(80).fill(".").map(() => {
-  const height = Math.round(Math.random() * 300) + 100;
-  return <img style={{ display: "block" }} src={`https://dummyimage.com/300x${height}/${getRandomColor()}.png&text=+`} alt="colors!" />;
-});
-
-export const columnConfig = {
-  small: {
-    query: "(max-width: 720px)",
-    columns: 2,
-  },
-  medium: {
-    query: "(min-width: calc(720px + 1px)) and (max-width: calc(1023px - 1px) )",
-    columns: 3,
-  },
-  large: {
-    query: "(min-width: 1023px)",
-    columns: 4,
-  },
-};
-
-export const columnConfigImages = {
-  small: {
-    query: "(max-width: 720px)",
-    columns: 3,
-  },
-  medium: {
-    query: "(min-width: calc(720px + 1px)) and (max-width: calc(1023px - 1px) )",
-    columns: 4,
-  },
-  large: {
-    query: "(min-width: 1023px)",
-    columns: 5,
-  },
-};
-
-export const staticColumn = {
-  default: {
-    columns: 3,
-  },
-};

package/dist/react-stone-mason.cjs.js

@@ -1 +0,0 @@
-"use strict";require('./index.css');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;

package/index.html

@@ -1,4 +0,0 @@
-<body>
-  <div id="root"></div>
-  <script type="module" src="./dev/main.tsx"></script>
-</body>

package/src/index.ts

@@ -1,5 +0,0 @@
-import Mason from "./react-stone-mason";
-import type { MasonProps } from "./types";
-
-export type { MasonProps };
-export default Mason;

package/src/react-stone-mason.css

@@ -1,15 +0,0 @@
-.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);
-}

package/src/react-stone-mason.tsx

@@ -1,98 +0,0 @@
-import * as React from "react";
-
-import { mutationConfig, positionChildren } from "./util";
-import { entryWithTarget, MasonProps } from "./types";
-
-import "./react-stone-mason.css";
-
-export default function Mason({ children = [], columns, style = {} }: MasonProps) {
-  const containerRef = React.useRef<HTMLDivElement>(null);
-
-  React.useLayoutEffect(() => {
-    if (!containerRef.current) return;
-    const containerChildren = Array.from(containerRef.current.children) as HTMLElement[];
-    positionChildren(containerChildren, containerRef.current, columns);
-  }, [containerRef, columns]);
-
-  React.useEffect(() => {
-    // Listen for mediaQuery matches, and set the number of columns.
-    if (!containerRef.current) return;
-
-    const queryListeners: { [key: string]: MediaQueryList } = {};
-    const containerStyle = containerRef.current.style;
-
-    // handle media query match changes
-    const getQueryMatches = (): void => {
-      Object.keys(columns).forEach((thisPoint: string) => {
-        const container = containerRef.current;
-        const breakPointColumns = columns[thisPoint];
-        const queryListener = queryListeners[thisPoint];
-
-        if (!container || !breakPointColumns) return;
-
-        const containerChildren = Array.from(container.children) as HTMLElement[];
-        const cellWidth: string = (100 / breakPointColumns.columns).toFixed(3) + "%";
-
-        if (queryListener?.matches || !breakPointColumns.query) {
-          containerStyle.setProperty("--cell-width", cellWidth);
-          window.requestAnimationFrame(() => positionChildren(containerChildren, container, columns));
-        }
-      });
-    };
-
-    // listen for query matches, attach listener
-    Object.keys(columns).forEach((thisPoint: string) => {
-      const pointColumns = columns[thisPoint];
-      if (!pointColumns || !pointColumns.query) return;
-      queryListeners[thisPoint] = window.matchMedia(pointColumns.query);
-      queryListeners[thisPoint].addEventListener("change", getQueryMatches);
-    });
-
-    getQueryMatches();
-
-    return () => {
-      // stop listening for query matches
-      Object.keys(queryListeners).forEach((breakPoint) => queryListeners[breakPoint]?.removeEventListener("change", getQueryMatches));
-    };
-  }, [columns, containerRef]);
-
-  React.useEffect(() => {
-    // listen for document resizing, and dom tree changes.  recalculate transforms as needed.
-    if (!containerRef.current) return;
-
-    const doPositionChildren = (entries: entryWithTarget[]): void => {
-      if (!containerRef.current) return;
-
-      const containerChildren = Array.from(containerRef.current.children) as HTMLElement[];
-      const targets = entries?.length ? (entries.map((entry) => entry.target) as HTMLElement[]) : containerChildren;
-      positionChildren(targets, containerNode, columns);
-    };
-
-    const containerNode = containerRef.current as HTMLElement;
-    const sizeObserver = new ResizeObserver((entries: ResizeObserverEntry[]) => {
-      doPositionChildren(entries);
-    });
-    const domObserver = new MutationObserver((entries: MutationRecord[]) => {
-      doPositionChildren(entries);
-    });
-
-    Array.from(containerRef.current.children).forEach((child) => sizeObserver.observe(child));
-    sizeObserver.observe(containerNode);
-    domObserver.observe(containerNode, mutationConfig);
-
-    return () => {
-      sizeObserver.disconnect();
-      domObserver.disconnect();
-    };
-  }, [containerRef, columns]);
-
-  return (
-    <div className={"mason-container"} ref={containerRef} style={style}>
-      {React.Children.toArray(children)
-        .filter((c) => c)
-        .map((child: React.ReactNode, i: number) => (
-          <div key={`child-${i}`}>{child}</div>
-        ))}
-    </div>
-  );
-}

package/src/types.ts

@@ -1,23 +0,0 @@
-export interface MutationConfiguration {
-  childList: boolean;
-  subtree: boolean;
-}
-
-export interface BreakPointData {
-  query?: string;
-  columns: number;
-}
-
-export interface MasonryConfig {
-  [key: string]: BreakPointData;
-}
-
-export interface MasonProps {
-  children?: React.ReactNode[] | undefined;
-  columns: MasonryConfig;
-  style?: React.CSSProperties;
-}
-
-export type entryWithTarget = {
-  target: Node;
-};

package/src/util.ts

@@ -1,52 +0,0 @@
-import { MasonryConfig, MutationConfiguration } from "./types";
-
-export const mutationConfig = { childList: true, subtree: true } as MutationConfiguration;
-
-const getBreakPoint = (config: MasonryConfig) => {
-  const fallBack = Object.keys(config).find((thisBreakPoint) => !config[thisBreakPoint]?.query);
-  const matchingPoint = Object.keys(config).find((thisBreakPoint) => {
-    const breakpointQuery = config[thisBreakPoint]?.query;
-    return breakpointQuery && window.matchMedia(breakpointQuery).matches;
-  });
-
-  return matchingPoint || fallBack;
-};
-
-export const positionChildren = (targets: HTMLElement[], container: HTMLElement, columnConfig: MasonryConfig): void => {
-  // iterate through children - by column.  find gap under each child and the element in the row below it.
-  // add the gap to the 'column debt' and move the child vertically accordingly.
-
-  const breakPoint = getBreakPoint(columnConfig);
-
-  if (!breakPoint || !container) return;
-
-  const columns: number = +(columnConfig[breakPoint]?.columns || 1);
-  const children: HTMLElement[] = Array.from(container.children) as HTMLElement[];
-
-  // find the first row of items impacted by the reposition, and begin positioning south of there
-  const firstTarget = targets.reduce((a, c) => Math.min(a, children.indexOf(c)), children.length);
-  const firstTargetRow = Math.max(0, firstTarget - columns);
-
-  children.forEach((child: HTMLElement, index: number) => {
-    if (index >= firstTargetRow) {
-      const column: number = index % columns;
-      const rowChildren: HTMLElement[] = children.slice(index - column, index - column + columns);
-
-      const prevChild = children[index - columns];
-      const prevDebt = Number(prevChild?.getAttribute("data-debt") || 0);
-
-      const maxHeight: number = Math.max(...rowChildren.map((rowChild: HTMLElement) => rowChild.getBoundingClientRect().height));
-      const debt: number = prevDebt + Math.ceil(maxHeight - child.getBoundingClientRect().height);
-
-      child.setAttribute("data-debt", String(debt));
-      child.style.transform = index > columns - 1 ? `translateY(-${prevDebt}px)` : "";
-    }
-  });
-
-  window.requestAnimationFrame(() => {
-    const lastChildren = children.slice(-1 * columns);
-    const childBottomEdge = Math.max(...lastChildren.map((c: HTMLElement) => c.getBoundingClientRect().bottom));
-    const childTopEdge = children[0]?.getBoundingClientRect().top ?? 0;
-    container.style.height = childBottomEdge - childTopEdge + "px";
-  });
-};

package/tsconfig.json

@@ -1,14 +0,0 @@
-{
-  "compilerOptions": {
-    "strict": true,
-    "esModuleInterop": true,
-    "outDir": "./build/",
-    "sourceMap": true,
-    "noImplicitAny": true,
-    "module": "commonjs",
-    "target": "es6",
-    "jsx": "react-jsx",
-    "types": ["node"]
-  },
-  "include": ["src/**/*"]
-}

package/vite.config.ts

@@ -1,28 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from "vite-plugin-dts";
-import { libInjectCss } from "vite-plugin-lib-inject-css";
-import { resolve } from "path";
-
-export default defineConfig({
-  plugins: [react(), libInjectCss(), dts({ insertTypesEntry: true })],
-  build: {
-    lib: {
-      // Could also be a dictionary or array of multiple entry points
-      entry: resolve(__dirname, "src/index.ts"),
-      name: "react-stone-mason",
-      fileName: (format) => `react-stone-mason.${format}.js`,
-      formats: ["es", "cjs"],
-    },
-    rollupOptions: {
-      // Externalize deps that shouldn't be bundled into your library
-      external: ["react", "react-dom", "react/jsx-runtime"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-        },
-      },
-    },
-  },
-});

package/webpack.config.js

@@ -1,53 +0,0 @@
-const path = require('path');
-
-module.exports = {
-  mode: 'production',
-  entry: './src/index.tsx',
-  output: {
-    path: path.resolve(__dirname, 'build'),
-    filename: '../build/index.js',
-    libraryTarget: 'commonjs2'
-  },
-  devtool: 'source-map',
-  resolve: {
-    // Add '.ts' and '.tsx' as resolvable extensions.
-    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js'],
-  },
-  module: {
-    rules: [
-      {
-        test: /\.ts(x?)$/,
-        exclude: /node_modules/,
-        use: [
-          {
-            loader: "ts-loader"
-          }
-        ]
-      },
-      {
-        enforce: "pre",
-        test: /\.js$/,
-        loader: "source-map-loader"
-      },
-      {
-        test: /\.js$/,
-        include: path.resolve(__dirname, 'src'),
-        exclude: /(node_modules|bower_components|build)/,
-        use: {
-          loader: 'babel-loader',
-          options: {
-            presets: ["@babel/env"],
-          }
-        }
-      },
-      {
-        test: /\.css$/i,
-        use: ['style-loader', 'css-loader'],
-      },
-    ]
-  },
-  externals: {
-    'react': 'commonjs react',
-    "react-dom": "ReactDOM"
-  }
-};