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