@react-aria/selection 3.5.0 → 3.7.1

package/dist/module.js

@@ -1,9 +1,24 @@
+import { useLongPress, usePress } from "@react-aria/interactions";
 import { useLocale, useCollator } from "@react-aria/i18n";
-import { focusWithoutScrolling, isMac, mergeProps } from "@react-aria/utils";
+import { focusWithoutScrolling, mergeProps, scrollIntoView, useEvent, isAppleDevice, isMac } from "@react-aria/utils";
 import { focusSafely, getFocusableTreeWalker } from "@react-aria/focus";
 import { useEffect, useRef, useMemo } from "react";
 import _babelRuntimeHelpersEsmExtends from "@babel/runtime/helpers/esm/extends";
 
+function $d9657c365c2f735bcaf048eee8599a4a$export$isNonContiguousSelectionModifier(e) {
+  // 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;
+}
+
+function $d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e) {
+  if (isMac()) {
+    return e.metaKey;
+  }
+
+  return e.ctrlKey;
+}
+
 /**
  * Handles typeahead interactions with collections.
  */
@@ -81,14 +96,6 @@ function $c78d7fa5f7d5832f9b4f97b33a679865$var$getStringForKey(key) {
   return '';
 }
 
-function $a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) {
-  if (isMac()) {
-    return e.metaKey;
-  }
-
-  return e.ctrlKey;
-}
-
 /**
  * Handles interactions with selectable collections.
  */
@@ -101,20 +108,27 @@ export function useSelectableCollection(options) {
     shouldFocusWrap = false,
     disallowEmptySelection = false,
     disallowSelectAll = false,
-    selectOnFocus = false,
+    selectOnFocus = manager.selectionBehavior === 'replace',
     disallowTypeAhead = false,
     shouldUseVirtualFocus,
-    allowsTabNavigation = false
+    allowsTabNavigation = false,
+    isVirtualized,
+    // If no scrollRef is provided, assume the collection ref is the scrollable region
+    scrollRef = ref
   } = options;
   let {
     direction
   } = useLocale();
 
   let onKeyDown = e => {
-    // Let child element (e.g. menu button) handle the event if the Alt key is pressed.
-    // Keyboard events bubble through portals. Don't handle keyboard events
+    // Prevent option + tab from doing anything since it doesn't move focus to the cells, only buttons/checkboxes
+    if (e.altKey && e.key === 'Tab') {
+      e.preventDefault();
+    } // Keyboard events bubble through portals. Don't handle keyboard events
     // for elements outside the collection (e.g. menus).
-    if (e.altKey || !ref.current.contains(e.target)) {
+
+
+    if (!ref.current.contains(e.target)) {
       return;
     }
 
@@ -124,7 +138,7 @@ export function useSelectableCollection(options) {
 
         if (e.shiftKey && manager.selectionMode === 'multiple') {
           manager.extendSelection(key);
-        } else if (selectOnFocus) {
+        } else if (selectOnFocus && !$d9657c365c2f735bcaf048eee8599a4a$export$isNonContiguousSelectionModifier(e)) {
           manager.replaceSelection(key);
         }
       }
@@ -188,10 +202,10 @@ export function useSelectableCollection(options) {
       case 'Home':
         if (delegate.getFirstKey) {
           e.preventDefault();
-          let firstKey = delegate.getFirstKey(manager.focusedKey, $a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e));
+          let firstKey = delegate.getFirstKey(manager.focusedKey, $d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e));
           manager.setFocusedKey(firstKey);
 
-          if ($a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+          if ($d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
             manager.extendSelection(firstKey);
           } else if (selectOnFocus) {
             manager.replaceSelection(firstKey);
@@ -203,10 +217,10 @@ export function useSelectableCollection(options) {
       case 'End':
         if (delegate.getLastKey) {
           e.preventDefault();
-          let lastKey = delegate.getLastKey(manager.focusedKey, $a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e));
+          let lastKey = delegate.getLastKey(manager.focusedKey, $d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e));
           manager.setFocusedKey(lastKey);
 
-          if ($a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
+          if ($d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e) && e.shiftKey && manager.selectionMode === 'multiple') {
             manager.extendSelection(lastKey);
           } else if (selectOnFocus) {
             manager.replaceSelection(lastKey);
@@ -234,7 +248,7 @@ export function useSelectableCollection(options) {
         break;
 
       case 'a':
-        if ($a9b9aa71af07c56ab1d89ca45381f4b$var$isCtrlKeyPressed(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
+        if ($d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e) && manager.selectionMode === 'multiple' && disallowSelectAll !== true) {
           e.preventDefault();
           manager.selectAll();
         }
@@ -285,7 +299,19 @@ export function useSelectableCollection(options) {
           }
         }
     }
-  };
+  }; // Store the scroll position so we can restore it later.
+
+
+  let scrollPos = useRef({
+    top: 0,
+    left: 0
+  });
+  useEvent(scrollRef, 'scroll', isVirtualized ? null : () => {
+    scrollPos.current = {
+      top: scrollRef.current.scrollTop,
+      left: scrollRef.current.scrollLeft
+    };
+  });
 
   let onFocus = e => {
     if (manager.isFocused) {
@@ -305,19 +331,41 @@ export function useSelectableCollection(options) {
     manager.setFocused(true);
 
     if (manager.focusedKey == null) {
-      // If the user hasn't yet interacted with the collection, there will be no focusedKey set.
+      let navigateToFirstKey = key => {
+        if (key != null) {
+          manager.setFocusedKey(key);
+
+          if (selectOnFocus) {
+            manager.replaceSelection(key);
+          }
+        }
+      }; // If the user hasn't yet interacted with the collection, there will be no focusedKey set.
       // Attempt to detect whether the user is tabbing forward or backward into the collection
       // and either focus the first or last item accordingly.
+
+
       let relatedTarget = e.relatedTarget;
 
       if (relatedTarget && e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING) {
         var _manager$lastSelected;
 
-        manager.setFocusedKey((_manager$lastSelected = manager.lastSelectedKey) != null ? _manager$lastSelected : delegate.getLastKey());
+        navigateToFirstKey((_manager$lastSelected = manager.lastSelectedKey) != null ? _manager$lastSelected : delegate.getLastKey());
       } else {
         var _manager$firstSelecte;
 
-        manager.setFocusedKey((_manager$firstSelecte = manager.firstSelectedKey) != null ? _manager$firstSelecte : delegate.getFirstKey());
+        navigateToFirstKey((_manager$firstSelecte = manager.firstSelectedKey) != null ? _manager$firstSelecte : delegate.getFirstKey());
+      }
+    } else if (!isVirtualized) {
+      // Restore the scroll position to what it was before.
+      scrollRef.current.scrollTop = scrollPos.current.top;
+      scrollRef.current.scrollLeft = scrollPos.current.left; // 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
+        focusWithoutScrolling(element);
+        scrollIntoView(scrollRef.current, element);
       }
     }
   };
@@ -329,8 +377,9 @@ export function useSelectableCollection(options) {
     }
   };
 
+  const autoFocusRef = useRef(autoFocus);
   useEffect(() => {
-    if (autoFocus) {
+    if (autoFocusRef.current) {
       let focusedKey = null; // Check focus strategy to determine which item to focus
 
       if (autoFocus === 'first') {
@@ -354,9 +403,21 @@ export function useSelectableCollection(options) {
       if (focusedKey == null && !shouldUseVirtualFocus) {
         focusSafely(ref.current);
       }
-    } // eslint-disable-next-line react-hooks/exhaustive-deps
+    }
 
-  }, []);
+    autoFocusRef.current = false; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []); // If not virtualized, scroll the focused element into view when the focusedKey changes.
+  // When virtualized, Virtualizer handles this internally.
+
+  useEffect(() => {
+    if (!isVirtualized && manager.focusedKey && scrollRef != null && scrollRef.current) {
+      let element = scrollRef.current.querySelector("[data-key=\"" + manager.focusedKey + "\"]");
+
+      if (element) {
+        scrollIntoView(scrollRef.current, element);
+      }
+    }
+  }, [isVirtualized, scrollRef, manager.focusedKey]);
   let handlers = {
     onKeyDown,
     onFocus,
@@ -410,10 +471,35 @@ export function useSelectableItem(options) {
     shouldSelectOnPressUp,
     isVirtualized,
     shouldUseVirtualFocus,
-    focus
+    focus,
+    isDisabled,
+    onAction
   } = options;
 
-  let onSelect = e => manager.select(key, e); // Focus the associated DOM node when this item becomes the focusedKey
+  let onSelect = e => {
+    if (e.pointerType === 'keyboard' && $d9657c365c2f735bcaf048eee8599a4a$export$isNonContiguousSelectionModifier(e)) {
+      manager.toggleSelection(key);
+    } else {
+      if (manager.selectionMode === 'none') {
+        return;
+      }
+
+      if (manager.selectionMode === 'single') {
+        if (manager.isSelected(key) && !manager.disallowEmptySelection) {
+          manager.toggleSelection(key);
+        } else {
+          manager.replaceSelection(key);
+        }
+      } else if (e && e.shiftKey) {
+        manager.extendSelection(key);
+      } else if (manager.selectionBehavior === 'toggle' || e && ($d9657c365c2f735bcaf048eee8599a4a$export$isCtrlKeyPressed(e) || e.pointerType === 'touch' || e.pointerType === 'virtual')) {
+        // if touch or virtual (VO) then we just want to toggle, otherwise it's impossible to multi select because they don't have modifier keys
+        manager.toggleSelection(key);
+      } else {
+        manager.replaceSelection(key);
+      }
+    }
+  }; // Focus the associated DOM node when this item becomes the focusedKey
 
 
   let isFocused = key === manager.focusedKey;
@@ -442,7 +528,12 @@ export function useSelectableItem(options) {
       }
 
     };
-  } // By default, selection occurs on pointer down. This can be strange if selecting an
+  }
+
+  let modality = useRef(null);
+  let hasPrimaryAction = onAction && manager.selectionMode === 'none';
+  let hasSecondaryAction = onAction && manager.selectionMode !== 'none' && manager.selectionBehavior === 'replace';
+  let allowsSelection = !isDisabled && manager.canSelectItem(key); // By default, selection occurs on pointer down. This can be strange if selecting an
   // item causes the UI to disappear immediately (e.g. menus).
   // If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.
   // onPress requires a pointer down event on the same element as pointer up. For menus,
@@ -450,30 +541,43 @@ export function useSelectableItem(options) {
   // the pointer up on the menu item rather than requiring a separate press.
   // For keyboard events, selection still occurs on key down.
 
+  let itemPressProps = {};
 
   if (shouldSelectOnPressUp) {
-    itemProps.onPressStart = e => {
+    itemPressProps.onPressStart = e => {
+      modality.current = e.pointerType;
+
       if (e.pointerType === 'keyboard') {
         onSelect(e);
       }
     };
 
-    itemProps.onPressUp = e => {
+    itemPressProps.onPressUp = e => {
       if (e.pointerType !== 'keyboard') {
         onSelect(e);
       }
     };
+
+    itemPressProps.onPress = hasPrimaryAction ? () => onAction() : null;
   } else {
     // On touch, it feels strange to select on touch down, so we special case this.
-    itemProps.onPressStart = e => {
-      if (e.pointerType !== 'touch') {
+    itemPressProps.onPressStart = e => {
+      modality.current = e.pointerType;
+
+      if (e.pointerType !== 'touch' && e.pointerType !== 'virtual') {
         onSelect(e);
       }
     };
 
-    itemProps.onPress = e => {
-      if (e.pointerType === 'touch') {
-        onSelect(e);
+    itemPressProps.onPress = e => {
+      if (e.pointerType === 'touch' || e.pointerType === 'virtual' || hasPrimaryAction) {
+        // Single tap on touch with selectionBehavior = 'replace' performs an action, i.e. navigation.
+        // Also perform action on press up when selectionMode = 'none'.
+        if (hasPrimaryAction || hasSecondaryAction) {
+          onAction();
+        } else {
+          onSelect(e);
+        }
       }
     };
   }
@@ -482,8 +586,48 @@ export function useSelectableItem(options) {
     itemProps['data-key'] = key;
   }
 
+  itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
+  let {
+    pressProps,
+    isPressed
+  } = usePress(itemPressProps); // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
+
+  let onDoubleClick = hasSecondaryAction ? e => {
+    if (modality.current === 'mouse') {
+      e.stopPropagation();
+      e.preventDefault();
+      onAction();
+    }
+  } : undefined; // Long pressing an item with touch when selectionBehavior = 'replace' switches the selection behavior
+  // to 'toggle'. This changes the single tap behavior from performing an action (i.e. navigating) to
+  // selecting, and may toggle the appearance of a UI affordance like checkboxes on each item.
+  // TODO: what about when drag and drop is also enabled??
+
+  let {
+    longPressProps
+  } = useLongPress({
+    isDisabled: !hasSecondaryAction,
+
+    onLongPress(e) {
+      if (e.pointerType === 'touch') {
+        onSelect(e);
+        manager.setSelectionBehavior('toggle');
+      }
+    }
+
+  }); // Pressing the Enter key with selectionBehavior = 'replace' performs an action (i.e. navigation).
+
+  let onKeyUp = hasSecondaryAction ? e => {
+    if (e.key === 'Enter') {
+      onAction();
+    }
+  } : undefined;
   return {
-    itemProps
+    itemProps: mergeProps(itemProps, allowsSelection || hasPrimaryAction ? pressProps : {}, hasSecondaryAction ? longPressProps : {}, {
+      onKeyUp,
+      onDoubleClick
+    }),
+    isPressed
   };
 }
 
@@ -655,18 +799,7 @@ export function useSelectableList(props) {
     usage: 'search',
     sensitivity: 'base'
   });
-  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(collection, disabledKeys, ref, collator), [keyboardDelegate, collection, disabledKeys, ref, collator]); // If not virtualized, scroll the focused element into view when the focusedKey changes.
-  // When virtualized, Virtualizer handles this internally.
-
-  useEffect(() => {
-    if (!isVirtualized && selectionManager.focusedKey && ref != null && ref.current) {
-      let element = ref.current.querySelector("[data-key=\"" + selectionManager.focusedKey + "\"]");
-
-      if (element) {
-        $a09ba753e08b703267f2392f7fc8e96$var$scrollIntoView(ref.current, element);
-      }
-    }
-  }, [isVirtualized, ref, selectionManager.focusedKey]);
+  let delegate = useMemo(() => keyboardDelegate || new ListKeyboardDelegate(collection, disabledKeys, ref, collator), [keyboardDelegate, collection, disabledKeys, ref, collator]);
   let {
     collectionProps
   } = useSelectableCollection({
@@ -679,70 +812,12 @@ export function useSelectableList(props) {
     selectOnFocus,
     disallowTypeAhead,
     shouldUseVirtualFocus,
-    allowsTabNavigation
+    allowsTabNavigation,
+    isVirtualized,
+    scrollRef: ref
   });
   return {
     listProps: collectionProps
   };
 }
-/**
- * Scrolls `scrollView` so that `element` is visible.
- * Similar to `element.scrollIntoView({block: 'nearest'})` (not supported in Edge),
- * but doesn't affect parents above `scrollView`.
- */
-
-function $a09ba753e08b703267f2392f7fc8e96$var$scrollIntoView(scrollView, element) {
-  let offsetX = $a09ba753e08b703267f2392f7fc8e96$var$relativeOffset(scrollView, element, 'left');
-  let offsetY = $a09ba753e08b703267f2392f7fc8e96$var$relativeOffset(scrollView, element, 'top');
-  let width = element.offsetWidth;
-  let height = element.offsetHeight;
-  let x = scrollView.scrollLeft;
-  let y = scrollView.scrollTop;
-  let maxX = x + scrollView.offsetWidth;
-  let maxY = y + scrollView.offsetHeight;
-
-  if (offsetX <= x) {
-    x = offsetX;
-  } else if (offsetX + width > maxX) {
-    x += offsetX + width - maxX;
-  }
-
-  if (offsetY <= y) {
-    y = offsetY;
-  } else if (offsetY + height > maxY) {
-    y += offsetY + height - maxY;
-  }
-
-  scrollView.scrollLeft = x;
-  scrollView.scrollTop = y;
-}
-/**
- * Computes the offset left or top from child to ancestor by accumulating
- * offsetLeft or offsetTop through intervening offsetParents.
- */
-
-
-function $a09ba753e08b703267f2392f7fc8e96$var$relativeOffset(ancestor, child, axis) {
-  const prop = axis === 'left' ? 'offsetLeft' : 'offsetTop';
-  let sum = 0;
-
-  while (child.offsetParent) {
-    sum += child[prop];
-
-    if (child.offsetParent === ancestor) {
-      // Stop once we have found the ancestor we are interested in.
-      break;
-    } else if (child.offsetParent.contains(ancestor)) {
-      // If the ancestor is not `position:relative`, then we stop at 
-      // _its_ offset parent, and we subtract off _its_ offset, so that
-      // we end up with the proper offset from child to ancestor.
-      sum -= ancestor[prop];
-      break;
-    }
-
-    child = child.offsetParent;
-  }
-
-  return sum;
-}
 //# sourceMappingURL=module.js.map