@noya-app/noya-designsystem 0.1.70 → 0.1.72

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

@@ -83,7 +83,13 @@ export * from "./components/TextArea";
 export * from "./components/Toast";
 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";