@virtuoso.dev/masonry - npm Package Compare versions

Comparing version 1.3.2 to 1.3.3

CHANGELOG.md

 # Change Log - @virtuoso.dev/masonry
 
+## 1.3.3
+
+### Patch Changes
+
+- 7e85d9e: Support react portal to an iframe rendering
+
 This log was last generated on Fri, 10 Jan 2025 08:23:07 GMT and should not be manually modified.
 
 ## 1.3.2
+
 Fri, 10 Jan 2025 08:23:07 GMT
@@ -11,2 +18,1 @@
 - Switch to @virtuoso.dev/gurx
-

dist/index.d.ts

 /* Excluded from this release type: ComputeItemKey */
 
 /**
- * Used for the custom components that accept the message list context prop.
+ * Used for the custom components that accept the masonry context prop.
  */
 export declare type ContextAwareComponent<Context = any> = React.ComponentType<{
     /**
-     * The value currently passed to the `context` prop of the `VirtuosoMessageList` component.
+     * The value currently passed to the `context` prop of the `VirtuosoMasonry` component.
      */
@@ -20,5 +20,5 @@ context: Context;
     /**
-     * The index of the item in the list data array.
+     * The value of the `context` prop passed to the list.
      */
-    index: number;
+    context: Context;
     /**
@@ -29,5 +29,5 @@ * The data item to render.
     /**
-     * The value of the `context` prop passed to the list.
+     * The index of the item in the list data array.
      */
-    context: Context;
+    index: number;
 }>;
@@ -38,6 +38,6 @@
 /**
- * The DOM attributes that you can pass to the `VirtualMessageList` component to customize the scroll element.
+ * The DOM attributes that you can pass to the `VirtuosoMasonry` component to customize the scroll element.
  * @noInheritDoc
  */
-export declare type ScrollerProps = Omit<React.HTMLProps<HTMLDivElement>, 'ref' | 'data' | 'onScroll'>;
+export declare type ScrollerProps = Omit<React.HTMLProps<HTMLDivElement>, 'data' | 'onScroll' | 'ref'>;
 
@@ -51,5 +51,17 @@ /* Excluded from this release type: SizeRange */
 export declare interface VirtuosoMasonryProps<Data, Context> extends ScrollerProps {
+    /**
+     * The number of columns to be rendered. This prop is required.
+     */
     columnCount: number;
+    /**
+     * Additional data to be passed to the item content component. This prop is optional.
+     */
+    context?: Context;
+    /**
+     * The data to be rendered. This prop is required.
+     */
     data: Data[];
-    context?: Context;
+    /**
+     * Use this prop for SSR rendering.
+     */
     initialItemCount?: number;
@@ -60,2 +72,5 @@ /**
     ItemContent?: NoInfer<ItemContent<Data, Context>>;
+    /**
+     * Set to true to make the component use window scroll instead of the scroller element.
+     */
     useWindowScroll?: boolean;
@@ -62,0 +77,0 @@ }

dist/index.js

@@ -1,31 +0,31 @@
-import { jsxs as jt, jsx as C, Fragment as Dt } from "react/jsx-runtime";
-import { Cell as g, link as xt, pipe as b, filter as $t, map as w, DerivedCell as $, combine as gt, Signal as Rt, changeWith as Nt, withLatestFrom as It, scan as Ct, sub as Gt, pub as Ut, Realm as qt, RealmContext as Kt, useRealm as Jt, useCellValues as Qt, useCellValue as Xt } from "@virtuoso.dev/gurx";
-import { forwardRef as Zt, useMemo as te, useImperativeHandle as ee, useEffect as Et, useState as ne, useCallback as F, useRef as ut } from "react";
-const Mt = ({ index: t }) => /* @__PURE__ */ jt("div", { children: [
+import { jsxs as Yt, jsx as M, Fragment as Dt } from "react/jsx-runtime";
+import { Cell as g, link as vt, pipe as w, filter as St, map as y, DerivedCell as $, combine as gt, withLatestFrom as It, changeWith as $t, Signal as Rt, scan as Nt, sub as jt, pub as Gt, Realm as Ut, RealmContext as qt, useRealm as Kt, useCellValues as Jt, useCellValue as Qt } from "@virtuoso.dev/gurx";
+import { forwardRef as Xt, useMemo as Zt, useImperativeHandle as te, useEffect as Ct, useState as ee, useRef as ft, useCallback as B } from "react";
+const Et = ({ index: t }) => /* @__PURE__ */ Yt("div", { children: [
   "Item ",
   t
-] }), Vt = g(Mt), Y = g(0), ft = g(null), Z = g(null, () => {
-  xt(
-    b(
-      Z,
-      $t((t) => t !== null),
-      w((t) => t.length)
+] }), Mt = g(Et), D = g(0), at = g(null), tt = g(null, () => {
+  vt(
+    w(
+      tt,
+      St((t) => t !== null),
+      y((t) => t.length)
     ),
-    Y
+    D
   );
-}), Q = g(0), at = g(0), re = g(0), J = g(0), oe = Q, tt = g(0), j = g(!1), se = $(0, () => b(
-  gt(at, j, tt),
-  w(([t, e, n]) => e ? t - Math.max(n, 0) : t)
-)), D = { lvl: 0 };
-function Ht(t, e, n, r = D, o = D) {
+}), X = g(0), ht = g(0), ne = g(0), Q = g(0), re = X, et = g(0), j = g(!1), oe = $(0, () => w(
+  gt(ht, j, et),
+  y(([t, e, n]) => e ? t - Math.max(n, 0) : t)
+)), G = { lvl: 0 };
+function Vt(t, e, n, r = G, o = G) {
   return { k: t, l: r, lvl: n, r: o, v: e };
 }
 function a(t) {
-  return t === D;
+  return t === G;
 }
-function et() {
-  return D;
+function nt() {
+  return G;
 }
-function ht(t, e) {
-  if (a(t)) return D;
+function mt(t, e) {
+  if (a(t)) return G;
   const { k: n, l: r, r: o } = t;
@@ -37,8 +37,8 @@ if (e === n) {
       return r;
-    const [s, l] = Ot(r);
-    return X(m(t, { k: s, l: kt(r), v: l }));
+    const [s, l] = Ht(r);
+    return Z(m(t, { k: s, l: Ot(r), v: l }));
   }
-  return e < n ? X(m(t, { l: ht(r, e) })) : X(m(t, { r: ht(o, e) }));
+  return e < n ? Z(m(t, { l: mt(r, e) })) : Z(m(t, { r: mt(o, e) }));
 }
-function G(t, e, n = "k") {
+function U(t, e, n = "k") {
   if (a(t))
@@ -49,49 +49,46 @@ return [Number.NEGATIVE_INFINITY, void 0];
   if (t[n] < e) {
-    const r = G(t.r, e, n);
+    const r = U(t.r, e, n);
     return r[0] === Number.NEGATIVE_INFINITY ? [t.k, t.v] : r;
   }
-  return G(t.l, e, n);
+  return U(t.l, e, n);
 }
-function O(t, e, n) {
-  return a(t) ? Ht(e, n, 1) : e === t.k ? m(t, { k: e, v: n }) : e < t.k ? St(m(t, { l: O(t.l, e, n) })) : St(m(t, { r: O(t.r, e, n) }));
+function k(t, e, n) {
+  return a(t) ? Vt(e, n, 1) : e === t.k ? m(t, { k: e, v: n }) : e < t.k ? yt(m(t, { l: k(t.l, e, n) })) : yt(m(t, { r: k(t.r, e, n) }));
 }
-function mt(t, e, n) {
+function dt(t, e, n) {
   if (a(t))
     return [];
-  const { k: r, v: o, l: s, r: l } = t;
+  const { k: r, l: o, r: s, v: l } = t;
   let i = [];
-  return r > e && (i = i.concat(mt(s, e, n))), r >= e && r <= n && i.push({ k: r, v: o }), r <= n && (i = i.concat(mt(l, e, n))), i;
+  return r > e && (i = i.concat(dt(o, e, n))), r >= e && r <= n && i.push({ k: r, v: l }), r <= n && (i = i.concat(dt(s, e, n))), i;
 }
-function dt(t) {
-  return a(t) ? [] : [...dt(t.l), { k: t.k, v: t.v }, ...dt(t.r)];
+function Ht(t) {
+  return a(t.r) ? [t.k, t.v] : Ht(t.r);
 }
 function Ot(t) {
-  return a(t.r) ? [t.k, t.v] : Ot(t.r);
+  return a(t.r) ? t.l : Z(m(t, { r: Ot(t.r) }));
 }
-function kt(t) {
-  return a(t.r) ? t.l : X(m(t, { r: kt(t.r) }));
-}
 function m(t, e) {
-  return Ht(e.k ?? t.k, e.v ?? t.v, e.lvl ?? t.lvl, e.l ?? t.l, e.r ?? t.r);
+  return Vt(e.k ?? t.k, e.v ?? t.v, e.lvl ?? t.lvl, e.l ?? t.l, e.r ?? t.r);
 }
-function ct(t) {
+function ut(t) {
   return a(t) || t.lvl > t.r.lvl;
 }
-function St(t) {
-  return vt(Pt(t));
+function yt(t) {
+  return xt(kt(t));
 }
-function X(t) {
-  const { l: e, r: n, lvl: r } = t;
-  if (n.lvl >= r - 1 && e.lvl >= r - 1)
+function Z(t) {
+  const { l: e, lvl: n, r } = t;
+  if (r.lvl >= n - 1 && e.lvl >= n - 1)
     return t;
-  if (r > n.lvl + 1) {
-    if (ct(e))
-      return Pt(m(t, { lvl: r - 1 }));
+  if (n > r.lvl + 1) {
+    if (ut(e))
+      return kt(m(t, { lvl: n - 1 }));
     if (!a(e) && !a(e.r))
       return m(e.r, {
         l: m(e, { r: e.r.l }),
-        lvl: r,
+        lvl: n,
         r: m(t, {
           l: e.r.r,
-          lvl: r - 1
+          lvl: n - 1
         })
@@ -101,13 +98,13 @@ });
   }
-  if (ct(t))
-    return vt(m(t, { lvl: r - 1 }));
-  if (!a(n) && !a(n.l)) {
-    const o = n.l, s = ct(o) ? n.lvl - 1 : n.lvl;
+  if (ut(t))
+    return xt(m(t, { lvl: n - 1 }));
+  if (!a(r) && !a(r.l)) {
+    const o = r.l, s = ut(o) ? r.lvl - 1 : r.lvl;
     return m(o, {
       l: m(t, {
-        lvl: r - 1,
+        lvl: n - 1,
         r: o.l
       }),
       lvl: o.lvl + 1,
-      r: vt(m(n, { l: o.r, lvl: s }))
+      r: xt(m(r, { l: o.r, lvl: s }))
     });
@@ -120,4 +117,4 @@ }
     return [];
-  const r = G(t, e)[0];
-  return le(mt(t, r, n));
+  const r = U(t, e)[0];
+  return se(dt(t, r, n));
 }
@@ -136,36 +133,36 @@ function Tt(t, e) {
 }
-function le(t) {
+function se(t) {
   return Tt(t, ({ k: e, v: n }) => ({ index: e, value: n }));
 }
-function vt(t) {
-  const { r: e, lvl: n } = t;
-  return !a(e) && !a(e.r) && e.lvl === n && e.r.lvl === n ? m(e, { l: m(t, { r: e.l }), lvl: n + 1 }) : t;
+function xt(t) {
+  const { lvl: e, r: n } = t;
+  return !a(n) && !a(n.r) && n.lvl === e && n.r.lvl === e ? m(n, { l: m(t, { r: n.l }), lvl: e + 1 }) : t;
 }
-function Pt(t) {
+function kt(t) {
   const { l: e } = t;
   return !a(e) && e.lvl === t.lvl ? m(e, { r: m(t, { l: e.r }) }) : t;
 }
-function ie(t) {
-  const { size: e, startIndex: n, endIndex: r } = t;
-  return (o) => o.start === n && (o.end === r || o.end === Number.POSITIVE_INFINITY) && o.value === e;
+function le(t) {
+  const { endIndex: e, size: n, startIndex: r } = t;
+  return (o) => o.start === r && (o.end === e || o.end === Number.POSITIVE_INFINITY) && o.value === n;
 }
-function zt(t, e) {
+function Pt(t, e) {
   let n = a(t) ? 0 : Number.POSITIVE_INFINITY;
   for (const r of e) {
-    const { size: o, startIndex: s, endIndex: l } = r;
-    if (n = Math.min(n, s), a(t)) {
-      t = O(t, 0, o);
+    const { endIndex: o, size: s, startIndex: l } = r;
+    if (n = Math.min(n, l), a(t)) {
+      t = k(t, 0, s);
       continue;
     }
-    const i = At(t, s - 1, l + 1);
-    if (i.some(ie(r)))
+    const i = At(t, l - 1, o + 1);
+    if (i.some(le(r)))
       continue;
     let u = !1, c = !1;
-    for (const { start: h, end: E, value: y } of i)
-      u ? (l >= h || o === y) && (t = ht(t, h)) : (c = y !== o, u = !0), E > l && l >= h && y !== o && (t = O(t, l + 1, y));
-    c && (t = O(t, s, o));
+    for (const { end: d, start: R, value: S } of i)
+      u ? (o >= R || s === S) && (t = mt(t, R)) : (c = S !== s, u = !0), d > o && o >= R && S !== s && (t = k(t, o + 1, S));
+    c && (t = k(t, l, s));
   }
   return [t, n];
 }
-function nt(t, e, n, r = 0) {
+function rt(t, e, n, r = 0) {
   let o = t.length - 1;
@@ -188,29 +185,29 @@ for (; r <= o; ) {
 }
-function ce(t, e, n) {
-  return t[nt(t, e, n)];
+function ie(t, e, n) {
+  return t[rt(t, e, n)];
 }
-function ue(t, e, n, r) {
-  const o = nt(t, e, r), s = nt(t, n, r, o);
+function ce(t, e, n, r) {
+  const o = rt(t, e, r), s = rt(t, n, r, o);
   return t.slice(o, s + 1);
 }
-function Ft({ index: t }, e) {
+function Wt({ index: t }, e) {
   return e === t ? 0 : e < t ? -1 : 1;
 }
-function fe({ offset: t }, e) {
+function ue({ offset: t }, e) {
   return e === t ? 0 : e < t ? -1 : 1;
 }
-function ae(t) {
+function fe(t) {
   return { index: t.index, value: t };
 }
-function he(t, e, n, r = 0) {
-  return r > 0 && (e = Math.max(e, ce(t, r, Ft).offset)), e = Math.max(0, e), Tt(ue(t, e, n, fe), ae);
+function ae(t, e, n, r = 0) {
+  return r > 0 && (e = Math.max(e, ie(t, r, Wt).offset)), e = Math.max(0, e), Tt(ce(t, e, n, ue), fe);
 }
-function me(t, [e, n]) {
+function he(t, [e, n]) {
   let r = 0, o = 0, s = 0, l = 0;
   if (n !== 0) {
-    l = nt(t, n - 1, Ft), s = t[l].offset;
-    const u = G(e, n - 1);
+    l = rt(t, n - 1, Wt), s = t[l].offset;
+    const u = U(e, n - 1);
     if (u[1] === void 0)
       throw new Error("Invariant violation");
-    r = u[0], o = u[1], t.length && t[l].height === G(e, n)[1] && (l -= 1), t = t.slice(0, l + 1);
+    r = u[0], o = u[1], t.length && t[l].height === U(e, n)[1] && (l -= 1), t = t.slice(0, l + 1);
   } else
@@ -224,14 +221,14 @@ t = [];
 }
-function de(t, [e, n]) {
+function me(t, [e, n]) {
   if (n.length > 0 && a(t) && e.length === 2) {
     const r = e[0].size, o = e[1].size;
     return [
-      n.reduce((s, l) => O(O(s, l, r), l + 1, o), et()),
+      n.reduce((s, l) => k(k(s, l, r), l + 1, o), nt()),
       0
     ];
   }
-  return zt(t, e);
+  return Pt(t, e);
 }
-const Bt = Rt(), Wt = Rt(), st = g([], () => {
-  Nt(st, Wt, (t, e) => {
+const zt = Rt(), Ft = Rt(), lt = g([], () => {
+  $t(lt, Ft, (t, e) => {
     const n = t.slice();
@@ -245,10 +242,9 @@ for (const [r, o] of Object.entries(e))
   });
-}), k = g(0), pt = g(0), rt = g([], () => {
-  xt(
-    b(
-      k,
-      It(st),
-      w(([t, e]) => {
-        console.log("knownSizes", e);
-        const n = Array.from({ length: t }, () => [et(), 0]);
+}), P = g(0), pt = g(0), ot = g([], () => {
+  vt(
+    w(
+      P,
+      It(lt),
+      y(([t, e]) => {
+        const n = Array.from({ length: t }, () => [nt(), 0]);
         if (e.length > 0) {
@@ -258,8 +254,6 @@ const r = Array.from({ length: t }, () => 0), o = Array.from({ length: t }, () => 0);
             const l = e[s], i = r.indexOf(Math.min(...r)), u = o[i];
-            o[i]++, r[i] += l, n[i] = zt(n[i][0], [
-              { size: l, startIndex: u, endIndex: u }
+            o[i]++, r[i] += l, n[i] = Pt(n[i][0], [
+              { endIndex: u, size: l, startIndex: u }
             ]);
           }
-          for (const [s] of n)
-            console.log(dt(s));
         }
@@ -269,7 +263,7 @@ return n.map(([r]) => [r, 0]);
     ),
-    rt
-  ), Nt(rt, Bt, (t, e) => {
+    ot
+  ), $t(ot, zt, (t, e) => {
     const n = t.map(([o]) => o), r = [];
     for (let o = 0; o < e.length; o++) {
-      const s = n[o] ?? et();
+      const s = n[o] ?? nt();
       if (e[o].length === 0) {
@@ -279,20 +273,20 @@ r.push([s, 0]);
       }
-      r.push(de(s, [e[o], []]));
+      r.push(me(s, [e[o], []]));
     }
     return r;
   });
-}), _t = $([], () => b(
-  rt,
-  w((t) => t.map(([e]) => e))
-)), ve = $([], (t) => t.pipe(
-  rt,
-  w((e) => e.map(([, n]) => n))
-)), lt = $([], () => b(
-  _t,
-  It(ve),
-  Ct((t, [e, n]) => {
+}), Bt = $([], () => w(
+  ot,
+  y((t) => t.map(([e]) => e))
+)), de = $([], (t) => t.pipe(
+  ot,
+  y((e) => e.map(([, n]) => n))
+)), it = $([], () => w(
+  Bt,
+  It(de),
+  Nt((t, [e, n]) => {
     const r = [];
     for (let o = 0; o < e.length; o++) {
       const s = t[o] ?? [[]];
-      r.push(me(s[0], [e[o], n[o]]));
+      r.push(he(s[0], [e[o], n[o]]));
     }
@@ -303,35 +297,35 @@ return r;
   [],
-  () => b(
-    lt,
-    w((t) => t.map(([e]) => e))
+  () => w(
+    it,
+    y((t) => t.map(([e]) => e))
   )
+), ve = $(
+  [],
+  () => w(
+    it,
+    y((t) => t.map(([, e]) => e))
+  )
 ), ge = $(
   [],
-  () => b(
-    lt,
-    w((t) => t.map(([, e]) => e))
+  () => w(
+    it,
+    y((t) => t.map(([, , e]) => e))
   )
 ), Ie = $(
   [],
-  () => b(
-    lt,
-    w((t) => t.map(([, , e]) => e))
-  )
-), pe = $(
-  [],
   (t) => t.pipe(
-    lt,
-    w((e) => e.map(([, , , n]) => n))
+    it,
+    y((e) => e.map(([, , , n]) => n))
   )
-), L = $([], () => b(
-  k,
-  It(Y, pt, st),
-  w(([t, e, n, r]) => {
+), Y = $([], () => w(
+  P,
+  It(D, pt, lt),
+  y(([t, e, n, r]) => {
     if (r.length > 0) {
       const l = Array.from({ length: t }, () => 0), i = Array.from({ length: t }, () => []);
       for (let u = 0; u < r.length; u++) {
-        const c = r[u], h = l.indexOf(Math.min(...l));
-        i[h].push(u), l[h] += c;
+        const c = r[u], d = l.indexOf(Math.min(...l));
+        i[d].push(u), l[d] += c;
       }
-      return console.log({ columnHeights: l }), i;
+      return i;
     }
@@ -346,32 +340,32 @@ const o = n === 0 ? Math.min(t, e) : n;
   })
-)), be = $(
+)), pe = $(
   [],
-  () => b(
-    gt(k, Y, pe, Ie, ge, L),
-    w(([t, e, n, r, o, s]) => {
-      const l = s.reduce((c, h) => c + h.length, 0), i = Math.ceil((e - l) / t);
-      return Array.from({ length: t }, (c, h) => {
-        const y = s[h].length + i - n[h];
-        return r[h] + y * o[h];
+  () => w(
+    gt(P, D, Ie, ge, ve, Y),
+    y(([t, e, n, r, o, s]) => {
+      const l = s.reduce((c, d) => c + d.length, 0), i = Math.ceil((e - l) / t);
+      return Array.from({ length: t }, (c, d) => {
+        const S = s[d].length + i - n[d];
+        return r[d] + S * o[d];
       });
     })
   )
-), ot = g({ columns: [], totalCount: -1, data: [], indexesInColumns: [] }, (t) => {
-  xt(
-    b(
+), st = g({ columns: [], data: [], indexesInColumns: [], totalCount: -1 }, (t) => {
+  vt(
+    w(
       gt(
-        k,
+        P,
+        re,
         oe,
-        se,
-        _t,
+        Bt,
         xe,
+        D,
+        pe,
+        tt,
         Y,
-        be,
-        Z,
-        L,
         pt,
-        tt,
+        et,
         j
       ),
-      Ct(
+      Nt(
         (e, [
@@ -386,23 +380,23 @@ n,
           c,
-          h,
-          E,
-          y,
-          B
+          d,
+          R,
+          S,
+          _
         ]) => {
-          const bt = B ? y + r : 0, f = Math.min(Math.max(r - bt, 0), Math.max(...u) - o), d = f + o, R = E === 0 ? Math.min(n, i) : E;
+          const bt = _ ? S + r : 0, f = Math.min(Math.max(r - bt, 0), Math.max(...u) - o), h = f + o, b = R === 0 ? Math.min(n, i) : R;
           return {
             columns: Array.from(
               { length: n },
-              (U, I) => {
-                const v = e.columns[I], M = s[I] ?? et(), N = l[I] ?? [], p = u[I] ?? 0, V = h[I] ?? [];
-                if (a(M) || V.length === 0) {
-                  const H = [];
-                  let _ = 0;
-                  for (let S = I; S < R; S += n)
-                    H.push({
-                      data: c == null ? void 0 : c[S],
+              (q, I) => {
+                const x = e.columns[I], V = s[I] ?? nt(), C = l[I] ?? [], p = u[I] ?? 0, H = d[I] ?? [];
+                if (a(V) || H.length === 0) {
+                  const A = [];
+                  let T = 0;
+                  for (let E = I; E < b; E += n)
+                    A.push({
+                      columnIndex: I,
+                      data: c == null ? void 0 : c[E],
                       height: 0,
-                      columnIndex: I,
-                      indexInColumn: _++,
-                      index: S,
+                      index: E,
+                      indexInColumn: T++,
                       offset: 0
@@ -412,6 +406,6 @@ });
                     index: I,
-                    items: H,
+                    items: A,
                     listBottom: 0,
                     listTop: 0,
-                    offsetTree: N,
+                    offsetTree: C,
                     totalHeight: 0,
@@ -423,40 +417,40 @@ viewportBottom: 0
                   // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-                  v && v.offsetTree === N && e.totalCount === i && e.data === c && e.indexesInColumns === h && f >= v.listTop && d <= v.listBottom
+                  x && x.offsetTree === C && e.totalCount === i && e.data === c && e.indexesInColumns === d && f >= x.listTop && h <= x.listBottom
                 )
-                  return v;
-                const q = [], T = V.length - 1, P = 0, it = he(N, f, d, P);
-                let x = 0, W = 0, wt = !1;
-                for (const H of it) {
+                  return x;
+                const K = [], W = H.length - 1, z = 0, ct = ae(C, f, h, z);
+                let v = 0, L = 0, O = !1;
+                for (const A of ct) {
                   const {
-                    value: { offset: _, height: S }
-                  } = H;
-                  let z = H.start;
-                  x = _, _ < f && (z += Math.floor((f - _) / S), x += (z - H.start) * S), z < P && (x += (P - z) * S, z = P);
-                  const Lt = Math.min(H.end, T);
-                  for (let K = z; K <= Lt && !(x >= d); K++) {
-                    const yt = V[K], Yt = {
-                      data: c == null ? void 0 : c[yt],
-                      height: S,
+                    value: { height: T, offset: E }
+                  } = A;
+                  let F = A.start;
+                  v = E, E < f && (F += Math.floor((f - E) / T), v += (F - A.start) * T), F < z && (v += (z - F) * T, F = z);
+                  const _t = Math.min(A.end, W);
+                  for (let J = F; J <= _t && !(v >= h); J++) {
+                    const wt = H[J], Lt = {
                       columnIndex: I,
-                      indexInColumn: K,
-                      index: yt,
-                      offset: x
+                      data: c == null ? void 0 : c[wt],
+                      height: T,
+                      index: wt,
+                      indexInColumn: J,
+                      offset: v
                     };
-                    wt || (wt = !0, W = x), q.push(Yt), x += S;
+                    O || (O = !0, L = v), K.push(Lt), v += T;
                   }
                 }
                 return {
-                  items: q,
-                  viewportBottom: d,
-                  listBottom: x,
-                  listTop: W,
-                  offsetTree: N,
+                  index: I,
+                  items: K,
+                  listBottom: v,
+                  listTop: L,
+                  offsetTree: C,
                   totalHeight: p,
-                  index: I
+                  viewportBottom: h
                 };
               }
             ),
-            totalCount: i,
             data: c,
-            indexesInColumns: h
+            indexesInColumns: d,
+            totalCount: i
           };
@@ -466,18 +460,18 @@ },
           columns: [],
-          totalCount: -1,
+          data: [],
           indexesInColumns: [],
-          data: []
+          totalCount: -1
         }
       )
     ),
-    ot
-  ), Gt(
-    b(
-      ot,
-      $t((e) => e.columns.some((n) => n.listBottom < n.viewportBottom))
+    st
+  ), jt(
+    w(
+      st,
+      St((e) => e.columns.some((n) => n.listBottom < n.viewportBottom))
     ),
     (e) => {
-      const n = e.columns.slice().sort((s, l) => s.listBottom - l.listBottom)[0], r = t.getValue(L), o = Math.max(...r.flat()) + 1;
-      o >= t.getValue(Y) || Ut(
-        L,
+      const n = e.columns.slice().sort((s, l) => s.listBottom - l.listBottom)[0], r = t.getValue(Y), o = Math.max(...r.flat()) + 1;
+      o >= t.getValue(D) || Gt(
+        Y,
         r.map((s, l) => l === n.index ? [...s, o] : s)
@@ -487,50 +481,53 @@ );
   );
-}), we = Zt(
-  ({ initialItemCount: t = 0, data: e, context: n, columnCount: r, useWindowScroll: o = !1, ItemContent: s = Mt, ...l }, i) => {
-    const u = te(() => {
-      const c = new qt();
-      return c.register(L), c.register(ot), c.register(st), c.pubIn({
-        [Z]: e.slice(),
-        [ft]: n,
-        [k]: r,
-        [Vt]: s,
-        [pt]: t,
-        [j]: o
+}), be = Xt(
+  ({ columnCount: t, context: e, data: n, initialItemCount: r = 0, ItemContent: o = Et, useWindowScroll: s = !1, ...l }, i) => {
+    const u = Zt(() => {
+      const c = new Ut();
+      return c.register(Y), c.register(st), c.register(lt), c.pubIn({
+        [P]: t,
+        [at]: e,
+        [tt]: n.slice(),
+        [pt]: r,
+        [Mt]: o,
+        [j]: s
       }), c;
     }, []);
-    return ee(i, () => ({}), []), Et(() => {
+    return te(i, () => ({}), []), Ct(() => {
       u.pubIn({
-        [Z]: e.slice(),
-        [ft]: n,
-        [k]: r
+        [P]: t,
+        [at]: e,
+        [tt]: n.slice()
       });
-    }), /* @__PURE__ */ C(Kt.Provider, { value: u, children: /* @__PURE__ */ C(Se, { ...l }) });
+    }), /* @__PURE__ */ M(qt.Provider, { value: u, children: /* @__PURE__ */ M(ye, { ...l }) });
   }
 );
-we.displayName = "VirtuosoMasonry";
-const ye = {
+be.displayName = "VirtuosoMasonry";
+const we = {
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   observe: () => {
   },
+  // eslint-disable-next-line @typescript-eslint/no-empty-function
   unobserve: () => {
   }
-}, Se = ({ style: t, ...e }) => {
-  const n = Jt(), [r] = ne(() => {
+}, ye = ({ style: t, ...e }) => {
+  const n = Kt(), [r] = ee(() => {
     if (typeof ResizeObserver > "u") {
       if (typeof window < "u")
         throw new Error("ResizeObserver not found. Please ensure that you have a polyfill installed.");
-      return ye;
+      return we;
     }
     return new ResizeObserver((f) => {
-      const d = f.length, R = n.getValue(k), A = n.getValue(j), U = Array.from({ length: R }, () => []), I = {};
-      let v = {};
-      for (let M = 0; M < d; M++) {
-        const N = f[M], p = N.target;
+      const h = f.length, b = n.getValue(P), N = n.getValue(j), q = Array.from({ length: b }, () => []), I = {};
+      let x = {};
+      for (let V = 0; V < h; V++) {
+        const C = f[V], p = C.target;
         if (p === l.current) {
-          v = {
-            ...v,
-            [Q]: A ? window.scrollY : p.scrollTop,
-            [J]: A ? document.documentElement.scrollHeight : p.scrollHeight,
-            [at]: A ? window.innerHeight : N.contentRect.height,
-            [re]: A ? window.innerWidth : p.clientWidth,
-            ...A ? {} : { [J]: p.scrollHeight, [tt]: N.contentRect.top }
+          const O = p.ownerDocument.defaultView;
+          x = {
+            ...x,
+            [Q]: N ? O.document.documentElement.scrollHeight : p.scrollHeight,
+            [X]: N ? O.scrollY : p.scrollTop,
+            [ht]: N ? O.innerHeight : C.contentRect.height,
+            [ne]: N ? O.innerWidth : p.clientWidth,
+            ...N ? {} : { [et]: C.contentRect.top, [Q]: p.scrollHeight }
           };
@@ -540,5 +537,5 @@ continue;
         if (p.dataset.role === "column") {
-          l.current && (v = {
-            ...v,
-            [J]: l.current.scrollHeight
+          l.current && (x = {
+            ...x,
+            [Q]: l.current.scrollHeight
           });
@@ -549,17 +546,17 @@ continue;
           continue;
-        const V = Number.parseInt(p.dataset.index), q = Number.parseFloat(p.dataset.knownSize ?? ""), T = N.contentRect.height, P = Number.parseInt(p.dataset.columnIndex ?? "0"), it = Number.parseInt(p.dataset.absoluteIndex ?? "0");
-        if (I[it] = T, T === q)
+        const H = Number.parseInt(p.dataset.index), K = Number.parseFloat(p.dataset.knownSize ?? ""), W = C.contentRect.height, z = Number.parseInt(p.dataset.columnIndex ?? "0"), ct = Number.parseInt(p.dataset.absoluteIndex ?? "0");
+        if (I[ct] = W, W === K)
           continue;
-        const x = U[P], W = x[x.length - 1];
-        x.length === 0 || W.size !== T || W.endIndex !== V - 1 ? x.push({ endIndex: V, size: T, startIndex: V }) : x[x.length - 1].endIndex++;
+        const v = q[z], L = v[v.length - 1];
+        v.length === 0 || L.size !== W || L.endIndex !== H - 1 ? v.push({ endIndex: H, size: W, startIndex: H }) : v[v.length - 1].endIndex++;
       }
-      U.some((M) => M.length > 0) && (v = {
-        ...v,
-        [Bt]: U
-      }), Object.keys(I).length > 0 && (v = {
-        ...v,
-        [Wt]: I
-      }), n.pubIn(v);
+      q.some((V) => V.length > 0) && (x = {
+        ...x,
+        [zt]: q
+      }), Object.keys(I).length > 0 && (x = {
+        ...x,
+        [Ft]: I
+      }), n.pubIn(x);
     });
-  }), o = F(
+  }), o = B(
     (f) => {
@@ -569,3 +566,3 @@ r.observe(f);
     [r]
-  ), s = F(
+  ), s = B(
     (f) => {
@@ -575,16 +572,16 @@ r.unobserve(f);
     [r]
-  ), l = ut(null), i = ut([]), u = F(
-    (f) => (d) => {
-      if (d)
-        i.current[f] = d, r.observe(d, { box: "border-box" });
+  ), l = ft(null), i = ft([]), u = B(
+    (f) => (h) => {
+      if (h)
+        i.current[f] = h, r.observe(h, { box: "border-box" });
       else {
-        const R = i.current[f];
-        R != null && (r.unobserve(R), i.current[f] = null);
+        const b = i.current[f];
+        b != null && (r.unobserve(b), i.current[f] = null);
       }
     },
     [r]
-  ), c = F(() => {
+  ), c = B(() => {
     const f = l.current;
-    f !== null && n.pub(Q, f.scrollTop);
-  }, [n]), h = F(
+    f !== null && n.pub(X, f.scrollTop);
+  }, [n]), d = B(
     (f) => {
@@ -594,26 +591,27 @@ f ? (l.current = f, f.addEventListener("scroll", c), r.observe(f, { box: "border-box" })) : l.current && (l.current.removeEventListener("scroll", c), r.unobserve(l.current), l.current = null);
     [r, c]
-  ), [E, y, B] = Qt(ot, Vt, j);
-  return Et(() => {
-    if (B) {
-      const f = () => {
-        var d;
+  ), [R, S, _] = Jt(st, Mt, j);
+  return Ct(() => {
+    var f;
+    if (_) {
+      const h = (f = l.current) == null ? void 0 : f.ownerDocument.defaultView, b = () => {
+        var N;
         n.pubIn({
-          [Q]: window.scrollY,
-          [J]: document.documentElement.scrollHeight,
-          [at]: window.innerHeight,
-          [tt]: ((d = l.current) == null ? void 0 : d.getBoundingClientRect().top) ?? 0
+          [et]: ((N = l.current) == null ? void 0 : N.getBoundingClientRect().top) ?? 0,
+          [Q]: h.document.documentElement.scrollHeight,
+          [X]: h.scrollY,
+          [ht]: h.innerHeight
         });
       };
-      return window.addEventListener("scroll", f), f(), () => {
-        window.removeEventListener("scroll", f);
+      return h.addEventListener("scroll", b), b(), () => {
+        h.removeEventListener("scroll", b);
       };
     }
-  }, [B, n]), /* @__PURE__ */ C(Dt, { children: /* @__PURE__ */ C(
+  }, [_, n]), /* @__PURE__ */ M(Dt, { children: /* @__PURE__ */ M(
     "div",
     {
       ...e,
-      ref: h,
       "data-testid": "virtuoso-scroller",
+      ref: d,
       style: {
-        ...B ? {
+        ..._ ? {
           boxSizing: "border-box",
@@ -623,17 +621,17 @@ display: "flex",
         } : {
-          overflowY: "scroll",
           boxSizing: "border-box",
           display: "flex",
-          flexDirection: "row"
+          flexDirection: "row",
+          overflowY: "scroll"
         },
         ...t
       },
-      children: E.columns.map((f, d) => /* @__PURE__ */ C(
+      children: R.columns.map((f, h) => /* @__PURE__ */ M(
         "div",
         {
-          ref: u(d),
           "data-testid": "virtuoso-list",
+          ref: u(h),
           style: {
+            boxSizing: "content-box",
             flexGrow: 1,
-            boxSizing: "content-box",
             height: f.totalHeight,
@@ -643,24 +641,23 @@ overflowAnchor: "none",
           },
-          children: f.items.map((R) => /* @__PURE__ */ C($e, { ItemContent: y, item: R, mount: o, unmount: s }, R.index))
+          children: f.items.map((b) => /* @__PURE__ */ M(Se, { item: b, ItemContent: S, mount: o, unmount: s }, b.index))
         },
-        `column-${// biome-ignore lint/suspicious/noArrayIndexKey: <explanation>
-        d}`
+        `column-${h}`
       ))
     }
   ) });
-}, $e = ({ item: t, mount: e, unmount: n, ItemContent: r }) => {
-  const o = Xt(ft), s = ut(null), l = F(
+}, Se = ({ item: t, ItemContent: e, mount: n, unmount: r }) => {
+  const o = Qt(at), s = ft(null), l = B(
     (i) => {
-      i ? (s.current = i, e(i)) : s.current && (n(s.current), s.current = null);
+      i ? (s.current = i, n(i)) : s.current && (r(s.current), s.current = null);
     },
-    [e, n]
+    [n, r]
   );
-  return /* @__PURE__ */ C(
+  return /* @__PURE__ */ M(
     "div",
     {
-      ref: l,
+      "data-absolute-index": t.index,
       "data-column-index": t.columnIndex,
       "data-index": t.indexInColumn,
-      "data-absolute-index": t.index,
       "data-known-size": t.height,
+      ref: l,
       style: {
@@ -670,6 +667,6 @@ boxSizing: "border-box",
         position: "absolute",
-        width: "100%",
-        top: t.offset
+        top: t.offset,
+        width: "100%"
       },
-      children: /* @__PURE__ */ C(r, { data: t.data, index: t.index, context: o })
+      children: /* @__PURE__ */ M(e, { context: o, data: t.data, index: t.index })
     }
@@ -679,3 +676,3 @@ );
 export {
-  we as VirtuosoMasonry
+  be as VirtuosoMasonry
 };

package.json

@@ -21,3 +21,3 @@ {
   },
-  "version": "1.3.2",
+  "version": "1.3.3",
   "type": "module",
@@ -31,4 +31,16 @@ "module": "dist/index.js",
   },
+  "scripts": {
+    "build": "tsc && vite build",
+    "dev": "vite build",
+    "ladle": "ladle serve",
+    "test": "vitest",
+    "e2e": "echo 'No e2e tests'",
+    "typecheck": "tsc --noEmit",
+    "docs:build": "npx typedoc --plugin typedoc-plugin-no-inherit --watch --excludeInternal --excludePrivate --out docs --name 'Virtuoso Masonry' src/index.ts",
+    "docs:serve": "npx serve docs",
+    "lint": "eslint",
+    "knip": "knip"
+  },
   "dependencies": {
-    "@virtuoso.dev/gurx": "1.0.0"
+    "@virtuoso.dev/gurx": "^1.0.0"
   },
@@ -40,14 +52,23 @@ "peerDependencies": {
   "devDependencies": {
-    "@biomejs/biome": "1.9.4",
-    "@ladle/react": "^4.1.2",
+    "@eslint/js": "^9.19.0",
+    "@ladle/react": "^5.0.1",
     "@types/node": "^22.10.1",
-    "@types/react": "^18.3.12",
-    "@types/react-dom": "^18.3.1",
+    "@types/react": "^18.2.64",
+    "@types/react-dom": "^18.2.21",
     "@vitejs/plugin-react-swc": "^3.7.2",
-    "@vitest/browser": "^3.0.0-beta.3",
-    "globals": "^15.12.0",
-    "jsdom": "^25.0.1",
+    "@vitest/browser": "^3.0.4",
+    "eslint": "^9.19.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-perfectionist": "^4.7.0",
+    "eslint-plugin-prettier": "^5.2.3",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-react-hooks": "^5.1.0",
+    "globals": "^15.14.0",
+    "jsdom": "^26.0.0",
     "knip": "^5.38.3",
     "node-html-parser": "^6.1.13",
-    "playwright": "^1.49.0",
+    "playwright": "^1.33.0",
+    "prettier": "^3.4.2",
+    "react": "18.3.1",
+    "react-dom": "18.3.1",
     "resize-observer-polyfill": "^1.5.1",
@@ -57,8 +78,7 @@ "semantic-release": "^24.2.0",
     "typedoc-plugin-no-inherit": "^1.4.0",
-    "typescript": "5.7",
-    "vite": "^6.0.1",
-    "vite-plugin-dts": "^4.3.0",
-    "vitest": "3.0.0-beta.3",
-    "react": "18",
-    "react-dom": "18"
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.22.0",
+    "vite": "^6.0.11",
+    "vite-plugin-dts": "^4.5.0",
+    "vitest": "^3.0.4"
   },
@@ -72,14 +92,8 @@ "engines": {
   ],
-  "scripts": {
-    "build": "tsc && vite build",
-    "dev": "ladle serve",
-    "test": "vitest",
-    "e2e": "echo 'No e2e tests'",
-    "typecheck": "tsc --noEmit",
-    "docs:build": "npx typedoc --plugin typedoc-plugin-no-inherit --watch --excludeInternal --excludePrivate --out docs --name 'Virtuoso Masonry' src/index.ts",
-    "docs:serve": "npx serve docs",
-    "lint": "biome check",
-    "ci-lint": "biome ci",
-    "knip": "knip"
+  "prettier": {
+    "printWidth": 140,
+    "semi": false,
+    "singleQuote": true,
+    "trailingComma": "es5"
   }
-}
+}

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Improved metrics

Total package byte prevSize

24498

3.61%

Lines of code

716

1.7%

Number of medium supply chain risk alerts

0

-100%

Worsened metrics

Dev dependency count

30

36.36%

Dependency changes

• + Added

  @virtuoso.dev/gurx@1.2.3
  (transitive)

• - Removed

  @virtuoso.dev/gurx@1.0.0
  (transitive)

• Updated

  @virtuoso.dev/gurx@^1.0.0