@effect-tui/react 0.6.0 → 0.6.1

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@effect-tui/react",
-	"version": "0.6.0",
+	"version": "0.6.1",
 	"description": "React bindings for @effect-tui/core",
 	"type": "module",
 	"files": [
@@ -83,7 +83,7 @@
 		"prepublishOnly": "bun run typecheck && bun run build"
 	},
 	"dependencies": {
-		"@effect-tui/core": "^0.6.0",
+		"@effect-tui/core": "^0.6.1",
 		"@effect/platform": "^0.94.0",
 		"@effect/platform-bun": "^0.87.0",
 		"@effect/rpc": "^0.73.0",

package/src/components/ListView.tsx

@@ -1,4 +1,4 @@
-// ListView.tsx — Selection-aware scrolling list with scroll-into-view behavior
+// ListView.tsx — Virtualized selection-aware scrolling list
 import type { ReactNode } from "react"
 import { useEffect, useRef } from "react"
 import { useScroll } from "../hooks/use-scroll.js"
@@ -20,12 +20,15 @@ export interface ListViewProps<T> {
 	showScrollbar?: boolean
 	/** Empty state content when items is empty */
 	emptyContent?: ReactNode
+	/** Number of extra items to render above/below viewport for smooth scrolling (default: 3) */
+	overscan?: number
 }
 
 /**
- * A scrolling list view with selection and scroll-into-view behavior.
+ * A virtualized scrolling list view with selection and scroll-into-view behavior.
  *
  * Features:
+ * - **Virtualized**: Only renders visible items + overscan buffer for performance
  * - Automatically scrolls to keep selected item visible when selection changes
  * - Supports mouse wheel scrolling with macOS-style acceleration
  * - Shows a scroll bar when content overflows
@@ -68,8 +71,9 @@ export function ListView<T>({
 	scrollPadding = 0,
 	showScrollbar = true,
 	emptyContent,
+	overscan = 3,
 }: ListViewProps<T>) {
-	const { scrollProps, scrollToVisible } = useScroll({
+	const { state, scrollProps, scrollToVisible } = useScroll({
 		enableKeyboard: false, // Parent handles keyboard for selection
 		enableMouseWheel: true, // Free scroll with wheel
 	})
@@ -98,14 +102,36 @@ export function ListView<T>({
 		return <>{emptyContent}</>
 	}
 
+	// Calculate visible range for virtualization
+	const totalHeight = items.length * itemHeight
+	const startIndex = Math.max(0, Math.floor(state.offset / itemHeight) - overscan)
+	const endIndex = Math.min(items.length, Math.ceil((state.offset + state.viewportSize) / itemHeight) + overscan)
+
+	// Calculate spacer heights for virtual scrolling
+	const topSpacerHeight = startIndex * itemHeight
+	const bottomSpacerHeight = Math.max(0, totalHeight - endIndex * itemHeight)
+
+	// Get visible slice of items
+	const visibleItems = items.slice(startIndex, endIndex)
+
 	return (
 		<scroll {...scrollProps} showScrollbar={showScrollbar}>
 			<vstack>
-				{items.map((item, index) => (
-					<vstack key={keyExtractor(item, index)}>
-						{renderItem(item, index, index === selectedIndex)}
-					</vstack>
-				))}
+				{/* Virtual top spacer */}
+				{topSpacerHeight > 0 && <spacer height={topSpacerHeight} />}
+
+				{/* Render only visible items */}
+				{visibleItems.map((item, i) => {
+					const actualIndex = startIndex + i
+					return (
+						<vstack key={keyExtractor(item, actualIndex)}>
+							{renderItem(item, actualIndex, actualIndex === selectedIndex)}
+						</vstack>
+					)
+				})}
+
+				{/* Virtual bottom spacer */}
+				{bottomSpacerHeight > 0 && <spacer height={bottomSpacerHeight} />}
 			</vstack>
 		</scroll>
 	)