@effect-tui/react 0.6.0 → 0.6.2

package/dist/src/components/ListView.d.ts

@@ -16,11 +16,14 @@ 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
@@ -54,5 +57,5 @@ export interface ListViewProps<T> {
  * )
  * ```
  */
-export declare function ListView<T>({ items, selectedIndex, renderItem, keyExtractor, itemHeight, scrollPadding, showScrollbar, emptyContent, }: ListViewProps<T>): ReactNode;
+export declare function ListView<T>({ items, selectedIndex, renderItem, keyExtractor, itemHeight, scrollPadding, showScrollbar, emptyContent, overscan, }: ListViewProps<T>): ReactNode;
 //# sourceMappingURL=ListView.d.ts.map

package/dist/src/components/ListView.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/components/ListView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,aAAa,CAAC,CAAC;IAC/B,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAA;IACrB,oCAAoC;IACpC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAA;IACtE,uCAAuC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;IACzD,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAA;CACxB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAc,EACd,aAAiB,EACjB,aAAoB,EACpB,YAAY,GACZ,EAAE,aAAa,CAAC,CAAC,CAAC,aAyClB"}
+{"version":3,"file":"ListView.d.ts","sourceRoot":"","sources":["../../../src/components/ListView.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAItC,MAAM,WAAW,aAAa,CAAC,CAAC;IAC/B,sBAAsB;IACtB,KAAK,EAAE,SAAS,CAAC,EAAE,CAAA;IACnB,+BAA+B;IAC/B,aAAa,EAAE,MAAM,CAAA;IACrB,oCAAoC;IACpC,UAAU,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,EAAE,UAAU,EAAE,OAAO,KAAK,SAAS,CAAA;IACtE,uCAAuC;IACvC,YAAY,EAAE,CAAC,IAAI,EAAE,CAAC,EAAE,KAAK,EAAE,MAAM,KAAK,MAAM,GAAG,MAAM,CAAA;IACzD,+CAA+C;IAC/C,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,6DAA6D;IAC7D,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qCAAqC;IACrC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8CAA8C;IAC9C,YAAY,CAAC,EAAE,SAAS,CAAA;IACxB,6FAA6F;IAC7F,QAAQ,CAAC,EAAE,MAAM,CAAA;CACjB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAqCG;AACH,wBAAgB,QAAQ,CAAC,CAAC,EAAE,EAC3B,KAAK,EACL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAc,EACd,aAAiB,EACjB,aAAoB,EACpB,YAAY,EACZ,QAAY,GACZ,EAAE,aAAa,CAAC,CAAC,CAAC,aA+DlB"}

package/dist/src/components/ListView.js

@@ -1,10 +1,11 @@
-import { Fragment as _Fragment, jsx as _jsx } from "@effect-tui/react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "@effect-tui/react/jsx-runtime";
 import { useEffect, useRef } from "react";
 import { useScroll } from "../hooks/use-scroll.js";
 /**
- * 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
@@ -38,8 +39,8 @@ import { useScroll } from "../hooks/use-scroll.js";
  * )
  * ```
  */
-export function ListView({ items, selectedIndex, renderItem, keyExtractor, itemHeight = 1, scrollPadding = 0, showScrollbar = true, emptyContent, }) {
-    const { scrollProps, scrollToVisible } = useScroll({
+export function ListView({ items, selectedIndex, renderItem, keyExtractor, itemHeight = 1, scrollPadding = 0, showScrollbar = true, emptyContent, overscan = 3, }) {
+    const { state, scrollProps, scrollToVisible } = useScroll({
         enableKeyboard: false, // Parent handles keyboard for selection
         enableMouseWheel: true, // Free scroll with wheel
     });
@@ -63,6 +64,18 @@ export function ListView({ items, selectedIndex, renderItem, keyExtractor, itemH
     if (items.length === 0 && emptyContent) {
         return _jsx(_Fragment, { children: emptyContent });
     }
-    return (_jsx("scroll", { ...scrollProps, showScrollbar: showScrollbar, children: _jsx("vstack", { children: items.map((item, index) => (_jsx("vstack", { children: renderItem(item, index, index === selectedIndex) }, keyExtractor(item, index)))) }) }));
+    // 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 (_jsx("scroll", { ...scrollProps, showScrollbar: showScrollbar, children: _jsxs("vstack", { children: [topSpacerHeight > 0 && _jsx("spacer", { minHeight: topSpacerHeight }), visibleItems.map((item, i) => {
+                    const actualIndex = startIndex + i;
+                    return (_jsx("vstack", { children: renderItem(item, actualIndex, actualIndex === selectedIndex) }, keyExtractor(item, actualIndex)));
+                }), bottomSpacerHeight > 0 && _jsx("spacer", { minHeight: bottomSpacerHeight })] }) }));
 }
 //# sourceMappingURL=ListView.js.map

package/dist/src/components/ListView.js.map

@@ -1 +1 @@
-{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../src/components/ListView.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAA;AAqBlD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoCG;AACH,MAAM,UAAU,QAAQ,CAAI,EAC3B,KAAK,EACL,aAAa,EACb,UAAU,EACV,YAAY,EACZ,UAAU,GAAG,CAAC,EACd,aAAa,GAAG,CAAC,EACjB,aAAa,GAAG,IAAI,EACpB,YAAY,GACM;IAClB,MAAM,EAAE,WAAW,EAAE,eAAe,EAAE,GAAG,SAAS,CAAC;QAClD,cAAc,EAAE,KAAK,EAAE,wCAAwC;QAC/D,gBAAgB,EAAE,IAAI,EAAE,yBAAyB;KACjD,CAAC,CAAA;IAEF,6CAA6C;IAC7C,MAAM,eAAe,GAAG,MAAM,CAAC,aAAa,CAAC,CAAA;IAE7C,mDAAmD;IACnD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,aAAa,KAAK,eAAe,CAAC,OAAO,EAAE,CAAC;YAC/C,eAAe,CAAC,OAAO,GAAG,aAAa,CAAA;YACvC,eAAe,CAAC,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,CAAA;QAC1D,CAAC;IACF,CAAC,EAAE,CAAC,aAAa,EAAE,UAAU,EAAE,aAAa,EAAE,eAAe,CAAC,CAAC,CAAA;IAE/D,sDAAsD;IACtD,SAAS,CAAC,GAAG,EAAE;QACd,IAAI,aAAa,GAAG,CAAC,EAAE,CAAC;YACvB,eAAe,CAAC,aAAa,EAAE,UAAU,EAAE,aAAa,CAAC,CAAA;QAC1D,CAAC;QACD,oBAAoB;QACpB,uDAAuD;IACxD,CAAC,EAAE,EAAE,CAAC,CAAA;IAEN,IAAI,KAAK,CAAC,MAAM,KAAK,CAAC,IAAI,YAAY,EAAE,CAAC;QACxC,OAAO,4BAAG,YAAY,GAAI,CAAA;IAC3B,CAAC;IAED,OAAO,CACN,oBAAY,WAAW,EAAE,aAAa,EAAE,aAAa,YACpD,2BACE,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,CAC3B,2BACE,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,KAAK,KAAK,aAAa,CAAC,IADrC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC,CAE7B,CACT,CAAC,GACM,GACD,CACT,CAAA;AACF,CAAC"}
+{"version":3,"file":"ListView.js","sourceRoot":"","sources":["../../../src/components/ListView.tsx"],"names":[],"mappings":"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"}