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

package/dist/react-window.js

@@ -1,7 +1,7 @@
 import { jsx as j } from "react/jsx-runtime";
-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) {
+import { useLayoutEffect as D, useEffect as W, useMemo as k, useState as L, useRef as B, useCallback as P, memo as N, useImperativeHandle as Y, createElement as q } from "react";
+const U = typeof window < "u" ? D : W;
+function V(t) {
   if (t !== void 0)
     switch (typeof t) {
       case "number":
@@ -13,143 +13,143 @@ function B(t) {
       }
     }
 }
-function K({
+function J({
   box: t,
-  defaultHeight: r,
-  defaultWidth: l,
+  defaultHeight: o,
+  defaultWidth: n,
   disabled: s,
   element: e,
   mode: f,
-  style: n
+  style: l
 }) {
-  const { styleHeight: c, styleWidth: o } = H(
+  const { styleHeight: c, styleWidth: r } = k(
     () => ({
-      styleHeight: B(n?.height),
-      styleWidth: B(n?.width)
+      styleHeight: V(l?.height),
+      styleWidth: V(l?.width)
     }),
-    [n?.height, n?.width]
+    [l?.height, l?.width]
   ), [u, w] = L({
-    height: r,
-    width: l
-  }), I = s || f === "only-height" && c !== void 0 || f === "only-width" && o !== void 0 || c !== void 0 && o !== void 0;
-  return q(() => {
+    height: o,
+    width: n
+  }), I = s || f === "only-height" && c !== void 0 || f === "only-width" && r !== void 0 || c !== void 0 && r !== void 0;
+  return U(() => {
     if (e === null || I)
       return;
     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
+        const { contentRect: a, target: b } = m;
+        e === b && w((d) => d.height === a.height && d.width === a.width ? d : {
+          height: a.height,
+          width: a.width
         });
       }
     });
     return O.observe(e, { box: t }), () => {
       O?.unobserve(e);
     };
-  }, [t, I, e, c, o]), H(
+  }, [t, I, e, c, r]), k(
     () => ({
       height: c ?? u.height,
-      width: o ?? u.width
+      width: r ?? u.width
     }),
-    [u, c, o]
+    [u, c, r]
   );
 }
-function $(t, r = "Assertion error") {
+function $(t, o = "Assertion error") {
   if (!t)
-    throw console.error(r), Error(r);
+    throw console.error(o), Error(o);
 }
-function Q({
+function K({
   cachedBounds: t,
-  itemCount: r,
-  itemSize: l
+  itemCount: o,
+  itemSize: n
 }) {
-  if (typeof l == "number")
-    return r * l;
+  if (typeof n == "number")
+    return o * n;
   if (t.size > 0) {
     const s = t.get(t.size - 1);
     $(s !== void 0, "Unexpected bounds cache miss");
     const e = (s.scrollOffset + s.size) / t.size;
-    return r * e;
+    return o * e;
   } else
     return 0;
 }
-function X({
+function Q({
   align: t,
-  cachedBounds: r,
-  index: l,
+  cachedBounds: o,
+  index: n,
   itemCount: s,
   containerScrollOffset: e,
   containerSize: f
 }) {
-  const n = r.get(s - 1).scrollOffset, c = n + n - f, o = Math.max(
+  const l = o.get(s - 1).scrollOffset, c = l + l - f, r = Math.max(
     0,
-    r.get(l + 1).scrollOffset - f
+    o.get(n + 1).scrollOffset - f
   ), u = Math.min(
-    n,
-    r.get(l).scrollOffset
+    l,
+    o.get(n).scrollOffset
   );
-  switch (t === "smart" && (e >= o && e <= u ? t = "auto" : t = "center"), t) {
+  switch (t === "smart" && (e >= r && e <= u ? t = "auto" : t = "center"), t) {
     case "start":
       return Math.min(c, u);
     case "end":
-      return o;
+      return r;
     case "center": {
       const w = Math.round(
-        o + (u - o) / 2
+        r + (u - r) / 2
       );
       return w < Math.ceil(f / 2) ? 0 : w > c ? c : w;
     }
     case "auto":
     default:
-      return e >= o && e <= u ? e : e < o ? o : u;
+      return e >= r && e <= u ? e : e < r ? r : u;
   }
 }
-function Z({
+function X({
   cachedBounds: t,
-  containerScrollOffset: r,
-  containerSize: l,
+  containerScrollOffset: o,
+  containerSize: n,
   itemCount: s,
   overscanCount: e
 }) {
   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)
+  let l = 0, c = -1, r = 0;
+  for (; r < f; ) {
+    const u = t.get(r);
+    if (u.scrollOffset + u.size > o)
       break;
-    o++;
+    r++;
   }
-  for (n = o, n = Math.max(0, n - e); o < f; ) {
-    const u = t.get(o);
-    if (u.scrollOffset + u.size >= r + l)
+  for (l = r, l = Math.max(0, l - e); r < f; ) {
+    const u = t.get(r);
+    if (u.scrollOffset + u.size >= o + n)
       break;
-    o++;
+    r++;
   }
-  return c = Math.min(f, o), c = Math.min(s - 1, c + e), n < 0 ? [0, -1] : [n, c];
+  return c = Math.min(f, r), c = Math.min(s - 1, c + e), l < 0 ? [0, -1] : [l, c];
 }
-function C({
+function Z({
   itemCount: t,
-  itemProps: r,
-  itemSize: l
+  itemProps: o,
+  itemSize: n
 }) {
   const s = /* @__PURE__ */ new Map();
   return {
     get(e) {
       for ($(e < t, `Invalid index ${e}`); s.size - 1 < e; ) {
-        const n = s.size, c = typeof l == "number" ? l : l(n, r);
-        if (n === 0)
-          s.set(n, {
+        const l = s.size, c = typeof n == "number" ? n : n(l, o);
+        if (l === 0)
+          s.set(l, {
             size: c,
             scrollOffset: 0
           });
         else {
-          const o = s.get(n - 1);
+          const r = s.get(l - 1);
           $(
-            o !== void 0,
+            r !== void 0,
             `Unexpected bounds cache miss for index ${e}`
-          ), s.set(n, {
-            scrollOffset: o.scrollOffset + o.size,
+          ), s.set(l, {
+            scrollOffset: r.scrollOffset + r.size,
             size: c
           });
         }
@@ -170,75 +170,83 @@ function C({
 }
 function tt({
   itemCount: t,
-  itemProps: r,
-  itemSize: l
+  itemProps: o,
+  itemSize: n
 }) {
-  return H(
-    () => C({
+  return k(
+    () => Z({
       itemCount: t,
-      itemProps: r,
-      itemSize: l
+      itemProps: o,
+      itemSize: n
     }),
-    [t, r, l]
+    [t, o, n]
   );
 }
+function et(t) {
+  const o = B(() => {
+    throw new Error("Cannot call an event handler while rendering.");
+  });
+  return U(() => {
+    o.current = t;
+  }, [t]), P((n) => o.current?.(n), [o]);
+}
 function G({
   containerElement: t,
-  containerStyle: r,
-  defaultContainerSize: l = 0,
+  containerStyle: o,
+  defaultContainerSize: n = 0,
   direction: s,
   itemCount: e,
   itemProps: f,
-  itemSize: n,
+  itemSize: l,
   overscanCount: c
 }) {
-  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,
+  const [r, u] = L([0, -1]), [w, I] = [
+    Math.min(e - 1, r[0]),
+    Math.min(e - 1, r[1])
+  ], { height: O = n, width: S = n } = J({
+    defaultHeight: s === "vertical" ? n : void 0,
+    defaultWidth: s === "horizontal" ? n : void 0,
     element: t,
     mode: s === "vertical" ? "only-height" : "only-width",
-    style: r
-  }), m = s === "vertical" ? O : S, d = tt({
+    style: o
+  }), m = s === "vertical" ? O : S, a = tt({
     itemCount: e,
     itemProps: f,
-    itemSize: n
+    itemSize: l
   }), b = P(
-    (i) => d.get(i),
-    [d]
-  ), a = P(
-    () => Q({
-      cachedBounds: d,
+    (i) => a.get(i),
+    [a]
+  ), d = P(
+    () => K({
+      cachedBounds: a,
       itemCount: e,
-      itemSize: n
+      itemSize: l
     }),
-    [d, e, n]
-  ), M = P(
-    (i) => Z({
-      cachedBounds: d,
+    [a, e, l]
+  ), E = P(
+    (i) => X({
+      cachedBounds: a,
       containerScrollOffset: i,
       containerSize: m,
       itemCount: e,
       overscanCount: c
     }),
-    [d, m, e, c]
+    [a, m, e, c]
   );
-  q(() => {
+  U(() => {
     const i = (s === "vertical" ? t?.scrollTop : t?.scrollLeft) ?? 0;
-    u(M(i));
-  }, [t, s, M]);
-  const g = P(
+    u(E(i));
+  }, [t, s, E]);
+  const g = et(
     ({
       align: i = "auto",
       behavior: p = "auto",
       containerScrollOffset: z,
       index: x
     }) => {
-      const h = X({
+      const h = Q({
         align: i,
-        cachedBounds: d,
+        cachedBounds: a,
         containerScrollOffset: z,
         containerSize: m,
         index: x,
@@ -251,14 +259,13 @@ function G({
         behavior: p || void 0,
         top: h
       });
-    },
-    [d, t, m, s, e]
+    }
   );
   return {
     getCellBounds: b,
-    getEstimatedHeight: a,
+    getEstimatedHeight: d,
     onScroll: () => {
-      const i = M(
+      const i = E(
         (s === "vertical" ? t?.scrollTop : t?.scrollLeft) ?? 0
       );
       (i[0] !== w || i[1] !== I) && u(i);
@@ -269,83 +276,83 @@ function G({
   };
 }
 function A(t) {
-  return H(() => t, Object.values(t));
+  return k(() => t, Object.values(t));
 }
-function U(t, r) {
-  if (t === r)
+function F(t, o) {
+  if (t === o)
     return !0;
-  if (!!t != !!r || ($(t !== void 0), $(r !== void 0), Object.keys(t).length !== Object.keys(r).length))
+  if (!!t != !!o || ($(t !== void 0), $(o !== void 0), Object.keys(t).length !== Object.keys(o).length))
     return !1;
-  for (const l in t)
-    if (!Object.is(r[l], t[l]))
+  for (const n in t)
+    if (!Object.is(o[n], t[n]))
       return !1;
   return !0;
 }
-function _(t, r) {
-  const { style: l, ...s } = t, { style: e, ...f } = r;
-  return U(l, e) && U(s, f);
+function _(t, o) {
+  const { style: n, ...s } = t, { style: e, ...f } = o;
+  return F(n, e) && F(s, f);
 }
-const D = () => {
+const C = () => {
 };
-function ot({
+function rt({
   cellComponent: t,
-  cellProps: r,
-  className: l,
+  cellProps: o,
+  className: n,
   columnCount: s,
   columnWidth: e,
   defaultHeight: f = 0,
-  defaultWidth: n = 0,
+  defaultWidth: l = 0,
   gridRef: c,
-  onCellsRendered: o,
-  onScroll: u = D,
+  onCellsRendered: r,
+  onScroll: u = C,
   overscanCount: w = 3,
   rowCount: I,
   rowHeight: O,
   style: S,
   ...m
 }) {
-  const d = A(r), b = H(
-    () => V(t, _),
+  const a = A(o), b = k(
+    () => N(t, _),
     [t]
-  ), [a, M] = L(null), g = G({
-    containerElement: a,
-    defaultContainerSize: n,
+  ), [d, E] = L(null), g = G({
+    containerElement: d,
+    defaultContainerSize: l,
     direction: "horizontal",
     itemCount: s,
-    itemProps: d,
+    itemProps: a,
     itemSize: e,
     overscanCount: w
   }), i = G({
-    containerElement: a,
+    containerElement: d,
     defaultContainerSize: f,
     direction: "vertical",
     itemCount: I,
-    itemProps: d,
+    itemProps: a,
     itemSize: O,
     overscanCount: w
   }), { startIndex: p, stopIndex: z } = g, { startIndex: x, stopIndex: h } = i;
-  F(
+  Y(
     c,
     () => ({
       get element() {
-        return a;
+        return d;
       },
       scrollToCell({
         behavior: v = "auto",
         columnAlign: y = "auto",
         columnIndex: T,
-        rowAlign: k = "auto",
+        rowAlign: H = "auto",
         rowIndex: R
       }) {
         i?.scrollToIndex({
-          align: k,
+          align: H,
           behavior: v,
-          containerScrollOffset: a?.scrollTop ?? 0,
+          containerScrollOffset: d?.scrollTop ?? 0,
           index: R
         }), g?.scrollToIndex({
           align: y,
           behavior: v,
-          containerScrollOffset: a?.scrollLeft ?? 0,
+          containerScrollOffset: d?.scrollLeft ?? 0,
           index: T
         });
       },
@@ -357,7 +364,7 @@ function ot({
         g?.scrollToIndex({
           align: v,
           behavior: y,
-          containerScrollOffset: a?.scrollLeft ?? 0,
+          containerScrollOffset: d?.scrollLeft ?? 0,
           index: T
         });
       },
@@ -369,40 +376,40 @@ function ot({
         i?.scrollToIndex({
           align: v,
           behavior: y,
-          containerScrollOffset: a?.scrollTop ?? 0,
+          containerScrollOffset: d?.scrollTop ?? 0,
           index: T
         });
       }
     }),
-    [g, a, i]
+    [g, d, i]
   ), W(() => {
-    p >= 0 && z >= 0 && x >= 0 && h >= 0 && o && o({
+    p >= 0 && z >= 0 && x >= 0 && h >= 0 && r && r({
       columnStartIndex: p,
       columnStopIndex: z,
       rowStartIndex: x,
       rowStopIndex: h
     });
   }, [
-    o,
+    r,
     p,
     z,
     x,
     h
   ]);
-  const E = H(() => {
+  const M = k(() => {
     const v = [];
     if (g && s > 0 && i && I > 0)
       for (let y = x; y <= h; y++) {
         const T = i.getCellBounds(y);
-        for (let k = p; k <= z; k++) {
-          const R = g.getCellBounds(k);
+        for (let H = p; H <= z; H++) {
+          const R = g.getCellBounds(H);
           v.push(
-            /* @__PURE__ */ N(
+            /* @__PURE__ */ q(
               b,
               {
-                ...d,
-                columnIndex: k,
-                key: `${y}-${k}`,
+                ...a,
+                columnIndex: H,
+                key: `${y}-${H}`,
                 rowIndex: y,
                 style: {
                   position: "absolute",
@@ -419,7 +426,7 @@ function ot({
     return v;
   }, [
     b,
-    d,
+    a,
     s,
     p,
     z,
@@ -434,11 +441,11 @@ function ot({
     {
       role: "grid",
       ...m,
-      className: l,
+      className: n,
       onScroll: (v) => {
         g.onScroll(), i.onScroll(), u(v);
       },
-      ref: M,
+      ref: E,
       style: {
         ...S,
         maxHeight: "100%",
@@ -449,54 +456,54 @@ function ot({
       children: /* @__PURE__ */ j(
         "div",
         {
-          className: l,
+          className: n,
           style: {
             position: "relative",
             height: i?.getEstimatedHeight(),
             width: g?.getEstimatedHeight()
           },
-          children: E
+          children: M
         }
       )
     }
   );
 }
-const rt = L, lt = Y;
-function nt({
+const nt = L, lt = B;
+function it({
   className: t,
-  defaultHeight: r = 0,
-  listRef: l,
+  defaultHeight: o = 0,
+  listRef: n,
   onRowsRendered: s,
-  onScroll: e = D,
+  onScroll: e = C,
   overscanCount: f = 3,
-  rowComponent: n,
+  rowComponent: l,
   rowCount: c,
-  rowHeight: o,
+  rowHeight: r,
   rowProps: u,
   style: w,
   ...I
 }) {
-  const O = A(u), S = H(
-    () => V(n, _),
-    [n]
-  ), [m, d] = L(null), {
+  const O = A(u), S = k(
+    () => N(l, _),
+    [l]
+  ), [m, a] = L(null), {
     getCellBounds: b,
-    getEstimatedHeight: a,
-    onScroll: M,
+    getEstimatedHeight: d,
+    onScroll: E,
     scrollToIndex: g,
     startIndex: i,
     stopIndex: p
   } = G({
     containerElement: m,
-    defaultContainerSize: r,
+    defaultContainerSize: o,
     direction: "vertical",
     itemCount: c,
     itemProps: O,
-    itemSize: o,
+    itemSize: r,
     overscanCount: f
   });
-  F(
-    l,
+  Y(
+    n,
     () => ({
       get element() {
         return m;
@@ -504,13 +511,13 @@ function nt({
       scrollToRow({
         align: x = "auto",
         behavior: h = "auto",
-        index: E
+        index: M
       }) {
         g({
           align: x,
           behavior: h,
           containerScrollOffset: m?.scrollTop ?? 0,
-          index: E
+          index: M
         });
       }
     }),
@@ -521,13 +528,13 @@ function nt({
       stopIndex: p
     });
   }, [s, i, p]);
-  const z = H(() => {
+  const z = k(() => {
     const x = [];
     if (c > 0)
       for (let h = i; h <= p; h++) {
-        const E = b(h);
+        const M = b(h);
         x.push(
-          /* @__PURE__ */ N(
+          /* @__PURE__ */ q(
             S,
             {
               ...O,
@@ -536,8 +543,8 @@ function nt({
               style: {
                 position: "absolute",
                 left: 0,
-                transform: `translateY(${E.scrollOffset}px)`,
-                height: E.size,
+                transform: `translateY(${M.scrollOffset}px)`,
+                height: M.size,
                 width: "100%"
               }
             }
@@ -553,9 +560,9 @@ function nt({
       ...I,
       className: t,
       onScroll: (x) => {
-        M(), e(x);
+        E(), e(x);
       },
-      ref: d,
+      ref: a,
       style: {
         ...w,
         maxHeight: "100%",
@@ -567,7 +574,7 @@ function nt({
         {
           className: t,
           style: {
-            height: a(),
+            height: d(),
             position: "relative",
             width: "100%"
           },
@@ -577,12 +584,12 @@ function nt({
     }
   );
 }
-const it = L, ct = Y;
+const ct = L, ft = B;
 export {
-  ot as Grid,
-  nt as List,
-  rt as useGridCallbackRef,
+  rt as Grid,
+  it as List,
+  nt as useGridCallbackRef,
   lt as useGridRef,
-  it as useListCallbackRef,
-  ct as useListRef
+  ct as useListCallbackRef,
+  ft as useListRef
 };