@react-aria/selection 3.14.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} 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.
@@ -74,7 +73,7 @@ function $fb3050f43d946246$export$e32c88dfddc6e1d8(options) {
     }).current;
     let onKeyDown = (e)=>{
         let character = $fb3050f43d946246$var$getStringForKey(e.key);
-        if (!character || e.ctrlKey || e.metaKey) return;
+        if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target)) return;
         // Do not propagate the Spacebar event if it's meant to be part of the search.
         // When we time out, the search term becomes empty, hence the check on length.
         // Trimming is to account for the case of pressing the Spacebar more than once,
@@ -147,23 +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);
-                    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);
-                    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":
@@ -187,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":
@@ -278,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
+                });
             }
         }
     };
@@ -306,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,
@@ -370,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 {
@@ -476,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.
@@ -550,8 +560,9 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ class $2a25aae57d74318e$export$a05409b8bb224a5a {
-    getKeyBelow(key) {
+ */ 
+class $2a25aae57d74318e$export$a05409b8bb224a5a {
+    getNextKey(key) {
         key = this.collection.getKeyAfter(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -560,7 +571,7 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
         }
         return null;
     }
-    getKeyAbove(key) {
+    getPreviousKey(key) {
         key = this.collection.getKeyBefore(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -569,6 +580,48 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
         }
         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.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.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() {
         let key = this.collection.getFirstKey();
         while(key != null){
@@ -594,23 +647,53 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
         let menu = this.ref.current;
         let item = this.getItem(key);
         if (!item) return null;
-        let pageY = Math.max(0, item.offsetTop + item.offsetHeight - menu.offsetHeight);
-        while(item && item.offsetTop > pageY){
-            key = this.getKeyAbove(key);
-            item = key == null ? null : this.getItem(key);
+        if (!(0, $eCAIO$isScrollable)(menu)) return this.getFirstKey();
+        let containerRect = menu.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        if (this.orientation === "horizontal") {
+            let containerX = containerRect.x - menu.scrollLeft;
+            let pageX = Math.max(0, itemRect.x - containerX + itemRect.width - containerRect.width);
+            while(item && itemRect.x - containerX > pageX){
+                key = this.getKeyAbove(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
+        } else {
+            let containerY = containerRect.y - menu.scrollTop;
+            let pageY = Math.max(0, itemRect.y - containerY + itemRect.height - containerRect.height);
+            while(item && itemRect.y - containerY > pageY){
+                key = this.getKeyAbove(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
         }
-        return key;
+        return key !== null && key !== void 0 ? key : this.getFirstKey();
     }
     getKeyPageBelow(key) {
         let menu = this.ref.current;
         let item = this.getItem(key);
         if (!item) return null;
-        let pageY = Math.min(menu.scrollHeight, item.offsetTop - item.offsetHeight + menu.offsetHeight);
-        while(item && item.offsetTop < pageY){
-            key = this.getKeyBelow(key);
-            item = key == null ? null : this.getItem(key);
+        if (!(0, $eCAIO$isScrollable)(menu)) return this.getLastKey();
+        let containerRect = menu.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        if (this.orientation === "horizontal") {
+            let containerX = containerRect.x - menu.scrollLeft;
+            let pageX = Math.min(menu.scrollWidth, itemRect.x - containerX - itemRect.width + containerRect.width);
+            while(item && itemRect.x - containerX < pageX){
+                key = this.getKeyBelow(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
+        } else {
+            let containerY = containerRect.y - menu.scrollTop;
+            let pageY = Math.min(menu.scrollHeight, itemRect.y - containerY - itemRect.height + containerRect.height);
+            while(item && itemRect.y - containerY < pageY){
+                key = this.getKeyBelow(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
         }
-        return key;
+        return key !== null && key !== void 0 ? key : this.getLastKey();
     }
     getKeyForSearch(search, fromKey) {
         if (!this.collator) return null;
@@ -624,11 +707,29 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
         }
         return null;
     }
-    constructor(collection, disabledKeys, ref, collator){
-        this.collection = collection;
-        this.disabledKeys = disabledKeys;
-        this.ref = ref;
-        this.collator = collator;
+    constructor(...args){
+        if (args.length === 1) {
+            let opts = args[0];
+            this.collection = opts.collection;
+            this.ref = opts.ref;
+            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.
@@ -83,7 +82,7 @@ function $a1189052f36475e8$export$e32c88dfddc6e1d8(options) {
     }).current;
     let onKeyDown = (e)=>{
         let character = $a1189052f36475e8$var$getStringForKey(e.key);
-        if (!character || e.ctrlKey || e.metaKey) return;
+        if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target)) return;
         // Do not propagate the Spacebar event if it's meant to be part of the search.
         // When we time out, the search term becomes empty, hence the check on length.
         // Trimming is to account for the case of pressing the Spacebar more than once,
@@ -156,23 +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);
-                    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);
-                    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":
@@ -196,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":
@@ -287,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
+                });
             }
         }
     };
@@ -315,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,
@@ -379,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 {
@@ -485,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.
@@ -559,8 +569,9 @@ function $433b1145b0781e10$var$isSelectionKey() {
  * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
- */ class $836f880b12dcae5c$export$a05409b8bb224a5a {
-    getKeyBelow(key) {
+ */ 
+class $836f880b12dcae5c$export$a05409b8bb224a5a {
+    getNextKey(key) {
         key = this.collection.getKeyAfter(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -569,7 +580,7 @@ function $433b1145b0781e10$var$isSelectionKey() {
         }
         return null;
     }
-    getKeyAbove(key) {
+    getPreviousKey(key) {
         key = this.collection.getKeyBefore(key);
         while(key != null){
             let item = this.collection.getItem(key);
@@ -578,6 +589,48 @@ function $433b1145b0781e10$var$isSelectionKey() {
         }
         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.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.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() {
         let key = this.collection.getFirstKey();
         while(key != null){
@@ -603,23 +656,53 @@ function $433b1145b0781e10$var$isSelectionKey() {
         let menu = this.ref.current;
         let item = this.getItem(key);
         if (!item) return null;
-        let pageY = Math.max(0, item.offsetTop + item.offsetHeight - menu.offsetHeight);
-        while(item && item.offsetTop > pageY){
-            key = this.getKeyAbove(key);
-            item = key == null ? null : this.getItem(key);
+        if (!(0, $glPPV$reactariautils.isScrollable)(menu)) return this.getFirstKey();
+        let containerRect = menu.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        if (this.orientation === "horizontal") {
+            let containerX = containerRect.x - menu.scrollLeft;
+            let pageX = Math.max(0, itemRect.x - containerX + itemRect.width - containerRect.width);
+            while(item && itemRect.x - containerX > pageX){
+                key = this.getKeyAbove(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
+        } else {
+            let containerY = containerRect.y - menu.scrollTop;
+            let pageY = Math.max(0, itemRect.y - containerY + itemRect.height - containerRect.height);
+            while(item && itemRect.y - containerY > pageY){
+                key = this.getKeyAbove(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
         }
-        return key;
+        return key !== null && key !== void 0 ? key : this.getFirstKey();
     }
     getKeyPageBelow(key) {
         let menu = this.ref.current;
         let item = this.getItem(key);
         if (!item) return null;
-        let pageY = Math.min(menu.scrollHeight, item.offsetTop - item.offsetHeight + menu.offsetHeight);
-        while(item && item.offsetTop < pageY){
-            key = this.getKeyBelow(key);
-            item = key == null ? null : this.getItem(key);
+        if (!(0, $glPPV$reactariautils.isScrollable)(menu)) return this.getLastKey();
+        let containerRect = menu.getBoundingClientRect();
+        let itemRect = item.getBoundingClientRect();
+        if (this.orientation === "horizontal") {
+            let containerX = containerRect.x - menu.scrollLeft;
+            let pageX = Math.min(menu.scrollWidth, itemRect.x - containerX - itemRect.width + containerRect.width);
+            while(item && itemRect.x - containerX < pageX){
+                key = this.getKeyBelow(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
+        } else {
+            let containerY = containerRect.y - menu.scrollTop;
+            let pageY = Math.min(menu.scrollHeight, itemRect.y - containerY - itemRect.height + containerRect.height);
+            while(item && itemRect.y - containerY < pageY){
+                key = this.getKeyBelow(key);
+                item = key == null ? null : this.getItem(key);
+                itemRect = item === null || item === void 0 ? void 0 : item.getBoundingClientRect();
+            }
         }
-        return key;
+        return key !== null && key !== void 0 ? key : this.getLastKey();
     }
     getKeyForSearch(search, fromKey) {
         if (!this.collator) return null;
@@ -633,11 +716,29 @@ function $433b1145b0781e10$var$isSelectionKey() {
         }
         return null;
     }
-    constructor(collection, disabledKeys, ref, collator){
-        this.collection = collection;
-        this.disabledKeys = disabledKeys;
-        this.ref = ref;
-        this.collator = collator;
+    constructor(...args){
+        if (args.length === 1) {
+            let opts = args[0];
+            this.collection = opts.collection;
+            this.ref = opts.ref;
+            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;
+        }
     }
 }