react-window 1.8.11 → 2.0.0-alpha.1

package/dist/react-window.js

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