koval-ui/dist/src/lib/VirtualList/VirtualList.js

React components collection with minimalistic design. Supports theming, layout, and input validation.

"use client";
import { jsx as e } from "react/jsx-runtime";
import { forwardRef as N, useMemo as f, Children as S } from "react";
import V from "classnames";
import { useVirtualizer as g } from "@tanstack/react-virtual";
import { useLocalTheme as y } from "css-vars-hook";
import { useLinkRefs as A } from "../../internal/hooks/useLinkRefs.js";
import i from "./VirtualList.module.css.js";
const C = N(
  ({
    children: s,
    className: p,
    averageItemHeight: u,
    height: o,
    width: a,
    variableItemSize: h = !1,
    ...v
  }, x) => {
    const m = f(() => S.toArray(s), [s]), { ref: n, LocalRoot: z } = y();
    A(x, n);
    const t = g({
      count: m.length,
      getScrollElement: () => n?.current,
      estimateSize: () => u,
      overscan: 6
    }), l = t.getVirtualItems(), c = t.getTotalSize(), d = l[0]?.start ?? 0, L = f(
      () => ({
        width: a,
        height: o,
        "total-size": c,
        "first-item-start-position": d
      }),
      [d, o, c, a]
    );
    return /* @__PURE__ */ e(
      z,
      {
        ...v,
        className: V(i.virtualList, p),
        theme: L,
        children: /* @__PURE__ */ e("div", { className: i.heightContainer, children: /* @__PURE__ */ e("div", { className: i.viewport, children: l.map((r) => /* @__PURE__ */ e(
          "div",
          {
            ref: h ? t.measureElement : void 0,
            "data-index": r.index,
            children: m[r.index]
          },
          r.index
        )) }) })
      }
    );
  }
);
C.displayName = "VirtualList";
export {
  C as VirtualList
};
//# sourceMappingURL=VirtualList.js.map