react-window 2.0.2 → 2.1.0-alpha.0

package/dist/react-window.js

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