@dreamtree-org/twreact-ui 2.0.3 → 2.0.5

package/dist/esm/components/utility/Sortable.js

@@ -3,47 +3,35 @@ import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 import { forwardRef, useId, useMemo, useState, useRef, useCallback, useLayoutEffect, useEffect } from 'react';
 import { cn } from '../../utils/cn.js';
-import { DEFAULT_SORTABLE_MESSAGES, useSortableKeyboard, useSortablePointer } from '../../hooks/useSortable.js';
+import { setRefs } from '../../utils/position.js';
+import { DEFAULT_SORTABLE_MESSAGES, useSortableKeyboard, useSortablePointer, defaultGetKey, arrayMove, defaultGetItemLabel } from '../../hooks/useSortable.js';
+import { useSortableGroupMember } from '../../hooks/useSortableGroup.js';
+import { SortablePlaceholder } from './SortableGroup.js';
 
 var _excluded = ["items", "onReorder", "renderItem", "getKey", "getItemLabel", "disabled", "handle", "orientation", "as", "itemClassName", "messages", "className"];
 var useIsomorphicLayoutEffect = typeof window !== "undefined" ? useLayoutEffect : useEffect;
-var defaultGetKey = function defaultGetKey(item, index) {
-  var _ref, _item$id;
-  return (_ref = (_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : item === null || item === void 0 ? void 0 : item.key) !== null && _ref !== void 0 ? _ref : index;
-};
-var defaultGetItemLabel = function defaultGetItemLabel(item, index) {
-  var _ref2, _ref3, _item$label;
-  return typeof item === "string" || typeof item === "number" ? String(item) : (_ref2 = (_ref3 = (_item$label = item === null || item === void 0 ? void 0 : item.label) !== null && _item$label !== void 0 ? _item$label : item === null || item === void 0 ? void 0 : item.title) !== null && _ref3 !== void 0 ? _ref3 : item === null || item === void 0 ? void 0 : item.name) !== null && _ref2 !== void 0 ? _ref2 : "Item ".concat(index + 1);
-};
-function arrayMove(list, from, to) {
-  var next = list.slice();
-  var _next$splice = next.splice(from, 1),
-    _next$splice2 = _slicedToArray(_next$splice, 1),
-    moved = _next$splice2[0];
-  next.splice(to, 0, moved);
-  return next;
-}
-var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
-  var _ref4$items = _ref4.items,
-    items = _ref4$items === void 0 ? [] : _ref4$items,
-    onReorder = _ref4.onReorder,
-    renderItem = _ref4.renderItem,
-    _ref4$getKey = _ref4.getKey,
-    getKey = _ref4$getKey === void 0 ? defaultGetKey : _ref4$getKey,
-    _ref4$getItemLabel = _ref4.getItemLabel,
-    getItemLabel = _ref4$getItemLabel === void 0 ? defaultGetItemLabel : _ref4$getItemLabel,
-    _ref4$disabled = _ref4.disabled,
-    disabled = _ref4$disabled === void 0 ? false : _ref4$disabled,
-    _ref4$handle = _ref4.handle,
-    handle = _ref4$handle === void 0 ? false : _ref4$handle,
-    _ref4$orientation = _ref4.orientation,
-    orientation = _ref4$orientation === void 0 ? "vertical" : _ref4$orientation,
-    _ref4$as = _ref4.as,
-    List = _ref4$as === void 0 ? "ul" : _ref4$as,
-    itemClassName = _ref4.itemClassName,
-    messages = _ref4.messages,
-    className = _ref4.className,
-    rest = _objectWithoutProperties(_ref4, _excluded);
+var Sortable = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _rest$ariaLabel;
+  var _ref$items = _ref.items,
+    items = _ref$items === void 0 ? [] : _ref$items,
+    onReorder = _ref.onReorder,
+    renderItem = _ref.renderItem,
+    _ref$getKey = _ref.getKey,
+    getKey = _ref$getKey === void 0 ? defaultGetKey : _ref$getKey,
+    _ref$getItemLabel = _ref.getItemLabel,
+    getItemLabel = _ref$getItemLabel === void 0 ? defaultGetItemLabel : _ref$getItemLabel,
+    _ref$disabled = _ref.disabled,
+    disabled = _ref$disabled === void 0 ? false : _ref$disabled,
+    _ref$handle = _ref.handle,
+    handle = _ref$handle === void 0 ? false : _ref$handle,
+    _ref$orientation = _ref.orientation,
+    orientation = _ref$orientation === void 0 ? "vertical" : _ref$orientation,
+    _ref$as = _ref.as,
+    List = _ref$as === void 0 ? "ul" : _ref$as,
+    itemClassName = _ref.itemClassName,
+    messages = _ref.messages,
+    className = _ref.className,
+    rest = _objectWithoutProperties(_ref, _excluded);
   var instructionsId = "sortable-instructions-".concat(useId());
   var text = useMemo(function () {
     return _objectSpread2(_objectSpread2({}, DEFAULT_SORTABLE_MESSAGES), messages);
@@ -58,6 +46,10 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     announcement = _useState4[0],
     setAnnouncement = _useState4[1];
   var nodes = useRef(new Map());
+  var listRef = useRef(null);
+  var setListRef = useCallback(function (node) {
+    return setRefs(node, listRef, ref);
+  }, [ref]);
   var itemKeys = items.map(function (item, i) {
     return getKey(item, i);
   });
@@ -91,13 +83,32 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var nodeFor = useCallback(function (key) {
     return nodes.current.get(key);
   }, []);
+  // Inside a <SortableGroup>, `id` names this list; `cross` handles moves to other lists.
+  var _useSortableGroupMemb = useSortableGroupMember({
+      listId: rest.id,
+      label: (_rest$ariaLabel = rest["aria-label"]) !== null && _rest$ariaLabel !== void 0 ? _rest$ariaLabel : String(rest.id),
+      items: items,
+      itemKeys: itemKeys,
+      keys: keys,
+      getKey: getKey,
+      nodeFor: nodeFor,
+      listRef: listRef,
+      orientation: axis,
+      setDraft: setDraft,
+      announce: announce,
+      labelFor: labelFor
+    }),
+    cross = _useSortableGroupMemb.cross,
+    incoming = _useSortableGroupMemb.incoming,
+    outgoing = _useSortableGroupMemb.outgoing;
   var keyboard = useSortableKeyboard({
     keys: keys,
     setDraft: setDraft,
     commit: commit,
     announce: announce,
     labelFor: labelFor,
-    orientation: axis
+    orientation: axis,
+    cross: cross
   });
   var pointer = useSortablePointer({
     keys: keys,
@@ -105,7 +116,8 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
     commit: commit,
     nodeFor: nodeFor,
     orientation: axis,
-    disabled: disabled
+    disabled: disabled,
+    cross: cross
   });
   // Moving DOM nodes can drop focus; keep it on the item being carried.
   useIsomorphicLayoutEffect(function () {
@@ -124,24 +136,30 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
   var isNativeList = List === "ul" || List === "ol";
   var ItemTag = isNativeList ? "li" : "div";
   return jsxs(Fragment, {
-    children: [jsx(List, _objectSpread2(_objectSpread2({
-      ref: ref,
+    children: [jsxs(List, _objectSpread2(_objectSpread2({
+      ref: setListRef,
       className: cn("flex", axis === "horizontal" ? "flex-row gap-2" : "flex-col gap-2", className),
       "data-orientation": axis,
+      "data-drop-target": incoming ? incoming.allowed ? "allowed" : "refused" : undefined,
       role: isNativeList ? undefined : "list"
     }, rest), {}, {
-      children: keys.map(function (key, index) {
+      children: [keys.flatMap(function (key, index) {
         var _byKey$get = byKey.get(key),
           item = _byKey$get.item,
           originalIndex = _byKey$get.index;
         var isGrabbed = keyboard.grabbed === key;
         var isDragging = pointer.dragging === key;
+        var isLeaving = outgoing !== null && (isGrabbed || isDragging);
         var startDrag = disabled ? undefined : pointer.startFor(key);
         // Whole-item drags wait for a long-press on touch so the page still scrolls.
         var startItemDrag = disabled || handle ? undefined : pointer.startFor(key, {
           longPress: true
         });
-        return jsx(ItemTag, {
+        var placeholder = (incoming === null || incoming === void 0 ? void 0 : incoming.index) === index ? [jsx(SortablePlaceholder, {
+          as: ItemTag,
+          allowed: incoming.allowed
+        }, "dt-sortable-placeholder")] : [];
+        return placeholder.concat(jsx(ItemTag, {
           ref: function ref(node) {
             if (node) nodes.current.set(key, node);else nodes.current["delete"](key);
           },
@@ -151,12 +169,13 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
           role: isNativeList ? undefined : "listitem",
           "data-dragging": isDragging || undefined,
           "data-grabbed": isGrabbed || undefined,
+          "data-leaving": isLeaving ? outgoing.allowed ? "allowed" : "refused" : undefined,
           onKeyDown: disabled ? undefined : keyboard.keyDownFor(key),
           onBlur: function onBlur(e) {
             if (isGrabbed && e.relatedTarget && !e.currentTarget.contains(e.relatedTarget)) keyboard.cancel();
           },
           onPointerDown: startItemDrag,
-          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab select-none [-webkit-touch-callout:none]", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", itemClassName),
+          className: cn("rounded-md focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary-500 dark:focus:ring-offset-gray-900", !disabled && !handle && "cursor-grab select-none [-webkit-touch-callout:none]", (isGrabbed || isDragging) && "relative z-10 shadow-lg ring-2 ring-primary-500 opacity-90", isLeaving && (outgoing.allowed ? "opacity-50" : "cursor-not-allowed ring-error-500 opacity-50"), itemClassName),
           children: renderItem ? renderItem(item, {
             index: index,
             originalIndex: originalIndex,
@@ -174,12 +193,15 @@ var Sortable = /*#__PURE__*/forwardRef(function (_ref4, ref) {
               return moveBy(originalIndex, 1);
             }
           }) : labelFor(key)
-        }, key);
-      })
+        }, key));
+      }), incoming && incoming.index >= keys.length && jsx(SortablePlaceholder, {
+        as: ItemTag,
+        allowed: incoming.allowed
+      })]
     })), jsx("span", {
       id: instructionsId,
       className: "sr-only",
-      children: text.instructions
+      children: cross ? "".concat(text.instructions, " ").concat(text.groupInstructions) : text.instructions
     }), jsx("span", {
       role: "status",
       "aria-live": "assertive",

package/dist/esm/components/utility/SortableGroup.js

@@ -0,0 +1,48 @@
+'use client';
+import { objectWithoutProperties as _objectWithoutProperties, objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { cn } from '../../utils/cn.js';
+import { useSortableGroupState, SortableGroupContext } from '../../hooks/useSortableGroup.js';
+
+var _excluded = ["onMove", "canDrop", "className", "children"];
+/**
+ * Connects several `<Sortable id="…">` lists so items can move between them
+ * (pointer drag, or the cross-axis arrow keys while an item is picked up).
+ * `canDrop(item, target, from)` is asked before a target is shown as droppable;
+ * a refused target is marked as such and dropping there does nothing.
+ */
+var SortableGroup = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var onMove = _ref.onMove,
+    canDrop = _ref.canDrop,
+    className = _ref.className,
+    children = _ref.children,
+    rest = _objectWithoutProperties(_ref, _excluded);
+  var value = useSortableGroupState({
+    onMove: onMove,
+    canDrop: canDrop
+  });
+  return jsx(SortableGroupContext.Provider, {
+    value: value,
+    children: jsx("div", _objectSpread2(_objectSpread2({
+      ref: ref,
+      className: cn(className),
+      "data-sortable-group": ""
+    }, rest), {}, {
+      children: children
+    }))
+  });
+});
+SortableGroup.displayName = "SortableGroup";
+/** Where an item from another list would land; styled by whether `canDrop` allows it. */
+function SortablePlaceholder(_ref2) {
+  var Tag = _ref2.as,
+    allowed = _ref2.allowed;
+  return jsx(Tag, {
+    "aria-hidden": "true",
+    "data-sortable-placeholder": allowed ? "allowed" : "refused",
+    className: cn("min-h-10 rounded-md border-2 border-dashed", allowed ? "border-primary-500 bg-primary-50 dark:bg-primary-950/40" : "cursor-not-allowed border-error-500 bg-error-50 opacity-60 dark:bg-error-950/40")
+  });
+}
+
+export { SortablePlaceholder, SortableGroup as default };

package/dist/esm/hooks/useFocusTrap.js

@@ -5,9 +5,29 @@ import { useLatestRef } from './useLatestRef.js';
 // Internal (not exported from the package). Shared focus management for the
 // overlay primitives (Drawer, Dialog, Popover, Tour, Sidebar, AppShell).
 var FOCUSABLE_SELECTOR = ["a[href]", "button:not([disabled])", "textarea:not([disabled])", "input:not([disabled])", "select:not([disabled])", '[tabindex]:not([tabindex="-1"])'].join(",");
+// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
+// "open" while CSS hides it on wide viewports; there is nothing to trap then.
+// `stopAt` (exclusive) bounds the walk, so getFocusable checks only the
+// elements between a candidate and its root.
+var isDisplayNone = function isDisplayNone(el) {
+  var stopAt = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
+  for (var node = el; node && node.nodeType === 1 && node !== stopAt; node = node.parentElement) {
+    if (window.getComputedStyle(node).display === "none") return true;
+  }
+  return false;
+};
+// `.focus()` silently fails on an element that is not rendered (`display:none`
+// on it or an ancestor) or is `visibility:hidden` (inherited, so the element's
+// own computed value covers its ancestors). getClientRects() is not used:
+// jsdom reports empty rects for every element.
+var isRendered = function isRendered(el, root) {
+  return window.getComputedStyle(el).visibility !== "hidden" && !isDisplayNone(el, root);
+};
+// Tabbable, rendered descendants of `root`, in DOM order. Used for the initial
+// focus and for the Tab trap's first/last items.
 var getFocusable = function getFocusable(root) {
   return root ? Array.from(root.querySelectorAll(FOCUSABLE_SELECTOR)).filter(function (el) {
-    return el.getAttribute("aria-hidden") !== "true";
+    return el.getAttribute("aria-hidden") !== "true" && isRendered(el, root);
   }) : [];
 };
 // Only the most recently opened overlay reacts to Escape / Tab, so a Popover
@@ -16,14 +36,6 @@ var layerStack = [];
 var isTopLayer = function isTopLayer(token) {
   return layerStack[layerStack.length - 1] === token;
 };
-// A responsive drawer (Sidebar's `md:hidden`, AppShell's `lg:hidden`) can be
-// "open" while CSS hides it on wide viewports; there is nothing to trap then.
-var isDisplayNone = function isDisplayNone(el) {
-  for (var node = el; node && node.nodeType === 1; node = node.parentElement) {
-    if (window.getComputedStyle(node).display === "none") return true;
-  }
-  return false;
-};
 function cycleFocus(e, panel) {
   if (isDisplayNone(panel)) return;
   var focusables = getFocusable(panel);

package/dist/esm/hooks/useSortable.js

@@ -5,7 +5,25 @@ import { useLatestRef } from './useLatestRef.js';
 
 // Internal (not exported). Keyboard + pointer reordering for Sortable. Both
 // work on a draft list of keys while the user is moving an item and only call
-// `commit(fromIndex, toIndex)` when the item is dropped.
+// `commit(fromIndex, toIndex)` when the item is dropped. Inside a SortableGroup
+// they also get a `cross` object (see useSortableGroup.js) that takes over when
+// the item is carried into another list; without one they behave as before.
+var defaultGetKey = function defaultGetKey(item, index) {
+  var _ref, _item$id;
+  return (_ref = (_item$id = item === null || item === void 0 ? void 0 : item.id) !== null && _item$id !== void 0 ? _item$id : item === null || item === void 0 ? void 0 : item.key) !== null && _ref !== void 0 ? _ref : index;
+};
+var defaultGetItemLabel = function defaultGetItemLabel(item, index) {
+  var _ref2, _ref3, _item$label;
+  return typeof item === "string" || typeof item === "number" ? String(item) : (_ref2 = (_ref3 = (_item$label = item === null || item === void 0 ? void 0 : item.label) !== null && _item$label !== void 0 ? _item$label : item === null || item === void 0 ? void 0 : item.title) !== null && _ref3 !== void 0 ? _ref3 : item === null || item === void 0 ? void 0 : item.name) !== null && _ref2 !== void 0 ? _ref2 : "Item ".concat(index + 1);
+};
+function arrayMove(list, from, to) {
+  var next = list.slice();
+  var _next$splice = next.splice(from, 1),
+    _next$splice2 = _slicedToArray(_next$splice, 1),
+    moved = _next$splice2[0];
+  next.splice(to, 0, moved);
+  return next;
+}
 function moveKey(keys, key, toIndex) {
   var next = keys.filter(function (k) {
     return k !== key;
@@ -26,6 +44,17 @@ var DEFAULT_SORTABLE_MESSAGES = {
   },
   cancelled: function cancelled(label, position) {
     return "Reorder cancelled. ".concat(label, " returned to position ").concat(position, ".");
+  },
+  // Only used inside a SortableGroup.
+  groupInstructions: "Use the arrow keys across the list (Left and Right in a vertical list) to carry it to the previous or next list.",
+  movedToList: function movedToList(label, list, position, total) {
+    return "".concat(label, " moved to ").concat(list, ", position ").concat(position, " of ").concat(total, ".");
+  },
+  droppedInList: function droppedInList(label, list, position, total) {
+    return "".concat(label, " dropped in ").concat(list, " at position ").concat(position, " of ").concat(total, ".");
+  },
+  refused: function refused(label, list) {
+    return "".concat(label, " cannot be dropped in ").concat(list, ".");
   }
 };
 var PREV_KEYS = {
@@ -36,13 +65,31 @@ var NEXT_KEYS = {
   vertical: ["ArrowDown"],
   horizontal: ["ArrowRight"]
 };
-function useSortableKeyboard(_ref) {
-  var keys = _ref.keys,
-    setDraft = _ref.setDraft,
-    commit = _ref.commit,
-    announce = _ref.announce,
-    labelFor = _ref.labelFor,
-    orientation = _ref.orientation;
+// Cross-axis arrows step between the lists of a SortableGroup.
+var LIST_KEYS = {
+  vertical: {
+    ArrowLeft: -1,
+    ArrowRight: 1
+  },
+  horizontal: {
+    ArrowUp: -1,
+    ArrowDown: 1
+  }
+};
+var stepOf = function stepOf(e, orientation, cross) {
+  return {
+    delta: PREV_KEYS[orientation].includes(e.key) ? -1 : NEXT_KEYS[orientation].includes(e.key) ? 1 : 0,
+    list: cross ? LIST_KEYS[orientation][e.key] || 0 : 0
+  };
+};
+function useSortableKeyboard(_ref4) {
+  var keys = _ref4.keys,
+    setDraft = _ref4.setDraft,
+    commit = _ref4.commit,
+    announce = _ref4.announce,
+    labelFor = _ref4.labelFor,
+    orientation = _ref4.orientation,
+    cross = _ref4.cross;
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     grabbed = _useState2[0],
@@ -60,21 +107,27 @@ function useSortableKeyboard(_ref) {
           setGrabbed(key);
           setDraft(keys);
           announce("grabbed", labelFor(key), index + 1, total);
-        } else {
-          setGrabbed(null);
-          commit(origin.current, index);
-          announce("dropped", labelFor(key), index + 1, total);
+          return;
         }
+        var crossed = cross === null || cross === void 0 ? void 0 : cross.drop(key);
+        if (crossed === "refused") return;
+        setGrabbed(null);
+        if (crossed) return;
+        commit(origin.current, index);
+        announce("dropped", labelFor(key), index + 1, total);
       } else if (grabbed === key && e.key === "Escape") {
         e.preventDefault();
         setGrabbed(null);
         setDraft(null);
+        cross === null || cross === void 0 || cross.cancel();
         announce("cancelled", labelFor(key), origin.current + 1, total);
       } else if (grabbed === key) {
-        var delta = PREV_KEYS[orientation].includes(e.key) ? -1 : NEXT_KEYS[orientation].includes(e.key) ? 1 : 0;
-        if (!delta) return;
+        var step = stepOf(e, orientation, cross);
+        if (!step.delta && !step.list) return;
         e.preventDefault();
-        var to = Math.max(0, Math.min(total - 1, index + delta));
+        if (step.list) return cross.step(key, step.list);
+        if (cross !== null && cross !== void 0 && cross.nudge(key, step.delta)) return;
+        var to = Math.max(0, Math.min(total - 1, index + step.delta));
         if (to === index) return;
         setDraft(moveKey(keys, key, to));
         announce("moved", labelFor(key), to + 1, total);
@@ -84,7 +137,8 @@ function useSortableKeyboard(_ref) {
   var cancel = useCallback(function () {
     setGrabbed(null);
     setDraft(null);
-  }, [setDraft]);
+    cross === null || cross === void 0 || cross.cancel();
+  }, [setDraft, cross]);
   return {
     grabbed: grabbed,
     keyDownFor: keyDownFor,
@@ -130,13 +184,14 @@ var raf = function raf(cb) {
 var caf = function caf(id) {
   return typeof window.cancelAnimationFrame === "function" ? window.cancelAnimationFrame(id) : clearTimeout(id);
 };
-function useSortablePointer(_ref2) {
-  var keys = _ref2.keys,
-    setDraft = _ref2.setDraft,
-    commit = _ref2.commit,
-    nodeFor = _ref2.nodeFor,
-    orientation = _ref2.orientation,
-    disabled = _ref2.disabled;
+function useSortablePointer(_ref5) {
+  var keys = _ref5.keys,
+    setDraft = _ref5.setDraft,
+    commit = _ref5.commit,
+    nodeFor = _ref5.nodeFor,
+    orientation = _ref5.orientation,
+    disabled = _ref5.disabled,
+    cross = _ref5.cross;
   var _useState3 = useState(null),
     _useState4 = _slicedToArray(_useState3, 2),
     dragging = _useState4[0],
@@ -146,7 +201,8 @@ function useSortablePointer(_ref2) {
     keys: keys,
     commit: commit,
     nodeFor: nodeFor,
-    orientation: orientation
+    orientation: orientation,
+    cross: cross
   });
   var end = useCallback(function () {
     var _session$current;
@@ -175,9 +231,9 @@ function useSortablePointer(_ref2) {
   // `longPress`: on touch, wait LONG_PRESS_DELAY before picking the item up (used
   // when the whole item is the drag source, so the list still scrolls on swipe).
   var startFor = function startFor(key) {
-    var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-      _ref3$longPress = _ref3.longPress,
-      longPress = _ref3$longPress === void 0 ? false : _ref3$longPress;
+    var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+      _ref6$longPress = _ref6.longPress,
+      longPress = _ref6$longPress === void 0 ? false : _ref6$longPress;
     return function (e) {
       if (disabled || e.button > 0) return;
       var start = {
@@ -190,6 +246,12 @@ function useSortablePointer(_ref2) {
       var point = start;
       var pressTimer = null;
       var frame = null;
+      // Over another list of the group, the source list keeps its original order
+      // and the target list shows where the item would land.
+      var track = function track() {
+        var _latest$current$cross;
+        if ((_latest$current$cross = latest.current.cross) !== null && _latest$current$cross !== void 0 && _latest$current$cross.over(point, key)) setDraft(null);else setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
+      };
       var scrollTarget = function scrollTarget() {
         return getScrollParent(latest.current.nodeFor(key), latest.current.orientation);
       };
@@ -214,7 +276,7 @@ function useSortablePointer(_ref2) {
         } else if (typeof window.scrollBy === "function") {
           window.scrollBy(dx, dy);
         }
-        setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
+        track();
         frame = raf(_autoScroll);
       };
       var activate = function activate() {
@@ -236,20 +298,24 @@ function useSortablePointer(_ref2) {
           if (distance < DRAG_THRESHOLD) return;
           activate();
         }
-        setDraft(moveKey(latest.current.keys, key, targetIndex(point, key)));
+        track();
         if (frame === null) frame = raf(_autoScroll);
       };
       var onUp = function onUp() {
+        var _latest$current$cross2;
         end();
         if (!active) return;
         setDragging(null);
+        if ((_latest$current$cross2 = latest.current.cross) !== null && _latest$current$cross2 !== void 0 && _latest$current$cross2.release()) return;
         latest.current.commit(from, latest.current.keys.indexOf(key));
       };
       var onCancel = function onCancel() {
+        var _latest$current$cross3;
         end();
         if (!active) return;
         setDragging(null);
         setDraft(null);
+        (_latest$current$cross3 = latest.current.cross) === null || _latest$current$cross3 === void 0 || _latest$current$cross3.cancel();
       };
       // Once a touch drag is live, stop the browser from scrolling (and from firing
       // pointercancel); before that, let the page scroll normally.
@@ -287,4 +353,4 @@ function useSortablePointer(_ref2) {
   };
 }
 
-export { AUTO_SCROLL_EDGE, DEFAULT_SORTABLE_MESSAGES, DRAG_THRESHOLD, LONG_PRESS_DELAY, LONG_PRESS_TOLERANCE, edgeSpeed, getScrollParent, moveKey, useSortableKeyboard, useSortablePointer };
+export { AUTO_SCROLL_EDGE, DEFAULT_SORTABLE_MESSAGES, DRAG_THRESHOLD, LONG_PRESS_DELAY, LONG_PRESS_TOLERANCE, arrayMove, defaultGetItemLabel, defaultGetKey, edgeSpeed, getScrollParent, moveKey, useSortableKeyboard, useSortablePointer };