@proyecto-viviana/solidaria-components 0.3.1 → 0.4.0

package/src/Tooltip.tsx

@@ -226,6 +226,40 @@ const TriggerWrapper: ParentComponent<{
 }> = (props) => {
   const child = () => props.children as JSX.Element;
   const [triggerElement, setTriggerElement] = createSignal<HTMLElement | null>(null);
+  const [wrapperElement, setWrapperElement] = createSignal<HTMLSpanElement | null>(null);
+  const getWrapperEventProps = () => {
+    const triggerProps = props.triggerProps as Record<string, unknown>;
+    const wrapperProps: Record<string, unknown> = {};
+    const eventPropNames = [
+      "onFocus",
+      "onBlur",
+      "onPointerEnter",
+      "onPointerLeave",
+      "onPointerOver",
+      "onPointerOut",
+      "onMouseEnter",
+      "onMouseLeave",
+      "onTouchStart",
+      "onPointerDown",
+      "onKeyDown",
+    ];
+
+    for (const propName of eventPropNames) {
+      const handler = triggerProps[propName];
+      if (typeof handler === "function") {
+        wrapperProps[propName] = handler;
+      }
+    }
+
+    if (!wrapperProps.onPointerEnter && typeof triggerProps.onMouseEnter === "function") {
+      wrapperProps.onPointerEnter = triggerProps.onMouseEnter;
+    }
+    if (!wrapperProps.onPointerLeave && typeof triggerProps.onMouseLeave === "function") {
+      wrapperProps.onPointerLeave = triggerProps.onMouseLeave;
+    }
+
+    return wrapperProps as JSX.HTMLAttributes<HTMLSpanElement>;
+  };
 
   createEffect(() => {
     const element = triggerElement();
@@ -241,7 +275,9 @@ const TriggerWrapper: ParentComponent<{
       element.removeAttribute("aria-describedby");
     }
 
-    const listeners: Array<[string, EventListener]> = [];
+    const wrapper = wrapperElement();
+    const targets = Array.from(new Set([element, wrapper].filter(Boolean))) as HTMLElement[];
+    const listeners: Array<[HTMLElement, string, EventListener]> = [];
     const eventProps = [
       ["onFocus", "focus"],
       ["onBlur", "blur"],
@@ -257,17 +293,24 @@ const TriggerWrapper: ParentComponent<{
     ] as const;
 
     for (const [propName, eventName] of eventProps) {
-      const handler = triggerProps[propName];
+      let handler = triggerProps[propName];
+      if (!handler && propName === "onPointerEnter") {
+        handler = triggerProps.onMouseEnter;
+      } else if (!handler && propName === "onPointerLeave") {
+        handler = triggerProps.onMouseLeave;
+      }
       if (typeof handler === "function") {
         const listener = handler as EventListener;
-        element.addEventListener(eventName, listener);
-        listeners.push([eventName, listener]);
+        for (const target of targets) {
+          target.addEventListener(eventName, listener);
+          listeners.push([target, eventName, listener]);
+        }
       }
     }
 
     onCleanup(() => {
-      for (const [eventName, listener] of listeners) {
-        element.removeEventListener(eventName, listener);
+      for (const [target, eventName, listener] of listeners) {
+        target.removeEventListener(eventName, listener);
       }
       if (describedBy && element.getAttribute("aria-describedby") === describedBy) {
         element.removeAttribute("aria-describedby");
@@ -279,6 +322,8 @@ const TriggerWrapper: ParentComponent<{
   // However, display:contents makes getBoundingClientRect return zeros,
   // so we pass a ref callback that finds the first actual element child.
   const handleRef = (span: HTMLSpanElement) => {
+    setWrapperElement(span);
+
     const findElementChild = (el: Element): HTMLElement | null => {
       for (const child of el.children) {
         if (child instanceof HTMLElement) {
@@ -329,7 +374,7 @@ const TriggerWrapper: ParentComponent<{
   };
 
   return (
-    <span ref={handleRef} style={{ display: "contents" }}>
+    <span {...getWrapperEventProps()} ref={handleRef} style={{ display: "contents" }}>
       {child()}
     </span>
   );
@@ -529,7 +574,9 @@ function TooltipContent(
     {
       class: props.class,
       style: props.style,
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       defaultClassName: "solidaria-Tooltip",
     },
     values,

package/src/Tree.tsx

@@ -24,6 +24,7 @@ import {
   createTree,
   createTreeItem,
   createTreeSelectionCheckbox,
+  createGridListSection,
   createFocusRing,
   createHover,
   mergeProps,
@@ -60,14 +61,17 @@ import {
   CollectionRendererContext,
   flattenCollectionEntries,
   isCollectionSection,
-  Section,
-  Header,
   type CollectionEntry,
   type CollectionRendererContextValue,
   type SectionProps,
-  type HeaderProps,
   useCollectionRenderer,
 } from "./Collection";
+import {
+  GridListHeader,
+  GridListHeaderContext,
+  GridListHeaderInnerContext,
+  type GridListHeaderProps,
+} from "./GridList";
 import { useVirtualizerContext } from "./Virtualizer";
 import {
   handleLinkClick,
@@ -242,7 +246,7 @@ export interface TreeLoadMoreItemProps extends SlotProps {
 }
 
 export interface TreeSectionProps extends SectionProps {}
-export interface TreeHeaderProps extends HeaderProps {}
+export interface TreeHeaderProps extends GridListHeaderProps {}
 
 interface TreeContextValue<T extends object> {
   state: TreeState<T, TreeCollection<T>>;
@@ -891,6 +895,7 @@ export function Tree<T extends object>(props: TreeProps<T>): JSX.Element {
       isVirtualized: ariaProps.isVirtualized,
       onAction: ariaProps.onAction,
       isDisabled: ariaProps.isDisabled,
+      keyboardNavigationBehavior: ariaProps.keyboardNavigationBehavior,
       direction: treeDirection(),
     }),
     () => state,
@@ -1565,7 +1570,9 @@ export function TreeItem<T extends object>(props: TreeItemProps<T>): JSX.Element
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
       class: local.class,
       style: local.style,
       defaultClassName: "solidaria-Tree-item",
@@ -1805,7 +1812,9 @@ export function TreeLoadMoreItem(props: TreeLoadMoreItemProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children ?? (() => (isLoading() ? "Loading more..." : "Load more")),
+      get children() {
+        return props.children ?? (() => (isLoading() ? "Loading more..." : "Load more"));
+      },
       class: props.class,
       style: props.style,
       defaultClassName: "solidaria-Tree-loadMore",
@@ -1858,7 +1867,9 @@ export function TreeItemContent(props: TreeItemContentProps): JSX.Element {
 
   const renderProps = useRenderProps(
     {
-      children: props.children,
+      get children() {
+        return props.children;
+      },
     },
     () => context,
   );
@@ -1866,12 +1877,69 @@ export function TreeItemContent(props: TreeItemContentProps): JSX.Element {
   return <>{renderProps.renderChildren()}</>;
 }
 
+/**
+ * A section within a Tree. Renders as `role="rowgroup"` and supplies its
+ * optional {@link TreeHeader} with the row/rowheader props that wire up the
+ * section's `aria-labelledby` (mirrors upstream `TreeSection`, which reuses
+ * `useGridListSection`).
+ */
 export function TreeSection(props: TreeSectionProps): JSX.Element {
-  return <Section {...props} />;
+  const [local, domProps] = splitProps(props, ["children", "class", "style", "slot", "ref"]);
+
+  const section = createGridListSection({
+    get "aria-label"() {
+      return (domProps as { "aria-label"?: string })["aria-label"];
+    },
+  });
+
+  // Mirror upstream: resolve class/style via renderProps but keep children out
+  // of it. The real children must only be evaluated inside the header providers
+  // below, otherwise a child <TreeHeader> would be instantiated in this
+  // component's owner and read the header contexts as null. The values callback
+  // runs during setup, so it must not read `local.children` either; mirror
+  // upstream's `values: undefined` with a constant.
+  const renderProps = useRenderProps(
+    {
+      children: undefined,
+      class: local.class,
+      style: local.style,
+      defaultClassName: "solidaria-TreeSection",
+    },
+    () => ({ hasChildren: true }),
+  );
+
+  const filteredDomProps = createMemo(() => filterDOMProps(domProps, { global: true }));
+
+  return (
+    <div
+      ref={(el) => assignRef(local.ref, el)}
+      {...filteredDomProps()}
+      {...section.rowGroupProps}
+      class={renderProps.class()}
+      style={renderProps.style()}
+      slot={local.slot}
+      data-section
+    >
+      <GridListHeaderContext.Provider value={section.rowProps}>
+        <GridListHeaderInnerContext.Provider value={section.rowHeaderProps}>
+          {local.children}
+        </GridListHeaderInnerContext.Provider>
+      </GridListHeaderContext.Provider>
+    </div>
+  );
 }
 
+/**
+ * The header of a {@link TreeSection}. Mirrors upstream `TreeHeader`, which is a
+ * thin wrapper over `GridListHeader` with a Tree-specific class. The row and
+ * rowheader semantics come from the enclosing section through context.
+ */
 export function TreeHeader(props: TreeHeaderProps): JSX.Element {
-  return <Header {...props} />;
+  return (
+    <GridListHeader class="solidaria-TreeHeader" {...props}>
+      {props.children}
+    </GridListHeader>
+  );
 }
 
 Tree.Item = TreeItem;

package/src/Virtualizer.tsx

@@ -32,6 +32,7 @@ import {
   type DefaultVirtualizerLayoutOptions,
   type GridLayoutOptions,
   type LayoutInfo,
+  type Orientation,
   type Point,
   type Rect,
   type Size,
@@ -70,6 +71,13 @@ export interface VirtualizerContextValue<O = unknown> {
   layout: VirtualizerLayout<O>;
   layoutOptions?: O;
   isVirtualized: boolean;
+  /**
+   * The resolved primary orientation of the layout. Consumers render their
+   * windowing spacers along this axis (`width` when `horizontal`, `height`
+   * when `vertical`) so the spacer size matches the offsets `getVisibleRange`
+   * produced.
+   */
+  orientation: Orientation;
   getVisibleRange: (itemCount: number) => VirtualizerVisibleRange;
   getLayoutInfo: (index: number) => LayoutInfo;
   getDropTargetFromPoint: (point: Point, itemCount: number) => VirtualizerDropTarget | null;
@@ -117,6 +125,13 @@ export interface VirtualizerProps<O> extends Omit<
   ) => JSX.Element | undefined;
   /** Optional operation resolver for collection drop target operations. */
   getDropOperation?: VirtualizerDropOperationResolver;
+  /**
+   * Whether the collection may scroll with the page rather than only within its
+   * own scroll container. When enabled (the default, matching react-aria-components),
+   * the visible rect is the intersection of the window viewport with the scroll view,
+   * so a virtualizer with unbounded height still virtualizes as the page scrolls.
+   */
+  allowsWindowScrolling?: boolean;
   class?: string;
   style?: string | JSX.CSSProperties;
 }
@@ -159,12 +174,29 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     "layoutOptions",
     "renderDropIndicator",
     "getDropOperation",
+    "allowsWindowScrolling",
     "class",
     "style",
   ]);
+  // The scroll view's own scroll position (its scrollTop).
   const [scrollOffset, setScrollOffset] = createSignal(0);
+  // The scroll view's horizontal scroll position (its scrollLeft), used as the
+  // primary scroll axis when the layout's orientation is horizontal.
+  const [scrollOffsetX, setScrollOffsetX] = createSignal(0);
+  // How far the scroll view's top edge is above the window viewport, due to the
+  // page (or an ancestor) being scrolled. Mirrors upstream ScrollView.viewportOffset.
+  const [viewportOffset, setViewportOffset] = createSignal(0);
+  // The window viewport height, used as the visible height cap when window scrolling.
+  const [windowViewportSize, setWindowViewportSize] = createSignal(0);
+  // The scroll view's own measured size (clientHeight/clientWidth).
   const [measuredViewportSize, setMeasuredViewportSize] = createSignal(0);
   const [measuredViewportWidth, setMeasuredViewportWidth] = createSignal(0);
+  const allowsWindowScrolling = createMemo(() => local.allowsWindowScrolling ?? true);
+  // Whether the scroll view is actively scrolling. Mirrors upstream ScrollView's
+  // `isScrolling`: while scrolling, the content gets `pointer-events: none` so pointer
+  // events don't hit rows recycling under a stationary cursor (avoiding hover-state
+  // flicker and needless hit-testing). It flips back 300ms after the last scroll.
+  const [isScrolling, setIsScrolling] = createSignal(false);
   const [dropTargetResolver, setDropTargetResolver] = createSignal<
     VirtualizerDropTargetResolver | undefined
   >(undefined);
@@ -218,15 +250,44 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   });
   const itemSize = createMemo(() => getObjectValue(virtualOptions(), "itemSize") ?? 40);
   const overscan = createMemo(() => getObjectValue(virtualOptions(), "overscan") ?? 2);
-  const viewportSize = createMemo(
-    () => getObjectValue(virtualOptions(), "viewportSize") ?? measuredViewportSize() ?? 0,
+  const orientation = createMemo<Orientation>(
+    () => getObjectValue(virtualOptions(), "orientation") ?? "vertical",
   );
+  // The effective visible height. When window scrolling, this is the scroll view's
+  // size intersected with the window viewport (capped to what is actually on screen),
+  // mirroring upstream ScrollView.updateVisibleRect. Otherwise it is the scroll view's
+  // own clientHeight. An explicit `viewportSize` layout option still takes precedence.
+  const viewportSize = createMemo(() => {
+    const explicit = getObjectValue(virtualOptions(), "viewportSize");
+    if (explicit != null) return explicit;
+    const elementSize = measuredViewportSize() ?? 0;
+    if (allowsWindowScrolling()) {
+      return Math.max(0, Math.min(elementSize - viewportOffset(), windowViewportSize()));
+    }
+    return elementSize;
+  });
+  // The top of the visible rect in content coordinates: the scroll view's own scroll
+  // position plus how far it has been pushed above the window viewport by page scroll.
+  const effectiveScrollOffset = createMemo(() =>
+    allowsWindowScrolling() ? scrollOffset() + viewportOffset() : scrollOffset(),
+  );
+  // The primary-axis scroll offset and viewport size, selected by orientation.
+  // A horizontal layout scrolls along x (scrollLeft / client width); the vertical
+  // default scrolls along y (with the window-scrolling adjustments above).
+  const mainScrollOffset = createMemo(() =>
+    orientation() === "horizontal" ? scrollOffsetX() : effectiveScrollOffset(),
+  );
+  const mainViewportSize = createMemo(() => {
+    if (orientation() !== "horizontal") return viewportSize();
+    const explicit = getObjectValue(virtualOptions(), "viewportSize");
+    return explicit != null ? explicit : measuredViewportWidth();
+  });
 
   const getVisibleRange = (itemCount: number): VirtualizerVisibleRange => {
     const ctx: VirtualizerRangeContext = {
       itemCount,
-      scrollOffset: scrollOffset(),
-      viewportSize: viewportSize(),
+      scrollOffset: mainScrollOffset(),
+      viewportSize: mainViewportSize(),
       overscan: overscan(),
       viewportWidth: measuredViewportWidth(),
     };
@@ -250,18 +311,32 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
   const getLayoutInfo = (index: number): LayoutInfo => {
     const ctx: VirtualizerLayoutInfoContext = {
       viewportWidth: measuredViewportWidth(),
+      viewportHeight: measuredViewportSize(),
     };
     const layoutResult = resolvedLayout().getLayoutInfo?.(index, ctx, layoutOptionsWithViewport());
-    const nextInfo = layoutResult ?? {
-      key: String(index),
-      index,
-      rect: {
-        x: 0,
-        y: index * itemSize(),
-        width: Math.max(0, measuredViewportWidth()),
-        height: itemSize(),
-      },
-    };
+    const nextInfo =
+      layoutResult ??
+      (orientation() === "horizontal"
+        ? {
+            key: String(index),
+            index,
+            rect: {
+              x: index * itemSize(),
+              y: 0,
+              width: itemSize(),
+              height: Math.max(0, measuredViewportSize()),
+            },
+          }
+        : {
+            key: String(index),
+            index,
+            rect: {
+              x: 0,
+              y: index * itemSize(),
+              width: Math.max(0, measuredViewportWidth()),
+              height: itemSize(),
+            },
+          });
     const cachedInfo = layoutInfoCache.get(index);
     if (cachedInfo && isSameLayoutInfo(cachedInfo, nextInfo)) {
       return cachedInfo;
@@ -566,7 +641,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
             : direction === "next"
               ? -1
               : itemCount;
-    const pageSize = Math.max(1, Math.floor(viewportSize() / Math.max(1, itemSize())));
+    const pageSize = Math.max(1, Math.floor(mainViewportSize() / Math.max(1, itemSize())));
     const delta = direction === "next" ? 1 : -1;
     const nextStart = currentIndex + delta * pageSize;
     const clampedStart = Math.max(0, Math.min(itemCount - 1, nextStart));
@@ -633,6 +708,7 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     layout: resolvedLayout(),
     layoutOptions: resolvedLayoutOptions(),
     isVirtualized: true,
+    orientation: orientation(),
     getVisibleRange,
     getLayoutInfo,
     getDropTargetFromPoint,
@@ -666,26 +742,96 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
     if (nextWidth !== measuredViewportWidth()) setMeasuredViewportWidth(nextWidth);
   };
 
+  const updateWindowViewport = () => {
+    if (typeof window === "undefined") return;
+    const next = window.innerHeight;
+    if (next !== windowViewportSize()) setWindowViewportSize(next);
+  };
+
+  // Recompute how far the scroll view's top edge sits above the window viewport.
+  // A negative bounding-rect top means the scroll view has been pushed up by page
+  // (or ancestor) scrolling; the offset is the amount scrolled past its top.
+  const updateViewportOffset = () => {
+    if (!containerRef || !allowsWindowScrolling()) return;
+    const rect = containerRef.getBoundingClientRect();
+    const next = rect.y < 0 ? -rect.y : 0;
+    if (next !== viewportOffset()) setViewportOffset(next);
+  };
+
+  let scrollFrame: number | undefined;
+  // Debounce handle that resets `isScrolling` after scrolling stops.
+  let scrollEndTimeout: ReturnType<typeof setTimeout> | undefined;
+  onCleanup(() => {
+    if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
+    if (scrollEndTimeout != null) clearTimeout(scrollEndTimeout);
+  });
+
   onMount(() => {
     updateViewportSize();
-    const handleResize = () => updateViewportSize();
+    updateWindowViewport();
+    updateViewportOffset();
+
+    const handleResize = () => {
+      updateViewportSize();
+      updateWindowViewport();
+      updateViewportOffset();
+    };
     window.addEventListener("resize", handleResize);
+
     const resizeObserver =
       typeof ResizeObserver !== "undefined" ? new ResizeObserver(() => updateViewportSize()) : null;
     if (containerRef && resizeObserver) {
       resizeObserver.observe(containerRef);
     }
+
+    // A capturing listener on the document sees scroll events on the scroll view
+    // itself as well as on any ancestor (including the page), so a single handler
+    // can update the local scroll position or the window offset as appropriate.
+    const handleDocumentScroll = (e: Event) => {
+      if (!containerRef) return;
+      const target = e.target as Node | null;
+      const isContainer = target === containerRef;
+      const isAncestor =
+        target === document ||
+        target === (window as unknown as Node) ||
+        (target instanceof Node && target.contains(containerRef));
+      if (!isContainer && !isAncestor) return;
+      // An ancestor/page scroll only matters when the collection scrolls with the page.
+      if (!isContainer && !allowsWindowScrolling()) return;
+
+      // Flag active scrolling and (re)arm the reset for 300ms after the last scroll.
+      // Our handler is already rAF-throttled, so a plain clear/reset debounce matches
+      // upstream's scrollEndTime bookkeeping without the extra accounting.
+      if (!isScrolling()) setIsScrolling(true);
+      if (scrollEndTimeout != null) clearTimeout(scrollEndTimeout);
+      scrollEndTimeout = setTimeout(() => {
+        scrollEndTimeout = undefined;
+        setIsScrolling(false);
+      }, 300);
+
+      if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
+      scrollFrame = requestAnimationFrame(() => {
+        scrollFrame = undefined;
+        if (isContainer) {
+          const next = Math.max(0, containerRef!.scrollTop);
+          if (next !== scrollOffset()) setScrollOffset(next);
+          const nextX = Math.max(0, containerRef!.scrollLeft);
+          if (nextX !== scrollOffsetX()) setScrollOffsetX(nextX);
+        } else {
+          updateViewportOffset();
+        }
+        updateViewportSize();
+      });
+    };
+    document.addEventListener("scroll", handleDocumentScroll, true);
+
     onCleanup(() => {
       window.removeEventListener("resize", handleResize);
       resizeObserver?.disconnect();
+      document.removeEventListener("scroll", handleDocumentScroll, true);
     });
   });
 
-  let scrollFrame: number | undefined;
-  onCleanup(() => {
-    if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
-  });
-
   return (
     <CollectionRendererContext.Provider value={collectionRenderer()}>
       <VirtualizerContext.Provider value={contextValue()}>
@@ -697,17 +843,19 @@ export function Virtualizer<O>(props: VirtualizerProps<O>): JSX.Element {
           class={local.class}
           style={local.style}
           data-virtualizer
-          onScroll={(e) => {
-            const target = e.currentTarget as HTMLDivElement;
-            if (scrollFrame != null) cancelAnimationFrame(scrollFrame);
-            scrollFrame = requestAnimationFrame(() => {
-              scrollFrame = undefined;
-              if (target.scrollTop !== scrollOffset()) setScrollOffset(target.scrollTop);
-              updateViewportSize();
-            });
-          }}
         >
-          {local.children}
+          {/*
+            Content wrapper mirroring upstream ScrollView's inner content div. It
+            carries the `pointer-events: none` while-scrolling optimization and is
+            otherwise a layout-transparent passthrough (the outer div remains the
+            scroll container we measure and read scroll offsets from).
+          */}
+          <div
+            data-virtualizer-content
+            style={{ "pointer-events": isScrolling() ? "none" : undefined }}
+          >
+            {local.children}
+          </div>
         </div>
       </VirtualizerContext.Provider>
     </CollectionRendererContext.Provider>
@@ -724,6 +872,7 @@ export type {
   WaterfallLayoutOptions,
   VirtualizerDropTarget,
   LayoutInfo,
+  Orientation,
   Rect,
   Size,
   Point,

package/src/VirtualizerLayouts.ts

@@ -21,6 +21,13 @@ export interface Size {
   height: number;
 }
 
+/**
+ * The primary orientation of a linear layout — the axis items stack along, which
+ * is usually the direction the collection scrolls. Mirrors React Spectrum's
+ * `Orientation` and `ListLayout`'s `orientation` option.
+ */
+export type Orientation = "horizontal" | "vertical";
+
 export interface LayoutInfo {
   key: string | number;
   index: number;
@@ -46,6 +53,13 @@ export interface DefaultVirtualizerLayoutOptions {
   itemSize?: number;
   overscan?: number;
   viewportSize?: number;
+  /**
+   * The primary orientation of the items. Items offset along `x`/`width` when
+   * `horizontal`, and along `y`/`height` when `vertical`.
+   *
+   * @default 'vertical'
+   */
+  orientation?: Orientation;
 }
 
 export interface GridLayoutOptions extends DefaultVirtualizerLayoutOptions {
@@ -62,6 +76,11 @@ export interface WaterfallLayoutOptions extends GridLayoutOptions {
 
 export interface VirtualizerLayoutInfoContext {
   viewportWidth: number;
+  /**
+   * The viewport height, used as the cross-axis size for a `horizontal` layout
+   * (the analogue of `viewportWidth` for the `vertical` default).
+   */
+  viewportHeight?: number;
 }
 
 export interface VirtualizerDropTarget {
@@ -124,15 +143,29 @@ export class ListLayout {
     context: VirtualizerLayoutInfoContext,
     options?: DefaultVirtualizerLayoutOptions,
   ): LayoutInfo {
-    const itemHeight = Math.max(1, options?.itemSize ?? 40);
+    const itemSize = Math.max(1, options?.itemSize ?? 40);
+    if ((options?.orientation ?? "vertical") === "horizontal") {
+      // Items stack along the x axis; the cross axis (height) fills the viewport.
+      return {
+        key: String(index),
+        index,
+        rect: {
+          x: index * itemSize,
+          y: 0,
+          width: itemSize,
+          height: Math.max(0, context.viewportHeight ?? 0),
+        },
+      };
+    }
+    // Items stack along the y axis; the cross axis (width) fills the viewport.
     return {
       key: String(index),
       index,
       rect: {
         x: 0,
-        y: index * itemHeight,
+        y: index * itemSize,
         width: Math.max(0, context.viewportWidth),
-        height: itemHeight,
+        height: itemSize,
       },
     };
   }
@@ -143,18 +176,20 @@ export class ListLayout {
     options?: DefaultVirtualizerLayoutOptions,
   ): VirtualizerDropTarget | null {
     if (itemCount <= 0) return { type: "root", index: -1, position: "on" };
-    const itemHeight = Math.max(1, options?.itemSize ?? 40);
-    if (point.y < 0) {
+    const itemSize = Math.max(1, options?.itemSize ?? 40);
+    // Measure the drop point along the primary (scroll) axis.
+    const offset = (options?.orientation ?? "vertical") === "horizontal" ? point.x : point.y;
+    if (offset < 0) {
       return { type: "item", index: 0, position: "before" };
     }
-    const totalHeight = itemCount * itemHeight;
-    if (point.y >= totalHeight) {
+    const totalSize = itemCount * itemSize;
+    if (offset >= totalSize) {
       return { type: "item", index: itemCount - 1, position: "after" };
     }
-    const rawIndex = Math.floor(point.y / itemHeight);
+    const rawIndex = Math.floor(offset / itemSize);
     const index = Math.max(0, Math.min(rawIndex, itemCount - 1));
-    const offsetWithinItem = Math.max(0, point.y - index * itemHeight);
-    const threshold = itemHeight / 3;
+    const offsetWithinItem = Math.max(0, offset - index * itemSize);
+    const threshold = itemSize / 3;
     const position: VirtualizerDropTarget["position"] =
       offsetWithinItem < threshold ? "before" : offsetWithinItem > threshold * 2 ? "after" : "on";
     return { type: "item", index, position };