@react-aria/selection 3.0.0-nightly.2962 → 3.0.0-nightly.2971

package/src/ListKeyboardDelegate.ts

@@ -10,32 +10,35 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, Direction, DisabledBehavior, Key, KeyboardDelegate, Node, Orientation} from '@react-types/shared';
+import {Collection, Direction, DisabledBehavior, Key, KeyboardDelegate, LayoutDelegate, Node, Orientation, Rect} from '@react-types/shared';
+import {DOMLayoutDelegate} from './DOMLayoutDelegate';
 import {isScrollable} from '@react-aria/utils';
 import {RefObject} from 'react';
 
 interface ListKeyboardDelegateOptions<T> {
   collection: Collection<Node<T>>,
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   collator?: Intl.Collator,
   layout?: 'stack' | 'grid',
   orientation?: Orientation,
   direction?: Direction,
   disabledKeys?: Set<Key>,
-  disabledBehavior?: DisabledBehavior
+  disabledBehavior?: DisabledBehavior,
+  layoutDelegate?: LayoutDelegate
 }
 
 export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   private collection: Collection<Node<T>>;
   private disabledKeys: Set<Key>;
   private disabledBehavior: DisabledBehavior;
-  private ref: RefObject<HTMLElement>;
+  private ref: RefObject<HTMLElement | null>;
   private collator: Intl.Collator | undefined;
   private layout: 'stack' | 'grid';
   private orientation?: Orientation;
   private direction?: Direction;
+  private layoutDelegate: LayoutDelegate;
 
-  constructor(collection: Collection<Node<T>>, disabledKeys: Set<Key>, ref: RefObject<HTMLElement>, collator?: Intl.Collator);
+  constructor(collection: Collection<Node<T>>, disabledKeys: Set<Key>, ref: RefObject<HTMLElement | null>, collator?: Intl.Collator);
   constructor(options: ListKeyboardDelegateOptions<T>);
   constructor(...args: any[]) {
     if (args.length === 1) {
@@ -48,6 +51,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       this.orientation = opts.orientation || 'vertical';
       this.direction = opts.direction;
       this.layout = opts.layout || 'stack';
+      this.layoutDelegate = opts.layoutDelegate || new DOMLayoutDelegate(opts.ref);
     } else {
       this.collection = args[0];
       this.disabledKeys = args[1];
@@ -56,6 +60,7 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       this.layout = 'stack';
       this.orientation = 'vertical';
       this.disabledBehavior = 'all';
+      this.layoutDelegate = new DOMLayoutDelegate(this.ref);
     }
 
     // If this is a vertical stack, remove the left/right methods completely
@@ -101,29 +106,29 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
   private findKey(
     key: Key,
     nextKey: (key: Key) => Key,
-    shouldSkip: (prevRect: DOMRect, itemRect: DOMRect) => boolean
+    shouldSkip: (prevRect: Rect, itemRect: Rect) => boolean
   ) {
-    let item = this.getItem(key);
-    if (!item) {
+    let itemRect = this.layoutDelegate.getItemRect(key);
+    if (!itemRect) {
       return null;
     }
 
     // Find the item above or below in the same column.
-    let prevRect = item.getBoundingClientRect();
+    let prevRect = itemRect;
     do {
       key = nextKey(key);
-      item = this.getItem(key);
-    } while (item && shouldSkip(prevRect, item.getBoundingClientRect()));
+      itemRect = this.layoutDelegate.getItemRect(key);
+    } while (itemRect && shouldSkip(prevRect, itemRect));
 
     return key;
   }
 
-  private isSameRow(prevRect: DOMRect, itemRect: DOMRect) {
-    return prevRect.top === itemRect.top || prevRect.left !== itemRect.left;
+  private isSameRow(prevRect: Rect, itemRect: Rect) {
+    return prevRect.y === itemRect.y || prevRect.x !== itemRect.x;
   }
 
-  private isSameColumn(prevRect: DOMRect, itemRect: DOMRect) {
-    return prevRect.left === itemRect.left || prevRect.top !== itemRect.top;
+  private isSameColumn(prevRect: Rect, itemRect: Rect) {
+    return prevRect.x === itemRect.x || prevRect.y !== itemRect.y;
   }
 
   getKeyBelow(key: Key) {
@@ -202,14 +207,10 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
     return null;
   }
 
-  private getItem(key: Key): HTMLElement {
-    return key !== null ? this.ref.current.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
-  }
-
   getKeyPageAbove(key: Key) {
     let menu = this.ref.current;
-    let item = this.getItem(key);
-    if (!item) {
+    let itemRect = this.layoutDelegate.getItemRect(key);
+    if (!itemRect) {
       return null;
     }
 
@@ -217,25 +218,19 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       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);
+      let pageX = Math.max(0, itemRect.x + itemRect.width - this.layoutDelegate.getVisibleRect().width);
 
-      while (item && (itemRect.x - containerX) > pageX) {
+      while (itemRect && itemRect.x > pageX) {
         key = this.getKeyAbove(key);
-        item = key == null ? null : this.getItem(key);
-        itemRect = item?.getBoundingClientRect();
+        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
       }
     } else {
-      let containerY = containerRect.y - menu.scrollTop;
-      let pageY = Math.max(0, (itemRect.y - containerY) + itemRect.height - containerRect.height);
+      let pageY = Math.max(0, itemRect.y + itemRect.height - this.layoutDelegate.getVisibleRect().height);
 
-      while (item && (itemRect.y - containerY) > pageY) {
+      while (itemRect && itemRect.y > pageY) {
         key = this.getKeyAbove(key);
-        item = key == null ? null : this.getItem(key);
-        itemRect = item?.getBoundingClientRect();
+        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
       }
     }
 
@@ -244,8 +239,8 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
 
   getKeyPageBelow(key: Key) {
     let menu = this.ref.current;
-    let item = this.getItem(key);
-    if (!item) {
+    let itemRect = this.layoutDelegate.getItemRect(key);
+    if (!itemRect) {
       return null;
     }
 
@@ -253,25 +248,19 @@ export class ListKeyboardDelegate<T> implements KeyboardDelegate {
       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);
+      let pageX = Math.min(this.layoutDelegate.getContentSize().width, itemRect.y - itemRect.width + this.layoutDelegate.getVisibleRect().width);
 
-      while (item && (itemRect.x - containerX) < pageX) {
+      while (itemRect && itemRect.x < pageX) {
         key = this.getKeyBelow(key);
-        item = key == null ? null : this.getItem(key);
-        itemRect = item?.getBoundingClientRect();
+        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
       }
     } else {
-      let containerY = containerRect.y - menu.scrollTop;
-      let pageY = Math.min(menu.scrollHeight, (itemRect.y - containerY) - itemRect.height + containerRect.height);
+      let pageY = Math.min(this.layoutDelegate.getContentSize().height, itemRect.y - itemRect.height + this.layoutDelegate.getVisibleRect().height);
 
-      while (item && (itemRect.y - containerY) < pageY) {
+      while (itemRect && itemRect.y < pageY) {
         key = this.getKeyBelow(key);
-        item = key == null ? null : this.getItem(key);
-        itemRect = item?.getBoundingClientRect();
+        itemRect = key == null ? null : this.layoutDelegate.getItemRect(key);
       }
     }
 

package/src/index.ts

@@ -14,6 +14,7 @@ export {useSelectableCollection} from './useSelectableCollection';
 export {useSelectableItem} from './useSelectableItem';
 export {useSelectableList} from './useSelectableList';
 export {ListKeyboardDelegate} from './ListKeyboardDelegate';
+export {DOMLayoutDelegate} from './DOMLayoutDelegate';
 export {useTypeSelect} from './useTypeSelect';
 
 export type {AriaSelectableCollectionOptions, SelectableCollectionAria} from './useSelectableCollection';

package/src/useSelectableCollection.ts

@@ -33,7 +33,7 @@ export interface AriaSelectableCollectionOptions {
   /**
    * The ref attached to the element representing the collection.
    */
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<HTMLElement | null>,
   /**
    * Whether the collection or one of its items should be automatically focused upon render.
    * @default false
@@ -80,7 +80,7 @@ export interface AriaSelectableCollectionOptions {
    * The ref attached to the scrollable body. Used to provide automatic scrolling on item focus for non-virtualized collections.
    * If not provided, defaults to the collection ref.
    */
-  scrollRef?: RefObject<HTMLElement>,
+  scrollRef?: RefObject<HTMLElement | null>,
   /**
    * The behavior of links in the collection.
    * - 'action': link behaves like onAction.

package/src/useSelectableItem.ts

@@ -30,7 +30,7 @@ export interface SelectableItemOptions {
   /**
    * Ref to the item.
    */
-  ref: RefObject<FocusableElement>,
+  ref: RefObject<FocusableElement | null>,
   /**
    * By default, selection occurs on pointer down. This can be strange if selecting an
    * item causes the UI to disappear immediately (e.g. menus).

package/src/useSelectableList.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaSelectableCollectionOptions, useSelectableCollection} from './useSelectableCollection';
-import {Collection, DOMAttributes, Key, KeyboardDelegate, Node} from '@react-types/shared';
+import {Collection, DOMAttributes, Key, KeyboardDelegate, LayoutDelegate, Node} from '@react-types/shared';
 import {ListKeyboardDelegate} from './ListKeyboardDelegate';
 import {useCollator} from '@react-aria/i18n';
 import {useMemo} from 'react';
@@ -25,6 +25,12 @@ export interface AriaSelectableListOptions extends Omit<AriaSelectableCollection
    * A delegate object that implements behavior for keyboard focus movement.
    */
   keyboardDelegate?: KeyboardDelegate,
+  /**
+   * A delegate object that provides layout information for items in the collection.
+   * By default this uses the DOM, but this can be overridden to implement things like
+   * virtualized scrolling.
+   */
+  layoutDelegate?: LayoutDelegate,
   /**
    * The item keys that are disabled. These items cannot be selected, focused, or otherwise interacted with.
    */
@@ -47,7 +53,8 @@ export function useSelectableList(props: AriaSelectableListOptions): SelectableL
     collection,
     disabledKeys,
     ref,
-    keyboardDelegate
+    keyboardDelegate,
+    layoutDelegate
   } = props;
 
   // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
@@ -60,9 +67,10 @@ export function useSelectableList(props: AriaSelectableListOptions): SelectableL
       disabledKeys,
       disabledBehavior,
       ref,
-      collator
+      collator,
+      layoutDelegate
     })
-  ), [keyboardDelegate, collection, disabledKeys, ref, collator, disabledBehavior]);
+  ), [keyboardDelegate, layoutDelegate, collection, disabledKeys, ref, collator, disabledBehavior]);
 
   let {collectionProps} = useSelectableCollection({
     ...props,