@proyecto-viviana/solidaria-components 0.2.9 → 0.3.0

package/src/Virtualizer.tsx

@@ -14,10 +14,15 @@ import {
   onMount,
   splitProps,
   useContext,
-} from 'solid-js';
-import type { DragTypes, DropOperation, DropTarget, ItemDropTarget } from '@proyecto-viviana/solid-stately';
-import { CollectionRendererContext, type CollectionRendererContextValue } from './Collection';
-import { filterDOMProps } from './utils';
+} from "solid-js";
+import type {
+  DragTypes,
+  DropOperation,
+  DropTarget,
+  ItemDropTarget,
+} from "@proyecto-viviana/solid-stately";
+import { CollectionRendererContext, type CollectionRendererContextValue } from "./Collection";
+import { filterDOMProps } from "./utils";
 import {
   GridLayout,
   ListLayout,
@@ -35,26 +40,19 @@ import {
   type VirtualizerDropTarget,
   type VirtualizerVisibleRange,
   type WaterfallLayoutOptions,
-} from './VirtualizerLayouts';
+} from "./VirtualizerLayouts";
 
 export interface LayoutOptionsDelegate<O> {
   useLayoutOptions?(): O;
 }
 
 export interface VirtualizerLayout<O = unknown> extends LayoutOptionsDelegate<O> {
-  getVisibleRange?(
-    context: VirtualizerRangeContext,
-    options?: O
-  ): VirtualizerVisibleRange;
-  getLayoutInfo?(
-    index: number,
-    context: VirtualizerLayoutInfoContext,
-    options?: O
-  ): LayoutInfo;
+  getVisibleRange?(context: VirtualizerRangeContext, options?: O): VirtualizerVisibleRange;
+  getLayoutInfo?(index: number, context: VirtualizerLayoutInfoContext, options?: O): LayoutInfo;
   getDropTargetFromPoint?(
     point: Point,
     itemCount: number,
-    options?: O
+    options?: O,
   ): VirtualizerDropTarget | null;
 }
 
@@ -64,8 +62,8 @@ export interface VirtualizerLayoutClass<O> {
 
 export type VirtualizerKeyboardNavigationOverride = (
   target: DropTarget | null,
-  direction: 'next' | 'previous',
-  isValidDropTarget: (target: DropTarget) => boolean
+  direction: "next" | "previous",
+  isValidDropTarget: (target: DropTarget) => boolean,
 ) => DropTarget | null;
 
 export interface VirtualizerContextValue<O = unknown> {
@@ -75,19 +73,25 @@ export interface VirtualizerContextValue<O = unknown> {
   getVisibleRange: (itemCount: number) => VirtualizerVisibleRange;
   getLayoutInfo: (index: number) => LayoutInfo;
   getDropTargetFromPoint: (point: Point, itemCount: number) => VirtualizerDropTarget | null;
-  setDropTargetResolver: ((resolver: VirtualizerDropTargetResolver | undefined) => void);
-  setDropTargetItemCountResolver: ((resolver: (() => number) | undefined) => void);
-  setDropTargetIndexResolver: ((resolver: ((key: string | number) => number | null) | undefined) => void);
-  setDropOperationResolver: ((resolver: VirtualizerDropOperationResolver | undefined) => void);
-  setKeyboardNavigationOverride: ((override: VirtualizerKeyboardNavigationOverride | undefined) => void);
+  setDropTargetResolver: (resolver: VirtualizerDropTargetResolver | undefined) => void;
+  setDropTargetItemCountResolver: (resolver: (() => number) | undefined) => void;
+  setDropTargetIndexResolver: (
+    resolver: ((key: string | number) => number | null) | undefined,
+  ) => void;
+  setDropOperationResolver: (resolver: VirtualizerDropOperationResolver | undefined) => void;
+  setKeyboardNavigationOverride: (
+    override: VirtualizerKeyboardNavigationOverride | undefined,
+  ) => void;
   getBaseKeyboardNavigationTarget: VirtualizerKeyboardNavigationOverride;
 }
 
-export type VirtualizerDropTargetResolver = (target: VirtualizerDropTarget) => VirtualizerDropTarget;
+export type VirtualizerDropTargetResolver = (
+  target: VirtualizerDropTarget,
+) => VirtualizerDropTarget;
 export type VirtualizerDropOperationResolver = (
   target: DropTarget,
   types: DragTypes,
-  allowedOperations: DropOperation[]
+  allowedOperations: DropOperation[],
 ) => DropOperation;
 
 export const VirtualizerContext = createContext<VirtualizerContextValue<unknown> | null>(null);
@@ -96,8 +100,10 @@ export function useVirtualizerContext<O>(): VirtualizerContextValue<O> | null {
   return useContext(VirtualizerContext) as VirtualizerContextValue<O> | null;
 }
 
-export interface VirtualizerProps<O>
-  extends Omit<JSX.HTMLAttributes<HTMLDivElement>, 'children' | 'class' | 'style'> {
+export interface VirtualizerProps<O> extends Omit<
+  JSX.HTMLAttributes<HTMLDivElement>,
+  "children" | "class" | "style"
+> {
   /** The child collection to virtualize (e.g. ListBox, GridList, or Table). */
   children: JSX.Element;
   /** Layout object or constructor for layout behavior and options delegation. */
@@ -105,7 +111,10 @@ export interface VirtualizerProps<O>
   /** Layout options consumed by the layout implementation. */
   layoutOptions?: O;
   /** Optional renderer for collection drop indicators in virtualized flows. */
-  renderDropIndicator?: (index: number, position: 'before' | 'after' | 'on') => JSX.Element | undefined;
+  renderDropIndicator?: (
+    index: number,
+    position: "before" | "after" | "on",
+  ) => JSX.Element | undefined;
   /** Optional operation resolver for collection drop target operations. */
   getDropOperation?: VirtualizerDropOperationResolver;
   class?: string;
@@ -114,7 +123,7 @@ export interface VirtualizerProps<O>
 
 function getObjectValue<T extends object, K extends keyof T>(
   value: T | undefined,
-  key: K
+  key: K,
 ): T[K] | undefined {
   return value?.[key];
 }
@@ -145,39 +154,39 @@ function isSameLayoutInfo(a: LayoutInfo, b: LayoutInfo): boolean {
  */
 export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   const [local, domProps] = splitProps(props, [
-    'children',
-    'layout',
-    'layoutOptions',
-    'renderDropIndicator',
-    'getDropOperation',
-    'class',
-    'style',
+    "children",
+    "layout",
+    "layoutOptions",
+    "renderDropIndicator",
+    "getDropOperation",
+    "class",
+    "style",
   ]);
   const [scrollOffset, setScrollOffset] = createSignal(0);
   const [measuredViewportSize, setMeasuredViewportSize] = createSignal(0);
   const [measuredViewportWidth, setMeasuredViewportWidth] = createSignal(0);
-  const [dropTargetResolver, setDropTargetResolver] = createSignal<VirtualizerDropTargetResolver | undefined>(
-    undefined
-  );
-  const [dropTargetItemCountResolver, setDropTargetItemCountResolver] = createSignal<(() => number) | undefined>(
-    undefined
-  );
+  const [dropTargetResolver, setDropTargetResolver] = createSignal<
+    VirtualizerDropTargetResolver | undefined
+  >(undefined);
+  const [dropTargetItemCountResolver, setDropTargetItemCountResolver] = createSignal<
+    (() => number) | undefined
+  >(undefined);
   const [dropTargetIndexResolver, setDropTargetIndexResolver] = createSignal<
     ((key: string | number) => number | null) | undefined
   >(undefined);
-  const [dropOperationResolver, setDropOperationResolver] = createSignal<VirtualizerDropOperationResolver | undefined>(
-    undefined
-  );
-  const [keyboardNavigationOverride, setKeyboardNavigationOverride] = createSignal<VirtualizerKeyboardNavigationOverride | undefined>(
-    undefined
-  );
+  const [dropOperationResolver, setDropOperationResolver] = createSignal<
+    VirtualizerDropOperationResolver | undefined
+  >(undefined);
+  const [keyboardNavigationOverride, setKeyboardNavigationOverride] = createSignal<
+    VirtualizerKeyboardNavigationOverride | undefined
+  >(undefined);
   let containerRef: HTMLDivElement | undefined;
   const fallbackLayout = new ListLayout();
   const visibleRangeCache = new Map<number, VirtualizerVisibleRange>();
   const layoutInfoCache = new Map<number, LayoutInfo>();
 
   const layout = createMemo<VirtualizerLayout<O>>(() => {
-    if (typeof local.layout === 'function') {
+    if (typeof local.layout === "function") {
       return new local.layout();
     }
     return local.layout;
@@ -194,10 +203,12 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     return local.layoutOptions ?? fromLayout;
   });
 
-  const virtualOptions = createMemo(() => resolvedLayoutOptions() as DefaultVirtualizerLayoutOptions | undefined);
+  const virtualOptions = createMemo(
+    () => resolvedLayoutOptions() as DefaultVirtualizerLayoutOptions | undefined,
+  );
   const layoutOptionsWithViewport = createMemo(() => {
     const options = resolvedLayoutOptions();
-    if (options && typeof options === 'object') {
+    if (options && typeof options === "object") {
       return {
         ...(options as Record<string, unknown>),
         viewportWidth: measuredViewportWidth(),
@@ -205,10 +216,10 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     }
     return { viewportWidth: measuredViewportWidth() } as O;
   });
-  const itemSize = createMemo(() => getObjectValue(virtualOptions(), 'itemSize') ?? 40);
-  const overscan = createMemo(() => getObjectValue(virtualOptions(), 'overscan') ?? 2);
+  const itemSize = createMemo(() => getObjectValue(virtualOptions(), "itemSize") ?? 40);
+  const overscan = createMemo(() => getObjectValue(virtualOptions(), "overscan") ?? 2);
   const viewportSize = createMemo(
-    () => getObjectValue(virtualOptions(), 'viewportSize') ?? measuredViewportSize() ?? 0
+    () => getObjectValue(virtualOptions(), "viewportSize") ?? measuredViewportSize() ?? 0,
   );
 
   const getVisibleRange = (itemCount: number): VirtualizerVisibleRange => {
@@ -222,7 +233,13 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     const layoutResult = resolvedLayout().getVisibleRange?.(ctx, layoutOptionsWithViewport());
     const nextRange =
       layoutResult ??
-      calculateLinearVisibleRange(itemCount, ctx.scrollOffset, ctx.viewportSize, itemSize(), ctx.overscan);
+      calculateLinearVisibleRange(
+        itemCount,
+        ctx.scrollOffset,
+        ctx.viewportSize,
+        itemSize(),
+        ctx.overscan,
+      );
     const cachedRange = visibleRangeCache.get(itemCount);
     if (cachedRange && isSameRange(cachedRange, nextRange)) {
       return cachedRange;
@@ -252,8 +269,12 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     layoutInfoCache.set(index, nextInfo);
     return nextInfo;
   };
-  const getDropTargetFromPoint = (point: Point, itemCount: number): VirtualizerDropTarget | null => {
-    const target = resolvedLayout().getDropTargetFromPoint?.(point, itemCount, layoutOptionsWithViewport()) ??
+  const getDropTargetFromPoint = (
+    point: Point,
+    itemCount: number,
+  ): VirtualizerDropTarget | null => {
+    const target =
+      resolvedLayout().getDropTargetFromPoint?.(point, itemCount, layoutOptionsWithViewport()) ??
       fallbackLayout.getDropTargetFromPoint(point, itemCount, virtualOptions());
     if (!target) return null;
     const resolver = dropTargetResolver();
@@ -265,20 +286,26 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   const assignDropTargetItemCountResolver = (resolver: (() => number) | undefined): void => {
     setDropTargetItemCountResolver(() => resolver);
   };
-  const assignDropTargetIndexResolver = (resolver: ((key: string | number) => number | null) | undefined): void => {
+  const assignDropTargetIndexResolver = (
+    resolver: ((key: string | number) => number | null) | undefined,
+  ): void => {
     setDropTargetIndexResolver(() => resolver);
   };
-  const assignDropOperationResolver = (resolver: VirtualizerDropOperationResolver | undefined): void => {
+  const assignDropOperationResolver = (
+    resolver: VirtualizerDropOperationResolver | undefined,
+  ): void => {
     setDropOperationResolver(() => resolver);
   };
-  const assignKeyboardNavigationOverride = (override: VirtualizerKeyboardNavigationOverride | undefined): void => {
+  const assignKeyboardNavigationOverride = (
+    override: VirtualizerKeyboardNavigationOverride | undefined,
+  ): void => {
     setKeyboardNavigationOverride(() => override);
   };
   const toCollectionDropTarget = (target: VirtualizerDropTarget): DropTarget => {
-    if (target.type === 'root') return { type: 'root' };
+    if (target.type === "root") return { type: "root" };
     const key = target.key ?? target.index;
     return {
-      type: 'item',
+      type: "item",
       key,
       dropPosition: target.position,
     } as ItemDropTarget;
@@ -286,19 +313,20 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   const getCollectionDropTargetFromPoint = (
     x: number,
     y: number,
-    isValidDropTarget: (target: DropTarget) => boolean
+    isValidDropTarget: (target: DropTarget) => boolean,
   ): DropTarget | null => {
     const itemCount = dropTargetItemCountResolver()?.() ?? 0;
     const virtualTarget = getDropTargetFromPoint({ x, y }, itemCount);
     if (!virtualTarget) return null;
     const mappedTarget = toCollectionDropTarget(virtualTarget);
     if (isValidDropTarget(mappedTarget)) return mappedTarget;
-    if (mappedTarget.type === 'item') {
-      const alternatePositions: Array<'before' | 'after' | 'on'> = mappedTarget.dropPosition === 'on'
-        ? ['before', 'after']
-        : mappedTarget.dropPosition === 'before'
-          ? ['on', 'after']
-          : ['on', 'before'];
+    if (mappedTarget.type === "item") {
+      const alternatePositions: Array<"before" | "after" | "on"> =
+        mappedTarget.dropPosition === "on"
+          ? ["before", "after"]
+          : mappedTarget.dropPosition === "before"
+            ? ["on", "after"]
+            : ["on", "before"];
       for (const position of alternatePositions) {
         const alternateTarget: DropTarget = {
           ...mappedTarget,
@@ -306,7 +334,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
         };
         if (isValidDropTarget(alternateTarget)) return alternateTarget;
       }
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       if (isValidDropTarget(rootTarget)) return rootTarget;
     }
     return null;
@@ -314,81 +342,86 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   const getCollectionDropOperation = (
     target: DropTarget,
     types: DragTypes,
-    allowedOperations: DropOperation[]
+    allowedOperations: DropOperation[],
   ): DropOperation => {
     const resolver = dropOperationResolver() ?? local.getDropOperation;
     if (resolver) return resolver(target, types, allowedOperations);
-    if (allowedOperations.length === 0) return 'cancel';
-    if (target.type === 'root') {
-      if (allowedOperations.includes('copy')) return 'copy';
-      if (allowedOperations.includes('move')) return 'move';
-    } else if (target.dropPosition === 'on') {
-      if (allowedOperations.includes('copy')) return 'copy';
-      if (allowedOperations.includes('move')) return 'move';
+    if (allowedOperations.length === 0) return "cancel";
+    if (target.type === "root") {
+      if (allowedOperations.includes("copy")) return "copy";
+      if (allowedOperations.includes("move")) return "move";
+    } else if (target.dropPosition === "on") {
+      if (allowedOperations.includes("copy")) return "copy";
+      if (allowedOperations.includes("move")) return "move";
     } else {
-      if (allowedOperations.includes('move')) return 'move';
-      if (allowedOperations.includes('copy')) return 'copy';
+      if (allowedOperations.includes("move")) return "move";
+      if (allowedOperations.includes("copy")) return "copy";
     }
-    if (allowedOperations.includes('link')) return 'link';
-    return allowedOperations.find((operation) => operation !== 'cancel') ?? 'cancel';
+    if (allowedOperations.includes("link")) return "link";
+    return allowedOperations.find((operation) => operation !== "cancel") ?? "cancel";
   };
   const getBaseKeyboardNavigationTarget = (
     target: DropTarget | null,
-    direction: 'next' | 'previous',
-    isValidDropTarget: (target: DropTarget) => boolean
+    direction: "next" | "previous",
+    isValidDropTarget: (target: DropTarget) => boolean,
   ): DropTarget | null => {
     const itemCount = dropTargetItemCountResolver()?.() ?? 0;
     if (itemCount <= 0) {
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       return isValidDropTarget(rootTarget) ? rootTarget : null;
     }
 
     const resolveCurrentIndex = (currentTarget: DropTarget | null): number | null => {
-      if (!currentTarget || currentTarget.type === 'root') return null;
+      if (!currentTarget || currentTarget.type === "root") return null;
       const resolver = dropTargetIndexResolver();
       if (resolver) {
         const fromResolver = resolver(currentTarget.key);
-        if (fromResolver != null && fromResolver >= 0 && fromResolver < itemCount) return fromResolver;
+        if (fromResolver != null && fromResolver >= 0 && fromResolver < itemCount)
+          return fromResolver;
         return null;
       }
-      if (typeof currentTarget.key === 'number' && currentTarget.key >= 0 && currentTarget.key < itemCount) {
+      if (
+        typeof currentTarget.key === "number" &&
+        currentTarget.key >= 0 &&
+        currentTarget.key < itemCount
+      ) {
         return currentTarget.key;
       }
       return null;
     };
     const getCurrentIndex = (currentTarget: DropTarget | null): number => {
-      if (!currentTarget || currentTarget.type === 'root') {
-        return direction === 'next' ? -1 : itemCount;
+      if (!currentTarget || currentTarget.type === "root") {
+        return direction === "next" ? -1 : itemCount;
       }
       const resolvedIndex = resolveCurrentIndex(currentTarget);
       if (resolvedIndex != null) return resolvedIndex;
-      return direction === 'next' ? -1 : itemCount;
+      return direction === "next" ? -1 : itemCount;
     };
     const tryCurrentItemTransition = (currentTarget: DropTarget | null): DropTarget | null => {
-      if (!currentTarget || currentTarget.type !== 'item') return null;
-      const tryPosition = (position: 'before' | 'on' | 'after'): DropTarget | null => {
+      if (!currentTarget || currentTarget.type !== "item") return null;
+      const tryPosition = (position: "before" | "on" | "after"): DropTarget | null => {
         if (currentTarget.dropPosition === position) return null;
         const nextTarget: DropTarget = {
-          type: 'item',
+          type: "item",
           key: currentTarget.key,
           dropPosition: position,
         };
         return isValidDropTarget(nextTarget) ? nextTarget : null;
       };
 
-      if (direction === 'next') {
-        if (currentTarget.dropPosition === 'before') {
-          return tryPosition('on') ?? tryPosition('after');
+      if (direction === "next") {
+        if (currentTarget.dropPosition === "before") {
+          return tryPosition("on") ?? tryPosition("after");
         }
-        if (currentTarget.dropPosition === 'on') {
-          return tryPosition('after');
+        if (currentTarget.dropPosition === "on") {
+          return tryPosition("after");
         }
       } else {
-        if (currentTarget.dropPosition === 'after') {
-          return tryPosition('on') ?? tryPosition('before');
+        if (currentTarget.dropPosition === "after") {
+          return tryPosition("on") ?? tryPosition("before");
         }
-        if (currentTarget.dropPosition === 'on') {
-          return tryPosition('before');
+        if (currentTarget.dropPosition === "on") {
+          return tryPosition("before");
         }
       }
 
@@ -397,19 +430,14 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     const scanFromIndex = (
       startIndex: number,
       step: number,
-      directionForInsertion: 'next' | 'previous'
+      directionForInsertion: "next" | "previous",
     ): DropTarget | null => {
-      for (
-        let index = startIndex;
-        index >= 0 && index < itemCount;
-        index += step
-      ) {
-        const onTarget = tryTarget(index, 'on');
+      for (let index = startIndex; index >= 0 && index < itemCount; index += step) {
+        const onTarget = tryTarget(index, "on");
         if (onTarget) return onTarget;
 
-        const insertionOrder: Array<'before' | 'after'> = directionForInsertion === 'next'
-          ? ['before', 'after']
-          : ['after', 'before'];
+        const insertionOrder: Array<"before" | "after"> =
+          directionForInsertion === "next" ? ["before", "after"] : ["after", "before"];
         for (const position of insertionOrder) {
           const insertionTarget = tryTarget(index, position);
           if (insertionTarget) return insertionTarget;
@@ -418,62 +446,59 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
       return null;
     };
     const findNavigationTarget = (currentIndex: number, step = 1): DropTarget | null => {
-      const delta = direction === 'next' ? 1 : -1;
+      const delta = direction === "next" ? 1 : -1;
       const stepSize = Math.max(1, step);
       const nextStart = currentIndex + delta * stepSize;
       const clampedStart = Math.max(0, Math.min(itemCount - 1, nextStart));
       if (nextStart < 0 || nextStart >= itemCount) {
-        const rootTarget: DropTarget = { type: 'root' };
+        const rootTarget: DropTarget = { type: "root" };
         return isValidDropTarget(rootTarget) ? rootTarget : null;
       }
       const primaryTarget = scanFromIndex(clampedStart, delta, direction);
       if (primaryTarget) return primaryTarget;
-      const oppositeDirection: 'next' | 'previous' = direction === 'next' ? 'previous' : 'next';
+      const oppositeDirection: "next" | "previous" = direction === "next" ? "previous" : "next";
       const oppositeTarget = scanFromIndex(clampedStart - delta, -delta, oppositeDirection);
       if (oppositeTarget) return oppositeTarget;
 
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       return isValidDropTarget(rootTarget) ? rootTarget : null;
     };
-    const tryTarget = (
-      index: number,
-      position: 'on' | 'before' | 'after'
-    ): DropTarget | null => {
+    const tryTarget = (index: number, position: "on" | "before" | "after"): DropTarget | null => {
       const layoutInfo = getLayoutInfo(index);
       const virtualTarget = getDropTargetFromPoint(
         {
           x: layoutInfo.rect.x + 1,
           y: layoutInfo.rect.y + layoutInfo.rect.height / 2,
         },
-        itemCount
+        itemCount,
       );
-      if (!virtualTarget || virtualTarget.type === 'root') return null;
+      if (!virtualTarget || virtualTarget.type === "root") return null;
       const nextTarget = toCollectionDropTarget({ ...virtualTarget, position });
       return isValidDropTarget(nextTarget) ? nextTarget : null;
     };
-    const tryBoundaryTarget = (boundaryDirection: 'next' | 'previous'): DropTarget | null => {
-      const boundaryIndex = boundaryDirection === 'next' ? 0 : itemCount - 1;
-      const boundaryOrder: Array<'before' | 'on' | 'after'> = boundaryDirection === 'next'
-        ? ['before', 'on', 'after']
-        : ['after', 'on', 'before'];
+    const tryBoundaryTarget = (boundaryDirection: "next" | "previous"): DropTarget | null => {
+      const boundaryIndex = boundaryDirection === "next" ? 0 : itemCount - 1;
+      const boundaryOrder: Array<"before" | "on" | "after"> =
+        boundaryDirection === "next" ? ["before", "on", "after"] : ["after", "on", "before"];
       for (const position of boundaryOrder) {
         const candidate = tryTarget(boundaryIndex, position);
         if (candidate) return candidate;
       }
       return null;
     };
-    const directTransition = resolveCurrentIndex(target) != null ? tryCurrentItemTransition(target) : null;
+    const directTransition =
+      resolveCurrentIndex(target) != null ? tryCurrentItemTransition(target) : null;
     if (directTransition) return directTransition;
-    if (!target || target.type === 'root') {
+    if (!target || target.type === "root") {
       const boundaryTarget = tryBoundaryTarget(direction);
       if (boundaryTarget) return boundaryTarget;
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       return isValidDropTarget(rootTarget) ? rootTarget : null;
     }
     const currentIndex = getCurrentIndex(target);
-    const nextStart = currentIndex + (direction === 'next' ? 1 : -1);
+    const nextStart = currentIndex + (direction === "next" ? 1 : -1);
     if (nextStart < 0 || nextStart >= itemCount) {
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       if (isValidDropTarget(rootTarget)) return rootTarget;
       const wrappedBoundary = tryBoundaryTarget(direction);
       if (wrappedBoundary) return wrappedBoundary;
@@ -483,8 +508,8 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   };
   const getKeyboardNavigationTarget = (
     target: DropTarget | null,
-    direction: 'next' | 'previous',
-    isValidDropTarget: (target: DropTarget) => boolean
+    direction: "next" | "previous",
+    isValidDropTarget: (target: DropTarget) => boolean,
   ): DropTarget | null => {
     // If a collection component (e.g. Tree) has installed a keyboard navigation override,
     // delegate to it. This enables collection-aware navigation (tree branch traversal, etc.).
@@ -496,20 +521,19 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   };
   const getKeyboardPageNavigationTarget = (
     target: DropTarget | null,
-    direction: 'next' | 'previous',
-    isValidDropTarget: (target: DropTarget) => boolean
+    direction: "next" | "previous",
+    isValidDropTarget: (target: DropTarget) => boolean,
   ): DropTarget | null => {
     const itemCount = dropTargetItemCountResolver()?.() ?? 0;
     if (itemCount <= 0) {
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       return isValidDropTarget(rootTarget) ? rootTarget : null;
     }
-    if (!target || target.type === 'root') {
-      const startIndex = direction === 'next' ? 0 : itemCount - 1;
-      const delta = direction === 'next' ? 1 : -1;
-      const boundaryOrder: Array<'before' | 'on' | 'after'> = direction === 'next'
-        ? ['before', 'on', 'after']
-        : ['after', 'on', 'before'];
+    if (!target || target.type === "root") {
+      const startIndex = direction === "next" ? 0 : itemCount - 1;
+      const delta = direction === "next" ? 1 : -1;
+      const boundaryOrder: Array<"before" | "on" | "after"> =
+        direction === "next" ? ["before", "on", "after"] : ["after", "on", "before"];
       for (let index = startIndex; index >= 0 && index < itemCount; index += delta) {
         const layoutInfo = getLayoutInfo(index);
         const virtualTarget = getDropTargetFromPoint(
@@ -517,50 +541,53 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
             x: layoutInfo.rect.x + 1,
             y: layoutInfo.rect.y + layoutInfo.rect.height / 2,
           },
-          itemCount
+          itemCount,
         );
-        if (!virtualTarget || virtualTarget.type === 'root') continue;
+        if (!virtualTarget || virtualTarget.type === "root") continue;
         for (const position of boundaryOrder) {
           const candidate = toCollectionDropTarget({ ...virtualTarget, position });
           if (isValidDropTarget(candidate)) return candidate;
         }
       }
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       return isValidDropTarget(rootTarget) ? rootTarget : null;
     }
     const resolver = dropTargetIndexResolver();
     const resolvedIndex = resolver?.(target.key);
-    const currentIndex = resolvedIndex != null
-      ? resolvedIndex
-      : resolver
-        ? (direction === 'next' ? -1 : itemCount)
-        : (typeof target.key === 'number' ? target.key : (direction === 'next' ? -1 : itemCount));
+    const currentIndex =
+      resolvedIndex != null
+        ? resolvedIndex
+        : resolver
+          ? direction === "next"
+            ? -1
+            : itemCount
+          : typeof target.key === "number"
+            ? target.key
+            : direction === "next"
+              ? -1
+              : itemCount;
     const pageSize = Math.max(1, Math.floor(viewportSize() / Math.max(1, itemSize())));
-    const delta = direction === 'next' ? 1 : -1;
+    const delta = direction === "next" ? 1 : -1;
     const nextStart = currentIndex + delta * pageSize;
     const clampedStart = Math.max(0, Math.min(itemCount - 1, nextStart));
-    const tryTarget = (
-      index: number,
-      position: 'on' | 'before' | 'after'
-    ): DropTarget | null => {
+    const tryTarget = (index: number, position: "on" | "before" | "after"): DropTarget | null => {
       const layoutInfo = getLayoutInfo(index);
       const virtualTarget = getDropTargetFromPoint(
         {
           x: layoutInfo.rect.x + 1,
           y: layoutInfo.rect.y + layoutInfo.rect.height / 2,
         },
-        itemCount
+        itemCount,
       );
-      if (!virtualTarget || virtualTarget.type === 'root') return null;
+      if (!virtualTarget || virtualTarget.type === "root") return null;
       const nextTarget = toCollectionDropTarget({ ...virtualTarget, position });
       return isValidDropTarget(nextTarget) ? nextTarget : null;
     };
     const scanFromIndex = (startIndex: number, step: number): DropTarget | null => {
-      const insertionOrder: Array<'before' | 'after'> = step > 0
-        ? ['before', 'after']
-        : ['after', 'before'];
+      const insertionOrder: Array<"before" | "after"> =
+        step > 0 ? ["before", "after"] : ["after", "before"];
       for (let index = startIndex; index >= 0 && index < itemCount; index += step) {
-        const onTarget = tryTarget(index, 'on');
+        const onTarget = tryTarget(index, "on");
         if (onTarget) return onTarget;
         for (const position of insertionOrder) {
           const insertionTarget = tryTarget(index, position);
@@ -570,27 +597,27 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
       return null;
     };
     if (nextStart < 0 || nextStart >= itemCount) {
-      if (direction === 'next') {
-        const endBoundaryTarget = tryTarget(itemCount - 1, 'after')
-          ?? tryTarget(itemCount - 1, 'on')
-          ?? tryTarget(itemCount - 1, 'before');
+      if (direction === "next") {
+        const endBoundaryTarget =
+          tryTarget(itemCount - 1, "after") ??
+          tryTarget(itemCount - 1, "on") ??
+          tryTarget(itemCount - 1, "before");
         if (endBoundaryTarget) return endBoundaryTarget;
         const backwardFallback = scanFromIndex(itemCount - 1, -1);
         if (backwardFallback) return backwardFallback;
       } else {
         if (currentIndex <= 0) {
-          const rootTarget: DropTarget = { type: 'root' };
+          const rootTarget: DropTarget = { type: "root" };
           if (isValidDropTarget(rootTarget)) return rootTarget;
         }
-        const startBoundaryTarget = tryTarget(0, 'before')
-          ?? tryTarget(0, 'on')
-          ?? tryTarget(0, 'after');
+        const startBoundaryTarget =
+          tryTarget(0, "before") ?? tryTarget(0, "on") ?? tryTarget(0, "after");
         if (startBoundaryTarget) return startBoundaryTarget;
         const forwardFallback = scanFromIndex(0, 1);
         if (forwardFallback) return forwardFallback;
       }
 
-      const rootTarget: DropTarget = { type: 'root' };
+      const rootTarget: DropTarget = { type: "root" };
       return isValidDropTarget(rootTarget) ? rootTarget : null;
     }
     const primaryTarget = scanFromIndex(clampedStart, delta);
@@ -598,7 +625,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     const oppositeTarget = scanFromIndex(clampedStart - delta, -delta);
     if (oppositeTarget) return oppositeTarget;
 
-    const rootTarget: DropTarget = { type: 'root' };
+    const rootTarget: DropTarget = { type: "root" };
     return isValidDropTarget(rootTarget) ? rootTarget : null;
   };
 
@@ -642,9 +669,15 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   onMount(() => {
     updateViewportSize();
     const handleResize = () => updateViewportSize();
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
+    const resizeObserver =
+      typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateViewportSize()) : null;
+    if (containerRef && resizeObserver) {
+      resizeObserver.observe(containerRef);
+    }
     onCleanup(() => {
-      window.removeEventListener('resize', handleResize);
+      window.removeEventListener("resize", handleResize);
+      resizeObserver?.disconnect();
     });
   });
 
@@ -681,12 +714,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   );
 }
 
-export {
-  ListLayout,
-  GridLayout,
-  WaterfallLayout,
-  TableLayout,
-};
+export { ListLayout, GridLayout, WaterfallLayout, TableLayout };
 
 export type {
   VirtualizerVisibleRange,