@react-aria/selection 3.13.1 → 3.15.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, 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 {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";
 
@@ -74,7 +74,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,
@@ -154,15 +154,19 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
                 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");
                 }
                 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");
                 }
                 break;
@@ -271,10 +275,12 @@ function $ae20dd8cbca75726$export$d6daf82dcd84e87c(options) {
             // Restore the scroll position to what it was before.
             scrollRef.current.scrollTop = scrollPos.current.top;
             scrollRef.current.scrollLeft = scrollPos.current.left;
+        }
+        if (!isVirtualized && manager.focusedKey != null) {
             // Refocus and scroll the focused item into view if it exists within the scrollable region.
             let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
             if (element) {
-                // This prevents a flash of focus on the first/last element in the collection
+                // 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);
             }
@@ -385,9 +391,9 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
     // Focus the associated DOM node when this item becomes the focusedKey
     (0, $eCAIO$useEffect)(()=>{
         let isFocused = key === manager.focusedKey;
-        if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
+        if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
             if (focus) focus();
-            else (0, $eCAIO$focusSafely)(ref.current);
+            else if (document.activeElement !== ref.current) (0, $eCAIO$focusSafely)(ref.current);
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -511,6 +517,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
         }),
         isPressed: isPressed,
         isSelected: manager.isSelected(key),
+        isFocused: manager.isFocused && manager.focusedKey === key,
         isDisabled: isDisabled,
         allowsSelection: allowsSelection,
         hasAction: hasAction
@@ -547,7 +554,8 @@ 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 {
+ */ 
+class $2a25aae57d74318e$export$a05409b8bb224a5a {
     getKeyBelow(key) {
         key = this.collection.getKeyAfter(key);
         while(key != null){
@@ -555,6 +563,7 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyAfter(key);
         }
+        return null;
     }
     getKeyAbove(key) {
         key = this.collection.getKeyBefore(key);
@@ -563,6 +572,15 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyBefore(key);
         }
+        return null;
+    }
+    getKeyRightOf(key) {
+        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyAbove(key) : this.getKeyBelow(key);
+        return null;
+    }
+    getKeyLeftOf(key) {
+        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyBelow(key) : this.getKeyAbove(key);
+        return null;
     }
     getFirstKey() {
         let key = this.collection.getFirstKey();
@@ -571,6 +589,7 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyAfter(key);
         }
+        return null;
     }
     getLastKey() {
         let key = this.collection.getLastKey();
@@ -579,6 +598,7 @@ function $880e95eb8b93ba9a$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyBefore(key);
         }
+        return null;
     }
     getItem(key) {
         return this.ref.current.querySelector(`[data-key="${key}"]`);
@@ -587,23 +607,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 = 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 = 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;
@@ -617,11 +667,20 @@ 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;
+        } else {
+            this.collection = args[0];
+            this.disabledKeys = args[1];
+            this.ref = args[2];
+            this.collator = args[3];
+        }
     }
 }
 

package/dist/main.js

@@ -83,7 +83,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,
@@ -163,15 +163,19 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
                 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");
                 }
                 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");
                 }
                 break;
@@ -280,10 +284,12 @@ function $b6837c2f80a3c32f$export$d6daf82dcd84e87c(options) {
             // Restore the scroll position to what it was before.
             scrollRef.current.scrollTop = scrollPos.current.top;
             scrollRef.current.scrollLeft = scrollPos.current.left;
+        }
+        if (!isVirtualized && manager.focusedKey != null) {
             // Refocus and scroll the focused item into view if it exists within the scrollable region.
             let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`);
             if (element) {
-                // This prevents a flash of focus on the first/last element in the collection
+                // 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);
             }
@@ -394,9 +400,9 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
     // Focus the associated DOM node when this item becomes the focusedKey
     (0, $glPPV$react.useEffect)(()=>{
         let isFocused = key === manager.focusedKey;
-        if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
+        if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
             if (focus) focus();
-            else (0, $glPPV$reactariafocus.focusSafely)(ref.current);
+            else if (document.activeElement !== ref.current) (0, $glPPV$reactariafocus.focusSafely)(ref.current);
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -520,6 +526,7 @@ function $433b1145b0781e10$export$ecf600387e221c37(options) {
         }),
         isPressed: isPressed,
         isSelected: manager.isSelected(key),
+        isFocused: manager.isFocused && manager.focusedKey === key,
         isDisabled: isDisabled,
         allowsSelection: allowsSelection,
         hasAction: hasAction
@@ -556,7 +563,8 @@ 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 {
+ */ 
+class $836f880b12dcae5c$export$a05409b8bb224a5a {
     getKeyBelow(key) {
         key = this.collection.getKeyAfter(key);
         while(key != null){
@@ -564,6 +572,7 @@ function $433b1145b0781e10$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyAfter(key);
         }
+        return null;
     }
     getKeyAbove(key) {
         key = this.collection.getKeyBefore(key);
@@ -572,6 +581,15 @@ function $433b1145b0781e10$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyBefore(key);
         }
+        return null;
+    }
+    getKeyRightOf(key) {
+        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyAbove(key) : this.getKeyBelow(key);
+        return null;
+    }
+    getKeyLeftOf(key) {
+        if (this.orientation === "horizontal") return this.direction === "rtl" ? this.getKeyBelow(key) : this.getKeyAbove(key);
+        return null;
     }
     getFirstKey() {
         let key = this.collection.getFirstKey();
@@ -580,6 +598,7 @@ function $433b1145b0781e10$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyAfter(key);
         }
+        return null;
     }
     getLastKey() {
         let key = this.collection.getLastKey();
@@ -588,6 +607,7 @@ function $433b1145b0781e10$var$isSelectionKey() {
             if (item.type === "item" && !this.disabledKeys.has(key)) return key;
             key = this.collection.getKeyBefore(key);
         }
+        return null;
     }
     getItem(key) {
         return this.ref.current.querySelector(`[data-key="${key}"]`);
@@ -596,23 +616,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 = 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 = 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;
@@ -626,11 +676,20 @@ 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;
+        } else {
+            this.collection = args[0];
+            this.disabledKeys = args[1];
+            this.ref = args[2];
+            this.collator = args[3];
+        }
     }
 }