@react-aria/selection 3.23.1 → 3.24.1

package/src/useSelectableCollection.ts

@@ -54,6 +54,11 @@ export interface AriaSelectableCollectionOptions {
    * @default false
    */
   disallowSelectAll?: boolean,
+  /**
+   * Whether pressing the Escape should clear selection in the collection or not.
+   * @default 'clearSelection'
+   */
+  escapeKeyBehavior?: 'clearSelection' | 'none',
   /**
    * Whether selection should occur automatically on focus.
    * @default false
@@ -108,6 +113,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     shouldFocusWrap = false,
     disallowEmptySelection = false,
     disallowSelectAll = false,
+    escapeKeyBehavior = 'clearSelection',
     selectOnFocus = manager.selectionBehavior === 'replace',
     disallowTypeAhead = false,
     shouldUseVirtualFocus,
@@ -279,7 +285,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
         }
         break;
       case 'Escape':
-        if (!disallowEmptySelection && manager.selectedKeys.size !== 0) {
+        if (escapeKeyBehavior === 'clearSelection' && !disallowEmptySelection && manager.selectedKeys.size !== 0) {
           e.stopPropagation();
           e.preventDefault();
           manager.clearSelection();
@@ -499,6 +505,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
   // Scroll the focused element into view when the focusedKey changes.
   let lastFocusedKey = useRef(manager.focusedKey);
+  let raf = useRef<number | null>(null);
   useEffect(() => {
     if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || didAutoFocusRef.current) && scrollRef.current && ref.current) {
       let modality = getInteractionModality();
@@ -510,8 +517,16 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
 
       if (modality === 'keyboard' || didAutoFocusRef.current) {
-        scrollIntoView(scrollRef.current, element);
 
+        if (raf.current) {
+          cancelAnimationFrame(raf.current);
+        }
+
+        raf.current = requestAnimationFrame(() => {
+          if (scrollRef.current) {
+            scrollIntoView(scrollRef.current, element);
+          }
+        });
         // Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
         if (modality !== 'virtual') {
           scrollIntoViewport(element, {containingElement: ref.current});
@@ -528,6 +543,14 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     didAutoFocusRef.current = false;
   });
 
+  useEffect(() => {
+    return () => {
+      if (raf.current) {
+        cancelAnimationFrame(raf.current);
+      }
+    };
+  }, []);
+
   // Intercept FocusScope restoration since virtualized collections can reuse DOM nodes.
   useEvent(ref, 'react-aria-focus-scope-restore', e => {
     e.preventDefault();

package/src/useSelectableItem.ts

@@ -11,7 +11,7 @@
  */
 
 import {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
-import {focusSafely, PressProps, useLongPress, usePress} from '@react-aria/interactions';
+import {focusSafely, PressHookProps, useLongPress, usePress} from '@react-aria/interactions';
 import {getCollectionId, isNonContiguousSelectionModifier} from './utils';
 import {isCtrlKeyPressed, mergeProps, openLink, useId, useRouter} from '@react-aria/utils';
 import {moveVirtualFocus} from '@react-aria/focus';
@@ -239,7 +239,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // we want to be able to have the pointer down on the trigger that opens the menu and
   // the pointer up on the menu item rather than requiring a separate press.
   // For keyboard events, selection still occurs on key down.
-  let itemPressProps: PressProps = {};
+  let itemPressProps: PressHookProps = {ref};
   if (shouldSelectOnPressUp) {
     itemPressProps.onPressStart = (e) => {
       modality.current = e.pointerType;
@@ -382,7 +382,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   return {
     itemProps: mergeProps(
       itemProps,
-      allowsSelection || hasPrimaryAction || shouldUseVirtualFocus ? pressProps : {},
+      allowsSelection || hasPrimaryAction || (shouldUseVirtualFocus && !isDisabled) ? pressProps : {},
       longPressEnabled ? longPressProps : {},
       {onDoubleClick, onDragStartCapture, onClick, id},
       // Prevent DOM focus from moving on mouse down when using virtual focus

package/src/utils.ts

@@ -20,13 +20,13 @@ interface Event {
   metaKey: boolean
 }
 
-export function isNonContiguousSelectionModifier(e: Event) {
+export function isNonContiguousSelectionModifier(e: Event): boolean {
   // 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.
   return isAppleDevice() ? e.altKey : e.ctrlKey;
 }
 
-export function getItemElement(collectionRef: RefObject<HTMLElement | null>, key: Key) {
+export function getItemElement(collectionRef: RefObject<HTMLElement | null>, key: Key): Element | null | undefined {
   let selector = `[data-key="${CSS.escape(String(key))}"]`;
   let collection = collectionRef.current?.dataset.collection;
   if (collection) {
@@ -35,13 +35,13 @@ export function getItemElement(collectionRef: RefObject<HTMLElement | null>, key
   return collectionRef.current?.querySelector(selector);
 }
 
-const collectionMap = new WeakMap();
-export function useCollectionId(collection: Collection<any>) {
+const collectionMap = new WeakMap<Collection<any>, string>();
+export function useCollectionId(collection: Collection<any>): string {
   let id = useId();
   collectionMap.set(collection, id);
   return id;
 }
 
-export function getCollectionId(collection: Collection<any>) {
+export function getCollectionId(collection: Collection<any>): string {
   return collectionMap.get(collection)!;
 }