@react-aria/selection 3.15.0 → 3.16.0

package/dist/import.mjs

@@ -1,6 +1,6 @@
 import {useRef as $eCAIO$useRef, useEffect as $eCAIO$useEffect, useMemo as $eCAIO$useMemo} from "react";
 import {getFocusableTreeWalker as $eCAIO$getFocusableTreeWalker, focusSafely as $eCAIO$focusSafely} from "@react-aria/focus";
-import {focusWithoutScrolling as $eCAIO$focusWithoutScrolling, useEvent as $eCAIO$useEvent, scrollIntoView as $eCAIO$scrollIntoView, scrollIntoViewport as $eCAIO$scrollIntoViewport, mergeProps as $eCAIO$mergeProps, isAppleDevice as $eCAIO$isAppleDevice, isMac as $eCAIO$isMac, isScrollable as $eCAIO$isScrollable} from "@react-aria/utils";
+import {focusWithoutScrolling as $eCAIO$focusWithoutScrolling, useEvent as $eCAIO$useEvent, scrollIntoViewport as $eCAIO$scrollIntoViewport, scrollIntoView as $eCAIO$scrollIntoView, mergeProps as $eCAIO$mergeProps, isAppleDevice as $eCAIO$isAppleDevice, isMac as $eCAIO$isMac, isScrollable as $eCAIO$isScrollable} from "@react-aria/utils";
 import {getInteractionModality as $eCAIO$getInteractionModality, usePress as $eCAIO$usePress, useLongPress as $eCAIO$useLongPress} from "@react-aria/interactions";
 import {useLocale as $eCAIO$useLocale, useCollator as $eCAIO$useCollator} from "@react-aria/i18n";
 
@@ -39,7 +39,6 @@ import {useLocale as $eCAIO$useLocale, useCollator as $eCAIO$useCollator} from "
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-
 function $feb5ffebff200149$export$d3e3bd3e26688c04(e) {
     // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.
     // On Windows and Ubuntu, Alt + Space has a system wide meaning.
@@ -147,27 +146,27 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 if (delegate.getKeyAbove) {
                     var _delegate_getLastKey, _delegate_getLastKey1;
                     e.preventDefault();
-                    let nextKey1 = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
-                    if (nextKey1 == null && shouldFocusWrap) nextKey1 = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
-                    navigateToKey(nextKey1);
+                    let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
+                    if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
+                    navigateToKey(nextKey);
                 }
                 break;
             case "ArrowLeft":
                 if (delegate.getKeyLeftOf) {
                     var _delegate_getFirstKey2, _delegate_getLastKey2;
                     e.preventDefault();
-                    let nextKey2 = delegate.getKeyLeftOf(manager.focusedKey);
-                    if (nextKey2 == null && shouldFocusWrap) nextKey2 = direction === "rtl" ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
-                    navigateToKey(nextKey2, direction === "rtl" ? "first" : "last");
+                    let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
+                    if (nextKey == null && shouldFocusWrap) nextKey = direction === "rtl" ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
+                    navigateToKey(nextKey, direction === "rtl" ? "first" : "last");
                 }
                 break;
             case "ArrowRight":
                 if (delegate.getKeyRightOf) {
                     var _delegate_getLastKey3, _delegate_getFirstKey3;
                     e.preventDefault();
-                    let nextKey3 = delegate.getKeyRightOf(manager.focusedKey);
-                    if (nextKey3 == null && shouldFocusWrap) nextKey3 = direction === "rtl" ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
-                    navigateToKey(nextKey3, direction === "rtl" ? "last" : "first");
+                    let nextKey = delegate.getKeyRightOf(manager.focusedKey);
+                    if (nextKey == null && shouldFocusWrap) nextKey = direction === "rtl" ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
+                    navigateToKey(nextKey, direction === "rtl" ? "last" : "first");
                 }
                 break;
             case "Home":
@@ -191,15 +190,15 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             case "PageDown":
                 if (delegate.getKeyPageBelow) {
                     e.preventDefault();
-                    let nextKey4 = delegate.getKeyPageBelow(manager.focusedKey);
-                    navigateToKey(nextKey4);
+                    let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
+                    navigateToKey(nextKey);
                 }
                 break;
             case "PageUp":
                 if (delegate.getKeyPageAbove) {
                     e.preventDefault();
-                    let nextKey5 = delegate.getKeyPageAbove(manager.focusedKey);
-                    navigateToKey(nextKey5);
+                    let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
+                    navigateToKey(nextKey);
                 }
                 break;
             case "a":
@@ -282,7 +281,10 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             if (element) {
                 // This prevents a flash of focus on the first/last element in the collection, or the collection itself.
                 (0, $eCAIO$focusWithoutScrolling)(element);
-                (0, $eCAIO$scrollIntoView)(scrollRef.current, element);
+                let modality = (0, $eCAIO$getInteractionModality)();
+                if (modality === "keyboard") (0, $eCAIO$scrollIntoViewport)(element, {
+                    containingElement: ref.current
+                });
             }
         }
     };
@@ -310,17 +312,21 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
     }, []);
     // If not virtualized, scroll the focused element into view when the focusedKey changes.
     // When virtualized, Virtualizer handles this internally.
+    let lastFocusedKey = (0, $eCAIO$useRef)(manager.focusedKey);
     (0, $eCAIO$useEffect)(()=>{
         let modality = (0, $eCAIO$getInteractionModality)();
-        if (!isVirtualized && manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+        if (manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
             let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
-            if (element) {
-                (0, $eCAIO$scrollIntoView)(scrollRef.current, element);
-                if (modality === "keyboard") (0, $eCAIO$scrollIntoViewport)(element, {
+            if (element && modality === "keyboard") {
+                if (!isVirtualized) (0, $eCAIO$scrollIntoView)(scrollRef.current, element);
+                (0, $eCAIO$scrollIntoViewport)(element, {
                     containingElement: ref.current
                 });
             }
         }
+        // If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
+        if (manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $eCAIO$focusSafely)(ref.current);
+        lastFocusedKey.current = manager.focusedKey;
     }, [
         isVirtualized,
         scrollRef,
@@ -374,7 +380,7 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
 
 
 function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
-    let { selectionManager: manager , key: key , ref: ref , shouldSelectOnPressUp: shouldSelectOnPressUp , isVirtualized: isVirtualized , shouldUseVirtualFocus: shouldUseVirtualFocus , focus: focus , isDisabled: isDisabled , onAction: onAction , allowsDifferentPressOrigin: allowsDifferentPressOrigin  } = options;
+    let { selectionManager: manager , key: key , ref: ref , shouldSelectOnPressUp: shouldSelectOnPressUp , shouldUseVirtualFocus: shouldUseVirtualFocus , focus: focus , isDisabled: isDisabled , onAction: onAction , allowsDifferentPressOrigin: allowsDifferentPressOrigin  } = options;
     let onSelect = (e)=>{
         if (e.pointerType === "keyboard" && (0, $feb5ffebff200149$export$d3e3bd3e26688c04)(e)) manager.toggleSelection(key);
         else {
@@ -480,7 +486,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
             }
         };
     }
-    if (!isVirtualized) itemProps["data-key"] = key;
+    itemProps["data-key"] = key;
     itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
     let { pressProps: pressProps , isPressed: isPressed  } = (0, $eCAIO$usePress)(itemPressProps);
     // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
@@ -556,7 +562,7 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
  * governing permissions and limitations under the License.
  */ 
 class $2a25aae57d74318e$export$a05409b8bb224a5a {
-    getKeyBelow(key) {
+    getNextKey(key) {
         key = this.collection.getKeyAfter(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -565,7 +571,7 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
         }
         return null;
     }
-    getKeyAbove(key) {
+    getPreviousKey(key) {
         key = this.collection.getKeyBefore(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -574,12 +580,46 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
         }
         return null;
     }
+    findKey(key, nextKey, shouldSkip) {
+        let item = this.getItem(key);
+        if (!item) return null;
+        // Find the item above or below in the same column.
+        let prevRect = item.getBoundingClientRect();
+        do {
+            key = nextKey(key);
+            item = this.getItem(key);
+        }while (item && shouldSkip(prevRect, item.getBoundingClientRect()));
+        return key;
+    }
+    isSameRow(prevRect, itemRect) {
+        return prevRect.top === itemRect.top || prevRect.left !== itemRect.left;
+    }
+    isSameColumn(prevRect, itemRect) {
+        return prevRect.left === itemRect.left || prevRect.top !== itemRect.top;
+    }
+    getKeyBelow(key) {
+        if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (key)=>this.getNextKey(key), this.isSameRow);
+        else return this.getNextKey(key);
+    }
+    getKeyAbove(key) {
+        if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (key)=>this.getPreviousKey(key), this.isSameRow);
+        else return this.getPreviousKey(key);
+    }
+    getNextColumn(key, right) {
+        return right ? this.getPreviousKey(key) : this.getNextKey(key);
+    }
     getKeyRightOf(key) {
-        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyAbove(key) : this.getKeyBelow(key);
+        if (this.layout === "grid") {
+            if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "rtl");
+            else return this.findKey(key, (key)=>this.getNextColumn(key, this.direction === "rtl"), this.isSameColumn);
+        } else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "rtl");
         return null;
     }
     getKeyLeftOf(key) {
-        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyBelow(key) : this.getKeyAbove(key);
+        if (this.layout === "grid") {
+            if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "ltr");
+            else return this.findKey(key, (key)=>this.getNextColumn(key, this.direction === "ltr"), this.isSameColumn);
+        } else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "ltr");
         return null;
     }
     getFirstKey() {
@@ -675,11 +715,20 @@ class $2a25aae57d74318e$export$a05409b8bb224a5a {
             this.disabledKeys = opts.disabledKeys || new Set();
             this.orientation = opts.orientation;
             this.direction = opts.direction;
+            this.layout = opts.layout || "stack";
         } else {
             this.collection = args[0];
             this.disabledKeys = args[1];
             this.ref = args[2];
             this.collator = args[3];
+            this.layout = "stack";
+            this.orientation = "vertical";
+        }
+        // If this is a vertical stack, remove the left/right methods completely
+        // so they aren't called by useDroppableCollection.
+        if (this.layout === "stack" && this.orientation === "vertical") {
+            this.getKeyLeftOf = undefined;
+            this.getKeyRightOf = undefined;
         }
     }
 }

package/dist/main.js

@@ -48,7 +48,6 @@ $parcel$export(module.exports, "useTypeSelect", () => $a1189052f36475e8$export$e
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */ 
-
 function $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04(e) {
     // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.
     // On Windows and Ubuntu, Alt + Space has a system wide meaning.
@@ -156,27 +155,27 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
                 if (delegate.getKeyAbove) {
                     var _delegate_getLastKey, _delegate_getLastKey1;
                     e.preventDefault();
-                    let nextKey1 = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
-                    if (nextKey1 == null && shouldFocusWrap) nextKey1 = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
-                    navigateToKey(nextKey1);
+                    let nextKey = manager.focusedKey != null ? delegate.getKeyAbove(manager.focusedKey) : (_delegate_getLastKey = delegate.getLastKey) === null || _delegate_getLastKey === void 0 ? void 0 : _delegate_getLastKey.call(delegate);
+                    if (nextKey == null && shouldFocusWrap) nextKey = (_delegate_getLastKey1 = delegate.getLastKey) === null || _delegate_getLastKey1 === void 0 ? void 0 : _delegate_getLastKey1.call(delegate, manager.focusedKey);
+                    navigateToKey(nextKey);
                 }
                 break;
             case "ArrowLeft":
                 if (delegate.getKeyLeftOf) {
                     var _delegate_getFirstKey2, _delegate_getLastKey2;
                     e.preventDefault();
-                    let nextKey2 = delegate.getKeyLeftOf(manager.focusedKey);
-                    if (nextKey2 == null && shouldFocusWrap) nextKey2 = direction === "rtl" ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
-                    navigateToKey(nextKey2, direction === "rtl" ? "first" : "last");
+                    let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
+                    if (nextKey == null && shouldFocusWrap) nextKey = direction === "rtl" ? (_delegate_getFirstKey2 = delegate.getFirstKey) === null || _delegate_getFirstKey2 === void 0 ? void 0 : _delegate_getFirstKey2.call(delegate, manager.focusedKey) : (_delegate_getLastKey2 = delegate.getLastKey) === null || _delegate_getLastKey2 === void 0 ? void 0 : _delegate_getLastKey2.call(delegate, manager.focusedKey);
+                    navigateToKey(nextKey, direction === "rtl" ? "first" : "last");
                 }
                 break;
             case "ArrowRight":
                 if (delegate.getKeyRightOf) {
                     var _delegate_getLastKey3, _delegate_getFirstKey3;
                     e.preventDefault();
-                    let nextKey3 = delegate.getKeyRightOf(manager.focusedKey);
-                    if (nextKey3 == null && shouldFocusWrap) nextKey3 = direction === "rtl" ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
-                    navigateToKey(nextKey3, direction === "rtl" ? "last" : "first");
+                    let nextKey = delegate.getKeyRightOf(manager.focusedKey);
+                    if (nextKey == null && shouldFocusWrap) nextKey = direction === "rtl" ? (_delegate_getLastKey3 = delegate.getLastKey) === null || _delegate_getLastKey3 === void 0 ? void 0 : _delegate_getLastKey3.call(delegate, manager.focusedKey) : (_delegate_getFirstKey3 = delegate.getFirstKey) === null || _delegate_getFirstKey3 === void 0 ? void 0 : _delegate_getFirstKey3.call(delegate, manager.focusedKey);
+                    navigateToKey(nextKey, direction === "rtl" ? "last" : "first");
                 }
                 break;
             case "Home":
@@ -200,15 +199,15 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
             case "PageDown":
                 if (delegate.getKeyPageBelow) {
                     e.preventDefault();
-                    let nextKey4 = delegate.getKeyPageBelow(manager.focusedKey);
-                    navigateToKey(nextKey4);
+                    let nextKey = delegate.getKeyPageBelow(manager.focusedKey);
+                    navigateToKey(nextKey);
                 }
                 break;
             case "PageUp":
                 if (delegate.getKeyPageAbove) {
                     e.preventDefault();
-                    let nextKey5 = delegate.getKeyPageAbove(manager.focusedKey);
-                    navigateToKey(nextKey5);
+                    let nextKey = delegate.getKeyPageAbove(manager.focusedKey);
+                    navigateToKey(nextKey);
                 }
                 break;
             case "a":
@@ -291,7 +290,10 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
             if (element) {
                 // This prevents a flash of focus on the first/last element in the collection, or the collection itself.
                 (0, $glPPV$reactariautils.focusWithoutScrolling)(element);
-                (0, $glPPV$reactariautils.scrollIntoView)(scrollRef.current, element);
+                let modality = (0, $glPPV$reactariainteractions.getInteractionModality)();
+                if (modality === "keyboard") (0, $glPPV$reactariautils.scrollIntoViewport)(element, {
+                    containingElement: ref.current
+                });
             }
         }
     };
@@ -319,17 +321,21 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
     }, []);
     // If not virtualized, scroll the focused element into view when the focusedKey changes.
     // When virtualized, Virtualizer handles this internally.
+    let lastFocusedKey = (0, $glPPV$react.useRef)(manager.focusedKey);
     (0, $glPPV$react.useEffect)(()=>{
         let modality = (0, $glPPV$reactariainteractions.getInteractionModality)();
-        if (!isVirtualized && manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
+        if (manager.isFocused && manager.focusedKey != null && (scrollRef === null || scrollRef === void 0 ? void 0 : scrollRef.current)) {
             let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
-            if (element) {
-                (0, $glPPV$reactariautils.scrollIntoView)(scrollRef.current, element);
-                if (modality === "keyboard") (0, $glPPV$reactariautils.scrollIntoViewport)(element, {
+            if (element && modality === "keyboard") {
+                if (!isVirtualized) (0, $glPPV$reactariautils.scrollIntoView)(scrollRef.current, element);
+                (0, $glPPV$reactariautils.scrollIntoViewport)(element, {
                     containingElement: ref.current
                 });
             }
         }
+        // If the focused key becomes null (e.g. the last item is deleted), focus the whole collection.
+        if (manager.isFocused && manager.focusedKey == null && lastFocusedKey.current != null) (0, $glPPV$reactariafocus.focusSafely)(ref.current);
+        lastFocusedKey.current = manager.focusedKey;
     }, [
         isVirtualized,
         scrollRef,
@@ -383,7 +389,7 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
 
 
 function $433b1145b0781e10$export$ecf600387e221c37(options) {
-    let { selectionManager: manager , key: key , ref: ref , shouldSelectOnPressUp: shouldSelectOnPressUp , isVirtualized: isVirtualized , shouldUseVirtualFocus: shouldUseVirtualFocus , focus: focus , isDisabled: isDisabled , onAction: onAction , allowsDifferentPressOrigin: allowsDifferentPressOrigin  } = options;
+    let { selectionManager: manager , key: key , ref: ref , shouldSelectOnPressUp: shouldSelectOnPressUp , shouldUseVirtualFocus: shouldUseVirtualFocus , focus: focus , isDisabled: isDisabled , onAction: onAction , allowsDifferentPressOrigin: allowsDifferentPressOrigin  } = options;
     let onSelect = (e)=>{
         if (e.pointerType === "keyboard" && (0, $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04)(e)) manager.toggleSelection(key);
         else {
@@ -489,7 +495,7 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
             }
         };
     }
-    if (!isVirtualized) itemProps["data-key"] = key;
+    itemProps["data-key"] = key;
     itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
     let { pressProps: pressProps , isPressed: isPressed  } = (0, $glPPV$reactariainteractions.usePress)(itemPressProps);
     // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
@@ -565,7 +571,7 @@ function $433b1145b0781e10$var$isSelectionKey() {
  * governing permissions and limitations under the License.
  */ 
 class $836f880b12dcae5c$export$a05409b8bb224a5a {
-    getKeyBelow(key) {
+    getNextKey(key) {
         key = this.collection.getKeyAfter(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -574,7 +580,7 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
         }
         return null;
     }
-    getKeyAbove(key) {
+    getPreviousKey(key) {
         key = this.collection.getKeyBefore(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -583,12 +589,46 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
         }
         return null;
     }
+    findKey(key, nextKey, shouldSkip) {
+        let item = this.getItem(key);
+        if (!item) return null;
+        // Find the item above or below in the same column.
+        let prevRect = item.getBoundingClientRect();
+        do {
+            key = nextKey(key);
+            item = this.getItem(key);
+        }while (item && shouldSkip(prevRect, item.getBoundingClientRect()));
+        return key;
+    }
+    isSameRow(prevRect, itemRect) {
+        return prevRect.top === itemRect.top || prevRect.left !== itemRect.left;
+    }
+    isSameColumn(prevRect, itemRect) {
+        return prevRect.left === itemRect.left || prevRect.top !== itemRect.top;
+    }
+    getKeyBelow(key) {
+        if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (key)=>this.getNextKey(key), this.isSameRow);
+        else return this.getNextKey(key);
+    }
+    getKeyAbove(key) {
+        if (this.layout === "grid" && this.orientation === "vertical") return this.findKey(key, (key)=>this.getPreviousKey(key), this.isSameRow);
+        else return this.getPreviousKey(key);
+    }
+    getNextColumn(key, right) {
+        return right ? this.getPreviousKey(key) : this.getNextKey(key);
+    }
     getKeyRightOf(key) {
-        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyAbove(key) : this.getKeyBelow(key);
+        if (this.layout === "grid") {
+            if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "rtl");
+            else return this.findKey(key, (key)=>this.getNextColumn(key, this.direction === "rtl"), this.isSameColumn);
+        } else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "rtl");
         return null;
     }
     getKeyLeftOf(key) {
-        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyBelow(key) : this.getKeyAbove(key);
+        if (this.layout === "grid") {
+            if (this.orientation === "vertical") return this.getNextColumn(key, this.direction === "ltr");
+            else return this.findKey(key, (key)=>this.getNextColumn(key, this.direction === "ltr"), this.isSameColumn);
+        } else if (this.orientation === "horizontal") return this.getNextColumn(key, this.direction === "ltr");
         return null;
     }
     getFirstKey() {
@@ -684,11 +724,20 @@ class $836f880b12dcae5c$export$a05409b8bb224a5a {
             this.disabledKeys = opts.disabledKeys || new Set();
             this.orientation = opts.orientation;
             this.direction = opts.direction;
+            this.layout = opts.layout || "stack";
         } else {
             this.collection = args[0];
             this.disabledKeys = args[1];
             this.ref = args[2];
             this.collator = args[3];
+            this.layout = "stack";
+            this.orientation = "vertical";
+        }
+        // If this is a vertical stack, remove the left/right methods completely
+        // so they aren't called by useDroppableCollection.
+        if (this.layout === "stack" && this.orientation === "vertical") {
+            this.getKeyLeftOf = undefined;
+            this.getKeyRightOf = undefined;
         }
     }
 }