react-native-gtkx 0.3.0-alpha.1 → 0.4.0-alpha.2

package/dist/dnd/sortable.js

@@ -1,75 +1,60 @@
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
-// `Sortable`, `SortableItem`, `useSortable` and `useSortableList` — the
-// drag-to-reorder list, which is the shape most apps actually reach for.
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+// `Sortable`, `SortableItem`, `useSortable`, `useSortableList` and their
+// horizontal counterparts (`useHorizontalSortable`, `useHorizontalSortableList`)
+// — the drag-to-reorder list, which is the shape most apps actually reach
+// for, in either direction.
 //
 // The reorder is LIVE: crossing another row moves the dragged row into its
 // place immediately, so the list rearranges under the drag icon. That is
 // upstream's behaviour too — its `onMove` fires as rows cross, not at the
 // end — minus the spring, because here the rows are laid out by Yoga rather
-// than transformed.
+// than transformed. The mechanism does not care which axis the list scrolls
+// along, which is why `SortableDirection.Horizontal` is a render-time branch
+// here (a horizontal `ScrollView`, `leftBound`/`autoScrollHorizontalDirection`
+// plumbing) rather than a second implementation.
+//
+// WHAT DECIDES A CROSSING, and why it changed: this used to be GDK
+// hit-testing the raw pointer against a neighbour row's full rect (a row's
+// own `onEnter`) — grab-point DEPENDENT, unlike upstream's own item-rect
+// reasoning (`docs/research/dnd-collision-feel.md`). It is now the dragged
+// row's own TRACKED position, upstream's shape without upstream's asymmetry:
+// `useEdgeAutoscroll`'s `GtkDropControllerMotion` (already watching every
+// motion event for edge-autoscroll) also reports each one here via
+// `onDragMotion`, and `handleDragMotion` below tracks `fromIndex * slotSize +
+// (pointer delta since the drag began)`, resolving the row it lands on by
+// ROUNDING rather than upstream's own floor — the dragged row's CENTRE
+// against a slot's centre, not its top-left corner against the slot's origin
+// — see `order.ts`'s `resolveTrackedIndex` for the arithmetic. The origin
+// that delta is measured from is `DragSourceControllers`'s `onGrab`,
+// converted to the list's own container coordinates with `computePointIn`,
+// NEVER the first motion sample: a fast drag's first sample arrives already
+// displaced past GDK's own drag-start threshold, undercounting travel.
+// `SortableItem`'s own `onEnter` no longer drives a reorder at all — only
+// `onMotion` still does, for the public `onDragging`/`onDraggingHorizontal`
+// callbacks, unrelated to this decision.
 //
 // The component owns the order, exactly as upstream requires ("do NOT update
 // external state in `onMove`"). An app reads the settled order from
 // `onDrop`'s `allPositions`.
 import { createContext, useCallback, useContext, useEffect, useMemo, useRef, useState, } from "react";
+import { widgetForHandle } from "../components/measure";
 import { ScrollView } from "../components/scroll-view";
 import { View } from "../components/view";
+import { computePointIn } from "../gtkx/bridge/index";
+import { useEdgeAutoscroll } from "./autoscroll";
 import { DraggableContext, DraggableHandle } from "./draggable";
 import { DragSourceControllers, DropTargetControllers } from "./gtk-controllers";
-import { listToObject } from "./order";
-import { nextDraggableId } from "./payload";
-import { ScrollDirection, SortableDirection, } from "./types";
+import { listToObject, resolveTrackedIndex } from "./order";
+import { keyOf, useOrder } from "./order-state";
+import { HorizontalScrollDirection, ScrollDirection, SortableDirection, } from "./types";
 // Upstream exports these from the same entry point as the components, so
 // they are re-exported here rather than moved; the implementations live in
 // ./order, which imports nothing from GTK.
 export { clamp, listToObject, objectMove } from "./order";
 const SortableContext = createContext(null);
-const keyOf = (item, index, extractor) => extractor?.(item, index) ?? item.id;
-/** The order state, shared by `useSortableList` and `Sortable`. */
-const useOrder = (data, itemKeyExtractor) => {
-    // Lazy initial state, not a ref: stable for the list's lifetime, and a ref
-    // may not be read during render.
-    const [scope] = useState(() => `sortable-${nextDraggableId()}`);
-    const incoming = useMemo(() => data.map((item, index) => keyOf(item, index, itemKeyExtractor)), [data, itemKeyExtractor]);
-    const [order, setOrder] = useState(incoming);
-    // The list owns the ORDER; the app owns the SET. Adding or removing an item
-    // has to reach the order without discarding a reorder the user already
-    // made — so new ids go to the end, departed ids drop out, and a pure
-    // reorder of `data` by the app is ignored (upstream's contract too: the
-    // component owns the order).
-    //
-    // Adjusted DURING RENDER rather than in an effect. React documents this as
-    // the way to derive state from changed props, and it matters here: an
-    // effect would paint one frame in the stale order every time the app
-    // appends an item.
-    const signature = incoming.join(" ");
-    const [seenSignature, setSeenSignature] = useState(signature);
-    if (seenSignature !== signature) {
-        setSeenSignature(signature);
-        const known = new Set(incoming);
-        const next = [
-            ...order.filter((id) => known.has(id)),
-            ...incoming.filter((id) => !order.includes(id)),
-        ];
-        if (next.length !== order.length ||
-            next.some((id, index) => id !== order[index])) {
-            setOrder(next);
-        }
-    }
-    const items = useMemo(() => {
-        const byId = new Map();
-        data.forEach((item, index) => {
-            byId.set(keyOf(item, index, itemKeyExtractor), item);
-        });
-        return order
-            .map((id) => byId.get(id))
-            .filter((item) => item !== undefined);
-    }, [order, data, itemKeyExtractor]);
-    return { scope, order, setOrder, items };
-};
 /** The `SharedValue`-shaped boxes upstream hands to `renderItem`. Real,
  *  readable and writable here — just not animated. See `SharedValueLike`. */
-const useSharedBoxes = (order) => {
+const useSharedBoxes = (order, direction, autoScrollDirection) => {
     // Rebuilt when the order changes rather than mutated in place. Upstream's
     // box keeps its identity and changes its `.value`; here the identity tracks
     // the value, which is the closest thing available without a mutable cell
@@ -79,28 +64,59 @@ const useSharedBoxes = (order) => {
     const positions = useMemo(() => ({
         value: listToObject(order),
     }), [order]);
-    // These three this platform never writes: there is no UI-thread scroll
-    // position, no autoscroll during a drag (see docs/research/drag-and-drop.md)
-    // and no measured row heights, because Yoga lays rows out at their natural
-    // height. Stable, so forwarding them is free.
+    // Two of these three this platform never writes: there is no UI-thread
+    // scroll position and no measured row heights, because Yoga lays rows out
+    // at their natural height. `autoScrollDirection` IS written now — see
+    // `autoscroll.tsx` — which is why it comes in as a parameter rather than
+    // living in this idle bag.
     const idle = useMemo(() => ({
         scrollY: { value: 0 },
-        autoScroll: { value: ScrollDirection.None },
+        scrollX: { value: 0 },
         itemHeights: { value: {} },
     }), []);
     const itemsCount = order.length;
     return useMemo(() => ({
         positions,
         ...idle,
-        plumbing: () => ({
-            positions,
-            lowerBound: idle.scrollY,
-            autoScrollDirection: idle.autoScroll,
-            itemHeights: idle.itemHeights,
-            itemsCount,
-            isDynamicHeight: false,
-        }),
-    }), [positions, idle, itemsCount]);
+        plumbing: (itemWidth, gap, paddingHorizontal) => direction === SortableDirection.Horizontal
+            ? {
+                positions,
+                leftBound: idle.scrollX,
+                autoScrollHorizontalDirection: autoScrollDirection,
+                itemsCount,
+                itemWidth,
+                gap,
+                paddingHorizontal,
+            }
+            : {
+                positions,
+                lowerBound: idle.scrollY,
+                autoScrollDirection: autoScrollDirection,
+                itemHeights: idle.itemHeights,
+                itemsCount,
+            },
+    }), [positions, idle, itemsCount, direction, autoScrollDirection]);
+};
+const noneDirectionFor = (direction) => direction === SortableDirection.Horizontal
+    ? HorizontalScrollDirection.None
+    : ScrollDirection.None;
+const directionForDelta = (direction) => (dx, dy) => {
+    if (direction === SortableDirection.Horizontal) {
+        if (dx < 0) {
+            return HorizontalScrollDirection.Left;
+        }
+        if (dx > 0) {
+            return HorizontalScrollDirection.Right;
+        }
+        return HorizontalScrollDirection.None;
+    }
+    if (dy < 0) {
+        return ScrollDirection.Up;
+    }
+    if (dy > 0) {
+        return ScrollDirection.Down;
+    }
+    return ScrollDirection.None;
 };
 /**
  * Owns the order of a sortable list, for an app rendering its own container.
@@ -111,16 +127,21 @@ const useSharedBoxes = (order) => {
  * `SortableItem` outside one throws rather than quietly not dragging. This
  * hook is for reading the order and the `SharedValueLike` boxes, which is
  * what most callers of it actually want.
+ *
+ * No autoscroll wiring: this hook builds no `ScrollView` of its own to drive
+ * one, hence the no-op `handleScroll`/`handleScrollEnd` below, unchanged from
+ * before. `Sortable` is where the edge autoscroll in `autoscroll.tsx` lives.
  */
 export const useSortableList = (options) => {
     const { order, items } = useOrder(options.data, options.itemKeyExtractor);
-    const boxes = useSharedBoxes(order);
+    const idleAutoScroll = useMemo(() => ({ value: ScrollDirection.None }), []);
+    const boxes = useSharedBoxes(order, SortableDirection.Vertical, idleAutoScroll);
     const dropProviderRef = useRef(null);
     const noop = useCallback(() => { }, []);
     return {
         positions: boxes.positions,
         scrollY: boxes.scrollY,
-        autoScroll: boxes.autoScroll,
+        autoScroll: idleAutoScroll,
         itemHeights: boxes.itemHeights,
         dropProviderRef,
         handleScroll: noop,
@@ -128,7 +149,53 @@ export const useSortableList = (options) => {
         contentHeight: 0,
         isDynamicHeight: false,
         items,
-        getItemProps: boxes.plumbing,
+        getItemProps: () => boxes.plumbing(),
+    };
+};
+/**
+ * The horizontal counterpart of {@link useSortableList} — its own hook
+ * upstream, so its own hook here, even though the order state underneath
+ * (`order-state.ts`) is identical.
+ */
+export const useHorizontalSortableList = (options) => {
+    const { order, items } = useOrder(options.data, options.itemKeyExtractor);
+    const idleAutoScroll = useMemo(() => ({
+        value: HorizontalScrollDirection.None,
+    }), []);
+    const boxes = useSharedBoxes(order, SortableDirection.Horizontal, idleAutoScroll);
+    const dropProviderRef = useRef(null);
+    const noop = useCallback(() => { }, []);
+    const { itemWidth, gap = 0, paddingHorizontal = 0, itemKeyExtractor, } = options;
+    const getItemProps = useCallback((item, index) => {
+        const plumbing = boxes.plumbing(itemWidth, gap, paddingHorizontal);
+        return {
+            id: keyOf(item, index, itemKeyExtractor),
+            positions: plumbing.positions,
+            leftBound: plumbing.leftBound,
+            autoScrollDirection: idleAutoScroll,
+            itemsCount: plumbing.itemsCount,
+            itemWidth: itemWidth ?? 0,
+            gap,
+            paddingHorizontal,
+        };
+    }, [
+        boxes,
+        itemWidth,
+        gap,
+        paddingHorizontal,
+        itemKeyExtractor,
+        idleAutoScroll,
+    ]);
+    return {
+        positions: boxes.positions,
+        scrollX: boxes.scrollX,
+        autoScroll: idleAutoScroll,
+        dropProviderRef,
+        handleScroll: noop,
+        handleScrollEnd: noop,
+        contentWidth: 0,
+        items,
+        getItemProps,
     };
 };
 /**
@@ -153,10 +220,14 @@ export const useSortableList = (options) => {
  *
  * The rows carry a real GTK drag icon — a picture of the row itself, lifted
  * at the point it was grabbed — and the list rearranges live underneath it.
+ * Near either end of the visible list, the drag keeps the `ScrollView`
+ * scrolling toward it for as long as it stays there (`autoscroll.tsx`).
  */
-export const Sortable = ({ data, renderItem, itemKeyExtractor, style, contentContainerStyle, testID, direction = SortableDirection.Vertical, onMove, onDragStart, onDrop, onDragging, }) => {
+export const Sortable = ({ data, renderItem, itemKeyExtractor, style, contentContainerStyle, testID, direction = SortableDirection.Vertical, itemWidth, gap, paddingHorizontal, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }) => {
     const { scope, order, setOrder, items } = useOrder(data, itemKeyExtractor);
-    const boxes = useSharedBoxes(order);
+    const isHorizontal = direction === SortableDirection.Horizontal;
+    const containerRef = useRef(null);
+    const scrollViewRef = useRef(null);
     // The order as it was when the drag began, so a cancelled drag puts the
     // list back rather than leaving it wherever the pointer happened to be.
     const beforeDrag = useRef(null);
@@ -167,10 +238,6 @@ export const Sortable = ({ data, renderItem, itemKeyExtractor, style, contentCon
     useEffect(() => {
         orderRef.current = order;
     }, [order]);
-    const beginDrag = useCallback((draggedId) => {
-        beforeDrag.current = orderRef.current;
-        onDragStart?.(draggedId, orderRef.current.indexOf(draggedId));
-    }, [onDragStart]);
     const moveOnto = useCallback((draggedId, targetId) => {
         setOrder((current) => {
             const from = current.indexOf(draggedId);
@@ -185,7 +252,71 @@ export const Sortable = ({ data, renderItem, itemKeyExtractor, style, contentCon
             return next;
         });
     }, [setOrder, onMove]);
+    // The dragged row's own tracked position, and the slot it last resolved
+    // to — null whenever no drag from this list is in flight, or `beginDrag`
+    // could not establish an origin (see below). A ref, not state: written
+    // from a GTK motion callback outside React's commit cycle, exactly like
+    // `beforeDrag`/`orderRef` above.
+    const tracking = useRef(null);
+    const handleDragMotion = useCallback((x, y) => {
+        const state = tracking.current;
+        if (!state) {
+            return;
+        }
+        const trackedPosition = (isHorizontal ? x : y) + state.base;
+        const resolvedIndex = resolveTrackedIndex(trackedPosition, state.slotSize, orderRef.current.length);
+        if (resolvedIndex === state.lastResolvedIndex) {
+            return;
+        }
+        state.lastResolvedIndex = resolvedIndex;
+        const targetId = orderRef.current[resolvedIndex];
+        if (targetId !== undefined && targetId !== state.draggedId) {
+            moveOnto(state.draggedId, targetId);
+        }
+    }, [isHorizontal, moveOnto]);
+    const autoscroll = useEdgeAutoscroll({
+        containerRef,
+        scrollViewRef,
+        axes: isHorizontal ? "horizontal" : "vertical",
+        none: noneDirectionFor(direction),
+        directionFor: directionForDelta(direction),
+        onDragMotion: handleDragMotion,
+    });
+    const boxes = useSharedBoxes(order, direction, autoscroll.direction);
+    const beginDrag = useCallback((draggedId, grabWidget, grabX, grabY) => {
+        beforeDrag.current = orderRef.current;
+        autoscroll.setActive(true);
+        const fromIndex = orderRef.current.indexOf(draggedId);
+        onDragStart?.(draggedId, fromIndex);
+        tracking.current = null;
+        const container = widgetForHandle(containerRef.current);
+        if (grabWidget && container && fromIndex !== -1) {
+            const origin = computePointIn(grabWidget, container, grabX, grabY);
+            if (origin) {
+                // The row's own real size, measured rather than a hint: rows are
+                // Yoga-natural-height (docs/api.md), so there is no `itemHeight`
+                // prop to trust — the dragged row's own allocation, at the moment
+                // it was grabbed, is what the tracked position's slots are sized
+                // to. `gap` (a real Yoga gap on the content container either
+                // direction) folds into the slot period the same way upstream's
+                // own `itemHeight` would if it accounted for one.
+                const rawSize = isHorizontal
+                    ? grabWidget.getWidth()
+                    : grabWidget.getHeight();
+                const slotSize = rawSize + (gap ?? 0);
+                const origin1D = isHorizontal ? origin.x : origin.y;
+                tracking.current = {
+                    draggedId,
+                    base: fromIndex * slotSize - origin1D,
+                    slotSize,
+                    lastResolvedIndex: fromIndex,
+                };
+            }
+        }
+    }, [onDragStart, autoscroll, isHorizontal, gap]);
     const endDrag = useCallback((draggedId, cancelled) => {
+        autoscroll.setActive(false);
+        tracking.current = null;
         const restore = beforeDrag.current;
         beforeDrag.current = null;
         if (cancelled) {
@@ -196,37 +327,59 @@ export const Sortable = ({ data, renderItem, itemKeyExtractor, style, contentCon
         }
         const settled = orderRef.current;
         onDrop?.(draggedId, settled.indexOf(draggedId), listToObject(settled));
-    }, [setOrder, onDrop]);
-    const contextValue = useMemo(() => ({ scope, moveOnto, beginDrag, endDrag, onDragging }), [scope, moveOnto, beginDrag, endDrag, onDragging]);
-    if (direction === SortableDirection.Horizontal) {
-        // Loud rather than silent: a horizontal list that lays out vertically is
-        // a bug report waiting to happen. See docs/research/drag-and-drop.md for
-        // why the horizontal surface is deferred rather than approximated.
-        throw new Error("react-native-gtkx/dnd: SortableDirection.Horizontal is not implemented on Linux");
-    }
-    return (_jsx(SortableContext.Provider, { value: contextValue, children: _jsx(ScrollView, { style: style, 
-            // No `alignItems: "stretch"` override here any more. It used to be
-            // needed because this platform's ScrollView content container
-            // defaulted to `flex-start`, which shrank every row to its intrinsic
-            // width and collapsed the `flex: 1` text column inside it. That
-            // default was a parity bug — RN's content container is a plain
-            // `View`, whose default is `stretch` — and it is fixed at the source
-            // now (components/scroll-view.tsx), so a `Sortable` gets full-width
-            // rows the same way any other RN list does.
-            contentContainerStyle: contentContainerStyle, testID: testID, children: items.map((item, index) => renderItem({
-                item,
-                index,
-                id: keyOf(item, index, itemKeyExtractor),
-                direction,
-                ...boxes.plumbing(),
-            })) }) }));
+    }, [setOrder, onDrop, autoscroll]);
+    const contextValue = useMemo(() => ({
+        scope,
+        direction,
+        moveOnto,
+        beginDrag,
+        endDrag,
+        onDragging,
+        onDraggingHorizontal,
+    }), [
+        scope,
+        direction,
+        moveOnto,
+        beginDrag,
+        endDrag,
+        onDragging,
+        onDraggingHorizontal,
+    ]);
+    return (_jsx(SortableContext.Provider, { value: contextValue, children: _jsxs(View, { ref: containerRef, style: { flex: 1 }, children: [autoscroll.controllers, _jsx(ScrollView, { ref: scrollViewRef, horizontal: isHorizontal, style: style, 
+                    // No `alignItems: "stretch"` override here any more. It used to be
+                    // needed because this platform's ScrollView content container
+                    // defaulted to `flex-start`, which shrank every row to its intrinsic
+                    // width and collapsed the `flex: 1` text column inside it. That
+                    // default was a parity bug — RN's content container is a plain
+                    // `View`, whose default `alignItems` is `stretch` — and it is fixed
+                    // at the source now (components/scroll-view.tsx), so a `Sortable`
+                    // gets full-width rows the same way any other RN list does.
+                    //
+                    // An app that wants the old behaviour writes it, exactly as it
+                    // would on iOS and Android: `contentContainerStyle={{ alignItems:
+                    // "flex-start" }}`.
+                    contentContainerStyle: [
+                        { gap, paddingHorizontal },
+                        contentContainerStyle,
+                    ], testID: testID, children: items.map((item, index) => renderItem({
+                        item,
+                        index,
+                        id: keyOf(item, index, itemKeyExtractor),
+                        direction,
+                        ...boxes.plumbing(itemWidth, gap, paddingHorizontal),
+                    })) })] }) }));
 };
 /**
  * The reorder half of the module, as a hook, for a row that owns its own
- * view. Render `children` inside that view.
+ * view.
+ *
+ * Shared by both directions: which coordinate reaches `onDragging`/
+ * `onDraggingHorizontal` (and which of the two fires at all) comes from the
+ * enclosing `Sortable`'s own `direction`, read through context — the reorder
+ * itself (cross into another cell's drop target) never looks at an axis.
  */
 export const useSortable = (options) => {
-    const { id, onDragging } = options;
+    const { id, onDragging, onDraggingHorizontal } = options;
     const list = useContext(SortableContext);
     if (list === null) {
         // Loudly, because a silent no-op is the worst failure mode this repo has
@@ -249,27 +402,49 @@ export const useSortable = (options) => {
     // eslint-disable-next-line react-hooks/set-state-in-effect
     useEffect(() => setMounted(true), []);
     // Same list only — and INCLUDING this row itself. Refusing the self-drop
-    // looks right and is wrong: because the reorder happens live on `::enter`,
-    // by the time the pointer settles it is over the DRAGGED row, so a row that
-    // refuses its own payload leaves GDK with no target, cancels the drag, and
-    // the list snaps back to where it started. Accepting is also the honest
-    // reading: dropping a row on its own current position means "leave it
-    // here", which is a completed drag, not an abandoned one.
+    // looks right and is wrong: the reorder tracking (`Sortable`'s own
+    // `handleDragMotion`) can settle the dragged row back onto its OWN slot,
+    // so by the time the pointer releases it may well be over the DRAGGED row.
+    // A row that refuses its own payload leaves GDK with no target, cancels
+    // the drag, and the list snaps back to where it started. Accepting is also
+    // the honest reading: dropping a row on its own current position means
+    // "leave it here", which is a completed drag, not an abandoned one.
     const accepts = useCallback((payload) => payload.scope === list.scope, [list]);
-    const dragControllers = (_jsx(DragSourceControllers, { payload: { scope: list.scope, id }, onDragBegin: () => {
+    // `DragSourceControllers`'s own grab point (widget-local), captured here
+    // and forwarded to `beginDrag` — see the module comment for why this, and
+    // never the first motion sample, is the reorder tracking's origin.
+    const grab = useRef({
+        widget: null,
+        x: 0,
+        y: 0,
+    });
+    const dragControllers = (_jsx(DragSourceControllers, { payload: { scope: list.scope, id }, onGrab: (x, y, widget) => {
+            grab.current = { widget, x, y };
+        }, onDragBegin: () => {
             setIsMoving(true);
-            list.beginDrag(id);
+            list.beginDrag(id, grab.current.widget, grab.current.x, grab.current.y);
         }, onDragEnd: (dropped) => {
             setIsMoving(false);
             list.endDrag(id, !dropped);
         } }));
     const dropControllers = (_jsx(DropTargetControllers, { accepts: accepts, 
-        // The reorder happens HERE, not on drop: crossing this row is what
-        // moves the dragged row into its place, so the list rearranges under
-        // the drag icon the way upstream's animated gaps do.
-        onEnter: (payload) => list.moveOnto(payload.id, id), onMotion: (payload, _x, y) => {
-            list.onDragging?.(payload.id, id, y);
-            onDragging?.(payload.id, id, y);
+        // No `onEnter` any more: crossing this row's drop target used to be
+        // what moved the dragged row into its place. That decision is now
+        // `Sortable`'s own `handleDragMotion`, driven by the list's shared
+        // motion controller rather than each row's own — see the module
+        // comment. This target still has to exist and accept, or GDK would
+        // refuse the drop and snap the drag back; `onMotion` below still
+        // reports the public `onDragging`/`onDraggingHorizontal` callbacks,
+        // unrelated to the reorder decision.
+        onMotion: (payload, x, y) => {
+            if (list.direction === SortableDirection.Horizontal) {
+                list.onDraggingHorizontal?.(payload.id, id, x);
+                onDraggingHorizontal?.(payload.id, id, x);
+            }
+            else {
+                list.onDragging?.(payload.id, id, y);
+                onDragging?.(payload.id, id, y);
+            }
         }, 
         // Nothing left to do: the order is already right, and `drag-end` on the
         // source is what settles it.
@@ -283,9 +458,26 @@ export const useSortable = (options) => {
         children: (_jsxs(_Fragment, { children: [mounted && !hasHandle ? dragControllers : null, dropControllers] })),
     };
 };
+/**
+ * The horizontal counterpart of {@link useSortable} — upstream's own separate
+ * hook, kept separate here too, though it is the same implementation under a
+ * shape matching `UseHorizontalSortableOptions`. Must be inside a
+ * `<Sortable direction="horizontal">`, same as `useSortable` must be inside a
+ * `Sortable`.
+ */
+export const useHorizontalSortable = (options) => useSortable({
+    id: options.id,
+    data: options.data,
+    positions: options.positions,
+    itemsCount: options.itemsCount,
+    onMove: options.onMove,
+    onDragStart: options.onDragStart,
+    onDrop: options.onDrop,
+    onDraggingHorizontal: options.onDragging,
+});
 /** One row of a {@link Sortable}. Both a drag source and a drop target: the
  *  row you drag onto is the position the dragged row takes. */
-export const SortableItem = ({ id, data, children, style, animatedStyle, testID, onMove, onDragStart, onDrop, onDragging, }) => {
+export const SortableItem = ({ id, data, children, style, animatedStyle, testID, onMove, onDragStart, onDrop, onDragging, onDraggingHorizontal, }) => {
     const sortable = useSortable({
         id,
         data,
@@ -293,6 +485,7 @@ export const SortableItem = ({ id, data, children, style, animatedStyle, testID,
         onDragStart,
         onDrop,
         onDragging,
+        onDraggingHorizontal,
     });
     // `SortableItem.Handle` is `Draggable.Handle`: the same context carries the
     // drag source to whichever view claims it, so one implementation serves