@noya-app/noya-designsystem 0.1.64 → 0.1.65

package/src/components/ListView.tsx

@@ -1,1166 +1,28 @@
 "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 { composeRefs } from "@radix-ui/react-compose-refs";
-import React, {
-  Children,
-  createContext,
-  CSSProperties,
-  ForwardedRef,
-  forwardRef,
-  HTMLAttributes,
-  isValidElement,
-  memo,
-  ReactElement,
-  ReactNode,
-  Ref,
-  useCallback,
-  useContext,
-  useImperativeHandle,
-  useLayoutEffect,
-  useMemo,
-  useRef,
-} from "react";
-import { WindowScroller, WindowScrollerChildProps } from "react-virtualized";
-import { ListChildComponentProps, VariableSizeList } from "react-window";
-import { mergeEventHandlers } from "../hooks/mergeEventHandlers";
-import { useHover } from "../hooks/useHover";
-import { cssVars, INPUT_HEIGHT } from "../theme";
-import { cx, mergeConflictingClassNames } from "../utils/classNames";
-import { ContextMenu } from "./ContextMenu";
-import { InputField } from "./InputField";
-import { MenuItem } from "./internal/Menu";
-import { ScrollArea } from "./ScrollArea";
-import { SharedDragProps } from "./sorting/DragRegistration";
-import { Sortable } from "./sorting/Sortable";
+import { IVirtualizedList } from "./IVirtualizedList";
+import { ListRowContext } from "./listView/ListViewContexts";
+import { ListViewEditableRowTitle } from "./listView/ListViewEditableRowTitle";
 import {
-  DropValidator,
-  MoveDragItemHandler,
-  normalizeListTargetIndex,
-  RelativeDropPosition,
-  SortableItemContextProps,
-} from "./sorting/sorting";
-import { Spacer } from "./Spacer";
-
-export type ListRowMarginType = "none" | "top" | "bottom" | "vertical";
-export type ListRowPosition = "only" | "first" | "middle" | "last";
-
-const ROW_HEIGHT = 31;
-const SECTION_HEADER_LABEL_HEIGHT = INPUT_HEIGHT;
-
-type ListColorScheme = "primary" | "secondary";
-
-type PressEventName = "onClick" | "onPointerDown";
-
-// TODO: Some of these could be passed in a single context value that's
-// the same for all rows. But doing this seems to cause an infinite loop and
-// prevents drag and drop from working.
-type ListRowContextValue = {
-  marginType: ListRowMarginType;
-  selectedPosition: ListRowPosition;
-  sortable: boolean;
-  expandable: boolean;
-  divider: boolean;
-  gap: number;
-  variant: ListViewVariant;
-  sectionHeaderVariant: ListViewSectionHeaderVariant;
-  pressEventName: PressEventName;
-  isSectionHeader: boolean;
-  colorScheme: ListColorScheme;
-};
-
-// The dragged item isn't passed a context value (doing so causes an infinite loop),
-// so we pass this separately. Rows need the indentation to look correct when dragging,
-// and the dragged row doesn't have a ListRowContextValue.
-type ListViewDraggingContextValue = {
-  indentation: number;
-  isDragOverlay?: boolean;
-};
-
-const ListViewDraggingContext = createContext<ListViewDraggingContextValue>({
-  indentation: 12,
-});
-(ListViewDraggingContext as any).displayName = "ListViewDraggingContext";
-
-const ListRowContext = createContext<ListRowContextValue>({
-  marginType: "none",
-  selectedPosition: "only",
-  sortable: false,
-  expandable: true,
-  divider: true,
-  gap: 0,
-  variant: "normal",
-  sectionHeaderVariant: "normal",
-  pressEventName: "onClick",
-  isSectionHeader: false,
-  colorScheme: "primary",
-});
-(ListRowContext as any).displayName = "ListRowContext";
-
-/* ----------------------------------------------------------------------------
- * RowTitle
- * ------------------------------------------------------------------------- */
-
-const ListViewRowTitle = ({
-  className,
-  children,
-  ...props
-}: {
-  className?: string;
-  children: React.ReactNode;
-} & HTMLAttributes<HTMLSpanElement>) => (
-  <span
-    className={cx(
-      `flex-1 overflow-hidden text-ellipsis whitespace-pre `,
-      className
-    )}
-    {...props}
-  >
-    {children}
-  </span>
-);
-
-/* ----------------------------------------------------------------------------
- * EditableRowTitle
- * ------------------------------------------------------------------------- */
-
-export interface EditableRowProps {
-  value: string;
-  onSubmitEditing: (value: string) => void;
-  autoFocus: boolean;
-  placeholder?: string;
-  className?: string;
-  onKeyDown?: (e: React.KeyboardEvent) => void;
-}
-
-function ListViewEditableRowTitle({
-  value,
-  onSubmitEditing,
-  autoFocus,
-  placeholder,
-  className,
-  onKeyDown,
-}: EditableRowProps) {
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useLayoutEffect(() => {
-    const element = inputRef.current;
-
-    if (!element || !autoFocus) return;
-
-    // Calling `focus` is necessary, in addition to `select`, to ensure
-    // the `onBlur` fires correctly.
-    element.focus();
-
-    // must be a delay of 1ms or more to ensure any radix ui components have finished any focus behaviors
-    setTimeout(() => {
-      element.select();
-    }, 1);
-  }, [autoFocus]);
-
-  return (
-    <InputField.Input
-      ref={inputRef}
-      value={value}
-      placeholder={placeholder}
-      onSubmit={onSubmitEditing}
-      allowSubmittingWithSameValue
-      className={cx("-mx-1.5 -my-1 bg-listview-editing-background", className)}
-      onKeyDown={onKeyDown}
-    />
-  );
-}
-
-/* ----------------------------------------------------------------------------
- * Row
- * ------------------------------------------------------------------------- */
-
-const RowContainer = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    $marginType: ListRowMarginType;
-    $selected: boolean;
-    $selectedPosition: ListRowPosition;
-    $disabled: boolean;
-    $hovered: boolean;
-    $variant: ListViewVariant;
-    $divider: boolean;
-    $isSectionHeader: boolean;
-    $showsActiveState: boolean;
-    $sectionHeaderVariant: ListViewSectionHeaderVariant;
-    $colorScheme: ListColorScheme;
-    $gap: number;
-    $backgroundColor?: CSSProperties["backgroundColor"];
-    $clickable?: boolean;
-    href?: string;
-    as?: React.ElementType;
-  }
->(
-  (
-    {
-      as: Component = "div",
-      href,
-      className,
-      $marginType,
-      $selected,
-      $selectedPosition,
-      $disabled,
-      $hovered,
-      $variant,
-      $divider,
-      $isSectionHeader,
-      $showsActiveState,
-      $sectionHeaderVariant,
-      $colorScheme,
-      $gap,
-      $backgroundColor,
-      style,
-      $clickable,
-      "aria-describedby": _, // Causes hydration warning
-      role,
-      "aria-label": ariaLabel,
-      "aria-roledescription": ariaRoleDescription,
-      "aria-selected": ariaSelected,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <Component
-        ref={ref}
-        href={href}
-        role={role}
-        aria-label={ariaLabel}
-        aria-roledescription={ariaRoleDescription}
-        aria-selected={ariaSelected ?? $selected}
-        className={cx(
-          $isSectionHeader && $sectionHeaderVariant === "label"
-            ? "font-sans text-label uppercase leading-3 font-bold text-text-muted"
-            : "font-sans text-heading5 font-normal",
-          !$isSectionHeader &&
-            $selected &&
-            "text-selected-list-item-text active:bg-selected-list-item-background",
-          !$isSectionHeader && $disabled && "text-text-disabled",
-          $clickable ? "cursor-pointer" : "cursor-default",
-          $isSectionHeader && "bg-listview-raised-background",
-          "flex flex-[0_0_auto] select-none items-center relative",
-          className
-        )}
-        style={{
-          gap: $gap,
-          ...($variant !== "bare" && {
-            paddingTop: $selected ? "4px" : "6px",
-            paddingRight: $selected ? "8px" : "12px",
-            paddingBottom: $selected ? "4px" : "6px",
-            paddingLeft: $selected ? "8px" : "12px",
-            borderRadius: $selected ? "4px" : "",
-            marginLeft: $selected ? "4px" : "",
-            marginRight: $selected ? "4px" : "",
-            marginTop: $selected ? "2px" : "",
-            marginBottom: $selected ? "2px" : "",
-          }),
-          ...($selected &&
-            !$isSectionHeader && {
-              backgroundColor:
-                $colorScheme === "primary"
-                  ? cssVars.colors["selectedListItemBackground"]
-                  : cssVars.colors[$colorScheme],
-            }),
-          ...($selected &&
-            !$isSectionHeader &&
-            ($selectedPosition === "middle" ||
-              $selectedPosition === "last") && {
-              borderTopRightRadius: "0px",
-              borderTopLeftRadius: "0px",
-            }),
-          ...($selected &&
-            !$isSectionHeader &&
-            ($selectedPosition === "middle" ||
-              $selectedPosition === "first") && {
-              borderBottomRightRadius: "0px",
-              borderBottomLeftRadius: "0px",
-            }),
-          ...($hovered &&
-            !$selected && {
-              background: cssVars.colors.listViewHoverBackground,
-            }),
-          ...($showsActiveState && {
-            "&:active": {
-              backgroundColor: $selected
-                ? $colorScheme === "secondary"
-                  ? cssVars.colors.secondaryLight
-                  : cssVars.colors.selectedListItemBackground
-                : cssVars.colors.activeBackground,
-            },
-          }),
-          ...($divider && {
-            borderBottom: `1px solid ${cssVars.colors.dividerSubtle}`,
-          }),
-          ...($backgroundColor && {
-            backgroundColor: $backgroundColor,
-            "&:hover": {
-              backgroundColor: $backgroundColor,
-            },
-            "&:active": {
-              backgroundColor: $backgroundColor,
-            },
-          }),
-          ...style,
-        }}
-        {...props}
-      />
-    );
-  }
-);
-
-const ListViewDragIndicatorElement = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & {
-    $relativeDropPosition?: RelativeDropPosition;
-    $gap: number;
-    $offsetLeft: number;
-    $colorScheme: ListColorScheme;
-  }
->(
-  (
-    {
-      className,
-      $relativeDropPosition,
-      $offsetLeft,
-      $colorScheme,
-      $gap,
-      style,
-      ...props
-    },
-    ref
-  ) => {
-    return (
-      <div
-        ref={ref}
-        {...props}
-        className={className}
-        style={{
-          zIndex: 1000,
-          position: "absolute",
-          borderRadius: "3px",
-          pointerEvents: "none",
-          ...($relativeDropPosition === "inside"
-            ? {
-                inset: 2,
-                boxShadow: `0 0 0 1px ${cssVars.colors.sidebarBackground}, 0 0 0 3px ${
-                  $colorScheme === "secondary"
-                    ? cssVars.colors.secondary
-                    : cssVars.colors.dragOutline
-                }`,
-              }
-            : {
-                top:
-                  $relativeDropPosition === "above"
-                    ? -(3 + $gap / 2)
-                    : undefined,
-                bottom:
-                  $relativeDropPosition === "below"
-                    ? -(3 + $gap / 2)
-                    : undefined,
-                left: $offsetLeft,
-                right: 0,
-                height: 6,
-                backgroundColor:
-                  $colorScheme === "secondary"
-                    ? cssVars.colors.secondary
-                    : cssVars.colors.dragOutline,
-                border: `2px solid white`,
-                boxShadow: "0 0 2px rgba(0,0,0,0.5)",
-              }),
-          ...style,
-        }}
-      />
-    );
-  }
-);
-
-interface ListViewClickInfo {
-  shiftKey: boolean;
-  altKey: boolean;
-  metaKey: boolean;
-  ctrlKey: boolean;
-}
-
-export interface ListViewRowProps<MenuItemType extends string = string> {
-  id?: string;
-  tabIndex?: number;
-  role?: string;
-  selected?: boolean;
-  /** @default 0 */
-  depth?: number;
-  disabled?: boolean;
-  // draggable?: boolean;
-  hovered?: boolean;
-  sortable?: boolean;
-  gap?: number;
-  backgroundColor?: CSSProperties["backgroundColor"];
-  onPress?: (info: ListViewClickInfo) => void;
-  onDoubleClick?: () => void;
-  onHoverChange?: (isHovering: boolean) => void;
-  children?: ReactNode;
-  isSectionHeader?: boolean;
-  menuItems?: MenuItem<MenuItemType>[];
-  onSelectMenuItem?: (value: MenuItemType) => void;
-  onContextMenu?: () => void;
-  onMenuOpenChange?: (isOpen: boolean) => void;
-  onKeyDown?: (event: React.KeyboardEvent) => void;
-  style?: CSSProperties;
-  className?: string;
-  dragIndicatorStyle?:
-    | CSSProperties
-    | ((props: DragIndicatorStyleProps) => CSSProperties);
-  testRelativeDropPosition?: RelativeDropPosition;
-  href?: string;
-  as?: React.ElementType;
-}
-
-export type DragIndicatorStyleProps = {
-  depth: number;
-  indentation: number;
-  position: RelativeDropPosition;
-};
-
-const ListViewRow = forwardRefGeneric(function ListViewRow<
-  MenuItemType extends string,
->(
-  {
-    id,
-    tabIndex = 0,
-    role,
-    gap,
-    backgroundColor,
-    selected = false,
-    depth = 0,
-    disabled = false,
-    hovered = false,
-    isSectionHeader = false,
-    sortable: overrideSortable,
-    onPress,
-    onDoubleClick,
-    onHoverChange,
-    children,
-    menuItems,
-    onContextMenu,
-    onSelectMenuItem,
-    onMenuOpenChange,
-    onKeyDown,
-    style,
-    dragIndicatorStyle,
-    className,
-    testRelativeDropPosition,
-    href,
-    as,
-  }: ListViewRowProps<MenuItemType>,
-  forwardedRef: ForwardedRef<HTMLElement>
-) {
-  depth = Math.max(0, depth);
-
-  const {
-    marginType,
-    selectedPosition,
-    sortable,
-    pressEventName,
-    variant,
-    sectionHeaderVariant,
-    divider,
-    gap: listGap,
-    colorScheme,
-  } = useContext(ListRowContext);
-  const { hoverProps } = useHover({
-    onHoverChange,
-  });
-  const { indentation, isDragOverlay } = useContext(ListViewDraggingContext);
-
-  const handlePress = useCallback(
-    (event: React.MouseEvent) => {
-      // We use preventDefault as a hack to mark this event as handled. We check for
-      // this in the ListView.Root. We can't stopPropagation here or existing ContextMenus
-      // won't close (onPointerDownOutside won't fire).
-      // event.preventDefault();
-
-      // We only want to handle left clicks
-      if (event.button !== 0) return;
-
-      onPress?.(event);
-    },
-    [onPress]
-  );
-
-  const handleDoubleClick = useCallback(
-    (event: React.MouseEvent) => {
-      event.stopPropagation();
-
-      onDoubleClick?.();
-    },
-    [onDoubleClick]
-  );
-
-  const mergedStyle = useMemo(() => {
-    return isDragOverlay
-      ? {
-          // TODO: Where do these offsets actually come from?
-          transform: `translate3d(-36px, -6px, 0)`,
-          width: `calc(100% + 48px)`,
-          ...style,
-        }
-      : style;
-  }, [isDragOverlay, style]);
-
-  const renderContent = (
-    {
-      relativeDropPosition: relativeDropPositionProp,
-      ...renderProps
-    }: React.ComponentProps<typeof RowContainer> & {
-      relativeDropPosition?: RelativeDropPosition;
-    },
-    ref: Ref<HTMLElement>
-  ) => {
-    const Component = RowContainer;
-    const relativeDropPosition =
-      testRelativeDropPosition ?? relativeDropPositionProp;
-
-    const element = (
-      <Component
-        as={as}
-        href={href}
-        ref={ref as any}
-        $colorScheme={colorScheme}
-        onContextMenu={onContextMenu}
-        $isSectionHeader={isSectionHeader}
-        id={id}
-        role={role}
-        $gap={gap ?? 0}
-        $backgroundColor={backgroundColor}
-        {...hoverProps}
-        onDoubleClick={handleDoubleClick}
-        $marginType={marginType ?? "none"}
-        $disabled={disabled}
-        $hovered={hovered}
-        $selected={selected}
-        $variant={variant}
-        $sectionHeaderVariant={sectionHeaderVariant}
-        $selectedPosition={selectedPosition}
-        $showsActiveState={pressEventName === "onClick"}
-        aria-selected={selected}
-        $divider={!isDragOverlay && divider}
-        onKeyDown={onKeyDown}
-        style={mergedStyle}
-        {...(renderProps as Partial<React.ComponentProps<typeof RowContainer>>)}
-        {...mergeEventHandlers(
-          { onPointerDown: renderProps.onPointerDown! },
-          { [pressEventName]: handlePress }
-        )}
-        tabIndex={tabIndex}
-        className={className}
-        $clickable={!!onPress}
-      >
-        {relativeDropPosition && (
-          <ListViewDragIndicatorElement
-            key={relativeDropPosition}
-            $colorScheme={colorScheme}
-            $relativeDropPosition={relativeDropPosition}
-            $offsetLeft={depth * indentation}
-            $gap={listGap + (divider ? 1 : 0)}
-            style={
-              typeof dragIndicatorStyle === "function"
-                ? dragIndicatorStyle({
-                    depth,
-                    indentation,
-                    position: relativeDropPosition,
-                  })
-                : dragIndicatorStyle
-            }
-          />
-        )}
-        {depth > 0 && <Spacer.Horizontal size={depth * indentation} />}
-        {children}
-      </Component>
-    );
-
-    if (menuItems && onSelectMenuItem) {
-      return (
-        <ContextMenu<MenuItemType>
-          items={menuItems}
-          onSelect={onSelectMenuItem}
-          onOpenChange={onMenuOpenChange}
-        >
-          {element}
-        </ContextMenu>
-      );
-    }
-
-    return element;
-  };
-
-  if (sortable && id) {
-    return (
-      <Sortable.Item<HTMLElement> id={id} disabled={overrideSortable === false}>
-        {({ ref: sortableRef, ...sortableProps }) =>
-          renderContent(
-            sortableProps as any,
-            composeRefs(sortableRef, forwardedRef)
-          )
-        }
-      </Sortable.Item>
-    );
-  }
-
-  return renderContent({} as any, forwardedRef);
-});
-
-/* ----------------------------------------------------------------------------
- * VirtualizedListRow
- * ------------------------------------------------------------------------- */
-
-const RenderItemContext = createContext<(index: number) => ReactNode>(
-  () => null
-);
-(RenderItemContext as any).displayName = "RenderItemContext";
-
-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;
-}
-
-export interface IVirtualizedList {
-  scrollToIndex(index: number): void;
-}
-
-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 change, we need to re-render the virtualized list,
-    // since it doesn't currently support row height changes
-    items,
-  ]);
-
-  // 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
- * ------------------------------------------------------------------------- */
-
-export type ListViewItemInfo = {
-  isDragOverlay: boolean;
-  activeDragIndex?: number;
-};
-
-type ChildrenProps = {
-  children: ReactNode;
-};
-
-type RenderProps<T> = {
-  data: T[];
-  renderItem: (item: T, index: number, info: ListViewItemInfo) => ReactNode;
-  keyExtractor: (item: T, index: number) => string;
-  /**
-   * Each item must have an `id` in order to be sortable.
-   *
-   * Additionally, the key extracted with `keyExtractor` must match the ListItem.Row `id`.
-   */
-  sortable?: boolean;
-  virtualized?: Size;
-};
-
-type ListViewVariant = "normal" | "bare";
-
-type ListViewSectionHeaderVariant = "normal" | "label";
-
-export type ListViewRootProps = {
-  id?: string;
-  className?: string;
-  style?: CSSProperties;
-  role?: string;
-  "aria-labelledby"?: string;
-  "aria-orientation"?: "vertical" | "horizontal";
-  "aria-multiselectable"?: boolean;
-  onPress?: () => void;
-  scrollable?: boolean;
-  expandable?: boolean;
-  onMoveItem?: MoveDragItemHandler;
-  indentation?: number;
-  acceptsDrop?: DropValidator;
-  pressEventName?: PressEventName;
-  variant?: ListViewVariant;
-  sectionHeaderVariant?: ListViewSectionHeaderVariant;
-  divider?: boolean;
-  gap?: number;
-  colorScheme?: ListColorScheme;
-  containerRef?: React.RefObject<HTMLDivElement | null>;
-  onDragOver?: React.DragEventHandler<HTMLDivElement>;
-  onDragEnter?: React.DragEventHandler<HTMLDivElement>;
-  onDragLeave?: React.DragEventHandler<HTMLDivElement>;
-  onDrop?: React.DragEventHandler<HTMLDivElement>;
-  renderEmptyState?: () => ReactNode;
-  getDropTargetParentIndex?: SortableItemContextProps["getDropTargetParentIndex"];
-  sharedDragProps?: SharedDragProps;
-  sortableId?: string;
-};
-
-const ListViewRootInner = forwardRefGeneric(function ListViewRootInner<T>(
-  {
-    id,
-    className,
-    style,
-    role,
-    "aria-labelledby": ariaLabelledby,
-    "aria-orientation": ariaOrientation,
-    "aria-multiselectable": ariaMultiselectable,
-    onPress,
-    scrollable = false,
-    expandable = true,
-    sortable = false,
-    divider = false,
-    onMoveItem,
-    indentation = 12,
-    acceptsDrop,
-    data,
-    renderItem,
-    keyExtractor,
-    virtualized,
-    variant = "normal",
-    sectionHeaderVariant = "normal",
-    pressEventName = "onClick",
-    colorScheme = "primary",
-    gap = 0,
-    containerRef,
-    onDragOver,
-    onDragEnter,
-    onDragLeave,
-    onDrop,
-    renderEmptyState,
-    getDropTargetParentIndex,
-    sharedDragProps,
-    sortableId,
-  }: RenderProps<T> & ListViewRootProps,
-  forwardedRef: ForwardedRef<IVirtualizedList>
-) {
-  const handleClick = useCallback(
-    (event: React.MouseEvent) => {
-      if (
-        event.target instanceof HTMLElement &&
-        event.target.classList.contains("scroll-component")
-      )
-        return;
-
-      // As a hack, we call preventDefault in a row if the event was handled.
-      // If the event wasn't handled already, we call onPress here.
-      if (!event.isDefaultPrevented()) {
-        onPress?.();
-      }
-    },
-    [onPress]
-  );
-
-  const renderChild = useCallback(
-    (index: number) => renderItem(data[index], index, { isDragOverlay: false }),
-    [data, renderItem]
-  );
-
-  // TODO: Do we still use section header properties anywhere?
-  const defaultContextValue = useMemo(
-    (): ListRowContextValue => ({
-      colorScheme,
-      marginType: "none",
-      selectedPosition: "only",
-      sortable,
-      expandable,
-      divider,
-      pressEventName,
-      variant,
-      gap,
-      sectionHeaderVariant,
-      isSectionHeader: false,
-    }),
-    [
-      colorScheme,
-      sortable,
-      expandable,
-      divider,
-      pressEventName,
-      variant,
-      gap,
-      sectionHeaderVariant,
-    ]
-  );
-
-  const getItemContextValue = useCallback(
-    (i: number): ListRowContextValue | undefined => {
-      if (variant === "bare" || variant === "normal")
-        return defaultContextValue;
-
-      const current = renderChild(i);
-
-      if (!isValidElement(current)) return;
-
-      const prevChild = i - 1 >= 0 && renderChild(i - 1);
-      const nextChild = i + 1 < data.length && renderChild(i + 1);
-
-      const next: ReactElement<any> | undefined = isValidElement(nextChild)
-        ? nextChild
-        : undefined;
-      const prev: ReactElement<any> | undefined = isValidElement(prevChild)
-        ? prevChild
-        : undefined;
-
-      const hasMarginTop = !prev;
-      const hasMarginBottom =
-        !next ||
-        (current as any).props.isSectionHeader ||
-        (next && (next as any).props.isSectionHeader);
-
-      let marginType: ListRowMarginType;
-
-      if (hasMarginTop && hasMarginBottom) {
-        marginType = "vertical";
-      } else if (hasMarginBottom) {
-        marginType = "bottom";
-      } else if (hasMarginTop) {
-        marginType = "top";
-      } else {
-        marginType = "none";
-      }
-
-      let selectedPosition: ListRowPosition = "only";
-
-      if ((current as any).props.selected) {
-        const nextSelected =
-          next && !next.props.isSectionHeader && (next as any).props.selected;
-        const prevSelected =
-          prev && !prev.props.isSectionHeader && (prev as any).props.selected;
-
-        if (nextSelected && prevSelected) {
-          selectedPosition = "middle";
-        } else if (nextSelected && !prevSelected) {
-          selectedPosition = "first";
-        } else if (!nextSelected && prevSelected) {
-          selectedPosition = "last";
-        }
-      }
-
-      return {
-        colorScheme,
-        marginType,
-        selectedPosition,
-        sortable,
-        expandable,
-        divider,
-        pressEventName,
-        variant,
-        sectionHeaderVariant,
-        isSectionHeader: (current as any).props.isSectionHeader,
-        gap,
-      };
-    },
-    [
-      variant,
-      defaultContextValue,
-      renderChild,
-      data.length,
-      colorScheme,
-      sortable,
-      expandable,
-      divider,
-      pressEventName,
-      sectionHeaderVariant,
-      gap,
-    ]
-  );
-
-  const draggingContextOverlayValue = useMemo(
-    (): ListViewDraggingContextValue => ({ indentation, isDragOverlay: true }),
-    [indentation]
-  );
-
-  const renderOverlay = useCallback(
-    (index: number) => (
-      <div style={{ opacity: 0.25 }}>
-        <ListViewDraggingContext.Provider value={draggingContextOverlayValue}>
-          {renderItem(data[index], index, { isDragOverlay: true })}
-        </ListViewDraggingContext.Provider>
-      </div>
-    ),
-    [draggingContextOverlayValue, renderItem, data]
-  );
-
-  const renderWrappedChild = useCallback(
-    (index: number) => {
-      const contextValue = getItemContextValue(index);
-      const current = renderChild(index);
-
-      if (!contextValue || !isValidElement(current)) return null;
-
-      return (
-        <ListRowContext.Provider key={current.key} value={contextValue}>
-          {current}
-        </ListRowContext.Provider>
-      );
-    },
-    [getItemContextValue, renderChild]
-  );
-
-  const ids = useMemo(() => data.map(keyExtractor), [keyExtractor, data]);
-
-  const withSortable = (children: ReactNode) =>
-    sortable ? (
-      <Sortable.Root
-        id={sortableId}
-        onMoveItem={onMoveItem}
-        keys={ids}
-        renderOverlay={renderOverlay}
-        acceptsDrop={acceptsDrop}
-        getDropTargetParentIndex={getDropTargetParentIndex}
-        sharedDragProps={sharedDragProps}
-      >
-        {children}
-      </Sortable.Root>
-    ) : (
-      children
-    );
-
-  const withScrollable = (
-    children: (scrollElementRef: HTMLDivElement | null) => ReactNode
-  ) => (scrollable ? <ScrollArea>{children}</ScrollArea> : children(null));
-
-  const getItemHeight = useCallback(
-    (index: number) => {
-      const child = getItemContextValue(index);
-      const height =
-        child?.isSectionHeader && child.sectionHeaderVariant === "label"
-          ? SECTION_HEADER_LABEL_HEIGHT
-          : ROW_HEIGHT;
-      return height;
-    },
-    [getItemContextValue]
-  );
-
-  const getKey = useCallback(
-    (index: number) => keyExtractor(data[index], index),
-    [data, keyExtractor]
-  );
-
-  const draggingContextValue = useMemo(() => ({ indentation }), [indentation]);
-  const gapStyle = useMemo(() => ({ gap: `${gap}px` }), [gap]);
-
-  return (
-    <ListViewDraggingContext.Provider value={draggingContextValue}>
-      <div
-        id={id}
-        role={role}
-        aria-labelledby={ariaLabelledby}
-        aria-orientation={ariaOrientation}
-        aria-multiselectable={ariaMultiselectable}
-        className={mergeConflictingClassNames(
-          [
-            `flex flex-col text-text-muted ${scrollable ? "flex-1" : "flex-none"} `,
-            className,
-          ],
-          {
-            categories: ["flex"],
-          }
-        )}
-        style={{ ...gapStyle, ...style }}
-        {...{
-          [pressEventName]: handleClick,
-        }}
-        ref={containerRef}
-        onDragOver={onDragOver}
-        onDragEnter={onDragEnter}
-        onDragLeave={onDragLeave}
-        onDrop={onDrop}
-      >
-        {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)
-                )
-              )
-            )}
-      </div>
-    </ListViewDraggingContext.Provider>
-  );
-});
-
-const ListViewRoot = memoGeneric(ListViewRootInner) as typeof ListViewRootInner;
-
-const ChildrenListViewInner = forwardRef(function ChildrenListViewInner(
-  { children, ...rest }: ChildrenProps & ListViewRootProps,
-  forwardedRef: ForwardedRef<IVirtualizedList>
-) {
-  const items: ReactElement<any>[] = useMemo(
-    () =>
-      Children.toArray(children).flatMap((child) =>
-        isValidElement(child) ? [child] : []
-      ),
-    [children]
-  );
-
-  return (
-    <ListViewRoot
-      ref={forwardedRef}
-      {...rest}
-      data={items}
-      keyExtractor={useCallback(
-        ({ key }: { key: string | number | null }, index: number) =>
-          typeof key === "string" ? key : (key ?? index).toString(),
-        []
-      )}
-      renderItem={useCallback((item: ReactElement<any>) => item, [])}
-    />
-  );
-});
-
-const ChildrenListView = memo(ChildrenListViewInner);
-
-const SimpleListViewInner = forwardRefGeneric(function SimpleListViewInner<
-  T = any,
->(
-  props: (ChildrenProps | RenderProps<T>) & ListViewRootProps,
-  forwardedRef: ForwardedRef<IVirtualizedList>
-) {
-  if ("children" in props) {
-    return <ChildrenListView ref={forwardedRef} {...props} />;
-  } else {
-    return <ListViewRoot ref={forwardedRef} {...props} />;
-  }
-});
-
-/**
- * A ListView can be created either with `children` or render props
- */
-const SimpleListView = memoGeneric(SimpleListViewInner);
+  ListViewItemInfo,
+  ListViewRoot,
+  ROW_HEIGHT,
+  SECTION_HEADER_LABEL_HEIGHT,
+} from "./listView/ListViewRoot";
+import {
+  ListViewClickInfo,
+  ListViewDragIndicatorElement,
+  ListViewRow,
+  ListViewRowProps,
+} from "./listView/ListViewRow";
+import { ListViewRowTitle } from "./listView/ListViewRowTitle";
+import { normalizeListTargetIndex } from "./sorting/sorting";
 
 export namespace ListView {
-  export const RowTitle = memo(ListViewRowTitle);
-  export const EditableRowTitle = memo(ListViewEditableRowTitle);
-  export const Row = memoGeneric(ListViewRow);
-  export const Root = SimpleListView;
+  export const RowTitle = ListViewRowTitle;
+  export const EditableRowTitle = ListViewEditableRowTitle;
+  export const Row = ListViewRow;
+  export const Root = ListViewRoot;
   export const RowContext = ListRowContext;
   export type ClickInfo = ListViewClickInfo;
   export type ItemInfo = ListViewItemInfo;