react-window 2.0.0-alpha.1 → 2.0.0-alpha.3

package/dist/react-window.js

@@ -1,5 +1,6 @@
 import { jsx as j } from "react/jsx-runtime";
-import { useLayoutEffect as J, useEffect as W, useMemo as E, useState as P, useCallback as L, memo as V, useImperativeHandle as U, createElement as F, useRef as Y } from "react";
+import { useLayoutEffect as J, useEffect as W, useMemo as H, useState as L, useCallback as P, memo as V, useImperativeHandle as F, createElement as N, useRef as Y } from "react";
+const q = typeof window < "u" ? J : W;
 function B(t) {
   if (t !== void 0)
     switch (typeof t) {
@@ -12,47 +13,46 @@ function B(t) {
       }
     }
 }
-const q = typeof window < "u" ? J : W;
 function K({
   box: t,
   defaultHeight: r,
-  defaultWidth: n,
+  defaultWidth: l,
   disabled: s,
   element: e,
-  mode: c,
-  style: l
+  mode: f,
+  style: n
 }) {
-  const { styleHeight: f, styleWidth: o } = E(
+  const { styleHeight: c, styleWidth: o } = H(
     () => ({
-      styleHeight: B(l?.height),
-      styleWidth: B(l?.width)
+      styleHeight: B(n?.height),
+      styleWidth: B(n?.width)
     }),
-    [l?.height, l?.width]
-  ), [u, a] = P({
+    [n?.height, n?.width]
+  ), [u, w] = L({
     height: r,
-    width: n
-  }), O = s || c === "only-height" && f !== void 0 || c === "only-width" && o !== void 0 || f !== void 0 && o !== void 0;
+    width: l
+  }), I = s || f === "only-height" && c !== void 0 || f === "only-width" && o !== void 0 || c !== void 0 && o !== void 0;
   return q(() => {
-    if (e === null || O)
+    if (e === null || I)
       return;
-    const b = new ResizeObserver((m) => {
-      for (const d of m) {
-        const { contentRect: w, target: g } = d;
-        e === g && a((v) => v.height === w.height && v.width === w.width ? v : {
-          height: w.height,
-          width: w.width
+    const O = new ResizeObserver((S) => {
+      for (const m of S) {
+        const { contentRect: d, target: b } = m;
+        e === b && w((a) => a.height === d.height && a.width === d.width ? a : {
+          height: d.height,
+          width: d.width
         });
       }
     });
-    return b.observe(e, { box: t }), () => {
-      b?.unobserve(e);
+    return O.observe(e, { box: t }), () => {
+      O?.unobserve(e);
     };
-  }, [t, O, e, f, o]), E(
+  }, [t, I, e, c, o]), H(
     () => ({
-      height: f ?? u.height,
+      height: c ?? u.height,
       width: o ?? u.width
     }),
-    [u, f, o]
+    [u, c, o]
   );
 }
 function $(t, r = "Assertion error") {
@@ -62,10 +62,10 @@ function $(t, r = "Assertion error") {
 function Q({
   cachedBounds: t,
   itemCount: r,
-  itemSize: n
+  itemSize: l
 }) {
-  if (typeof n == "number")
-    return r * n;
+  if (typeof l == "number")
+    return r * l;
   if (t.size > 0) {
     const s = t.get(t.size - 1);
     $(s !== void 0, "Unexpected bounds cache miss");
@@ -77,28 +77,28 @@ function Q({
 function X({
   align: t,
   cachedBounds: r,
-  index: n,
+  index: l,
   itemCount: s,
   containerScrollOffset: e,
-  containerSize: c
+  containerSize: f
 }) {
-  const l = r.get(s - 1).scrollOffset, f = l + l - c, o = Math.max(
+  const n = r.get(s - 1).scrollOffset, c = n + n - f, o = Math.max(
     0,
-    r.get(n + 1).scrollOffset - c
+    r.get(l + 1).scrollOffset - f
   ), u = Math.min(
-    l,
-    r.get(n).scrollOffset
+    n,
+    r.get(l).scrollOffset
   );
   switch (t === "smart" && (e >= o && e <= u ? t = "auto" : t = "center"), t) {
     case "start":
-      return Math.min(f, u);
+      return Math.min(c, u);
     case "end":
       return o;
     case "center": {
-      const a = Math.round(
+      const w = Math.round(
         o + (u - o) / 2
       );
-      return a < Math.ceil(c / 2) ? 0 : a > f ? f : a;
+      return w < Math.ceil(f / 2) ? 0 : w > c ? c : w;
     }
     case "auto":
     default:
@@ -108,317 +108,324 @@ function X({
 function Z({
   cachedBounds: t,
   containerScrollOffset: r,
-  containerSize: n,
+  containerSize: l,
   itemCount: s,
   overscanCount: e
 }) {
-  const c = s - 1;
-  let l = 0, f = -1, o = 0;
-  for (; o < c; ) {
+  const f = s - 1;
+  let n = 0, c = -1, o = 0;
+  for (; o < f; ) {
     const u = t.get(o);
     if (u.scrollOffset + u.size > r)
       break;
     o++;
   }
-  for (l = o, l = Math.max(0, l - e); o < c; ) {
+  for (n = o, n = Math.max(0, n - e); o < f; ) {
     const u = t.get(o);
-    if (u.scrollOffset + u.size >= r + n)
+    if (u.scrollOffset + u.size >= r + l)
       break;
     o++;
   }
-  return f = Math.min(c, o), f = Math.min(s - 1, f + e), l < 0 ? [0, -1] : [l, f];
+  return c = Math.min(f, o), c = Math.min(s - 1, c + e), n < 0 ? [0, -1] : [n, c];
 }
-function _({
+function C({
   itemCount: t,
   itemProps: r,
-  itemSize: n
+  itemSize: l
 }) {
   const s = /* @__PURE__ */ new Map();
   return {
     get(e) {
       for ($(e < t, `Invalid index ${e}`); s.size - 1 < e; ) {
-        const l = s.size, f = typeof n == "number" ? n : n(l, r);
-        if (l === 0)
-          s.set(l, {
-            size: f,
+        const n = s.size, c = typeof l == "number" ? l : l(n, r);
+        if (n === 0)
+          s.set(n, {
+            size: c,
             scrollOffset: 0
           });
         else {
-          const o = s.get(l - 1);
+          const o = s.get(n - 1);
           $(
             o !== void 0,
             `Unexpected bounds cache miss for index ${e}`
-          ), s.set(l, {
+          ), s.set(n, {
             scrollOffset: o.scrollOffset + o.size,
-            size: f
+            size: c
           });
         }
       }
-      const c = s.get(e);
+      const f = s.get(e);
       return $(
-        c !== void 0,
+        f !== void 0,
         `Unexpected bounds cache miss for index ${e}`
-      ), c;
+      ), f;
     },
-    set(e, c) {
-      s.set(e, c);
+    set(e, f) {
+      s.set(e, f);
     },
     get size() {
       return s.size;
     }
   };
 }
-function N({
+function tt({
   itemCount: t,
   itemProps: r,
-  itemSize: n
+  itemSize: l
 }) {
-  return E(
-    () => _({
+  return H(
+    () => C({
       itemCount: t,
       itemProps: r,
-      itemSize: n
+      itemSize: l
     }),
-    [t, r, n]
+    [t, r, l]
   );
 }
-function R({
+function G({
   containerElement: t,
   containerStyle: r,
-  defaultContainerSize: n = 0,
+  defaultContainerSize: l = 0,
   direction: s,
   itemCount: e,
-  itemProps: c,
-  itemSize: l,
-  overscanCount: f
+  itemProps: f,
+  itemSize: n,
+  overscanCount: c
 }) {
-  const [[o, u], a] = P([0, -1]), { height: O = n, width: b = n } = K({
-    defaultHeight: s === "vertical" ? n : void 0,
-    defaultWidth: s === "horizontal" ? n : void 0,
+  const [o, u] = L([0, -1]), [w, I] = [
+    Math.min(e - 1, o[0]),
+    Math.min(e - 1, o[1])
+  ], { height: O = l, width: S = l } = K({
+    defaultHeight: s === "vertical" ? l : void 0,
+    defaultWidth: s === "horizontal" ? l : void 0,
     element: t,
     mode: s === "vertical" ? "only-height" : "only-width",
     style: r
-  }), m = s === "vertical" ? O : b, d = N({
+  }), m = s === "vertical" ? O : S, d = tt({
     itemCount: e,
-    itemProps: c,
-    itemSize: l
-  }), w = L(
+    itemProps: f,
+    itemSize: n
+  }), b = P(
     (i) => d.get(i),
     [d]
-  ), g = L(
+  ), a = P(
     () => Q({
       cachedBounds: d,
       itemCount: e,
-      itemSize: l
+      itemSize: n
     }),
-    [d, e, l]
-  ), v = L(
+    [d, e, n]
+  ), M = P(
     (i) => Z({
       cachedBounds: d,
       containerScrollOffset: i,
       containerSize: m,
       itemCount: e,
-      overscanCount: f
+      overscanCount: c
     }),
-    [d, m, e, f]
+    [d, m, e, c]
   );
   q(() => {
-    a(v(0));
-  }, [v]);
-  const p = L(
+    const i = (s === "vertical" ? t?.scrollTop : t?.scrollLeft) ?? 0;
+    u(M(i));
+  }, [t, s, M]);
+  const g = P(
     ({
       align: i = "auto",
-      behavior: x = "auto",
+      behavior: p = "auto",
       containerScrollOffset: z,
-      index: I
+      index: x
     }) => {
       const h = X({
         align: i,
         cachedBounds: d,
         containerScrollOffset: z,
         containerSize: m,
-        index: I,
+        index: x,
         itemCount: e
       });
       s === "horizontal" ? t?.scrollTo({
         left: h,
-        behavior: x || void 0
+        behavior: p || void 0
       }) : t?.scrollTo({
-        behavior: x || void 0,
+        behavior: p || void 0,
         top: h
       });
     },
     [d, t, m, s, e]
   );
   return {
-    getCellBounds: w,
-    getEstimatedHeight: g,
+    getCellBounds: b,
+    getEstimatedHeight: a,
     onScroll: () => {
-      const i = v(
+      const i = M(
         (s === "vertical" ? t?.scrollTop : t?.scrollLeft) ?? 0
       );
-      (i[0] !== o || i[1] !== u) && a(i);
+      (i[0] !== w || i[1] !== I) && u(i);
     },
-    scrollToIndex: p,
-    startIndex: o,
-    stopIndex: u
+    scrollToIndex: g,
+    startIndex: w,
+    stopIndex: I
   };
 }
 function A(t) {
-  return E(() => t, Object.values(t));
+  return H(() => t, Object.values(t));
 }
-function G(t, r) {
+function U(t, r) {
   if (t === r)
     return !0;
   if (!!t != !!r || ($(t !== void 0), $(r !== void 0), Object.keys(t).length !== Object.keys(r).length))
     return !1;
-  for (const n in t)
-    if (!Object.is(r[n], t[n]))
+  for (const l in t)
+    if (!Object.is(r[l], t[l]))
       return !1;
   return !0;
 }
-function D(t, r) {
-  const { style: n, ...s } = t, { style: e, ...c } = r;
-  return G(n, e) && G(s, c);
+function _(t, r) {
+  const { style: l, ...s } = t, { style: e, ...f } = r;
+  return U(l, e) && U(s, f);
 }
-function et({
+const D = () => {
+};
+function ot({
   cellComponent: t,
   cellProps: r,
-  className: n,
+  className: l,
   columnCount: s,
   columnWidth: e,
-  defaultHeight: c = 0,
-  defaultWidth: l = 0,
-  gridRef: f,
+  defaultHeight: f = 0,
+  defaultWidth: n = 0,
+  gridRef: c,
   onCellsRendered: o,
-  overscanCount: u = 3,
-  rowCount: a,
+  onScroll: u = D,
+  overscanCount: w = 3,
+  rowCount: I,
   rowHeight: O,
-  style: b,
+  style: S,
   ...m
 }) {
-  const d = A(r), w = E(
-    () => V(t, D),
+  const d = A(r), b = H(
+    () => V(t, _),
     [t]
-  ), [g, v] = P(null), p = R({
-    containerElement: g,
-    defaultContainerSize: l,
+  ), [a, M] = L(null), g = G({
+    containerElement: a,
+    defaultContainerSize: n,
     direction: "horizontal",
     itemCount: s,
     itemProps: d,
     itemSize: e,
-    overscanCount: u
-  }), i = R({
-    containerElement: g,
-    defaultContainerSize: c,
+    overscanCount: w
+  }), i = G({
+    containerElement: a,
+    defaultContainerSize: f,
     direction: "vertical",
-    itemCount: a,
+    itemCount: I,
     itemProps: d,
     itemSize: O,
-    overscanCount: u
-  }), { startIndex: x, stopIndex: z } = p, { startIndex: I, stopIndex: h } = i;
-  U(
-    f,
+    overscanCount: w
+  }), { startIndex: p, stopIndex: z } = g, { startIndex: x, stopIndex: h } = i;
+  F(
+    c,
     () => ({
       get element() {
-        return g;
+        return a;
       },
       scrollToCell({
-        behavior: S = "auto",
+        behavior: v = "auto",
         columnAlign: y = "auto",
         columnIndex: T,
-        rowAlign: H = "auto",
-        rowIndex: k
+        rowAlign: k = "auto",
+        rowIndex: R
       }) {
         i?.scrollToIndex({
-          align: H,
-          behavior: S,
-          containerScrollOffset: g?.scrollTop ?? 0,
-          index: k
-        }), p?.scrollToIndex({
+          align: k,
+          behavior: v,
+          containerScrollOffset: a?.scrollTop ?? 0,
+          index: R
+        }), g?.scrollToIndex({
           align: y,
-          behavior: S,
-          containerScrollOffset: g?.scrollLeft ?? 0,
+          behavior: v,
+          containerScrollOffset: a?.scrollLeft ?? 0,
           index: T
         });
       },
       scrollToColumn({
-        align: S = "auto",
+        align: v = "auto",
         behavior: y = "auto",
         index: T
       }) {
-        p?.scrollToIndex({
-          align: S,
+        g?.scrollToIndex({
+          align: v,
           behavior: y,
-          containerScrollOffset: g?.scrollLeft ?? 0,
+          containerScrollOffset: a?.scrollLeft ?? 0,
           index: T
         });
       },
       scrollToRow({
-        align: S = "auto",
+        align: v = "auto",
         behavior: y = "auto",
         index: T
       }) {
         i?.scrollToIndex({
-          align: S,
+          align: v,
           behavior: y,
-          containerScrollOffset: g?.scrollTop ?? 0,
+          containerScrollOffset: a?.scrollTop ?? 0,
           index: T
         });
       }
     }),
-    [p, g, i]
+    [g, a, i]
   ), W(() => {
-    x >= 0 && z >= 0 && I >= 0 && h >= 0 && o && o({
-      columnStartIndex: x,
+    p >= 0 && z >= 0 && x >= 0 && h >= 0 && o && o({
+      columnStartIndex: p,
       columnStopIndex: z,
-      rowStartIndex: I,
+      rowStartIndex: x,
       rowStopIndex: h
     });
   }, [
     o,
-    x,
+    p,
     z,
-    I,
+    x,
     h
   ]);
-  const M = E(() => {
-    const S = [];
-    if (p && s > 0 && i && a > 0)
-      for (let y = I; y <= h; y++) {
+  const E = H(() => {
+    const v = [];
+    if (g && s > 0 && i && I > 0)
+      for (let y = x; y <= h; y++) {
         const T = i.getCellBounds(y);
-        for (let H = x; H <= z; H++) {
-          const k = p.getCellBounds(H);
-          S.push(
-            /* @__PURE__ */ F(
-              w,
+        for (let k = p; k <= z; k++) {
+          const R = g.getCellBounds(k);
+          v.push(
+            /* @__PURE__ */ N(
+              b,
               {
                 ...d,
-                columnIndex: H,
-                key: `${y}-${H}`,
+                columnIndex: k,
+                key: `${y}-${k}`,
                 rowIndex: y,
                 style: {
                   position: "absolute",
                   left: 0,
-                  transform: `translate(${k.scrollOffset}px, ${T.scrollOffset}px)`,
+                  transform: `translate(${R.scrollOffset}px, ${T.scrollOffset}px)`,
                   height: T.size,
-                  width: k.size
+                  width: R.size
                 }
               }
             )
           );
         }
       }
-    return S;
+    return v;
   }, [
-    w,
+    b,
     d,
     s,
-    x,
-    z,
     p,
-    a,
+    z,
+    g,
     I,
+    x,
     h,
     i
   ]);
@@ -427,13 +434,13 @@ function et({
     {
       role: "grid",
       ...m,
-      className: n,
-      onScroll: () => {
-        p.onScroll(), i.onScroll();
+      className: l,
+      onScroll: (v) => {
+        g.onScroll(), i.onScroll(), u(v);
       },
-      ref: v,
+      ref: M,
       style: {
-        ...b,
+        ...S,
         maxHeight: "100%",
         maxWidth: "100%",
         flexGrow: 1,
@@ -442,85 +449,86 @@ function et({
       children: /* @__PURE__ */ j(
         "div",
         {
-          className: n,
+          className: l,
           style: {
             position: "relative",
             height: i?.getEstimatedHeight(),
-            width: p?.getEstimatedHeight()
+            width: g?.getEstimatedHeight()
           },
-          children: M
+          children: E
         }
       )
     }
   );
 }
-const st = Y;
-function ot({
+const rt = L, lt = Y;
+function nt({
   className: t,
   defaultHeight: r = 0,
-  listRef: n,
+  listRef: l,
   onRowsRendered: s,
-  overscanCount: e = 3,
-  rowComponent: c,
-  rowCount: l,
-  rowHeight: f,
-  rowProps: o,
-  style: u,
-  ...a
+  onScroll: e = D,
+  overscanCount: f = 3,
+  rowComponent: n,
+  rowCount: c,
+  rowHeight: o,
+  rowProps: u,
+  style: w,
+  ...I
 }) {
-  const O = A(o), b = E(
-    () => V(c, D),
-    [c]
-  ), [m, d] = P(null), {
-    getCellBounds: w,
-    getEstimatedHeight: g,
-    onScroll: v,
-    scrollToIndex: p,
+  const O = A(u), S = H(
+    () => V(n, _),
+    [n]
+  ), [m, d] = L(null), {
+    getCellBounds: b,
+    getEstimatedHeight: a,
+    onScroll: M,
+    scrollToIndex: g,
     startIndex: i,
-    stopIndex: x
-  } = R({
+    stopIndex: p
+  } = G({
     containerElement: m,
     defaultContainerSize: r,
     direction: "vertical",
-    itemCount: l,
+    itemCount: c,
     itemProps: O,
-    itemSize: f,
-    overscanCount: e
+    itemSize: o,
+    overscanCount: f
   });
-  U(
-    n,
+  F(
+    l,
     () => ({
       get element() {
         return m;
       },
       scrollToRow({
-        align: I = "auto",
+        align: x = "auto",
         behavior: h = "auto",
-        index: M
+        index: E
       }) {
-        p({
-          align: I,
+        g({
+          align: x,
           behavior: h,
           containerScrollOffset: m?.scrollTop ?? 0,
-          index: M
+          index: E
         });
       }
     }),
-    [m, p]
+    [m, g]
   ), W(() => {
-    i >= 0 && x >= 0 && s && s({
+    i >= 0 && p >= 0 && s && s({
       startIndex: i,
-      stopIndex: x
+      stopIndex: p
     });
-  }, [s, i, x]);
-  const z = E(() => {
-    const I = [];
-    if (l > 0)
-      for (let h = i; h <= x; h++) {
-        const M = w(h);
-        I.push(
-          /* @__PURE__ */ F(
-            b,
+  }, [s, i, p]);
+  const z = H(() => {
+    const x = [];
+    if (c > 0)
+      for (let h = i; h <= p; h++) {
+        const E = b(h);
+        x.push(
+          /* @__PURE__ */ N(
+            S,
             {
               ...O,
               key: h,
@@ -528,26 +536,28 @@ function ot({
               style: {
                 position: "absolute",
                 left: 0,
-                transform: `translateY(${M.scrollOffset}px)`,
-                height: M.size,
+                transform: `translateY(${E.scrollOffset}px)`,
+                height: E.size,
                 width: "100%"
               }
             }
           )
         );
       }
-    return I;
-  }, [b, w, l, O, i, x]);
+    return x;
+  }, [S, b, c, O, i, p]);
   return /* @__PURE__ */ j(
     "div",
     {
       role: "list",
-      ...a,
+      ...I,
       className: t,
-      onScroll: v,
+      onScroll: (x) => {
+        M(), e(x);
+      },
       ref: d,
       style: {
-        ...u,
+        ...w,
         maxHeight: "100%",
         flexGrow: 1,
         overflowY: "auto"
@@ -557,7 +567,7 @@ function ot({
         {
           className: t,
           style: {
-            height: g(),
+            height: a(),
             position: "relative",
             width: "100%"
           },
@@ -567,10 +577,12 @@ function ot({
     }
   );
 }
-const rt = Y;
+const it = L, ct = Y;
 export {
-  et as Grid,
-  ot as List,
-  st as useGridRef,
-  rt as useListRef
+  ot as Grid,
+  nt as List,
+  rt as useGridCallbackRef,
+  lt as useGridRef,
+  it as useListCallbackRef,
+  ct as useListRef
 };