@noya-app/noya-designsystem 0.1.71 → 0.1.72

package/src/components/__tests__/Virtualized.math.test.ts

@@ -0,0 +1,153 @@
+import { expect, test } from "bun:test";
+import {
+  buildMeasurements,
+  calculateScrollOffsetForIndex,
+  calculateVisibleRange,
+  clampGapValue,
+  findFirstVisibleIndex,
+  ItemMeasurement,
+  resolvePaddingValues,
+} from "../Virtualized";
+
+test("resolvePaddingValues handles numbers and objects", () => {
+  expect(resolvePaddingValues(8)).toEqual({ top: 8, bottom: 8 });
+  expect(resolvePaddingValues({ top: 4 })).toEqual({ top: 4, bottom: 0 });
+  expect(resolvePaddingValues(undefined)).toEqual({ top: 0, bottom: 0 });
+});
+
+test("clampGapValue avoids negatives", () => {
+  expect(clampGapValue(undefined)).toBe(0);
+  expect(clampGapValue(-10)).toBe(0);
+  expect(clampGapValue(6)).toBe(6);
+});
+
+test("buildMeasurements returns cumulative offsets and total height", () => {
+  const { measurements, totalHeight } = buildMeasurements({
+    itemCount: 3,
+    getItemHeight: (index) => 10 + index,
+    paddingTop: 5,
+    paddingBottom: 15,
+    gap: 4,
+  });
+
+  expect(measurements).toEqual([
+    { index: 0, size: 10, start: 5, end: 15 },
+    { index: 1, size: 11, start: 19, end: 30 },
+    { index: 2, size: 12, start: 34, end: 46 },
+  ]);
+  expect(totalHeight).toBe(61);
+});
+
+test("findFirstVisibleIndex binary searches measurement offsets", () => {
+  const measurements = [
+    { index: 0, size: 10, start: 0, end: 10 },
+    { index: 1, size: 10, start: 10, end: 20 },
+    { index: 2, size: 10, start: 20, end: 30 },
+  ];
+
+  expect(findFirstVisibleIndex(measurements, 0)).toBe(0);
+  expect(findFirstVisibleIndex(measurements, 5)).toBe(0);
+  expect(findFirstVisibleIndex(measurements, 10)).toBe(1);
+  expect(findFirstVisibleIndex(measurements, 25)).toBe(2);
+});
+
+test("calculateVisibleRange respects overscan and height", () => {
+  const measurements = [
+    { index: 0, size: 10, start: 0, end: 10 },
+    { index: 1, size: 10, start: 10, end: 20 },
+    { index: 2, size: 10, start: 20, end: 30 },
+    { index: 3, size: 10, start: 30, end: 40 },
+    { index: 4, size: 10, start: 40, end: 50 },
+  ];
+
+  const visible = calculateVisibleRange({
+    measurements,
+    scrollTop: 12,
+    height: 20,
+    overscan: 1,
+  });
+
+  expect(visible).toEqual({ start: 0, end: 4 });
+});
+
+const sampleMeasurements: ItemMeasurement[] = [
+  { index: 0, size: 30, start: 0, end: 30 },
+  { index: 1, size: 30, start: 30, end: 60 },
+  { index: 2, size: 30, start: 60, end: 90 },
+  { index: 3, size: 30, start: 90, end: 120 },
+];
+
+const extendedMeasurements: ItemMeasurement[] = [
+  { index: 0, size: 30, start: 0, end: 30 },
+  { index: 1, size: 30, start: 30, end: 60 },
+  { index: 2, size: 30, start: 60, end: 90 },
+  { index: 3, size: 30, start: 90, end: 120 },
+  { index: 4, size: 30, start: 120, end: 150 },
+  { index: 5, size: 30, start: 150, end: 180 },
+  { index: 6, size: 30, start: 180, end: 210 },
+];
+
+test("calculateScrollOffsetForIndex returns undefined when already visible", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: sampleMeasurements,
+    height: 60,
+    totalHeight: 120,
+    targetIndex: 1,
+    currentScrollTop: 30,
+  });
+
+  expect(offset).toBeUndefined();
+});
+
+test("calculateScrollOffsetForIndex scrolls up when item above viewport", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: sampleMeasurements,
+    height: 60,
+    totalHeight: 120,
+    targetIndex: 0,
+    currentScrollTop: 50,
+  });
+
+  expect(offset).toBe(0);
+});
+
+test("calculateScrollOffsetForIndex scrolls down when item below viewport", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: extendedMeasurements,
+    height: 60,
+    totalHeight: 210,
+    targetIndex: 4,
+    currentScrollTop: 0,
+  });
+
+  expect(offset).toBe(120);
+});
+
+test("calculateScrollOffsetForIndex clamps to end of content", () => {
+  const offset = calculateScrollOffsetForIndex({
+    measurements: sampleMeasurements,
+    height: 80,
+    totalHeight: 120,
+    targetIndex: 3,
+    currentScrollTop: 10,
+  });
+
+  expect(offset).toBe(40);
+});
+
+test("calculateScrollOffsetForIndex aligns bottom when item taller than viewport", () => {
+  const tallMeasurements: ItemMeasurement[] = [
+    { index: 0, size: 120, start: 0, end: 120 },
+    { index: 1, size: 120, start: 120, end: 240 },
+  ];
+
+  const offset = calculateScrollOffsetForIndex({
+    measurements: tallMeasurements,
+    height: 60,
+    totalHeight: 240,
+    targetIndex: 1,
+    currentScrollTop: 0,
+  });
+
+  expect(offset).toBe(180);
+});

package/src/components/__tests__/Virtualized.test.tsx

@@ -0,0 +1,85 @@
+import { act, render } from "@testing-library/react";
+import { expect, test } from "bun:test";
+import React from "react";
+import { Virtualized } from "../Virtualized";
+
+test("virtualized window updates visible rows when scrolling", () => {
+  const items = Array.from({ length: 100 }, (_, index) => `Row ${index + 1}`);
+
+  const { container, getByTestId, queryByTestId } = render(
+    <Virtualized
+      height={100}
+      itemCount={items.length}
+      getItemHeight={() => 20}
+      renderItem={(index) => (
+        <div data-testid={`row-${index}`}>{items[index]}</div>
+      )}
+    />
+  );
+
+  const scroller = container.firstChild as HTMLDivElement;
+
+  expect(getByTestId("row-0")).toBeTruthy();
+
+  act(() => {
+    scroller.scrollTop = 200;
+    scroller.dispatchEvent(new Event("scroll"));
+  });
+
+  expect(queryByTestId("row-0")).toBeNull();
+  expect(getByTestId("row-10")).toBeTruthy();
+});
+
+test("accounts for padding and gap", () => {
+  const { container } = render(
+    <Virtualized
+      height={120}
+      itemCount={2}
+      getItemHeight={() => 20}
+      padding={{ top: 12, bottom: 8 }}
+      gap={6}
+      renderItem={(index) => <div>Row {index}</div>}
+    />
+  );
+
+  const scroller = container.firstChild as HTMLDivElement;
+  const inner = scroller.firstChild as HTMLDivElement;
+  const firstRow = inner.firstChild as HTMLDivElement;
+  const secondRow = firstRow.nextSibling as HTMLDivElement;
+
+  expect(inner.style.height).toBe("66px");
+  expect(firstRow.style.top).toBe("12px");
+  expect(secondRow.style.top).toBe("38px");
+});
+
+test("supports ScrollArea as the scroller", () => {
+  const items = Array.from({ length: 50 }, (_, index) => `Row ${index + 1}`);
+
+  const { container, getByTestId, queryByTestId } = render(
+    <Virtualized
+      height={120}
+      itemCount={items.length}
+      getItemHeight={() => 20}
+      useScrollArea
+      scrollAreaViewportClassName="virtualized-scrollarea-viewport"
+      renderItem={(index) => (
+        <div data-testid={`scroll-row-${index}`}>{items[index]}</div>
+      )}
+    />
+  );
+
+  const viewport = container.querySelector(
+    ".virtualized-scrollarea-viewport"
+  ) as HTMLDivElement;
+
+  expect(viewport).toBeTruthy();
+  expect(getByTestId("scroll-row-0")).toBeTruthy();
+
+  act(() => {
+    viewport.scrollTop = 200;
+    viewport.dispatchEvent(new Event("scroll"));
+  });
+
+  expect(queryByTestId("scroll-row-0")).toBeNull();
+  expect(getByTestId("scroll-row-10")).toBeTruthy();
+});

package/src/components/listView/ListViewContexts.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { createContext, ReactNode } from "react";
+import { createContext } from "react";
 import {
   ListColorScheme,
   ListRowMarginType,
@@ -61,8 +61,3 @@ export const ListRowContext = createContext<ListRowContextValue>({
   isSectionHeader: false,
 });
 (ListRowContext as any).displayName = "ListRowContext";
-
-export const RenderItemContext = createContext<(index: number) => ReactNode>(
-  () => null
-);
-(RenderItemContext as any).displayName = "RenderItemContext";

package/src/components/listView/ListViewRoot.tsx

@@ -1,27 +1,20 @@
 "use client";
 
-import { Size } from "@noya-app/noya-geometry";
 import { range } from "@noya-app/noya-utils";
 import { forwardRefGeneric, memoGeneric } from "@noya-app/react-utils";
 import React, {
   CSSProperties,
   ForwardedRef,
   isValidElement,
-  memo,
   ReactElement,
   ReactNode,
   useCallback,
-  useContext,
-  useImperativeHandle,
-  useLayoutEffect,
   useMemo,
-  useRef,
 } from "react";
-import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
-import { ListChildComponentProps, VariableSizeList } from "react-window";
 import { mergeConflictingClassNames } from "../../utils/classNames";
 import { IVirtualizedList } from "../IVirtualizedList";
 import { ScrollArea } from "../ScrollArea";
+import { Virtualized } from "../Virtualized";
 import { SharedDragProps } from "../sorting/DragRegistration";
 import { Sortable } from "../sorting/Sortable";
 import {
@@ -36,7 +29,6 @@ import {
   ListViewContextValue,
   ListViewDraggingContext,
   ListViewDraggingContextValue,
-  RenderItemContext,
 } from "./ListViewContexts";
 import {
   ListColorScheme,
@@ -56,129 +48,6 @@ export const SECTION_HEADER_LABEL_HEIGHT = 24;
 // use a taller height.
 export const TALL_ROW_HEIGHT = 50;
 
-const VirtualizedListRow = memo(function VirtualizedListRow({
-  index,
-  style,
-}: ListChildComponentProps) {
-  const renderItem = useContext(RenderItemContext);
-
-  return (
-    <div key={index} style={style}>
-      {renderItem(index)}
-    </div>
-  );
-});
-
-/* ----------------------------------------------------------------------------
- * VirtualizedList
- * ------------------------------------------------------------------------- */
-
-interface VirtualizedListProps<T> {
-  size: Size;
-  scrollElement: HTMLDivElement;
-  items: T[];
-  getItemHeight: (index: number) => number;
-  keyExtractor: (index: number) => string;
-  renderItem: (index: number) => ReactNode;
-}
-
-const VirtualizedListInner = forwardRefGeneric(function VirtualizedListInner<T>(
-  {
-    size,
-    scrollElement,
-    items,
-    getItemHeight,
-    keyExtractor,
-    renderItem,
-  }: VirtualizedListProps<T>,
-  ref: ForwardedRef<IVirtualizedList>
-) {
-  const listRef = useRef<VariableSizeList<T> | null>(null);
-
-  useImperativeHandle(ref, () => ({
-    scrollToIndex(index) {
-      listRef.current?.scrollToItem(index);
-    },
-  }));
-
-  useLayoutEffect(() => {
-    listRef.current?.resetAfterIndex(0);
-  }, [
-    // When items or the height resolver change, re-render the virtualized list
-    // since VariableSizeList caches sizes per index.
-    items,
-    getItemHeight,
-  ]);
-
-  // Internally, react-virtualized updates these properties. We always want
-  // to use our custom scroll element, so we override them. It may update
-  // overflowX/Y individually in addition to `overflow`, so we include all 3.
-  const listStyle = useMemo(
-    (): CSSProperties => ({
-      overflowX: "initial",
-      overflowY: "initial",
-      overflow: "initial",
-    }),
-    []
-  );
-
-  return (
-    <RenderItemContext.Provider value={renderItem}>
-      <WindowScroller
-        scrollElement={scrollElement}
-        style={useMemo(() => ({ flex: "1 1 auto" }), [])}
-      >
-        {useCallback(
-          ({
-            registerChild,
-            onChildScroll,
-            scrollTop,
-          }: WindowScrollerChildProps & {
-            // Added when noya-designsystem moved to a separate package.
-            // I think this is a hack to get around the fact that react-virtualized
-            // doesn't update on scroll unless we force it to by changing ref.
-            // Either we're not using this the intended way or the types are wrong.
-            registerChild: (element: any) => void;
-          }) => (
-            <div ref={registerChild}>
-              <VariableSizeList<T>
-                ref={listRef}
-                // The list won't update on scroll unless we force it to by changing key
-                key={scrollTop}
-                style={listStyle}
-                itemKey={keyExtractor}
-                onScroll={({ scrollOffset }: { scrollOffset: number }) => {
-                  onChildScroll({ scrollTop: scrollOffset });
-                }}
-                initialScrollOffset={scrollTop}
-                width={size.width}
-                height={size.height}
-                itemCount={items.length}
-                itemSize={getItemHeight}
-                estimatedItemSize={ROW_HEIGHT}
-              >
-                {VirtualizedListRow as any}
-              </VariableSizeList>
-            </div>
-          ),
-          [
-            listStyle,
-            keyExtractor,
-            size.width,
-            size.height,
-            items.length,
-            getItemHeight,
-          ]
-        )}
-      </WindowScroller>
-    </RenderItemContext.Provider>
-  );
-});
-
-const VirtualizedList = memo(
-  VirtualizedListInner
-) as typeof VirtualizedListInner;
-
 /* ----------------------------------------------------------------------------
  * Root
  * ------------------------------------------------------------------------- */
@@ -198,7 +67,7 @@ export type ListViewRootProps<T> = {
    * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
    */
   sortable?: boolean;
-  virtualized?: Size;
+  virtualized?: number;
 
   id?: string;
   className?: string;
@@ -432,9 +301,8 @@ export const ListViewRoot = memoGeneric(
         children
       );
 
-    const withScrollable = (
-      children: (scrollElementRef: HTMLDivElement | null) => ReactNode
-    ) => (scrollable ? <ScrollArea>{children}</ScrollArea> : children(null));
+    const withScrollable = (children: ReactNode) =>
+      scrollable ? <ScrollArea>{children}</ScrollArea> : children;
 
     const getItemHeight = useCallback(
       (index: number) => {
@@ -528,23 +396,21 @@ export const ListViewRoot = memoGeneric(
           >
             {data.length === 0 && renderEmptyState
               ? renderEmptyState()
-              : withScrollable((scrollElementRef: HTMLDivElement | null) =>
-                  withSortable(
-                    virtualized ? (
-                      <VirtualizedList<T>
-                        ref={forwardedRef}
-                        scrollElement={scrollElementRef!}
-                        items={data}
-                        size={virtualized}
-                        getItemHeight={getItemHeight}
-                        keyExtractor={getKey}
-                        renderItem={renderWrappedChild}
-                      />
-                    ) : (
-                      range(0, data.length).map(renderWrappedChild)
-                    )
+              : virtualized != null
+                ? withSortable(
+                    <Virtualized
+                      ref={forwardedRef}
+                      height={virtualized}
+                      itemCount={data.length}
+                      getItemHeight={getItemHeight}
+                      renderItem={renderWrappedChild}
+                      itemKey={getKey}
+                      useScrollArea={scrollable}
+                    />
                   )
-                )}
+                : withScrollable(
+                    withSortable(range(0, data.length).map(renderWrappedChild))
+                  )}
           </div>
         </ListViewDraggingContext.Provider>
       </ListViewContext.Provider>

package/src/index.tsx

@@ -85,6 +85,11 @@ export * from "./components/Tooltip";
 export * from "./components/TreeView";
 export * from "./components/UserPicker";
 export * from "./components/UserPointer";
+export {
+  Virtualized,
+  type VirtualizedProps,
+  type VirtualizedRenderItem,
+} from "./components/Virtualized";
 export * from "./components/workspace/types";
 export * from "./components/workspace/WorkspaceLayout";
 export * from "./components/workspace/WorkspaceSideContext";