koval-ui
Version:
React components collection with minimalistic design. Supports theming, layout, and input validation.
3 lines (2 loc) • 1.23 kB
JavaScript
"use client";"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),s=require("react"),z=require("classnames"),v=require("@tanstack/react-virtual"),y=require("css-vars-hook"),N=require("../../internal/hooks/useLinkRefs.cjs"),a=require("./VirtualList.module.css.cjs"),x=s.forwardRef(({children:n,className:L,averageItemHeight:V,height:o,width:l,variableItemSize:h=!1,...q},S)=>{var f;const c=s.useMemo(()=>s.Children.toArray(n),[n]),{ref:e,LocalRoot:g}=y.useLocalTheme();N.useLinkRefs(S,e);const i=v.useVirtualizer({count:c.length,getScrollElement:()=>e==null?void 0:e.current,estimateSize:()=>V,overscan:6}),u=i.getVirtualItems(),m=i.getTotalSize(),d=((f=u[0])==null?void 0:f.start)??0,j=s.useMemo(()=>({width:l,height:o,"total-size":m,"first-item-start-position":d}),[d,o,m,l]);return t.jsx(g,{...q,className:z(a.default.virtualList,L),theme:j,children:t.jsx("div",{className:a.default.heightContainer,children:t.jsx("div",{className:a.default.viewport,children:u.map(r=>t.jsx("div",{ref:h?i.measureElement:void 0,"data-index":r.index,children:c[r.index]},r.index))})})})});x.displayName="VirtualList";exports.VirtualList=x;
//# sourceMappingURL=VirtualList.cjs.map