react-window 2.0.2-alpha.1 → 2.1.0-alpha.0

package/dist/react-window.js

@@ -1,6 +1,6 @@
-import { jsx as X } from "react/jsx-runtime";
-import { useState as B, useLayoutEffect as _, useEffect as C, useMemo as $, useRef as N, useCallback as D, memo as se, useImperativeHandle as re, createElement as Y } from "react";
-function ue(e) {
+import { jsx as _ } from "react/jsx-runtime";
+import { useState as j, useLayoutEffect as ee, useEffect as te, useMemo as H, useRef as K, useCallback as N, memo as ie, useImperativeHandle as le, createElement as P } from "react";
+function pe(e) {
   let t = e;
   for (; t; ) {
     if (t.dir)
@@ -9,14 +9,14 @@ function ue(e) {
   }
   return !1;
 }
-function de(e, t) {
-  const [s, r] = B(t === "rtl");
-  return _(() => {
-    e && (t || r(ue(e)));
+function xe(e, t) {
+  const [s, r] = j(t === "rtl");
+  return ee(() => {
+    e && (t || r(pe(e)));
   }, [t, e]), s;
 }
-const q = typeof window < "u" ? _ : C;
-function ee(e) {
+const J = typeof window < "u" ? ee : te;
+function ne(e) {
   if (e !== void 0)
     switch (typeof e) {
       case "number":
@@ -28,91 +28,101 @@ function ee(e) {
       }
     }
 }
-function ae({
+function ge({
   box: e,
   defaultHeight: t,
   defaultWidth: s,
   disabled: r,
   element: o,
-  mode: i,
+  mode: n,
   style: l
 }) {
-  const { styleHeight: c, styleWidth: n } = $(
+  const { styleHeight: c, styleWidth: i } = H(
     () => ({
-      styleHeight: ee(l?.height),
-      styleWidth: ee(l?.width)
+      styleHeight: ne(l?.height),
+      styleWidth: ne(l?.width)
     }),
     [l?.height, l?.width]
-  ), [f, g] = B({
+  ), [f, d] = j({
     height: t,
     width: s
-  }), T = r || i === "only-height" && c !== void 0 || i === "only-width" && n !== void 0 || c !== void 0 && n !== void 0;
-  return q(() => {
-    if (o === null || T)
+  }), p = r || n === "only-height" && c !== void 0 || n === "only-width" && i !== void 0 || c !== void 0 && i !== void 0;
+  return J(() => {
+    if (o === null || p)
       return;
-    const S = new ResizeObserver((b) => {
-      for (const y of b) {
-        const { contentRect: x, target: z } = y;
-        o === z && g((v) => v.height === x.height && v.width === x.width ? v : {
-          height: x.height,
-          width: x.width
+    const T = new ResizeObserver((w) => {
+      for (const V of w) {
+        const { contentRect: O, target: g } = V;
+        o === g && d((b) => b.height === O.height && b.width === O.width ? b : {
+          height: O.height,
+          width: O.width
         });
       }
     });
-    return S.observe(o, { box: e }), () => {
-      S?.unobserve(o);
+    return T.observe(o, { box: e }), () => {
+      T?.unobserve(o);
     };
-  }, [e, T, o, c, n]), $(
+  }, [e, p, o, c, i]), H(
     () => ({
       height: c ?? f.height,
-      width: n ?? f.width
+      width: i ?? f.width
     }),
-    [f, c, n]
+    [f, c, i]
   );
 }
-function he(e) {
-  const t = N(() => {
+function Ie(e) {
+  const t = K(() => {
     throw new Error("Cannot call an event handler while rendering.");
   });
-  return q(() => {
+  return J(() => {
     t.current = e;
-  }, [e]), D((s) => t.current?.(s), [t]);
+  }, [e]), N((s) => t.current?.(s), [t]);
 }
-let j = null;
-function ge(e = !1) {
-  if (j === null || e) {
+let G = null;
+function ve(e = !1) {
+  if (G === null || e) {
     const t = document.createElement("div"), s = t.style;
     s.width = "50px", s.height = "50px", s.overflow = "scroll", s.direction = "rtl";
     const r = document.createElement("div"), o = r.style;
-    return o.width = "100px", o.height = "100px", t.appendChild(r), document.body.appendChild(t), t.scrollLeft > 0 ? j = "positive-descending" : (t.scrollLeft = 1, t.scrollLeft === 0 ? j = "negative" : j = "positive-ascending"), document.body.removeChild(t), j;
+    return o.width = "100px", o.height = "100px", t.appendChild(r), document.body.appendChild(t), t.scrollLeft > 0 ? G = "positive-descending" : (t.scrollLeft = 1, t.scrollLeft === 0 ? G = "negative" : G = "positive-ascending"), document.body.removeChild(t), G;
   }
-  return j;
+  return G;
 }
-function J({
+function X({
   containerElement: e,
   direction: t,
   isRtl: s,
   scrollOffset: r
 }) {
   if (t === "horizontal" && s)
-    switch (ge()) {
+    switch (ve()) {
       case "negative":
         return -r;
       case "positive-descending": {
         if (e) {
-          const { clientWidth: o, scrollLeft: i, scrollWidth: l } = e;
-          return l - o - i;
+          const { clientWidth: o, scrollLeft: n, scrollWidth: l } = e;
+          return l - o - n;
         }
         break;
       }
     }
   return r;
 }
-function A(e, t = "Assertion error") {
+function B(e, t = "Assertion error") {
   if (!e)
     throw console.error(t), Error(t);
 }
-function oe({
+function Y(e, t) {
+  if (e === t)
+    return !0;
+  if (!!e != !!t || (B(e !== void 0), B(t !== void 0), Object.keys(e).length !== Object.keys(t).length))
+    return !1;
+  for (const s in e)
+    if (!Object.is(t[s], e[s]))
+      return !1;
+  return !0;
+}
+function ce({
   cachedBounds: e,
   itemCount: t,
   itemSize: s
@@ -125,67 +135,72 @@ function oe({
     const r = e.get(
       e.size === 0 ? 0 : e.size - 1
     );
-    A(r !== void 0, "Unexpected bounds cache miss");
+    B(r !== void 0, "Unexpected bounds cache miss");
     const o = (r.scrollOffset + r.size) / e.size;
     return t * o;
   }
 }
-function pe({
+function be({
   align: e,
   cachedBounds: t,
   index: s,
   itemCount: r,
   itemSize: o,
-  containerScrollOffset: i,
+  containerScrollOffset: n,
   containerSize: l
 }) {
-  const c = oe({
+  const c = ce({
     cachedBounds: t,
     itemCount: r,
     itemSize: o
-  }), n = t.get(s), f = Math.max(
+  }), i = t.get(s), f = Math.max(
     0,
-    Math.min(c - l, n.scrollOffset)
-  ), g = Math.max(
+    Math.min(c - l, i.scrollOffset)
+  ), d = Math.max(
     0,
-    n.scrollOffset - l + n.size
+    i.scrollOffset - l + i.size
   );
-  switch (e === "smart" && (i >= g && i <= f ? e = "auto" : e = "center"), e) {
+  switch (e === "smart" && (n >= d && n <= f ? e = "auto" : e = "center"), e) {
     case "start":
       return f;
     case "end":
-      return g;
+      return d;
     case "center":
-      return n.scrollOffset <= l / 2 ? 0 : n.scrollOffset + n.size / 2 >= c - l / 2 ? c - l : n.scrollOffset + n.size / 2 - l / 2;
+      return i.scrollOffset <= l / 2 ? 0 : i.scrollOffset + i.size / 2 >= c - l / 2 ? c - l : i.scrollOffset + i.size / 2 - l / 2;
     case "auto":
     default:
-      return i >= g && i <= f ? i : i < g ? g : f;
+      return n >= d && n <= f ? n : n < d ? d : f;
   }
 }
-function te({
+function oe({
   cachedBounds: e,
   containerScrollOffset: t,
   containerSize: s,
   itemCount: r,
   overscanCount: o
 }) {
-  const i = r - 1;
-  let l = 0, c = -1, n = 0;
-  for (; n < i; ) {
-    const f = e.get(n);
-    if (f.scrollOffset + f.size > t)
+  const n = r - 1;
+  let l = 0, c = -1, i = 0, f = -1, d = 0;
+  for (; d < n; ) {
+    const p = e.get(d);
+    if (p.scrollOffset + p.size > t)
       break;
-    n++;
+    d++;
   }
-  for (l = n, l = Math.max(0, l - o); n < i; ) {
-    const f = e.get(n);
-    if (f.scrollOffset + f.size >= t + s)
+  for (l = d, i = Math.max(0, l - o); d < n; ) {
+    const p = e.get(d);
+    if (p.scrollOffset + p.size >= t + s)
       break;
-    n++;
+    d++;
   }
-  return c = Math.min(i, n), c = Math.min(r - 1, c + o), l < 0 ? [0, -1] : [l, c];
+  return c = Math.min(n, d), f = Math.min(r - 1, c + o), l < 0 && (l = 0, c = -1, i = 0, f = -1), {
+    startIndexVisible: l,
+    stopIndexVisible: c,
+    startIndexOverscan: i,
+    stopIndexOverscan: f
+  };
 }
-function xe({
+function me({
   itemCount: e,
   itemProps: t,
   itemSize: s
@@ -193,7 +208,7 @@ function xe({
   const r = /* @__PURE__ */ new Map();
   return {
     get(o) {
-      for (A(o < e, `Invalid index ${o}`); r.size - 1 < o; ) {
+      for (B(o < e, `Invalid index ${o}`); r.size - 1 < o; ) {
         const l = r.size;
         let c;
         switch (typeof s) {
@@ -212,37 +227,37 @@ function xe({
             scrollOffset: 0
           });
         else {
-          const n = r.get(l - 1);
-          A(
-            n !== void 0,
+          const i = r.get(l - 1);
+          B(
+            i !== void 0,
             `Unexpected bounds cache miss for index ${o}`
           ), r.set(l, {
-            scrollOffset: n.scrollOffset + n.size,
+            scrollOffset: i.scrollOffset + i.size,
             size: c
           });
         }
       }
-      const i = r.get(o);
-      return A(
-        i !== void 0,
+      const n = r.get(o);
+      return B(
+        n !== void 0,
         `Unexpected bounds cache miss for index ${o}`
-      ), i;
+      ), n;
     },
-    set(o, i) {
-      r.set(o, i);
+    set(o, n) {
+      r.set(o, n);
     },
     get size() {
       return r.size;
     }
   };
 }
-function me({
+function we({
   itemCount: e,
   itemProps: t,
   itemSize: s
 }) {
-  return $(
-    () => xe({
+  return H(
+    () => me({
       itemCount: e,
       itemProps: t,
       itemSize: s
@@ -250,17 +265,17 @@ function me({
     [e, t, s]
   );
 }
-function ve({
+function Oe({
   containerSize: e,
   itemSize: t
 }) {
   let s;
   switch (typeof t) {
     case "string": {
-      A(
+      B(
         t.endsWith("%"),
         `Invalid item size: "${t}"; string values must be percentages (e.g. "100%")`
-      ), A(
+      ), B(
         e !== void 0,
         "Container size must be defined if a percentage item size is specified"
       ), s = e * parseInt(t) / 100;
@@ -273,371 +288,391 @@ function ve({
   }
   return s;
 }
-function Z({
+function C({
   containerElement: e,
   containerStyle: t,
   defaultContainerSize: s = 0,
   direction: r,
   isRtl: o = !1,
-  itemCount: i,
+  itemCount: n,
   itemProps: l,
   itemSize: c,
-  onResize: n,
+  onResize: i,
   overscanCount: f
 }) {
-  const [g, T] = B([0, -1]), [S, b] = [
-    Math.min(i - 1, g[0]),
-    Math.min(i - 1, g[1])
-  ], { height: y = s, width: x = s } = ae({
+  const [d, p] = j({
+    startIndexVisible: 0,
+    startIndexOverscan: 0,
+    stopIndexVisible: -1,
+    stopIndexOverscan: -1
+  }), {
+    startIndexVisible: T,
+    startIndexOverscan: w,
+    stopIndexVisible: V,
+    stopIndexOverscan: O
+  } = {
+    startIndexVisible: Math.min(n - 1, d.startIndexVisible),
+    startIndexOverscan: Math.min(n - 1, d.startIndexOverscan),
+    stopIndexVisible: Math.min(n - 1, d.stopIndexVisible),
+    stopIndexOverscan: Math.min(n - 1, d.stopIndexOverscan)
+  }, { height: g = s, width: b = s } = ge({
     defaultHeight: r === "vertical" ? s : void 0,
     defaultWidth: r === "horizontal" ? s : void 0,
     element: e,
     mode: r === "vertical" ? "only-height" : "only-width",
     style: t
-  }), z = N({
+  }), k = K({
     height: 0,
     width: 0
-  }), v = r === "vertical" ? y : x, I = ve({ containerSize: v, itemSize: c });
-  _(() => {
-    if (typeof n == "function") {
-      const d = z.current;
-      (d.height !== y || d.width !== x) && (n({ height: y, width: x }, { ...d }), d.height = y, d.width = x);
+  }), y = r === "vertical" ? g : b, a = Oe({ containerSize: y, itemSize: c });
+  ee(() => {
+    if (typeof i == "function") {
+      const u = k.current;
+      (u.height !== g || u.width !== b) && (i({ height: g, width: b }, { ...u }), u.height = g, u.width = b);
     }
-  }, [y, n, x]);
-  const w = me({
-    itemCount: i,
+  }, [g, i, b]);
+  const x = we({
+    itemCount: n,
     itemProps: l,
-    itemSize: I
-  }), u = D(
-    (d) => w.get(d),
-    [w]
-  ), L = D(
-    () => oe({
-      cachedBounds: w,
-      itemCount: i,
-      itemSize: I
+    itemSize: a
+  }), z = N(
+    (u) => x.get(u),
+    [x]
+  ), S = N(
+    () => ce({
+      cachedBounds: x,
+      itemCount: n,
+      itemSize: a
     }),
-    [w, i, I]
-  ), m = D(
-    (d) => {
-      const a = J({
+    [x, n, a]
+  ), M = N(
+    (u) => {
+      const I = X({
         containerElement: e,
         direction: r,
         isRtl: o,
-        scrollOffset: d
+        scrollOffset: u
       });
-      return te({
-        cachedBounds: w,
-        containerScrollOffset: a,
-        containerSize: v,
-        itemCount: i,
+      return oe({
+        cachedBounds: x,
+        containerScrollOffset: I,
+        containerSize: y,
+        itemCount: n,
         overscanCount: f
       });
     },
     [
-      w,
+      x,
       e,
-      v,
+      y,
       r,
       o,
-      i,
+      n,
       f
     ]
   );
-  q(() => {
-    const d = (r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0;
-    T(m(d));
-  }, [e, r, m]), q(() => {
+  J(() => {
+    const u = (r === "vertical" ? e?.scrollTop : e?.scrollLeft) ?? 0;
+    p(M(u));
+  }, [e, r, M]), J(() => {
     if (!e)
       return;
-    const d = () => {
-      T((a) => {
-        const { scrollLeft: p, scrollTop: h } = e, k = J({
+    const u = () => {
+      p((I) => {
+        const { scrollLeft: h, scrollTop: v } = e, E = X({
           containerElement: e,
           direction: r,
           isRtl: o,
-          scrollOffset: r === "vertical" ? h : p
-        }), G = te({
-          cachedBounds: w,
-          containerScrollOffset: k,
-          containerSize: v,
-          itemCount: i,
+          scrollOffset: r === "vertical" ? v : h
+        }), q = oe({
+          cachedBounds: x,
+          containerScrollOffset: E,
+          containerSize: y,
+          itemCount: n,
           overscanCount: f
         });
-        return G[0] === a[0] && G[1] === a[1] ? a : G;
+        return Y(q, I) ? I : q;
       });
     };
-    return e.addEventListener("scroll", d), () => {
-      e.removeEventListener("scroll", d);
+    return e.addEventListener("scroll", u), () => {
+      e.removeEventListener("scroll", u);
     };
   }, [
-    w,
+    x,
     e,
-    v,
+    y,
     r,
-    i,
+    n,
     f
   ]);
-  const H = he(
+  const L = Ie(
     ({
-      align: d = "auto",
-      containerScrollOffset: a,
-      index: p
+      align: u = "auto",
+      containerScrollOffset: I,
+      index: h
     }) => {
-      let h = pe({
-        align: d,
-        cachedBounds: w,
-        containerScrollOffset: a,
-        containerSize: v,
-        index: p,
-        itemCount: i,
-        itemSize: I
+      let v = be({
+        align: u,
+        cachedBounds: x,
+        containerScrollOffset: I,
+        containerSize: y,
+        index: h,
+        itemCount: n,
+        itemSize: a
       });
       if (e) {
-        if (h = J({
+        if (v = X({
           containerElement: e,
           direction: r,
           isRtl: o,
-          scrollOffset: h
+          scrollOffset: v
         }), typeof e.scrollTo != "function") {
-          const k = m(h);
-          (k[0] !== S || k[1] !== b) && T(k);
+          const E = M(v);
+          Y(d, E) || p(E);
         }
-        return h;
+        return v;
       }
     }
   );
   return {
-    getCellBounds: u,
-    getEstimatedSize: L,
-    scrollToIndex: H,
-    startIndex: S,
-    stopIndex: b
+    getCellBounds: z,
+    getEstimatedSize: S,
+    scrollToIndex: L,
+    startIndexOverscan: w,
+    startIndexVisible: T,
+    stopIndexOverscan: O,
+    stopIndexVisible: V
   };
 }
-function ie(e) {
-  return $(() => e, Object.values(e));
+function de(e) {
+  return H(() => e, Object.values(e));
 }
-function K(e, t) {
-  if (e === t)
-    return !0;
-  if (!!e != !!t || (A(e !== void 0), A(t !== void 0), Object.keys(e).length !== Object.keys(t).length))
-    return !1;
-  for (const s in e)
-    if (!Object.is(t[s], e[s]))
-      return !1;
-  return !0;
-}
-function ne(e, t) {
+function ae(e, t) {
   const {
     ariaAttributes: s,
     style: r,
     ...o
   } = e, {
-    ariaAttributes: i,
+    ariaAttributes: n,
     style: l,
     ...c
   } = t;
-  return K(s, i) && K(r, l) && K(o, c);
+  return Y(s, n) && Y(r, l) && Y(o, c);
 }
-function be({
+function Se({
   cellComponent: e,
   cellProps: t,
   children: s,
   className: r,
   columnCount: o,
-  columnWidth: i,
+  columnWidth: n,
   defaultHeight: l = 0,
   defaultWidth: c = 0,
-  dir: n,
+  dir: i,
   gridRef: f,
-  onCellsRendered: g,
-  onResize: T,
-  overscanCount: S = 3,
-  rowCount: b,
-  rowHeight: y,
-  style: x,
-  tagName: z = "div",
-  ...v
+  onCellsRendered: d,
+  onResize: p,
+  overscanCount: T = 3,
+  rowCount: w,
+  rowHeight: V,
+  style: O,
+  tagName: g = "div",
+  ...b
 }) {
-  const I = ie(t), w = $(
-    () => se(e, ne),
+  const k = de(t), y = H(
+    () => ie(e, ae),
     [e]
-  ), [u, L] = B(null), m = de(u, n), {
-    getCellBounds: H,
-    getEstimatedSize: d,
-    startIndex: a,
-    scrollToIndex: p,
-    stopIndex: h
-  } = Z({
-    containerElement: u,
+  ), [a, x] = j(null), z = xe(a, i), {
+    getCellBounds: S,
+    getEstimatedSize: M,
+    startIndexOverscan: L,
+    startIndexVisible: u,
+    scrollToIndex: I,
+    stopIndexOverscan: h,
+    stopIndexVisible: v
+  } = C({
+    containerElement: a,
     defaultContainerSize: c,
     direction: "horizontal",
-    isRtl: m,
+    isRtl: z,
     itemCount: o,
-    itemProps: I,
-    itemSize: i,
-    onResize: T,
-    overscanCount: S
+    itemProps: k,
+    itemSize: n,
+    onResize: p,
+    overscanCount: T
   }), {
-    getCellBounds: k,
-    getEstimatedSize: G,
-    startIndex: F,
-    scrollToIndex: P,
-    stopIndex: U
-  } = Z({
-    containerElement: u,
+    getCellBounds: E,
+    getEstimatedSize: q,
+    startIndexOverscan: F,
+    startIndexVisible: se,
+    scrollToIndex: Q,
+    stopIndexOverscan: U,
+    stopIndexVisible: re
+  } = C({
+    containerElement: a,
     defaultContainerSize: l,
     direction: "vertical",
-    itemCount: b,
-    itemProps: I,
-    itemSize: y,
-    onResize: T,
-    overscanCount: S
+    itemCount: w,
+    itemProps: k,
+    itemSize: V,
+    onResize: p,
+    overscanCount: T
   });
-  re(
+  le(
     f,
     () => ({
       get element() {
-        return u;
+        return a;
       },
       scrollToCell({
-        behavior: E = "auto",
-        columnAlign: O = "auto",
-        columnIndex: M,
-        rowAlign: R = "auto",
-        rowIndex: W
+        behavior: R = "auto",
+        columnAlign: m = "auto",
+        columnIndex: W,
+        rowAlign: A = "auto",
+        rowIndex: $
       }) {
-        const V = p({
-          align: O,
-          containerScrollOffset: u?.scrollLeft ?? 0,
-          index: M
-        }), fe = P({
-          align: R,
-          containerScrollOffset: u?.scrollTop ?? 0,
+        const D = I({
+          align: m,
+          containerScrollOffset: a?.scrollLeft ?? 0,
           index: W
+        }), he = Q({
+          align: A,
+          containerScrollOffset: a?.scrollTop ?? 0,
+          index: $
         });
-        typeof u?.scrollTo == "function" && u.scrollTo({
-          behavior: E,
-          left: V,
-          top: fe
+        typeof a?.scrollTo == "function" && a.scrollTo({
+          behavior: R,
+          left: D,
+          top: he
         });
       },
       scrollToColumn({
-        align: E = "auto",
-        behavior: O = "auto",
-        index: M
+        align: R = "auto",
+        behavior: m = "auto",
+        index: W
       }) {
-        const R = p({
-          align: E,
-          containerScrollOffset: u?.scrollLeft ?? 0,
-          index: M
+        const A = I({
+          align: R,
+          containerScrollOffset: a?.scrollLeft ?? 0,
+          index: W
         });
-        typeof u?.scrollTo == "function" && u.scrollTo({
-          behavior: O,
-          left: R
+        typeof a?.scrollTo == "function" && a.scrollTo({
+          behavior: m,
+          left: A
         });
       },
       scrollToRow({
-        align: E = "auto",
-        behavior: O = "auto",
-        index: M
+        align: R = "auto",
+        behavior: m = "auto",
+        index: W
       }) {
-        const R = P({
-          align: E,
-          containerScrollOffset: u?.scrollTop ?? 0,
-          index: M
+        const A = Q({
+          align: R,
+          containerScrollOffset: a?.scrollTop ?? 0,
+          index: W
         });
-        typeof u?.scrollTo == "function" && u.scrollTo({
-          behavior: O,
-          top: R
+        typeof a?.scrollTo == "function" && a.scrollTo({
+          behavior: m,
+          top: A
         });
       }
     }),
-    [u, p, P]
-  ), C(() => {
-    a >= 0 && h >= 0 && F >= 0 && U >= 0 && g && g({
-      columnStartIndex: a,
-      columnStopIndex: h,
-      rowStartIndex: F,
-      rowStopIndex: U
-    });
+    [a, I, Q]
+  ), te(() => {
+    L >= 0 && h >= 0 && F >= 0 && U >= 0 && d && d(
+      {
+        columnStartIndex: u,
+        columnStopIndex: v,
+        rowStartIndex: se,
+        rowStopIndex: re
+      },
+      {
+        columnStartIndex: L,
+        columnStopIndex: h,
+        rowStartIndex: F,
+        rowStopIndex: U
+      }
+    );
   }, [
-    g,
-    a,
+    d,
+    L,
+    u,
     h,
+    v,
     F,
-    U
+    se,
+    U,
+    re
   ]);
-  const le = $(() => {
-    const E = [];
-    if (o > 0 && b > 0)
-      for (let O = F; O <= U; O++) {
-        const M = k(O), R = [];
-        for (let W = a; W <= h; W++) {
-          const V = H(W);
-          R.push(
-            /* @__PURE__ */ Y(
-              w,
+  const fe = H(() => {
+    const R = [];
+    if (o > 0 && w > 0)
+      for (let m = F; m <= U; m++) {
+        const W = E(m), A = [];
+        for (let $ = L; $ <= h; $++) {
+          const D = S($);
+          A.push(
+            /* @__PURE__ */ P(
+              y,
               {
-                ...I,
+                ...k,
                 ariaAttributes: {
-                  "aria-colindex": W + 1,
+                  "aria-colindex": $ + 1,
                   role: "gridcell"
                 },
-                columnIndex: W,
-                key: W,
-                rowIndex: O,
+                columnIndex: $,
+                key: $,
+                rowIndex: m,
                 style: {
                   position: "absolute",
-                  left: m ? void 0 : 0,
-                  right: m ? 0 : void 0,
-                  transform: `translate(${m ? -V.scrollOffset : V.scrollOffset}px, ${M.scrollOffset}px)`,
-                  height: b > 1 ? M.size : "100%",
-                  width: V.size
+                  left: z ? void 0 : 0,
+                  right: z ? 0 : void 0,
+                  transform: `translate(${z ? -D.scrollOffset : D.scrollOffset}px, ${W.scrollOffset}px)`,
+                  height: w > 1 ? W.size : "100%",
+                  width: D.size
                 }
               }
             )
           );
         }
-        E.push(
-          /* @__PURE__ */ X("div", { role: "row", "aria-rowindex": O + 1, children: R }, O)
+        R.push(
+          /* @__PURE__ */ _("div", { role: "row", "aria-rowindex": m + 1, children: A }, m)
         );
       }
-    return E;
+    return R;
   }, [
-    w,
-    I,
+    y,
+    k,
     o,
-    a,
+    L,
     h,
-    H,
-    k,
-    m,
-    b,
+    S,
+    E,
+    z,
+    w,
     F,
     U
-  ]), ce = /* @__PURE__ */ X(
+  ]), ue = /* @__PURE__ */ _(
     "div",
     {
       "aria-hidden": !0,
       style: {
-        height: G(),
-        width: d(),
+        height: q(),
+        width: M(),
         zIndex: -1
       }
     }
   );
-  return Y(
-    z,
+  return P(
+    g,
     {
       "aria-colcount": o,
-      "aria-rowcount": b,
+      "aria-rowcount": w,
       role: "grid",
-      ...v,
+      ...b,
       className: r,
-      dir: n,
-      ref: L,
+      dir: i,
+      ref: x,
       style: {
         position: "relative",
         width: "100%",
@@ -646,155 +681,176 @@ function be({
         maxWidth: "100%",
         flexGrow: 1,
         overflow: "auto",
-        ...x
+        ...O
       }
     },
-    le,
+    fe,
     s,
-    ce
+    ue
   );
 }
-const ze = B, Ie = N;
-function Oe({
+const Te = j, Ve = K;
+function ke({
   children: e,
   className: t,
   defaultHeight: s = 0,
   listRef: r,
   onResize: o,
-  onRowsRendered: i,
+  onRowsRendered: n,
   overscanCount: l = 3,
   rowComponent: c,
-  rowCount: n,
+  rowCount: i,
   rowHeight: f,
-  rowProps: g,
-  tagName: T = "div",
-  style: S,
-  ...b
+  rowProps: d,
+  tagName: p = "div",
+  style: T,
+  ...w
 }) {
-  const y = ie(g), x = $(
-    () => se(c, ne),
+  const V = de(d), O = H(
+    () => ie(c, ae),
     [c]
-  ), [z, v] = B(null), {
-    getCellBounds: I,
-    getEstimatedSize: w,
-    scrollToIndex: u,
-    startIndex: L,
-    stopIndex: m
-  } = Z({
-    containerElement: z,
+  ), [g, b] = j(null), {
+    getCellBounds: k,
+    getEstimatedSize: y,
+    scrollToIndex: a,
+    startIndexOverscan: x,
+    startIndexVisible: z,
+    stopIndexOverscan: S,
+    stopIndexVisible: M
+  } = C({
+    containerElement: g,
     defaultContainerSize: s,
     direction: "vertical",
-    itemCount: n,
-    itemProps: y,
+    itemCount: i,
+    itemProps: V,
     itemSize: f,
     onResize: o,
     overscanCount: l
   });
-  re(
+  le(
     r,
     () => ({
       get element() {
-        return z;
+        return g;
       },
       scrollToRow({
-        align: a = "auto",
-        behavior: p = "auto",
-        index: h
+        align: I = "auto",
+        behavior: h = "auto",
+        index: v
       }) {
-        const k = u({
-          align: a,
-          containerScrollOffset: z?.scrollTop ?? 0,
-          index: h
+        const E = a({
+          align: I,
+          containerScrollOffset: g?.scrollTop ?? 0,
+          index: v
         });
-        typeof z?.scrollTo == "function" && z.scrollTo({
-          behavior: p,
-          top: k
+        typeof g?.scrollTo == "function" && g.scrollTo({
+          behavior: h,
+          top: E
         });
       }
     }),
-    [z, u]
-  ), C(() => {
-    L >= 0 && m >= 0 && i && i({
-      startIndex: L,
-      stopIndex: m
-    });
-  }, [i, L, m]);
-  const H = $(() => {
-    const a = [];
-    if (n > 0)
-      for (let p = L; p <= m; p++) {
-        const h = I(p);
-        a.push(
-          /* @__PURE__ */ Y(
-            x,
+    [g, a]
+  ), te(() => {
+    x >= 0 && S >= 0 && n && n(
+      {
+        startIndex: z,
+        stopIndex: M
+      },
+      {
+        startIndex: x,
+        stopIndex: S
+      }
+    );
+  }, [
+    n,
+    x,
+    z,
+    S,
+    M
+  ]);
+  const L = H(() => {
+    const I = [];
+    if (i > 0)
+      for (let h = x; h <= S; h++) {
+        const v = k(h);
+        I.push(
+          /* @__PURE__ */ P(
+            O,
             {
-              ...y,
+              ...V,
               ariaAttributes: {
-                "aria-posinset": p + 1,
-                "aria-setsize": n,
+                "aria-posinset": h + 1,
+                "aria-setsize": i,
                 role: "listitem"
               },
-              key: p,
-              index: p,
+              key: h,
+              index: h,
               style: {
                 position: "absolute",
                 left: 0,
-                transform: `translateY(${h.scrollOffset}px)`,
-                height: h.size,
+                transform: `translateY(${v.scrollOffset}px)`,
+                height: v.size,
                 width: "100%"
               }
             }
           )
         );
       }
-    return a;
-  }, [x, I, n, y, L, m]), d = /* @__PURE__ */ X(
+    return I;
+  }, [
+    O,
+    k,
+    i,
+    V,
+    x,
+    S
+  ]), u = /* @__PURE__ */ _(
     "div",
     {
       "aria-hidden": !0,
       style: {
-        height: w(),
+        height: y(),
         width: "100%",
         zIndex: -1
       }
     }
   );
-  return Y(
-    T,
+  return P(
+    p,
     {
       role: "list",
-      ...b,
+      ...w,
       className: t,
-      ref: v,
+      ref: b,
       style: {
         position: "relative",
         maxHeight: "100%",
         flexGrow: 1,
         overflowY: "auto",
-        ...S
+        ...T
       }
     },
-    H,
+    L,
     e,
-    d
+    u
   );
 }
-const Te = B, Se = N;
-let Q = -1;
-function ke(e = !1) {
-  if (Q === -1 || e) {
+const Le = j, Ee = K;
+let Z = -1;
+function Me(e = !1) {
+  if (Z === -1 || e) {
     const t = document.createElement("div"), s = t.style;
-    s.width = "50px", s.height = "50px", s.overflow = "scroll", document.body.appendChild(t), Q = t.offsetWidth - t.clientWidth, document.body.removeChild(t);
+    s.width = "50px", s.height = "50px", s.overflow = "scroll", document.body.appendChild(t), Z = t.offsetWidth - t.clientWidth, document.body.removeChild(t);
   }
-  return Q;
+  return Z;
 }
 export {
-  be as Grid,
-  Oe as List,
-  ke as getScrollbarSize,
-  ze as useGridCallbackRef,
-  Ie as useGridRef,
-  Te as useListCallbackRef,
-  Se as useListRef
+  Se as Grid,
+  ke as List,
+  Me as getScrollbarSize,
+  Te as useGridCallbackRef,
+  Ve as useGridRef,
+  Le as useListCallbackRef,
+  Ee as useListRef
 };
 //# sourceMappingURL=react-window.js.map