koval-ui/dist/src/lib/VirtualList/VirtualList.cjs.map

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

{"version":3,"file":"VirtualList.cjs","sources":["../../../../src/lib/VirtualList/VirtualList.tsx"],"sourcesContent":["import type {ReactNode, RefObject} from 'react';\nimport {Children, useMemo} from 'react';\nimport {forwardRef} from 'react';\nimport classNames from 'classnames';\nimport {useVirtualizer} from '@tanstack/react-virtual';\nimport {useLocalTheme} from 'css-vars-hook';\n\nimport type {DataAttributes, LibraryProps} from '@/internal/LibraryAPI';\nimport {useLinkRefs} from '@/internal/hooks/useLinkRefs.ts';\n\nimport classes from './VirtualList.module.css';\n\nexport type Props = DataAttributes &\n    LibraryProps & {\n        /**\n         * Provide average item height in pixels.\n         */\n        averageItemHeight: number;\n        /** Set the total height of the list in pixels */\n        height: number;\n        /** Set the total width of the list in pixels */\n        width: number;\n        /**\n         * Enable to support items with different heights.\n         * The actual height of each item is checked during the render, so items never cut.\n         */\n        variableItemSize?: boolean;\n        children: ReactNode[];\n    };\n\nexport const VirtualList = forwardRef<HTMLDivElement, Props>(\n    (\n        {\n            children,\n            className,\n            averageItemHeight,\n            height,\n            width,\n            variableItemSize = false,\n            ...nativeProps\n        },\n        ref\n    ) => {\n        const childrenArray = useMemo(() => Children.toArray(children), [children]);\n        const {ref: providerRef, LocalRoot} = useLocalTheme();\n        useLinkRefs<HTMLDivElement>(ref, providerRef as RefObject<HTMLDivElement>);\n        const rowVirtualizer = useVirtualizer({\n            count: childrenArray.length,\n            getScrollElement: () => providerRef?.current,\n            estimateSize: () => averageItemHeight,\n            overscan: 6,\n        });\n\n        const items = rowVirtualizer.getVirtualItems();\n\n        const totalSize = rowVirtualizer.getTotalSize();\n\n        const firstItemStartPosition = items[0]?.start ?? 0;\n\n        const theme = useMemo(\n            () => ({\n                width,\n                height,\n                'total-size': totalSize,\n                'first-item-start-position': firstItemStartPosition,\n            }),\n            [firstItemStartPosition, height, totalSize, width]\n        );\n\n        return (\n            <LocalRoot\n                {...nativeProps}\n                className={classNames(classes.virtualList, className)}\n                theme={theme}>\n                <div className={classes.heightContainer}>\n                    <div className={classes.viewport}>\n                        {items.map(virtualRow => (\n                            <div\n                                ref={variableItemSize ? rowVirtualizer.measureElement : undefined}\n                                key={virtualRow.index}\n                                data-index={virtualRow.index}>\n                                {childrenArray[virtualRow.index]}\n                            </div>\n                        ))}\n                    </div>\n                </div>\n            </LocalRoot>\n        );\n    }\n);\n\nVirtualList.displayName = 'VirtualList';\n"],"names":["VirtualList","forwardRef","children","className","averageItemHeight","height","width","variableItemSize","nativeProps","ref","childrenArray","useMemo","Children","providerRef","LocalRoot","useLocalTheme","useLinkRefs","rowVirtualizer","useVirtualizer","items","totalSize","firstItemStartPosition","theme","jsx","classNames","classes","virtualRow"],"mappings":"yUA8BaA,EAAcC,EAAAA,WACvB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAC,EAAmB,GACnB,GAAGC,CAAA,EAEPC,IACC,CACD,MAAMC,EAAgBC,EAAAA,QAAQ,IAAMC,EAAAA,SAAS,QAAQV,CAAQ,EAAG,CAACA,CAAQ,CAAC,EACpE,CAAC,IAAKW,EAAa,UAAAC,CAAA,EAAaC,EAAAA,cAAA,EACtCC,EAAAA,YAA4BP,EAAKI,CAAwC,EACzE,MAAMI,EAAiBC,EAAAA,eAAe,CAClC,MAAOR,EAAc,OACrB,iBAAkB,IAAMG,GAAa,QACrC,aAAc,IAAMT,EACpB,SAAU,CAAA,CACb,EAEKe,EAAQF,EAAe,gBAAA,EAEvBG,EAAYH,EAAe,aAAA,EAE3BI,EAAyBF,EAAM,CAAC,GAAG,OAAS,EAE5CG,EAAQX,EAAAA,QACV,KAAO,CACH,MAAAL,EACA,OAAAD,EACA,aAAce,EACd,4BAA6BC,CAAA,GAEjC,CAACA,EAAwBhB,EAAQe,EAAWd,CAAK,CAAA,EAGrD,OACIiB,EAAAA,IAACT,EAAA,CACI,GAAGN,EACJ,UAAWgB,EAAWC,UAAQ,YAAatB,CAAS,EACpD,MAAAmB,EACA,SAAAC,EAAAA,IAAC,MAAA,CAAI,UAAWE,UAAQ,gBACpB,SAAAF,EAAAA,IAAC,MAAA,CAAI,UAAWE,EAAAA,QAAQ,SACnB,SAAAN,EAAM,IAAIO,GACPH,EAAAA,IAAC,MAAA,CACG,IAAKhB,EAAmBU,EAAe,eAAiB,OAExD,aAAYS,EAAW,MACtB,SAAAhB,EAAcgB,EAAW,KAAK,CAAA,EAF1BA,EAAW,KAAA,CAIvB,EACL,CAAA,CACJ,CAAA,CAAA,CAGZ,CACJ,EAEA1B,EAAY,YAAc"}