react-stone-mason 2.0.0 → 2.0.1

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

@@ -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;
+"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/dist/react-stone-mason.es.js

@@ -1,6 +1,6 @@
 import { jsx as y } from "react/jsx-runtime";
 import * as m from "react";
-const v = { childList: !0, subtree: !0 }, E = (u) => {
+import './index.css';const v = { childList: !0, subtree: !0 }, E = (u) => {
   const o = Object.keys(u).find((r) => {
     var t;
     return !((t = u[r]) != null && t.query);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stone-mason",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "author": {
     "name": "Greg Archer",
     "email": "greg.taff@gmail.com"
@@ -42,6 +42,7 @@
     "ts-loader": "^7.0.0",
     "typescript-eslint": "^8.50.1",
     "vite": "^6.4.1",
-    "vite-plugin-dts": "^4.5.4"
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-lib-inject-css": "^2.2.2"
   }
 }

package/vite.config.ts

@@ -1,13 +1,11 @@
 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(),
-    dts({ insertTypesEntry: true }), // Generates the .d.ts files
-  ],
+  plugins: [react(), libInjectCss(), dts({ insertTypesEntry: true })],
   build: {
     lib: {
       // Could also be a dictionary or array of multiple entry points