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","_a","theme","jsx","classNames","classes","virtualRow"],"mappings":"yUA8BaA,EAAcC,EAAA,WACvB,CACI,CACI,SAAAC,EACA,UAAAC,EACA,kBAAAC,EACA,OAAAC,EACA,MAAAC,EACA,iBAAAC,EAAmB,GACnB,GAAGC,GAEPC,IACC,OACK,MAAAC,EAAgBC,UAAQ,IAAMC,EAAA,SAAS,QAAQV,CAAQ,EAAG,CAACA,CAAQ,CAAC,EACpE,CAAC,IAAKW,EAAa,UAAAC,CAAA,EAAaC,EAAAA,cAAc,EACpDC,EAAA,YAA4BP,EAAKI,CAAwC,EACzE,MAAMI,EAAiBC,EAAAA,eAAe,CAClC,MAAOR,EAAc,OACrB,iBAAkB,IAAMG,GAAA,YAAAA,EAAa,QACrC,aAAc,IAAMT,EACpB,SAAU,CAAA,CACb,EAEKe,EAAQF,EAAe,gBAAgB,EAEvCG,EAAYH,EAAe,aAAa,EAExCI,IAAyBC,EAAAH,EAAM,CAAC,IAAP,YAAAG,EAAU,QAAS,EAE5CC,EAAQZ,EAAA,QACV,KAAO,CACH,MAAAL,EACA,OAAAD,EACA,aAAce,EACd,4BAA6BC,CAAA,GAEjC,CAACA,EAAwBhB,EAAQe,EAAWd,CAAK,CACrD,EAGI,OAAAkB,EAAA,IAACV,EAAA,CACI,GAAGN,EACJ,UAAWiB,EAAWC,UAAQ,YAAavB,CAAS,EACpD,MAAAoB,EACA,SAACC,EAAA,IAAA,MAAA,CAAI,UAAWE,UAAQ,gBACpB,SAAAF,EAAA,IAAC,MAAI,CAAA,UAAWE,EAAQ,QAAA,SACnB,SAAMP,EAAA,IACHQ,GAAAH,EAAA,IAAC,MAAA,CACG,IAAKjB,EAAmBU,EAAe,eAAiB,OAExD,aAAYU,EAAW,MACtB,SAAAjB,EAAciB,EAAW,KAAK,CAAA,EAF1BA,EAAW,KAIvB,CAAA,CACL,CAAA,CACJ,CAAA,CAAA,CACJ,CAAA,CAGZ,EAEA3B,EAAY,YAAc"}