@react-aria/selection 3.14.0 → 3.16.0

package/src/ListKeyboardDelegate.ts

@@ -10,23 +10,57 @@
  * 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>,
+  layout?: 'stack' | 'grid',
+  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;
+  private layout: 'stack' | 'grid';
+  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;
+      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';
+    }
 
-  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;
+    // 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;
+    }
   }
 
-  getKeyBelow(key: Key) {
+  getNextKey(key: Key) {
     key = this.collection.getKeyAfter(key);
     while (key != null) {
       let item = this.collection.getItem(key);
@@ -40,7 +74,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return null;
   }
 
-  getKeyAbove(key: Key) {
+  getPreviousKey(key: Key) {
     key = this.collection.getKeyBefore(key);
     while (key != null) {
       let item = this.collection.getItem(key);
@@ -54,6 +88,82 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return null;
   }
 
+  private findKey(
+    key: Key,
+    nextKey: (key: Key) => Key,
+    shouldSkip: (prevRect: DOMRect, itemRect: DOMRect) => boolean
+  ) {
+    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;
+  }
+
+  private isSameRow(prevRect: DOMRect, itemRect: DOMRect) {
+    return prevRect.top === itemRect.top || prevRect.left !== itemRect.left;
+  }
+
+  private isSameColumn(prevRect: DOMRect, itemRect: DOMRect) {
+    return prevRect.left === itemRect.left || prevRect.top !== itemRect.top;
+  }
+
+  getKeyBelow(key: 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: Key) {
+    if (this.layout === 'grid' && this.orientation === 'vertical') {
+      return this.findKey(key, (key) => this.getPreviousKey(key), this.isSameRow);
+    } else {
+      return this.getPreviousKey(key);
+    }
+  }
+
+  private getNextColumn(key: Key, right: boolean) {
+    return right ? this.getPreviousKey(key) : this.getNextKey(key);
+  }
+
+  getKeyRightOf(key: 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: 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) {
@@ -93,14 +203,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 && (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 && item.offsetTop > pageY) {
-      key = this.getKeyAbove(key);
-      item = key == null ? null : this.getItem(key);
+      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 +239,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;
@@ -314,7 +320,11 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       if (element) {
         // This prevents a flash of focus on the first/last element in the collection, or the collection itself.
         focusWithoutScrolling(element);
-        scrollIntoView(scrollRef.current, element);
+
+        let modality = getInteractionModality();
+        if (modality === 'keyboard') {
+          scrollIntoViewport(element, {containingElement: ref.current});
+        }
       }
     }
   };
@@ -358,17 +368,25 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
   // If not virtualized, scroll the focused element into view when the focusedKey changes.
   // When virtualized, Virtualizer handles this internally.
+  let lastFocusedKey = useRef(manager.focusedKey);
   useEffect(() => {
     let modality = getInteractionModality();
-    if (!isVirtualized && manager.isFocused && manager.focusedKey != null && scrollRef?.current) {
+    if (manager.isFocused && manager.focusedKey != null && scrollRef?.current) {
       let element = scrollRef.current.querySelector(`[data-key="${manager.focusedKey}"]`) as HTMLElement;
-      if (element) {
-        scrollIntoView(scrollRef.current, element);
-        if (modality === 'keyboard') {
-          scrollIntoViewport(element, {containingElement: ref.current});
+      if (element && modality === 'keyboard') {
+        if (!isVirtualized) {
+          scrollIntoView(scrollRef.current, element);
         }
+        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) {
+      focusSafely(ref.current);
+    }
+
+    lastFocusedKey.current = manager.focusedKey;
   }, [isVirtualized, scrollRef, manager.focusedKey, manager.isFocused, ref]);
 
   let handlers = {

package/src/useSelectableItem.ts

@@ -103,7 +103,6 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     key,
     ref,
     shouldSelectOnPressUp,
-    isVirtualized,
     shouldUseVirtualFocus,
     focus,
     isDisabled,
@@ -266,10 +265,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     };
   }
 
-  if (!isVirtualized) {
-    itemProps['data-key'] = key;
-  }
-
+  itemProps['data-key'] = key;
   itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
   let {pressProps, isPressed} = usePress(itemPressProps);
 

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;
     }
 

package/src/utils.ts

@@ -10,8 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {isAppleDevice} from '@react-aria/utils';
-import {isMac} from '@react-aria/utils';
+import {isAppleDevice, isMac} from '@react-aria/utils';
 
 interface Event {
   altKey: boolean,