@react-aria/selection 3.8.2 → 3.10.0

package/dist/types.d.ts.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/selection/src/packages/@react-aria/selection/src/utils.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useTypeSelect.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useSelectableCollection.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useSelectableItem.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/ListKeyboardDelegate.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useSelectableList.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/index.ts","packages/@react-aria/selection/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport * from './useSelectableCollection';\nexport * from './useSelectableItem';\nexport * from './useSelectableList';\nexport * from './ListKeyboardDelegate';\nexport * from './useTypeSelect';\n"],"names":[],"version":3,"file":"types.d.ts.map"}
+{"mappings":"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","sources":["packages/@react-aria/selection/src/packages/@react-aria/selection/src/utils.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useTypeSelect.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useSelectableCollection.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useSelectableItem.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/ListKeyboardDelegate.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/useSelectableList.ts","packages/@react-aria/selection/src/packages/@react-aria/selection/src/index.ts","packages/@react-aria/selection/src/index.ts"],"sourcesContent":[null,null,null,null,null,null,null,"/*\n * Copyright 2020 Adobe. All rights reserved.\n * This file is licensed to you under the Apache License, Version 2.0 (the \"License\");\n * you may not use this file except in compliance with the License. You may obtain a copy\n * of the License at http://www.apache.org/licenses/LICENSE-2.0\n *\n * Unless required by applicable law or agreed to in writing, software distributed under\n * the License is distributed on an \"AS IS\" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS\n * OF ANY KIND, either express or implied. See the License for the specific language\n * governing permissions and limitations under the License.\n */\n\nexport {useSelectableCollection} from './useSelectableCollection';\nexport {useSelectableItem} from './useSelectableItem';\nexport {useSelectableList} from './useSelectableList';\nexport {ListKeyboardDelegate} from './ListKeyboardDelegate';\nexport {useTypeSelect} from './useTypeSelect';\n\nexport type {AriaSelectableCollectionOptions, SelectableCollectionAria} from './useSelectableCollection';\nexport type {AriaSelectableListOptions, SelectableListAria} from './useSelectableList';\nexport type {SelectableItemOptions, SelectableItemStates, SelectableItemAria} from './useSelectableItem';\nexport type {AriaTypeSelectOptions, TypeSelectAria} from './useTypeSelect';\n"],"names":[],"version":3,"file":"types.d.ts.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/selection",
-  "version": "3.8.2",
+  "version": "3.10.0",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -18,19 +18,19 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.5.5",
-    "@react-aria/i18n": "^3.3.9",
-    "@react-aria/interactions": "^3.8.4",
-    "@react-aria/utils": "^3.12.0",
-    "@react-stately/collections": "^3.3.8",
-    "@react-stately/selection": "^3.9.4",
-    "@react-types/shared": "^3.12.0"
+    "@react-aria/focus": "^3.7.0",
+    "@react-aria/i18n": "^3.5.0",
+    "@react-aria/interactions": "^3.10.0",
+    "@react-aria/utils": "^3.13.2",
+    "@react-stately/collections": "^3.4.2",
+    "@react-stately/selection": "^3.10.2",
+    "@react-types/shared": "^3.14.0"
   },
   "peerDependencies": {
-    "react": "^16.8.0 || ^17.0.0-rc.1"
+    "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6a503b715e0dbbf92038cd7f08b1bcdde4c78e82"
+  "gitHead": "cd7c0ec917122c7612f653c22f8ed558f8b66ecd"
 }

package/src/index.ts

@@ -10,8 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-export * from './useSelectableCollection';
-export * from './useSelectableItem';
-export * from './useSelectableList';
-export * from './ListKeyboardDelegate';
-export * from './useTypeSelect';
+export {useSelectableCollection} from './useSelectableCollection';
+export {useSelectableItem} from './useSelectableItem';
+export {useSelectableList} from './useSelectableList';
+export {ListKeyboardDelegate} from './ListKeyboardDelegate';
+export {useTypeSelect} from './useTypeSelect';
+
+export type {AriaSelectableCollectionOptions, SelectableCollectionAria} from './useSelectableCollection';
+export type {AriaSelectableListOptions, SelectableListAria} from './useSelectableList';
+export type {SelectableItemOptions, SelectableItemStates, SelectableItemAria} from './useSelectableItem';
+export type {AriaTypeSelectOptions, TypeSelectAria} from './useTypeSelect';

package/src/useSelectableCollection.ts

@@ -10,16 +10,16 @@
  * governing permissions and limitations under the License.
  */
 
-import {FocusEvent, HTMLAttributes, Key, KeyboardEvent, RefObject, useEffect, useRef} from 'react';
+import {DOMAttributes, FocusableElement, FocusStrategy, KeyboardDelegate} from '@react-types/shared';
+import {FocusEvent, Key, KeyboardEvent, RefObject, useEffect, useRef} from 'react';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {FocusStrategy, KeyboardDelegate} from '@react-types/shared';
 import {focusWithoutScrolling, mergeProps, scrollIntoView, useEvent} from '@react-aria/utils';
 import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useLocale} from '@react-aria/i18n';
 import {useTypeSelect} from './useTypeSelect';
 
-interface SelectableCollectionOptions {
+export interface AriaSelectableCollectionOptions {
   /**
    * An interface for reading and updating multiple selection state.
    */
@@ -81,15 +81,15 @@ interface SelectableCollectionOptions {
   scrollRef?: RefObject<HTMLElement>
 }
 
-interface SelectableCollectionAria {
+export interface SelectableCollectionAria {
   /** Props for the collection element. */
-  collectionProps: HTMLAttributes<HTMLElement>
+  collectionProps: DOMAttributes
 }
 
 /**
  * Handles interactions with selectable collections.
  */
-export function useSelectableCollection(options: SelectableCollectionOptions): SelectableCollectionAria {
+export function useSelectableCollection(options: AriaSelectableCollectionOptions): SelectableCollectionAria {
   let {
     selectionManager: manager,
     keyboardDelegate: delegate,
@@ -117,7 +117,7 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
 
     // Keyboard events bubble through portals. Don't handle keyboard events
     // for elements outside the collection (e.g. menus).
-    if (!ref.current.contains(e.target as HTMLElement)) {
+    if (!ref.current.contains(e.target as Element)) {
       return;
     }
 
@@ -238,10 +238,10 @@ export function useSelectableCollection(options: SelectableCollectionOptions): S
             ref.current.focus();
           } else {
             let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-            let next: HTMLElement;
-            let last: HTMLElement;
+            let next: FocusableElement;
+            let last: FocusableElement;
             do {
-              last = walker.lastChild() as HTMLElement;
+              last = walker.lastChild() as FocusableElement;
               if (last) {
                 next = last;
               }

package/src/useSelectableItem.ts

@@ -10,15 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
+import {DOMAttributes, FocusableElement, LongPressEvent, PressEvent} from '@react-types/shared';
 import {focusSafely} from '@react-aria/focus';
-import {HTMLAttributes, Key, RefObject, useEffect, useRef} from 'react';
 import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
-import {LongPressEvent, PressEvent} from '@react-types/shared';
+import {Key, RefObject, useEffect, useRef} from 'react';
 import {mergeProps} from '@react-aria/utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {PressProps, useLongPress, usePress} from '@react-aria/interactions';
 
-interface SelectableItemOptions {
+export interface SelectableItemOptions {
   /**
    * An interface for reading and updating multiple selection state.
    */
@@ -30,7 +30,7 @@ interface SelectableItemOptions {
   /**
    * Ref to the item.
    */
-  ref: RefObject<HTMLElement>,
+  ref: RefObject<FocusableElement>,
   /**
    * By default, selection occurs on pointer down. This can be strange if selecting an
    * item causes the UI to disappear immediately (e.g. menus).
@@ -56,19 +56,40 @@ interface SelectableItemOptions {
   /** Whether the item is disabled. */
   isDisabled?: boolean,
   /**
-   * Handler that is called when a user performs an action on the cell. The exact user event depends on
+   * Handler that is called when a user performs an action on the item. The exact user event depends on
    * the collection's `selectionBehavior` prop and the interaction modality.
    */
   onAction?: () => void
 }
 
-interface SelectableItemAria {
+export interface SelectableItemStates {
+  /** Whether the item is currently in a pressed state. */
+  isPressed: boolean,
+  /** Whether the item is currently selected. */
+  isSelected: boolean,
+  /**
+   * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may
+   * not be focused. Dependent on `disabledKeys` and `disabledBehavior`.
+   */
+  isDisabled: boolean,
+  /**
+   * Whether the item may be selected, dependent on `selectionMode`, `disabledKeys`, and `disabledBehavior`.
+   */
+  allowsSelection: boolean,
+  /**
+   * Whether the item has an action, dependent on `onAction`, `disabledKeys`,
+   * and `disabledBehavior. It may also change depending on the current selection state
+   * of the list (e.g. when selection is primary). This can be used to enable or disable hover
+   * styles or other visual indications of interactivity.
+   */
+  hasAction: boolean
+}
+
+export interface SelectableItemAria extends SelectableItemStates {
   /**
    * Props to be spread on the item root node.
    */
-  itemProps: HTMLAttributes<HTMLElement>,
-  /** Whether the item is currently in a pressed state. */
-  isPressed: boolean
+  itemProps: DOMAttributes
 }
 
 /**
@@ -114,8 +135,8 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   };
 
   // Focus the associated DOM node when this item becomes the focusedKey
-  let isFocused = key === manager.focusedKey;
   useEffect(() => {
+    let isFocused = key === manager.focusedKey;
     if (isFocused && manager.isFocused && !shouldUseVirtualFocus && document.activeElement !== ref.current) {
       if (focus) {
         focus();
@@ -123,7 +144,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
         focusSafely(ref.current);
       }
     }
-  }, [ref, isFocused, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);
+  }, [ref, key, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);
 
   // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver
@@ -131,7 +152,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   let itemProps: SelectableItemAria['itemProps'] = {};
   if (!shouldUseVirtualFocus) {
     itemProps = {
-      tabIndex: isFocused ? 0 : -1,
+      tabIndex: key === manager.focusedKey ? 0 : -1,
       onFocus(e) {
         if (e.target === ref.current) {
           manager.setFocusedKey(key);
@@ -140,10 +161,26 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     };
   }
 
-  let modality = useRef(null);
-  let hasPrimaryAction = onAction && manager.selectionMode === 'none';
-  let hasSecondaryAction = onAction && manager.selectionMode !== 'none' && manager.selectionBehavior === 'replace';
+
+  // With checkbox selection, onAction (i.e. navigation) becomes primary, and occurs on a single click of the row.
+  // Clicking the checkbox enters selection mode, after which clicking anywhere on any row toggles selection for that row.
+  // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.
+  // With touch, onAction occurs on single tap, and long press enters selection mode.
+  isDisabled = isDisabled || manager.isDisabled(key);
   let allowsSelection = !isDisabled && manager.canSelectItem(key);
+  let allowsActions = onAction && !isDisabled;
+  let hasPrimaryAction = allowsActions && (
+    manager.selectionBehavior === 'replace'
+      ? !allowsSelection
+      : manager.isEmpty
+  );
+  let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';
+  let hasAction = hasPrimaryAction || hasSecondaryAction;
+  let modality = useRef(null);
+
+  let longPressEnabled = hasAction && allowsSelection;
+  let longPressEnabledOnPressStart = useRef(false);
+  let hadPrimaryActionOnPressStart = useRef(false);
 
   // By default, selection occurs on pointer down. This can be strange if selecting an
   // item causes the UI to disappear immediately (e.g. menus).
@@ -156,7 +193,8 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   if (shouldSelectOnPressUp) {
     itemPressProps.onPressStart = (e) => {
       modality.current = e.pointerType;
-      if (e.pointerType === 'keyboard') {
+      longPressEnabledOnPressStart.current = longPressEnabled;
+      if (e.pointerType === 'keyboard' && (!hasAction || isSelectionKey())) {
         onSelect(e);
       }
     };
@@ -165,12 +203,14 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
     if (!allowsDifferentPressOrigin) {
       itemPressProps.onPress = (e) => {
-        if (e.pointerType !== 'keyboard') {
-          onSelect(e);
-        }
+        if (hasPrimaryAction || (hasSecondaryAction && e.pointerType !== 'mouse')) {
+          if (e.pointerType === 'keyboard' && !isActionKey()) {
+            return;
+          }
 
-        if (hasPrimaryAction) {
           onAction();
+        } else if (e.pointerType !== 'keyboard') {
+          onSelect(e);
         }
       };
     } else {
@@ -183,19 +223,34 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       itemPressProps.onPress = hasPrimaryAction ? () => onAction() : null;
     }
   } else {
-    // On touch, it feels strange to select on touch down, so we special case this.
     itemPressProps.onPressStart = (e) => {
       modality.current = e.pointerType;
-      if (e.pointerType !== 'touch' && e.pointerType !== 'virtual') {
+      longPressEnabledOnPressStart.current = longPressEnabled;
+      hadPrimaryActionOnPressStart.current = hasPrimaryAction;
+
+      // Select on mouse down unless there is a primary action which will occur on mouse up.
+      // For keyboard, select on key down. If there is an action, the Space key selects on key down,
+      // and the Enter key performs onAction on key up.
+      if (
+        (e.pointerType === 'mouse' && !hasPrimaryAction) ||
+        (e.pointerType === 'keyboard' && (!onAction || isSelectionKey()))
+      ) {
         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) {
+      // Selection occurs on touch up. Primary actions always occur on pointer up.
+      // Both primary and secondary actions occur on Enter key up. The only exception
+      // is secondary actions, which occur on double click with a mouse.
+      if (
+        e.pointerType === 'touch' ||
+        e.pointerType === 'pen' ||
+        e.pointerType === 'virtual' ||
+        (e.pointerType === 'keyboard' && hasAction && isActionKey()) ||
+        (e.pointerType === 'mouse' && hadPrimaryActionOnPressStart.current)
+      ) {
+        if (hasAction) {
           onAction();
         } else {
           onSelect(e);
@@ -223,9 +278,8 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   // 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,
+    isDisabled: !longPressEnabled,
     onLongPress(e) {
       if (e.pointerType === 'touch') {
         onSelect(e);
@@ -234,20 +288,35 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     }
   });
 
-  // Pressing the Enter key with selectionBehavior = 'replace' performs an action (i.e. navigation).
-  let onKeyUp = hasSecondaryAction ? (e: KeyboardEvent) => {
-    if (e.key === 'Enter') {
-      onAction();
+  // Prevent native drag and drop on long press if we also select on long press.
+  // Once the user is in selection mode, they can long press again to drag.
+  let onDragStart = e => {
+    if (modality.current === 'touch' && longPressEnabledOnPressStart.current) {
+      e.preventDefault();
     }
-  } : undefined;
+  };
 
   return {
     itemProps: mergeProps(
       itemProps,
       allowsSelection || hasPrimaryAction ? pressProps : {},
-      hasSecondaryAction ? longPressProps : {},
-      {onKeyUp, onDoubleClick}
+      longPressEnabled ? longPressProps : {},
+      {onDoubleClick, onDragStart}
     ),
-    isPressed
+    isPressed,
+    isSelected: manager.isSelected(key),
+    isDisabled,
+    allowsSelection,
+    hasAction
   };
 }
+
+function isActionKey() {
+  let event = window.event as KeyboardEvent;
+  return event?.key === 'Enter';
+}
+
+function isSelectionKey() {
+  let event = window.event as KeyboardEvent;
+  return event?.key === ' ' || event?.code === 'Space';
+}

package/src/useSelectableList.ts

@@ -10,14 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {Collection, FocusStrategy, KeyboardDelegate, Node} from '@react-types/shared';
-import {HTMLAttributes, Key, RefObject, useMemo} from 'react';
+import {Collection, DOMAttributes, FocusStrategy, KeyboardDelegate, Node} from '@react-types/shared';
+import {Key, RefObject, useMemo} from 'react';
 import {ListKeyboardDelegate} from './ListKeyboardDelegate';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useCollator} from '@react-aria/i18n';
 import {useSelectableCollection} from './useSelectableCollection';
 
-interface SelectableListOptions {
+export interface AriaSelectableListOptions {
   /**
    * An interface for reading and updating multiple selection state.
    */
@@ -77,17 +77,17 @@ interface SelectableListOptions {
   allowsTabNavigation?: boolean
 }
 
-interface SelectableListAria {
+export interface SelectableListAria {
   /**
    * Props for the option element.
    */
-  listProps: HTMLAttributes<HTMLElement>
+  listProps: DOMAttributes
 }
 
 /**
  * Handles interactions with a selectable list.
  */
-export function useSelectableList(props: SelectableListOptions): SelectableListAria {
+export function useSelectableList(props: AriaSelectableListOptions): SelectableListAria {
   let {
     selectionManager,
     collection,
@@ -98,7 +98,7 @@ export function useSelectableList(props: SelectableListOptions): SelectableListA
     shouldFocusWrap,
     isVirtualized,
     disallowEmptySelection,
-    selectOnFocus = false,
+    selectOnFocus = selectionManager.selectionBehavior === 'replace',
     disallowTypeAhead,
     shouldUseVirtualFocus,
     allowsTabNavigation

package/src/useTypeSelect.ts

@@ -10,11 +10,11 @@
  * governing permissions and limitations under the License.
  */
 
-import {HTMLAttributes, Key, KeyboardEvent, useRef} from 'react';
-import {KeyboardDelegate} from '@react-types/shared';
+import {DOMAttributes, KeyboardDelegate} from '@react-types/shared';
+import {Key, KeyboardEvent, useRef} from 'react';
 import {MultipleSelectionManager} from '@react-stately/selection';
 
-interface TypeSelectOptions {
+export interface AriaTypeSelectOptions {
   /**
    * A delegate that returns collection item keys with respect to visual layout.
    */
@@ -29,17 +29,17 @@ interface TypeSelectOptions {
   onTypeSelect?: (key: Key) => void
 }
 
-interface TypeSelectAria {
+export interface TypeSelectAria {
   /**
    * Props to be spread on the owner of the options.
    */
-  typeSelectProps: HTMLAttributes<HTMLElement>
+  typeSelectProps: DOMAttributes
 }
 
 /**
  * Handles typeahead interactions with collections.
  */
-export function useTypeSelect(options: TypeSelectOptions): TypeSelectAria {
+export function useTypeSelect(options: AriaTypeSelectOptions): TypeSelectAria {
   let {keyboardDelegate, selectionManager, onTypeSelect} = options;
   let state = useRef({
     search: '',