@react-aria/dnd 3.2.2-nightly.3993 → 3.3.0

package/dist/module.js

@@ -1,7 +1,7 @@
 import {useInteractionModality as $fP8tg$useInteractionModality, getInteractionModality as $fP8tg$getInteractionModality, setInteractionModality as $fP8tg$setInteractionModality, useFocus as $fP8tg$useFocus} from "@react-aria/interactions";
 import $fP8tg$react, {useRef as $fP8tg$useRef, useState as $fP8tg$useState, useEffect as $fP8tg$useEffect, useCallback as $fP8tg$useCallback, useImperativeHandle as $fP8tg$useImperativeHandle} from "react";
 import {useGlobalListeners as $fP8tg$useGlobalListeners, useLayoutEffect as $fP8tg$useLayoutEffect, useDescription as $fP8tg$useDescription, isVirtualPointerEvent as $fP8tg$isVirtualPointerEvent, isVirtualClick as $fP8tg$isVirtualClick, useEffectEvent as $fP8tg$useEffectEvent, isMac as $fP8tg$isMac, isIPad as $fP8tg$isIPad, useId as $fP8tg$useId, mergeProps as $fP8tg$mergeProps, isScrollable as $fP8tg$isScrollable, getScrollParent as $fP8tg$getScrollParent, isWebKit as $fP8tg$isWebKit, isIOS as $fP8tg$isIOS, chain as $fP8tg$chain} from "@react-aria/utils";
-import {useLocalizedStringFormatter as $fP8tg$useLocalizedStringFormatter} from "@react-aria/i18n";
+import {useLocalizedStringFormatter as $fP8tg$useLocalizedStringFormatter, useLocale as $fP8tg$useLocale} from "@react-aria/i18n";
 import {announce as $fP8tg$announce} from "@react-aria/live-announcer";
 import {ariaHideOutside as $fP8tg$ariaHideOutside} from "@react-aria/overlays";
 import {flushSync as $fP8tg$flushSync} from "react-dom";
@@ -2933,11 +2933,17 @@ function $80d9daea3067eff3$export$6323452ca4533ed8(ref) {
 
 
 
+
 const $4b52e4eff84e5217$var$DROP_POSITIONS = [
     "before",
     "on",
     "after"
 ];
+const $4b52e4eff84e5217$var$DROP_POSITIONS_RTL = [
+    "after",
+    "on",
+    "before"
+];
 function $4b52e4eff84e5217$export$f4e2f423c21f7b04(props, state, ref) {
     let localState = (0, $fP8tg$useRef)({
         props: props,
@@ -3154,25 +3160,35 @@ function $4b52e4eff84e5217$export$f4e2f423c21f7b04(props, state, ref) {
             droppingState.current = null;
         }
     });
+    let { direction: direction  } = (0, $fP8tg$useLocale)();
     (0, $fP8tg$useEffect)(()=>{
-        let getNextTarget = (target, wrap = true)=>{
+        let getNextTarget = (target, wrap = true, horizontal = false)=>{
             if (!target) return {
                 type: "root"
             };
             let { keyboardDelegate: keyboardDelegate  } = localState.props;
-            let nextKey = target.type === "item" ? keyboardDelegate.getKeyBelow(target.key) : keyboardDelegate.getFirstKey();
-            let dropPosition = "before";
+            let nextKey;
+            if ((target === null || target === void 0 ? void 0 : target.type) === "item") nextKey = horizontal ? keyboardDelegate.getKeyRightOf(target.key) : keyboardDelegate.getKeyBelow(target.key);
+            else nextKey = horizontal && direction === "rtl" ? keyboardDelegate.getLastKey() : keyboardDelegate.getFirstKey();
+            let dropPositions = horizontal && direction === "rtl" ? $4b52e4eff84e5217$var$DROP_POSITIONS_RTL : $4b52e4eff84e5217$var$DROP_POSITIONS;
+            let dropPosition = dropPositions[0];
             if (target.type === "item") {
-                let positionIndex = $4b52e4eff84e5217$var$DROP_POSITIONS.indexOf(target.dropPosition);
-                let nextDropPosition = $4b52e4eff84e5217$var$DROP_POSITIONS[positionIndex + 1];
-                if (positionIndex < $4b52e4eff84e5217$var$DROP_POSITIONS.length - 1 && !(nextDropPosition === "after" && nextKey != null)) return {
-                    type: "item",
-                    key: target.key,
-                    dropPosition: nextDropPosition
-                };
-                // If the last drop position was 'after', then 'before' on the next key is equivalent.
-                // Switch to 'on' instead.
-                if (target.dropPosition === "after") dropPosition = "on";
+                // If the the keyboard delegate returned the next key in the collection,
+                // first try the other positions in the current key. Otherwise (e.g. in a grid layout),
+                // jump to the same drop position in the new key.
+                let nextCollectionKey = horizontal && direction === "rtl" ? localState.state.collection.getKeyBefore(target.key) : localState.state.collection.getKeyAfter(target.key);
+                if (nextKey == null || nextKey === nextCollectionKey) {
+                    let positionIndex = dropPositions.indexOf(target.dropPosition);
+                    let nextDropPosition = dropPositions[positionIndex + 1];
+                    if (positionIndex < dropPositions.length - 1 && !(nextDropPosition === dropPositions[2] && nextKey != null)) return {
+                        type: "item",
+                        key: target.key,
+                        dropPosition: nextDropPosition
+                    };
+                    // If the last drop position was 'after', then 'before' on the next key is equivalent.
+                    // Switch to 'on' instead.
+                    if (target.dropPosition === dropPositions[2]) dropPosition = "on";
+                } else dropPosition = target.dropPosition;
             }
             if (nextKey == null) {
                 if (wrap) return {
@@ -3186,21 +3202,30 @@ function $4b52e4eff84e5217$export$f4e2f423c21f7b04(props, state, ref) {
                 dropPosition: dropPosition
             };
         };
-        let getPreviousTarget = (target, wrap = true)=>{
+        let getPreviousTarget = (target, wrap = true, horizontal = false)=>{
             let { keyboardDelegate: keyboardDelegate  } = localState.props;
-            let nextKey = (target === null || target === void 0 ? void 0 : target.type) === "item" ? keyboardDelegate.getKeyAbove(target.key) : keyboardDelegate.getLastKey();
-            let dropPosition = !target || target.type === "root" ? "after" : "on";
+            let nextKey;
+            if ((target === null || target === void 0 ? void 0 : target.type) === "item") nextKey = horizontal ? keyboardDelegate.getKeyLeftOf(target.key) : keyboardDelegate.getKeyAbove(target.key);
+            else nextKey = horizontal && direction === "rtl" ? keyboardDelegate.getFirstKey() : keyboardDelegate.getLastKey();
+            let dropPositions = horizontal && direction === "rtl" ? $4b52e4eff84e5217$var$DROP_POSITIONS_RTL : $4b52e4eff84e5217$var$DROP_POSITIONS;
+            let dropPosition = !target || target.type === "root" ? dropPositions[2] : "on";
             if ((target === null || target === void 0 ? void 0 : target.type) === "item") {
-                let positionIndex = $4b52e4eff84e5217$var$DROP_POSITIONS.indexOf(target.dropPosition);
-                let nextDropPosition = $4b52e4eff84e5217$var$DROP_POSITIONS[positionIndex - 1];
-                if (positionIndex > 0 && nextDropPosition !== "after") return {
-                    type: "item",
-                    key: target.key,
-                    dropPosition: nextDropPosition
-                };
-                // If the last drop position was 'before', then 'after' on the previous key is equivalent.
-                // Switch to 'on' instead.
-                if (target.dropPosition === "before") dropPosition = "on";
+                // If the the keyboard delegate returned the previous key in the collection,
+                // first try the other positions in the current key. Otherwise (e.g. in a grid layout),
+                // jump to the same drop position in the new key.
+                let prevCollectionKey = horizontal && direction === "rtl" ? localState.state.collection.getKeyAfter(target.key) : localState.state.collection.getKeyBefore(target.key);
+                if (nextKey == null || nextKey === prevCollectionKey) {
+                    let positionIndex = dropPositions.indexOf(target.dropPosition);
+                    let nextDropPosition = dropPositions[positionIndex - 1];
+                    if (positionIndex > 0 && nextDropPosition !== dropPositions[2]) return {
+                        type: "item",
+                        key: target.key,
+                        dropPosition: nextDropPosition
+                    };
+                    // If the last drop position was 'before', then 'after' on the previous key is equivalent.
+                    // Switch to 'on' instead.
+                    if (target.dropPosition === dropPositions[0]) dropPosition = "on";
+                } else dropPosition = target.dropPosition;
             }
             if (nextKey == null) {
                 if (wrap) return {
@@ -3334,6 +3359,18 @@ function $4b52e4eff84e5217$export$f4e2f423c21f7b04(props, state, ref) {
                             localState.state.setTarget(target);
                         }
                         break;
+                    case "ArrowLeft":
+                        if (keyboardDelegate.getKeyLeftOf) {
+                            let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap)=>getPreviousTarget(target, wrap, true));
+                            localState.state.setTarget(target);
+                        }
+                        break;
+                    case "ArrowRight":
+                        if (keyboardDelegate.getKeyRightOf) {
+                            let target = nextValidTarget(localState.state.target, types, drag.allowedDropOperations, (target, wrap)=>getNextTarget(target, wrap, true));
+                            localState.state.setTarget(target);
+                        }
+                        break;
                     case "Home":
                         if (keyboardDelegate.getFirstKey) {
                             let target = nextValidTarget(null, types, drag.allowedDropOperations, getNextTarget);
@@ -3427,7 +3464,8 @@ function $4b52e4eff84e5217$export$f4e2f423c21f7b04(props, state, ref) {
     }, [
         localState,
         ref,
-        onDrop
+        onDrop,
+        direction
     ]);
     let id = (0, $fP8tg$useId)();
     (0, $7252cd45fc48c07c$export$dfdf5deeaf27473f).set(state, {
@@ -3854,13 +3892,40 @@ let $ad0e3f3d9c50e4ba$export$905ab40ac2179daa = /*#__PURE__*/ (0, $fP8tg$react).
 
 
 class $3ca85212bf8898e4$export$fbd65d14c79e28cc {
+    getPrimaryStart(rect) {
+        return this.orientation === "horizontal" ? rect.left : rect.top;
+    }
+    getPrimaryEnd(rect) {
+        return this.orientation === "horizontal" ? rect.right : rect.bottom;
+    }
+    getSecondaryStart(rect) {
+        return this.orientation === "horizontal" ? rect.top : rect.left;
+    }
+    getSecondaryEnd(rect) {
+        return this.orientation === "horizontal" ? rect.bottom : rect.right;
+    }
+    getFlowStart(rect) {
+        return this.layout === "stack" ? this.getPrimaryStart(rect) : this.getSecondaryStart(rect);
+    }
+    getFlowEnd(rect) {
+        return this.layout === "stack" ? this.getPrimaryEnd(rect) : this.getSecondaryEnd(rect);
+    }
+    getFlowSize(rect) {
+        return this.getFlowEnd(rect) - this.getFlowStart(rect);
+    }
     getDropTargetFromPoint(x, y, isValidDropTarget) {
         if (this.collection.size === 0) return {
             type: "root"
         };
         let rect = this.ref.current.getBoundingClientRect();
-        x += rect.x;
-        y += rect.y;
+        let primary = this.orientation === "horizontal" ? x : y;
+        let secondary = this.orientation === "horizontal" ? y : x;
+        primary += this.getPrimaryStart(rect);
+        secondary += this.getSecondaryStart(rect);
+        let flow = this.layout === "stack" ? primary : secondary;
+        let isPrimaryRTL = this.orientation === "horizontal" && this.direction === "rtl";
+        let isSecondaryRTL = this.layout === "grid" && this.orientation === "vertical" && this.direction === "rtl";
+        let isFlowRTL = this.layout === "stack" ? isPrimaryRTL : isSecondaryRTL;
         let elements = this.ref.current.querySelectorAll("[data-key]");
         let elementMap = new Map();
         for (let item of elements)if (item instanceof HTMLElement) elementMap.set(item.dataset.key, item);
@@ -3874,8 +3939,14 @@ class $3ca85212bf8898e4$export$fbd65d14c79e28cc {
             let item = items[mid];
             let element = elementMap.get(String(item.key));
             let rect = element.getBoundingClientRect();
-            if (y < rect.top) high = mid;
-            else if (y > rect.bottom) low = mid + 1;
+            let update = (isGreater)=>{
+                if (isGreater) low = mid + 1;
+                else high = mid;
+            };
+            if (primary < this.getPrimaryStart(rect)) update(isPrimaryRTL);
+            else if (primary > this.getPrimaryEnd(rect)) update(!isPrimaryRTL);
+            else if (secondary < this.getSecondaryStart(rect)) update(isSecondaryRTL);
+            else if (secondary > this.getSecondaryEnd(rect)) update(!isSecondaryRTL);
             else {
                 let target = {
                     type: "item",
@@ -3884,26 +3955,26 @@ class $3ca85212bf8898e4$export$fbd65d14c79e28cc {
                 };
                 if (isValidDropTarget(target)) {
                     // Otherwise, if dropping on the item is accepted, try the before/after positions if within 5px
-                    // of the top or bottom of the item.
-                    if (y <= rect.top + 5 && isValidDropTarget({
+                    // of the start or end of the item.
+                    if (flow <= this.getFlowStart(rect) + 5 && isValidDropTarget({
                         ...target,
                         dropPosition: "before"
-                    })) target.dropPosition = "before";
-                    else if (y >= rect.bottom - 5 && isValidDropTarget({
+                    })) target.dropPosition = isFlowRTL ? "after" : "before";
+                    else if (flow >= this.getFlowEnd(rect) - 5 && isValidDropTarget({
                         ...target,
                         dropPosition: "after"
-                    })) target.dropPosition = "after";
+                    })) target.dropPosition = isFlowRTL ? "before" : "after";
                 } else {
-                    // If dropping on the item isn't accepted, try the target before or after depending on the y position.
-                    let midY = rect.top + rect.height / 2;
-                    if (y <= midY && isValidDropTarget({
+                    // If dropping on the item isn't accepted, try the target before or after depending on the position.
+                    let mid = this.getFlowStart(rect) + this.getFlowSize(rect) / 2;
+                    if (flow <= mid && isValidDropTarget({
                         ...target,
                         dropPosition: "before"
-                    })) target.dropPosition = "before";
-                    else if (y >= midY && isValidDropTarget({
+                    })) target.dropPosition = isFlowRTL ? "after" : "before";
+                    else if (flow >= mid && isValidDropTarget({
                         ...target,
                         dropPosition: "after"
-                    })) target.dropPosition = "after";
+                    })) target.dropPosition = isFlowRTL ? "before" : "after";
                 }
                 return target;
             }
@@ -3911,20 +3982,23 @@ class $3ca85212bf8898e4$export$fbd65d14c79e28cc {
         let item = items[Math.min(low, items.length - 1)];
         let element = elementMap.get(String(item.key));
         rect = element.getBoundingClientRect();
-        if (Math.abs(y - rect.top) < Math.abs(y - rect.bottom)) return {
+        if (primary < this.getPrimaryStart(rect) || Math.abs(flow - this.getFlowStart(rect)) < Math.abs(flow - this.getFlowEnd(rect))) return {
             type: "item",
             key: item.key,
-            dropPosition: "before"
+            dropPosition: isFlowRTL ? "after" : "before"
         };
         return {
             type: "item",
             key: item.key,
-            dropPosition: "after"
+            dropPosition: isFlowRTL ? "before" : "after"
         };
     }
-    constructor(collection, ref){
+    constructor(collection, ref, options){
         this.collection = collection;
         this.ref = ref;
+        this.layout = (options === null || options === void 0 ? void 0 : options.layout) || "stack";
+        this.orientation = (options === null || options === void 0 ? void 0 : options.orientation) || "vertical";
+        this.direction = (options === null || options === void 0 ? void 0 : options.direction) || "ltr";
     }
 }