react-window 2.1.1 → 2.2.0-alpha.0

package/dist/react-window.js

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