@react-aria/selection 3.14.0 → 3.15.0

package/src/ListKeyboardDelegate.ts

@@ -10,20 +10,42 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, KeyboardDelegate, Node} from '@react-types/shared';
+import {Collection, Direction, KeyboardDelegate, Node, Orientation} from '@react-types/shared';
+import {isScrollable} from '@react-aria/utils';
 import {Key, RefObject} from 'react';
 
+interface ListKeyboardDelegateOptions<T> {
+  collection: Collection<Node<T>>,
+  ref: RefObject<HTMLElement>,
+  orientation?: Orientation,
+  direction?: Direction,
+  disabledKeys?: Set<Key>
+}
+
 export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: Collection<Node<T>>;
   private disabledKeys: Set<Key>;
   private ref: RefObject<HTMLElement>;
   private collator: Intl.Collator;
-
-  constructor(collection: Collection<Node<T>>, disabledKeys: Set<Key>, ref: RefObject<HTMLElement>, collator?: Intl.Collator) {
-    this.collection = collection;
-    this.disabledKeys = disabledKeys;
-    this.ref = ref;
-    this.collator = collator;
+  private orientation?: Orientation;
+  private direction?: Direction;
+
+  constructor(collection: Collection<Node<T>>, disabledKeys: Set<Key>, ref: RefObject<HTMLElement>, collator?: Intl.Collator);
+  constructor(options: ListKeyboardDelegateOptions<T>);
+  constructor(...args: any[]) {
+    if (args.length === 1) {
+      let opts = args[0] as ListKeyboardDelegateOptions<T>;
+      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];
+    }
   }
 
   getKeyBelow(key: Key) {
@@ -54,6 +76,22 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return null;
   }
 
+  getKeyRightOf(key: Key) {
+    if (this.orientation === 'horizontal') {
+      return this.direction === 'rtl' ? this.getKeyAbove(key) : this.getKeyBelow(key);
+    }
+
+    return null;
+  }
+
+  getKeyLeftOf(key: Key) {
+    if (this.orientation === 'horizontal') {
+      return this.direction === 'rtl' ? this.getKeyBelow(key) : this.getKeyAbove(key);
+    }
+
+    return null;
+  }
+
   getFirstKey() {
     let key = this.collection.getFirstKey();
     while (key != null) {
@@ -93,14 +131,33 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       return null;
     }
 
-    let pageY = Math.max(0, item.offsetTop + item.offsetHeight - menu.offsetHeight);
+    if (!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 && item.offsetTop > pageY) {
-      key = this.getKeyAbove(key);
-      item = key == null ? null : this.getItem(key);
+      while (item && (itemRect.x - containerX) > pageX) {
+        key = this.getKeyAbove(key);
+        item = key == null ? null : this.getItem(key);
+        itemRect = 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?.getBoundingClientRect();
+      }
     }
 
-    return key;
+    return key ?? this.getFirstKey();
   }
 
   getKeyPageBelow(key: Key) {
@@ -110,14 +167,33 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       return null;
     }
 
-    let pageY = Math.min(menu.scrollHeight, item.offsetTop - item.offsetHeight + menu.offsetHeight);
+    if (!isScrollable(menu)) {
+      return this.getLastKey();
+    }
 
-    while (item && item.offsetTop < pageY) {
-      key = this.getKeyBelow(key);
-      item = key == null ? null : this.getItem(key);
+    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?.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?.getBoundingClientRect();
+      }
     }
 
-    return key;
+    return key ?? this.getLastKey();
   }
 
   getKeyForSearch(search: string, fromKey?: Key) {

package/src/useSelectableCollection.ts

@@ -165,6 +165,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
         if (delegate.getKeyLeftOf) {
           e.preventDefault();
           let nextKey = delegate.getKeyLeftOf(manager.focusedKey);
+          if (nextKey == null && shouldFocusWrap) {
+            nextKey = direction === 'rtl' ? delegate.getFirstKey?.(manager.focusedKey) : delegate.getLastKey?.(manager.focusedKey);
+          }
           navigateToKey(nextKey, direction === 'rtl' ? 'first' : 'last');
         }
         break;
@@ -173,6 +176,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
         if (delegate.getKeyRightOf) {
           e.preventDefault();
           let nextKey = delegate.getKeyRightOf(manager.focusedKey);
+          if (nextKey == null && shouldFocusWrap) {
+            nextKey = direction === 'rtl' ? delegate.getLastKey?.(manager.focusedKey) : delegate.getFirstKey?.(manager.focusedKey);
+          }
           navigateToKey(nextKey, direction === 'rtl' ? 'last' : 'first');
         }
         break;

package/src/useTypeSelect.ts

@@ -53,7 +53,7 @@ export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
 
   let onKeyDown = (e: KeyboardEvent) => {
     let character = getStringForKey(e.key);
-    if (!character || e.ctrlKey || e.metaKey) {
+    if (!character || e.ctrlKey || e.metaKey || !e.currentTarget.contains(e.target as HTMLElement)) {
       return;
     }