@react-aria/selection 3.22.0 → 3.23.1

package/dist/useSelectableItem.module.js

@@ -1,7 +1,7 @@
-import {isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
-import {focusSafely as $581M0$focusSafely} from "@react-aria/focus";
-import {useRouter as $581M0$useRouter, useId as $581M0$useId, isCtrlKeyPressed as $581M0$isCtrlKeyPressed, UPDATE_ACTIVEDESCENDANT as $581M0$UPDATE_ACTIVEDESCENDANT, openLink as $581M0$openLink, mergeProps as $581M0$mergeProps} from "@react-aria/utils";
-import {usePress as $581M0$usePress, useLongPress as $581M0$useLongPress} from "@react-aria/interactions";
+import {getCollectionId as $feb5ffebff200149$export$6aeb1680a0ae8741, isNonContiguousSelectionModifier as $feb5ffebff200149$export$d3e3bd3e26688c04} from "./utils.module.js";
+import {focusSafely as $581M0$focusSafely, usePress as $581M0$usePress, useLongPress as $581M0$useLongPress} from "@react-aria/interactions";
+import {useRouter as $581M0$useRouter, useId as $581M0$useId, isCtrlKeyPressed as $581M0$isCtrlKeyPressed, mergeProps as $581M0$mergeProps, openLink as $581M0$openLink} from "@react-aria/utils";
+import {moveVirtualFocus as $581M0$moveVirtualFocus} from "@react-aria/focus";
 import {useEffect as $581M0$useEffect, useRef as $581M0$useRef} from "react";
 
 /*
@@ -47,7 +47,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
     };
     // Focus the associated DOM node when this item becomes the focusedKey
     // TODO: can't make this useLayoutEffect bacause it breaks menus inside dialogs
-    // However, if this is a useEffect, it runs twice and dispatches two UPDATE_ACTIVEDESCENDANT and immediately sets
+    // However, if this is a useEffect, it runs twice and dispatches two blur events and immediately sets
     // aria-activeDescendant in useAutocomplete... I've worked around this for now
     (0, $581M0$useEffect)(()=>{
         let isFocused = key === manager.focusedKey;
@@ -55,14 +55,7 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
             if (!shouldUseVirtualFocus) {
                 if (focus) focus();
                 else if (document.activeElement !== ref.current && ref.current) (0, $581M0$focusSafely)(ref.current);
-            } else {
-                var _ref_current;
-                let updateActiveDescendant = new CustomEvent((0, $581M0$UPDATE_ACTIVEDESCENDANT), {
-                    cancelable: true,
-                    bubbles: true
-                });
-                (_ref_current = ref.current) === null || _ref_current === void 0 ? void 0 : _ref_current.dispatchEvent(updateActiveDescendant);
-            }
+            } else (0, $581M0$moveVirtualFocus)(ref.current);
         }
     // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [
@@ -160,8 +153,24 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
             }
         };
     }
+    itemProps['data-collection'] = (0, $feb5ffebff200149$export$6aeb1680a0ae8741)(manager.collection);
     itemProps['data-key'] = key;
     itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
+    // When using virtual focus, make sure the focused key gets updated on press.
+    if (shouldUseVirtualFocus) itemPressProps = (0, $581M0$mergeProps)(itemPressProps, {
+        onPressStart (e) {
+            if (e.pointerType !== 'touch') {
+                manager.setFocused(true);
+                manager.setFocusedKey(key);
+            }
+        },
+        onPress (e) {
+            if (e.pointerType === 'touch') {
+                manager.setFocused(true);
+                manager.setFocusedKey(key);
+            }
+        }
+    });
     let { pressProps: pressProps, isPressed: isPressed } = (0, $581M0$usePress)(itemPressProps);
     // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
     let onDoubleClick = hasSecondaryAction ? (e)=>{
@@ -196,12 +205,15 @@ function $880e95eb8b93ba9a$export$ecf600387e221c37(options) {
         if (!(0, $581M0$openLink).isOpening) e.preventDefault();
     } : undefined;
     return {
-        itemProps: (0, $581M0$mergeProps)(itemProps, allowsSelection || hasPrimaryAction ? pressProps : {}, longPressEnabled ? longPressProps : {}, {
+        itemProps: (0, $581M0$mergeProps)(itemProps, allowsSelection || hasPrimaryAction || shouldUseVirtualFocus ? pressProps : {}, longPressEnabled ? longPressProps : {}, {
             onDoubleClick: onDoubleClick,
             onDragStartCapture: onDragStartCapture,
             onClick: onClick,
             id: id
-        }),
+        }, // Prevent DOM focus from moving on mouse down when using virtual focus
+        shouldUseVirtualFocus ? {
+            onMouseDown: (e)=>e.preventDefault()
+        } : undefined),
         isPressed: isPressed,
         isSelected: manager.isSelected(key),
         isFocused: manager.isFocused && manager.focusedKey === key,

package/dist/useSelectableItem.module.js.map

@@ -1 +1 @@
-{"mappings":"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","sources":["packages/@react-aria/selection/src/useSelectableItem.ts"],"sourcesContent":["/*\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\nimport {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';\nimport {focusSafely} from '@react-aria/focus';\nimport {isCtrlKeyPressed, mergeProps, openLink, UPDATE_ACTIVEDESCENDANT, useId, useRouter} from '@react-aria/utils';\nimport {isNonContiguousSelectionModifier} from './utils';\nimport {MultipleSelectionManager} from '@react-stately/selection';\nimport {PressProps, useLongPress, usePress} from '@react-aria/interactions';\nimport {useEffect, useRef} from 'react';\n\nexport interface SelectableItemOptions extends DOMProps {\n  /**\n   * An interface for reading and updating multiple selection state.\n   */\n  selectionManager: MultipleSelectionManager,\n  /**\n   * A unique key for the item.\n   */\n  key: Key,\n  /**\n   * Ref to the item.\n   */\n  ref: RefObject<FocusableElement | null>,\n  /**\n   * By default, selection occurs on pointer down. This can be strange if selecting an\n   * item causes the UI to disappear immediately (e.g. menus).\n   */\n  shouldSelectOnPressUp?: boolean,\n  /**\n   * Whether selection requires the pointer/mouse down and up events to occur on the same target or triggers selection on\n   * the target of the pointer/mouse up event.\n   */\n  allowsDifferentPressOrigin?: boolean,\n  /**\n   * Whether the option is contained in a virtual scroller.\n   */\n  isVirtualized?: boolean,\n  /**\n   * Function to focus the item.\n   */\n  focus?: () => void,\n  /**\n   * Whether the option should use virtual focus instead of being focused directly.\n   */\n  shouldUseVirtualFocus?: boolean,\n  /** Whether the item is disabled. */\n  isDisabled?: boolean,\n  /**\n   * Handler that is called when a user performs an action on the item. The exact user event depends on\n   * the collection's `selectionBehavior` prop and the interaction modality.\n   */\n  onAction?: () => void,\n  /**\n   * The behavior of links in the collection.\n   * - 'action': link behaves like onAction.\n   * - 'selection': link follows selection interactions (e.g. if URL drives selection).\n   * - 'override': links override all other interactions (link items are not selectable).\n   * - 'none': links are disabled for both selection and actions (e.g. handled elsewhere).\n   * @default 'action'\n   */\n  linkBehavior?: 'action' | 'selection' | 'override' | 'none'\n}\n\nexport interface SelectableItemStates {\n  /** Whether the item is currently in a pressed state. */\n  isPressed: boolean,\n  /** Whether the item is currently selected. */\n  isSelected: boolean,\n  /** Whether the item is currently focused. */\n  isFocused: boolean,\n  /**\n   * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may\n   * not be focused. Dependent on `disabledKeys` and `disabledBehavior`.\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the item may be selected, dependent on `selectionMode`, `disabledKeys`, and `disabledBehavior`.\n   */\n  allowsSelection: boolean,\n  /**\n   * Whether the item has an action, dependent on `onAction`, `disabledKeys`,\n   * and `disabledBehavior`. It may also change depending on the current selection state\n   * of the list (e.g. when selection is primary). This can be used to enable or disable hover\n   * styles or other visual indications of interactivity.\n   */\n  hasAction: boolean\n}\n\nexport interface SelectableItemAria extends SelectableItemStates {\n  /**\n   * Props to be spread on the item root node.\n   */\n  itemProps: DOMAttributes\n}\n\n/**\n * Handles interactions with an item in a selectable collection.\n */\nexport function useSelectableItem(options: SelectableItemOptions): SelectableItemAria {\n  let {\n    id,\n    selectionManager: manager,\n    key,\n    ref,\n    shouldSelectOnPressUp,\n    shouldUseVirtualFocus,\n    focus,\n    isDisabled,\n    onAction,\n    allowsDifferentPressOrigin,\n    linkBehavior = 'action'\n  } = options;\n  let router = useRouter();\n  id = useId(id);\n  let onSelect = (e: PressEvent | LongPressEvent | PointerEvent) => {\n    if (e.pointerType === 'keyboard' && isNonContiguousSelectionModifier(e)) {\n      manager.toggleSelection(key);\n    } else {\n      if (manager.selectionMode === 'none') {\n        return;\n      }\n\n      if (manager.isLink(key)) {\n        if (linkBehavior === 'selection' && ref.current) {\n          let itemProps = manager.getItemProps(key);\n          router.open(ref.current, e, itemProps.href, itemProps.routerOptions);\n          // Always set selected keys back to what they were so that select and combobox close.\n          manager.setSelectedKeys(manager.selectedKeys);\n          return;\n        } else if (linkBehavior === 'override' || linkBehavior === 'none') {\n          return;\n        }\n      }\n\n      if (manager.selectionMode === 'single') {\n        if (manager.isSelected(key) && !manager.disallowEmptySelection) {\n          manager.toggleSelection(key);\n        } else {\n          manager.replaceSelection(key);\n        }\n      } else if (e && e.shiftKey) {\n        manager.extendSelection(key);\n      } else if (manager.selectionBehavior === 'toggle' || (e && (isCtrlKeyPressed(e) || e.pointerType === 'touch' || e.pointerType === 'virtual'))) {\n        // 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\n        manager.toggleSelection(key);\n      } else {\n        manager.replaceSelection(key);\n      }\n    }\n  };\n\n  // Focus the associated DOM node when this item becomes the focusedKey\n  // TODO: can't make this useLayoutEffect bacause it breaks menus inside dialogs\n  // However, if this is a useEffect, it runs twice and dispatches two UPDATE_ACTIVEDESCENDANT and immediately sets\n  // aria-activeDescendant in useAutocomplete... I've worked around this for now\n  useEffect(() => {\n    let isFocused = key === manager.focusedKey;\n    if (isFocused && manager.isFocused) {\n      if (!shouldUseVirtualFocus) {\n        if (focus) {\n          focus();\n        } else if (document.activeElement !== ref.current && ref.current) {\n          focusSafely(ref.current);\n        }\n      } else {\n        let updateActiveDescendant = new CustomEvent(UPDATE_ACTIVEDESCENDANT, {\n          cancelable: true,\n          bubbles: true\n        });\n\n        ref.current?.dispatchEvent(updateActiveDescendant);\n      }\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, key, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);\n\n  isDisabled = isDisabled || manager.isDisabled(key);\n  // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused\n  // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver\n  // on iOS 14 doesn't try to move real DOM focus to the item anyway.\n  let itemProps: SelectableItemAria['itemProps'] = {};\n  if (!shouldUseVirtualFocus && !isDisabled) {\n    itemProps = {\n      tabIndex: key === manager.focusedKey ? 0 : -1,\n      onFocus(e) {\n        if (e.target === ref.current) {\n          manager.setFocusedKey(key);\n        }\n      }\n    };\n  } else if (isDisabled) {\n    itemProps.onMouseDown = (e) => {\n      // Prevent focus going to the body when clicking on a disabled item.\n      e.preventDefault();\n    };\n  }\n\n  // With checkbox selection, onAction (i.e. navigation) becomes primary, and occurs on a single click of the row.\n  // Clicking the checkbox enters selection mode, after which clicking anywhere on any row toggles selection for that row.\n  // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.\n  // With touch, onAction occurs on single tap, and long press enters selection mode.\n  let isLinkOverride = manager.isLink(key) && linkBehavior === 'override';\n  let hasLinkAction = manager.isLink(key) && linkBehavior !== 'selection' && linkBehavior !== 'none';\n  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride;\n  let allowsActions = (onAction || hasLinkAction) && !isDisabled;\n  let hasPrimaryAction = allowsActions && (\n    manager.selectionBehavior === 'replace'\n      ? !allowsSelection\n      : !allowsSelection || manager.isEmpty\n  );\n  let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';\n  let hasAction = hasPrimaryAction || hasSecondaryAction;\n  let modality = useRef<PointerType | null>(null);\n\n  let longPressEnabled = hasAction && allowsSelection;\n  let longPressEnabledOnPressStart = useRef(false);\n  let hadPrimaryActionOnPressStart = useRef(false);\n\n  let performAction = (e) => {\n    if (onAction) {\n      onAction();\n    }\n\n    if (hasLinkAction && ref.current) {\n      let itemProps = manager.getItemProps(key);\n      router.open(ref.current, e, itemProps.href, itemProps.routerOptions);\n    }\n  };\n\n  // By default, selection occurs on pointer down. This can be strange if selecting an\n  // item causes the UI to disappear immediately (e.g. menus).\n  // If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.\n  // onPress requires a pointer down event on the same element as pointer up. For menus,\n  // we want to be able to have the pointer down on the trigger that opens the menu and\n  // the pointer up on the menu item rather than requiring a separate press.\n  // For keyboard events, selection still occurs on key down.\n  let itemPressProps: PressProps = {};\n  if (shouldSelectOnPressUp) {\n    itemPressProps.onPressStart = (e) => {\n      modality.current = e.pointerType;\n      longPressEnabledOnPressStart.current = longPressEnabled;\n      if (e.pointerType === 'keyboard' && (!hasAction || isSelectionKey())) {\n        onSelect(e);\n      }\n    };\n\n    // If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)\n    // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)\n    if (!allowsDifferentPressOrigin) {\n      itemPressProps.onPress = (e) => {\n        if (hasPrimaryAction || (hasSecondaryAction && e.pointerType !== 'mouse')) {\n          if (e.pointerType === 'keyboard' && !isActionKey()) {\n            return;\n          }\n\n          performAction(e);\n        } else if (e.pointerType !== 'keyboard' && allowsSelection) {\n          onSelect(e);\n        }\n      };\n    } else {\n      itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => {\n        if (e.pointerType === 'mouse' && allowsSelection) {\n          onSelect(e);\n        }\n      };\n\n      itemPressProps.onPress = hasPrimaryAction ? performAction : (e) => {\n        if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) {\n          onSelect(e);\n        }\n      };\n    }\n  } else {\n    itemPressProps.onPressStart = (e) => {\n      modality.current = e.pointerType;\n      longPressEnabledOnPressStart.current = longPressEnabled;\n      hadPrimaryActionOnPressStart.current = hasPrimaryAction;\n\n      // Select on mouse down unless there is a primary action which will occur on mouse up.\n      // For keyboard, select on key down. If there is an action, the Space key selects on key down,\n      // and the Enter key performs onAction on key up.\n      if (\n        allowsSelection && (\n          (e.pointerType === 'mouse' && !hasPrimaryAction) ||\n          (e.pointerType === 'keyboard' && (!allowsActions || isSelectionKey()))\n        )\n      ) {\n        onSelect(e);\n      }\n    };\n\n    itemPressProps.onPress = (e) => {\n      // Selection occurs on touch up. Primary actions always occur on pointer up.\n      // Both primary and secondary actions occur on Enter key up. The only exception\n      // is secondary actions, which occur on double click with a mouse.\n      if (\n        e.pointerType === 'touch' ||\n        e.pointerType === 'pen' ||\n        e.pointerType === 'virtual' ||\n        (e.pointerType === 'keyboard' && hasAction && isActionKey()) ||\n        (e.pointerType === 'mouse' && hadPrimaryActionOnPressStart.current)\n      ) {\n        if (hasAction) {\n          performAction(e);\n        } else if (allowsSelection) {\n          onSelect(e);\n        }\n      }\n    };\n  }\n\n  itemProps['data-key'] = key;\n  itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;\n  let {pressProps, isPressed} = usePress(itemPressProps);\n\n  // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.\n  let onDoubleClick = hasSecondaryAction ? (e) => {\n    if (modality.current === 'mouse') {\n      e.stopPropagation();\n      e.preventDefault();\n      performAction(e);\n    }\n  } : undefined;\n\n  // Long pressing an item with touch when selectionBehavior = 'replace' switches the selection behavior\n  // to 'toggle'. This changes the single tap behavior from performing an action (i.e. navigating) to\n  // selecting, and may toggle the appearance of a UI affordance like checkboxes on each item.\n  let {longPressProps} = useLongPress({\n    isDisabled: !longPressEnabled,\n    onLongPress(e) {\n      if (e.pointerType === 'touch') {\n        onSelect(e);\n        manager.setSelectionBehavior('toggle');\n      }\n    }\n  });\n\n  // Prevent native drag and drop on long press if we also select on long press.\n  // Once the user is in selection mode, they can long press again to drag.\n  // Use a capturing listener to ensure this runs before useDrag, regardless of\n  // the order the props get merged.\n  let onDragStartCapture = e => {\n    if (modality.current === 'touch' && longPressEnabledOnPressStart.current) {\n      e.preventDefault();\n    }\n  };\n\n  // Prevent default on link clicks so that we control exactly\n  // when they open (to match selection behavior).\n  let onClick = manager.isLink(key) ? e => {\n    if (!(openLink as any).isOpening) {\n      e.preventDefault();\n    }\n  } : undefined;\n\n  return {\n    itemProps: mergeProps(\n      itemProps,\n      allowsSelection || hasPrimaryAction ? pressProps : {},\n      longPressEnabled ? longPressProps : {},\n      {onDoubleClick, onDragStartCapture, onClick, id}\n    ),\n    isPressed,\n    isSelected: manager.isSelected(key),\n    isFocused: manager.isFocused && manager.focusedKey === key,\n    isDisabled,\n    allowsSelection,\n    hasAction\n  };\n}\n\nfunction isActionKey() {\n  let event = window.event as KeyboardEvent;\n  return event?.key === 'Enter';\n}\n\nfunction isSelectionKey() {\n  let event = window.event as KeyboardEvent;\n  return event?.key === ' ' || event?.code === 'Space';\n}\n"],"names":[],"version":3,"file":"useSelectableItem.module.js.map"}
+{"mappings":"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","sources":["packages/@react-aria/selection/src/useSelectableItem.ts"],"sourcesContent":["/*\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\nimport {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';\nimport {focusSafely, PressProps, useLongPress, usePress} from '@react-aria/interactions';\nimport {getCollectionId, isNonContiguousSelectionModifier} from './utils';\nimport {isCtrlKeyPressed, mergeProps, openLink, useId, useRouter} from '@react-aria/utils';\nimport {moveVirtualFocus} from '@react-aria/focus';\nimport {MultipleSelectionManager} from '@react-stately/selection';\nimport {useEffect, useRef} from 'react';\n\nexport interface SelectableItemOptions extends DOMProps {\n  /**\n   * An interface for reading and updating multiple selection state.\n   */\n  selectionManager: MultipleSelectionManager,\n  /**\n   * A unique key for the item.\n   */\n  key: Key,\n  /**\n   * Ref to the item.\n   */\n  ref: RefObject<FocusableElement | null>,\n  /**\n   * By default, selection occurs on pointer down. This can be strange if selecting an\n   * item causes the UI to disappear immediately (e.g. menus).\n   */\n  shouldSelectOnPressUp?: boolean,\n  /**\n   * Whether selection requires the pointer/mouse down and up events to occur on the same target or triggers selection on\n   * the target of the pointer/mouse up event.\n   */\n  allowsDifferentPressOrigin?: boolean,\n  /**\n   * Whether the option is contained in a virtual scroller.\n   */\n  isVirtualized?: boolean,\n  /**\n   * Function to focus the item.\n   */\n  focus?: () => void,\n  /**\n   * Whether the option should use virtual focus instead of being focused directly.\n   */\n  shouldUseVirtualFocus?: boolean,\n  /** Whether the item is disabled. */\n  isDisabled?: boolean,\n  /**\n   * Handler that is called when a user performs an action on the item. The exact user event depends on\n   * the collection's `selectionBehavior` prop and the interaction modality.\n   */\n  onAction?: () => void,\n  /**\n   * The behavior of links in the collection.\n   * - 'action': link behaves like onAction.\n   * - 'selection': link follows selection interactions (e.g. if URL drives selection).\n   * - 'override': links override all other interactions (link items are not selectable).\n   * - 'none': links are disabled for both selection and actions (e.g. handled elsewhere).\n   * @default 'action'\n   */\n  linkBehavior?: 'action' | 'selection' | 'override' | 'none'\n}\n\nexport interface SelectableItemStates {\n  /** Whether the item is currently in a pressed state. */\n  isPressed: boolean,\n  /** Whether the item is currently selected. */\n  isSelected: boolean,\n  /** Whether the item is currently focused. */\n  isFocused: boolean,\n  /**\n   * Whether the item is non-interactive, i.e. both selection and actions are disabled and the item may\n   * not be focused. Dependent on `disabledKeys` and `disabledBehavior`.\n   */\n  isDisabled: boolean,\n  /**\n   * Whether the item may be selected, dependent on `selectionMode`, `disabledKeys`, and `disabledBehavior`.\n   */\n  allowsSelection: boolean,\n  /**\n   * Whether the item has an action, dependent on `onAction`, `disabledKeys`,\n   * and `disabledBehavior`. It may also change depending on the current selection state\n   * of the list (e.g. when selection is primary). This can be used to enable or disable hover\n   * styles or other visual indications of interactivity.\n   */\n  hasAction: boolean\n}\n\nexport interface SelectableItemAria extends SelectableItemStates {\n  /**\n   * Props to be spread on the item root node.\n   */\n  itemProps: DOMAttributes\n}\n\n/**\n * Handles interactions with an item in a selectable collection.\n */\nexport function useSelectableItem(options: SelectableItemOptions): SelectableItemAria {\n  let {\n    id,\n    selectionManager: manager,\n    key,\n    ref,\n    shouldSelectOnPressUp,\n    shouldUseVirtualFocus,\n    focus,\n    isDisabled,\n    onAction,\n    allowsDifferentPressOrigin,\n    linkBehavior = 'action'\n  } = options;\n  let router = useRouter();\n  id = useId(id);\n  let onSelect = (e: PressEvent | LongPressEvent | PointerEvent) => {\n    if (e.pointerType === 'keyboard' && isNonContiguousSelectionModifier(e)) {\n      manager.toggleSelection(key);\n    } else {\n      if (manager.selectionMode === 'none') {\n        return;\n      }\n\n      if (manager.isLink(key)) {\n        if (linkBehavior === 'selection' && ref.current) {\n          let itemProps = manager.getItemProps(key);\n          router.open(ref.current, e, itemProps.href, itemProps.routerOptions);\n          // Always set selected keys back to what they were so that select and combobox close.\n          manager.setSelectedKeys(manager.selectedKeys);\n          return;\n        } else if (linkBehavior === 'override' || linkBehavior === 'none') {\n          return;\n        }\n      }\n\n      if (manager.selectionMode === 'single') {\n        if (manager.isSelected(key) && !manager.disallowEmptySelection) {\n          manager.toggleSelection(key);\n        } else {\n          manager.replaceSelection(key);\n        }\n      } else if (e && e.shiftKey) {\n        manager.extendSelection(key);\n      } else if (manager.selectionBehavior === 'toggle' || (e && (isCtrlKeyPressed(e) || e.pointerType === 'touch' || e.pointerType === 'virtual'))) {\n        // 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\n        manager.toggleSelection(key);\n      } else {\n        manager.replaceSelection(key);\n      }\n    }\n  };\n\n  // Focus the associated DOM node when this item becomes the focusedKey\n  // TODO: can't make this useLayoutEffect bacause it breaks menus inside dialogs\n  // However, if this is a useEffect, it runs twice and dispatches two blur events and immediately sets\n  // aria-activeDescendant in useAutocomplete... I've worked around this for now\n  useEffect(() => {\n    let isFocused = key === manager.focusedKey;\n    if (isFocused && manager.isFocused) {\n      if (!shouldUseVirtualFocus) {\n        if (focus) {\n          focus();\n        } else if (document.activeElement !== ref.current && ref.current) {\n          focusSafely(ref.current);\n        }\n      } else {\n        moveVirtualFocus(ref.current);\n      }\n    }\n  // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [ref, key, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);\n\n  isDisabled = isDisabled || manager.isDisabled(key);\n  // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused\n  // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver\n  // on iOS 14 doesn't try to move real DOM focus to the item anyway.\n  let itemProps: SelectableItemAria['itemProps'] = {};\n  if (!shouldUseVirtualFocus && !isDisabled) {\n    itemProps = {\n      tabIndex: key === manager.focusedKey ? 0 : -1,\n      onFocus(e) {\n        if (e.target === ref.current) {\n          manager.setFocusedKey(key);\n        }\n      }\n    };\n  } else if (isDisabled) {\n    itemProps.onMouseDown = (e) => {\n      // Prevent focus going to the body when clicking on a disabled item.\n      e.preventDefault();\n    };\n  }\n\n  // With checkbox selection, onAction (i.e. navigation) becomes primary, and occurs on a single click of the row.\n  // Clicking the checkbox enters selection mode, after which clicking anywhere on any row toggles selection for that row.\n  // With highlight selection, onAction is secondary, and occurs on double click. Single click selects the row.\n  // With touch, onAction occurs on single tap, and long press enters selection mode.\n  let isLinkOverride = manager.isLink(key) && linkBehavior === 'override';\n  let hasLinkAction = manager.isLink(key) && linkBehavior !== 'selection' && linkBehavior !== 'none';\n  let allowsSelection = !isDisabled && manager.canSelectItem(key) && !isLinkOverride;\n  let allowsActions = (onAction || hasLinkAction) && !isDisabled;\n  let hasPrimaryAction = allowsActions && (\n    manager.selectionBehavior === 'replace'\n      ? !allowsSelection\n      : !allowsSelection || manager.isEmpty\n  );\n  let hasSecondaryAction = allowsActions && allowsSelection && manager.selectionBehavior === 'replace';\n  let hasAction = hasPrimaryAction || hasSecondaryAction;\n  let modality = useRef<PointerType | null>(null);\n\n  let longPressEnabled = hasAction && allowsSelection;\n  let longPressEnabledOnPressStart = useRef(false);\n  let hadPrimaryActionOnPressStart = useRef(false);\n\n  let performAction = (e) => {\n    if (onAction) {\n      onAction();\n    }\n\n    if (hasLinkAction && ref.current) {\n      let itemProps = manager.getItemProps(key);\n      router.open(ref.current, e, itemProps.href, itemProps.routerOptions);\n    }\n  };\n\n  // By default, selection occurs on pointer down. This can be strange if selecting an\n  // item causes the UI to disappear immediately (e.g. menus).\n  // If shouldSelectOnPressUp is true, we use onPressUp instead of onPressStart.\n  // onPress requires a pointer down event on the same element as pointer up. For menus,\n  // we want to be able to have the pointer down on the trigger that opens the menu and\n  // the pointer up on the menu item rather than requiring a separate press.\n  // For keyboard events, selection still occurs on key down.\n  let itemPressProps: PressProps = {};\n  if (shouldSelectOnPressUp) {\n    itemPressProps.onPressStart = (e) => {\n      modality.current = e.pointerType;\n      longPressEnabledOnPressStart.current = longPressEnabled;\n      if (e.pointerType === 'keyboard' && (!hasAction || isSelectionKey())) {\n        onSelect(e);\n      }\n    };\n\n    // If allowsDifferentPressOrigin and interacting with mouse, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)\n    // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)\n    if (!allowsDifferentPressOrigin) {\n      itemPressProps.onPress = (e) => {\n        if (hasPrimaryAction || (hasSecondaryAction && e.pointerType !== 'mouse')) {\n          if (e.pointerType === 'keyboard' && !isActionKey()) {\n            return;\n          }\n\n          performAction(e);\n        } else if (e.pointerType !== 'keyboard' && allowsSelection) {\n          onSelect(e);\n        }\n      };\n    } else {\n      itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => {\n        if (e.pointerType === 'mouse' && allowsSelection) {\n          onSelect(e);\n        }\n      };\n\n      itemPressProps.onPress = hasPrimaryAction ? performAction : (e) => {\n        if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) {\n          onSelect(e);\n        }\n      };\n    }\n  } else {\n    itemPressProps.onPressStart = (e) => {\n      modality.current = e.pointerType;\n      longPressEnabledOnPressStart.current = longPressEnabled;\n      hadPrimaryActionOnPressStart.current = hasPrimaryAction;\n\n      // Select on mouse down unless there is a primary action which will occur on mouse up.\n      // For keyboard, select on key down. If there is an action, the Space key selects on key down,\n      // and the Enter key performs onAction on key up.\n      if (\n        allowsSelection && (\n          (e.pointerType === 'mouse' && !hasPrimaryAction) ||\n          (e.pointerType === 'keyboard' && (!allowsActions || isSelectionKey()))\n        )\n      ) {\n        onSelect(e);\n      }\n    };\n\n    itemPressProps.onPress = (e) => {\n      // Selection occurs on touch up. Primary actions always occur on pointer up.\n      // Both primary and secondary actions occur on Enter key up. The only exception\n      // is secondary actions, which occur on double click with a mouse.\n      if (\n        e.pointerType === 'touch' ||\n        e.pointerType === 'pen' ||\n        e.pointerType === 'virtual' ||\n        (e.pointerType === 'keyboard' && hasAction && isActionKey()) ||\n        (e.pointerType === 'mouse' && hadPrimaryActionOnPressStart.current)\n      ) {\n        if (hasAction) {\n          performAction(e);\n        } else if (allowsSelection) {\n          onSelect(e);\n        }\n      }\n    };\n  }\n\n  itemProps['data-collection'] = getCollectionId(manager.collection);\n  itemProps['data-key'] = key;\n  itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;\n\n  // When using virtual focus, make sure the focused key gets updated on press.\n  if (shouldUseVirtualFocus) {\n    itemPressProps = mergeProps(itemPressProps, {\n      onPressStart(e) {\n        if (e.pointerType !== 'touch') {\n          manager.setFocused(true);\n          manager.setFocusedKey(key);\n        }\n      },\n      onPress(e) {\n        if (e.pointerType === 'touch') {\n          manager.setFocused(true);\n          manager.setFocusedKey(key);\n        }\n      }\n    });\n  }\n\n  let {pressProps, isPressed} = usePress(itemPressProps);\n\n  // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.\n  let onDoubleClick = hasSecondaryAction ? (e) => {\n    if (modality.current === 'mouse') {\n      e.stopPropagation();\n      e.preventDefault();\n      performAction(e);\n    }\n  } : undefined;\n\n  // Long pressing an item with touch when selectionBehavior = 'replace' switches the selection behavior\n  // to 'toggle'. This changes the single tap behavior from performing an action (i.e. navigating) to\n  // selecting, and may toggle the appearance of a UI affordance like checkboxes on each item.\n  let {longPressProps} = useLongPress({\n    isDisabled: !longPressEnabled,\n    onLongPress(e) {\n      if (e.pointerType === 'touch') {\n        onSelect(e);\n        manager.setSelectionBehavior('toggle');\n      }\n    }\n  });\n\n  // Prevent native drag and drop on long press if we also select on long press.\n  // Once the user is in selection mode, they can long press again to drag.\n  // Use a capturing listener to ensure this runs before useDrag, regardless of\n  // the order the props get merged.\n  let onDragStartCapture = e => {\n    if (modality.current === 'touch' && longPressEnabledOnPressStart.current) {\n      e.preventDefault();\n    }\n  };\n\n  // Prevent default on link clicks so that we control exactly\n  // when they open (to match selection behavior).\n  let onClick = manager.isLink(key) ? e => {\n    if (!(openLink as any).isOpening) {\n      e.preventDefault();\n    }\n  } : undefined;\n\n  return {\n    itemProps: mergeProps(\n      itemProps,\n      allowsSelection || hasPrimaryAction || shouldUseVirtualFocus ? pressProps : {},\n      longPressEnabled ? longPressProps : {},\n      {onDoubleClick, onDragStartCapture, onClick, id},\n      // Prevent DOM focus from moving on mouse down when using virtual focus\n      shouldUseVirtualFocus ? {onMouseDown: e => e.preventDefault()} : undefined\n    ),\n    isPressed,\n    isSelected: manager.isSelected(key),\n    isFocused: manager.isFocused && manager.focusedKey === key,\n    isDisabled,\n    allowsSelection,\n    hasAction\n  };\n}\n\nfunction isActionKey() {\n  let event = window.event as KeyboardEvent;\n  return event?.key === 'Enter';\n}\n\nfunction isSelectionKey() {\n  let event = window.event as KeyboardEvent;\n  return event?.key === ' ' || event?.code === 'Space';\n}\n"],"names":[],"version":3,"file":"useSelectableItem.module.js.map"}

package/dist/utils.main.js

@@ -6,6 +6,9 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "isNonContiguousSelectionModifier", () => $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04);
+$parcel$export(module.exports, "getItemElement", () => $ee0bdf4faa47f2a8$export$c3d8340acf92597f);
+$parcel$export(module.exports, "useCollectionId", () => $ee0bdf4faa47f2a8$export$881eb0d9f3605d9d);
+$parcel$export(module.exports, "getCollectionId", () => $ee0bdf4faa47f2a8$export$6aeb1680a0ae8741);
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -22,6 +25,22 @@ function $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04(e) {
     // On Windows and Ubuntu, Alt + Space has a system wide meaning.
     return (0, $gP8Dl$reactariautils.isAppleDevice)() ? e.altKey : e.ctrlKey;
 }
+function $ee0bdf4faa47f2a8$export$c3d8340acf92597f(collectionRef, key) {
+    var _collectionRef_current, _collectionRef_current1;
+    let selector = `[data-key="${CSS.escape(String(key))}"]`;
+    let collection = (_collectionRef_current = collectionRef.current) === null || _collectionRef_current === void 0 ? void 0 : _collectionRef_current.dataset.collection;
+    if (collection) selector = `[data-collection="${CSS.escape(collection)}"]${selector}`;
+    return (_collectionRef_current1 = collectionRef.current) === null || _collectionRef_current1 === void 0 ? void 0 : _collectionRef_current1.querySelector(selector);
+}
+const $ee0bdf4faa47f2a8$var$collectionMap = new WeakMap();
+function $ee0bdf4faa47f2a8$export$881eb0d9f3605d9d(collection) {
+    let id = (0, $gP8Dl$reactariautils.useId)();
+    $ee0bdf4faa47f2a8$var$collectionMap.set(collection, id);
+    return id;
+}
+function $ee0bdf4faa47f2a8$export$6aeb1680a0ae8741(collection) {
+    return $ee0bdf4faa47f2a8$var$collectionMap.get(collection);
+}
 
 
 //# sourceMappingURL=utils.main.js.map

package/dist/utils.main.js.map

@@ -1 +1 @@
-{"mappings":";;;;;;;;AAAA;;;;;;;;;;CAUC;AAUM,SAAS,0CAAiC,CAAQ;IACvD,qFAAqF;IACrF,gEAAgE;IAChE,OAAO,CAAA,GAAA,mCAAY,MAAM,EAAE,MAAM,GAAG,EAAE,OAAO;AAC/C","sources":["packages/@react-aria/selection/src/utils.ts"],"sourcesContent":["/*\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\nimport {isAppleDevice} from '@react-aria/utils';\n\ninterface Event {\n  altKey: boolean,\n  ctrlKey: boolean,\n  metaKey: boolean\n}\n\nexport function isNonContiguousSelectionModifier(e: Event) {\n  // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.\n  // On Windows and Ubuntu, Alt + Space has a system wide meaning.\n  return isAppleDevice() ? e.altKey : e.ctrlKey;\n}\n"],"names":[],"version":3,"file":"utils.main.js.map"}
+{"mappings":";;;;;;;;;;;AAAA;;;;;;;;;;CAUC;AAYM,SAAS,0CAAiC,CAAQ;IACvD,qFAAqF;IACrF,gEAAgE;IAChE,OAAO,CAAA,GAAA,mCAAY,MAAM,EAAE,MAAM,GAAG,EAAE,OAAO;AAC/C;AAEO,SAAS,0CAAe,aAA4C,EAAE,GAAQ;QAElE,wBAIV;IALP,IAAI,WAAW,CAAC,WAAW,EAAE,IAAI,MAAM,CAAC,OAAO,MAAM,EAAE,CAAC;IACxD,IAAI,cAAa,yBAAA,cAAc,OAAO,cAArB,6CAAA,uBAAuB,OAAO,CAAC,UAAU;IAC1D,IAAI,YACF,WAAW,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,YAAY,EAAE,EAAE,UAAU;IAEvE,QAAO,0BAAA,cAAc,OAAO,cAArB,8CAAA,wBAAuB,aAAa,CAAC;AAC9C;AAEA,MAAM,sCAAgB,IAAI;AACnB,SAAS,0CAAgB,UAA2B;IACzD,IAAI,KAAK,CAAA,GAAA,2BAAI;IACb,oCAAc,GAAG,CAAC,YAAY;IAC9B,OAAO;AACT;AAEO,SAAS,0CAAgB,UAA2B;IACzD,OAAO,oCAAc,GAAG,CAAC;AAC3B","sources":["packages/@react-aria/selection/src/utils.ts"],"sourcesContent":["/*\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\nimport {Collection, Key} from '@react-types/shared';\nimport {isAppleDevice, useId} from '@react-aria/utils';\nimport {RefObject} from 'react';\n\ninterface Event {\n  altKey: boolean,\n  ctrlKey: boolean,\n  metaKey: boolean\n}\n\nexport function isNonContiguousSelectionModifier(e: Event) {\n  // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.\n  // On Windows and Ubuntu, Alt + Space has a system wide meaning.\n  return isAppleDevice() ? e.altKey : e.ctrlKey;\n}\n\nexport function getItemElement(collectionRef: RefObject<HTMLElement | null>, key: Key) {\n  let selector = `[data-key=\"${CSS.escape(String(key))}\"]`;\n  let collection = collectionRef.current?.dataset.collection;\n  if (collection) {\n    selector = `[data-collection=\"${CSS.escape(collection)}\"]${selector}`;\n  }\n  return collectionRef.current?.querySelector(selector);\n}\n\nconst collectionMap = new WeakMap();\nexport function useCollectionId(collection: Collection<any>) {\n  let id = useId();\n  collectionMap.set(collection, id);\n  return id;\n}\n\nexport function getCollectionId(collection: Collection<any>) {\n  return collectionMap.get(collection)!;\n}\n"],"names":[],"version":3,"file":"utils.main.js.map"}

package/dist/utils.mjs

@@ -1,4 +1,4 @@
-import {isAppleDevice as $jUnAJ$isAppleDevice} from "@react-aria/utils";
+import {isAppleDevice as $jUnAJ$isAppleDevice, useId as $jUnAJ$useId} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,7 +16,23 @@ function $feb5ffebff200149$export$d3e3bd3e26688c04(e) {
     // On Windows and Ubuntu, Alt + Space has a system wide meaning.
     return (0, $jUnAJ$isAppleDevice)() ? e.altKey : e.ctrlKey;
 }
+function $feb5ffebff200149$export$c3d8340acf92597f(collectionRef, key) {
+    var _collectionRef_current, _collectionRef_current1;
+    let selector = `[data-key="${CSS.escape(String(key))}"]`;
+    let collection = (_collectionRef_current = collectionRef.current) === null || _collectionRef_current === void 0 ? void 0 : _collectionRef_current.dataset.collection;
+    if (collection) selector = `[data-collection="${CSS.escape(collection)}"]${selector}`;
+    return (_collectionRef_current1 = collectionRef.current) === null || _collectionRef_current1 === void 0 ? void 0 : _collectionRef_current1.querySelector(selector);
+}
+const $feb5ffebff200149$var$collectionMap = new WeakMap();
+function $feb5ffebff200149$export$881eb0d9f3605d9d(collection) {
+    let id = (0, $jUnAJ$useId)();
+    $feb5ffebff200149$var$collectionMap.set(collection, id);
+    return id;
+}
+function $feb5ffebff200149$export$6aeb1680a0ae8741(collection) {
+    return $feb5ffebff200149$var$collectionMap.get(collection);
+}
 
 
-export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier};
+export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier, $feb5ffebff200149$export$c3d8340acf92597f as getItemElement, $feb5ffebff200149$export$881eb0d9f3605d9d as useCollectionId, $feb5ffebff200149$export$6aeb1680a0ae8741 as getCollectionId};
 //# sourceMappingURL=utils.module.js.map

package/dist/utils.module.js

@@ -1,4 +1,4 @@
-import {isAppleDevice as $jUnAJ$isAppleDevice} from "@react-aria/utils";
+import {isAppleDevice as $jUnAJ$isAppleDevice, useId as $jUnAJ$useId} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,7 +16,23 @@ function $feb5ffebff200149$export$d3e3bd3e26688c04(e) {
     // On Windows and Ubuntu, Alt + Space has a system wide meaning.
     return (0, $jUnAJ$isAppleDevice)() ? e.altKey : e.ctrlKey;
 }
+function $feb5ffebff200149$export$c3d8340acf92597f(collectionRef, key) {
+    var _collectionRef_current, _collectionRef_current1;
+    let selector = `[data-key="${CSS.escape(String(key))}"]`;
+    let collection = (_collectionRef_current = collectionRef.current) === null || _collectionRef_current === void 0 ? void 0 : _collectionRef_current.dataset.collection;
+    if (collection) selector = `[data-collection="${CSS.escape(collection)}"]${selector}`;
+    return (_collectionRef_current1 = collectionRef.current) === null || _collectionRef_current1 === void 0 ? void 0 : _collectionRef_current1.querySelector(selector);
+}
+const $feb5ffebff200149$var$collectionMap = new WeakMap();
+function $feb5ffebff200149$export$881eb0d9f3605d9d(collection) {
+    let id = (0, $jUnAJ$useId)();
+    $feb5ffebff200149$var$collectionMap.set(collection, id);
+    return id;
+}
+function $feb5ffebff200149$export$6aeb1680a0ae8741(collection) {
+    return $feb5ffebff200149$var$collectionMap.get(collection);
+}
 
 
-export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier};
+export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier, $feb5ffebff200149$export$c3d8340acf92597f as getItemElement, $feb5ffebff200149$export$881eb0d9f3605d9d as useCollectionId, $feb5ffebff200149$export$6aeb1680a0ae8741 as getCollectionId};
 //# sourceMappingURL=utils.module.js.map

package/dist/utils.module.js.map

@@ -1 +1 @@
-{"mappings":";;AAAA;;;;;;;;;;CAUC;AAUM,SAAS,0CAAiC,CAAQ;IACvD,qFAAqF;IACrF,gEAAgE;IAChE,OAAO,CAAA,GAAA,oBAAY,MAAM,EAAE,MAAM,GAAG,EAAE,OAAO;AAC/C","sources":["packages/@react-aria/selection/src/utils.ts"],"sourcesContent":["/*\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\nimport {isAppleDevice} from '@react-aria/utils';\n\ninterface Event {\n  altKey: boolean,\n  ctrlKey: boolean,\n  metaKey: boolean\n}\n\nexport function isNonContiguousSelectionModifier(e: Event) {\n  // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.\n  // On Windows and Ubuntu, Alt + Space has a system wide meaning.\n  return isAppleDevice() ? e.altKey : e.ctrlKey;\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}
+{"mappings":";;AAAA;;;;;;;;;;CAUC;AAYM,SAAS,0CAAiC,CAAQ;IACvD,qFAAqF;IACrF,gEAAgE;IAChE,OAAO,CAAA,GAAA,oBAAY,MAAM,EAAE,MAAM,GAAG,EAAE,OAAO;AAC/C;AAEO,SAAS,0CAAe,aAA4C,EAAE,GAAQ;QAElE,wBAIV;IALP,IAAI,WAAW,CAAC,WAAW,EAAE,IAAI,MAAM,CAAC,OAAO,MAAM,EAAE,CAAC;IACxD,IAAI,cAAa,yBAAA,cAAc,OAAO,cAArB,6CAAA,uBAAuB,OAAO,CAAC,UAAU;IAC1D,IAAI,YACF,WAAW,CAAC,kBAAkB,EAAE,IAAI,MAAM,CAAC,YAAY,EAAE,EAAE,UAAU;IAEvE,QAAO,0BAAA,cAAc,OAAO,cAArB,8CAAA,wBAAuB,aAAa,CAAC;AAC9C;AAEA,MAAM,sCAAgB,IAAI;AACnB,SAAS,0CAAgB,UAA2B;IACzD,IAAI,KAAK,CAAA,GAAA,YAAI;IACb,oCAAc,GAAG,CAAC,YAAY;IAC9B,OAAO;AACT;AAEO,SAAS,0CAAgB,UAA2B;IACzD,OAAO,oCAAc,GAAG,CAAC;AAC3B","sources":["packages/@react-aria/selection/src/utils.ts"],"sourcesContent":["/*\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\nimport {Collection, Key} from '@react-types/shared';\nimport {isAppleDevice, useId} from '@react-aria/utils';\nimport {RefObject} from 'react';\n\ninterface Event {\n  altKey: boolean,\n  ctrlKey: boolean,\n  metaKey: boolean\n}\n\nexport function isNonContiguousSelectionModifier(e: Event) {\n  // Ctrl + Arrow Up/Arrow Down has a system wide meaning on macOS, so use Alt instead.\n  // On Windows and Ubuntu, Alt + Space has a system wide meaning.\n  return isAppleDevice() ? e.altKey : e.ctrlKey;\n}\n\nexport function getItemElement(collectionRef: RefObject<HTMLElement | null>, key: Key) {\n  let selector = `[data-key=\"${CSS.escape(String(key))}\"]`;\n  let collection = collectionRef.current?.dataset.collection;\n  if (collection) {\n    selector = `[data-collection=\"${CSS.escape(collection)}\"]${selector}`;\n  }\n  return collectionRef.current?.querySelector(selector);\n}\n\nconst collectionMap = new WeakMap();\nexport function useCollectionId(collection: Collection<any>) {\n  let id = useId();\n  collectionMap.set(collection, id);\n  return id;\n}\n\nexport function getCollectionId(collection: Collection<any>) {\n  return collectionMap.get(collection)!;\n}\n"],"names":[],"version":3,"file":"utils.module.js.map"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/selection",
-  "version": "3.22.0",
+  "version": "3.23.1",
   "description": "Spectrum UI components in React",
   "license": "Apache-2.0",
   "main": "dist/main.js",
@@ -22,12 +22,12 @@
     "url": "https://github.com/adobe/react-spectrum"
   },
   "dependencies": {
-    "@react-aria/focus": "^3.19.1",
-    "@react-aria/i18n": "^3.12.5",
-    "@react-aria/interactions": "^3.23.0",
-    "@react-aria/utils": "^3.27.0",
-    "@react-stately/selection": "^3.19.0",
-    "@react-types/shared": "^3.27.0",
+    "@react-aria/focus": "^3.20.1",
+    "@react-aria/i18n": "^3.12.7",
+    "@react-aria/interactions": "^3.24.1",
+    "@react-aria/utils": "^3.28.1",
+    "@react-stately/selection": "^3.20.0",
+    "@react-types/shared": "^3.28.0",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
+  "gitHead": "9c4ebbc0c1972cc880febc29de995ca58caa3ba4"
 }

package/src/DOMLayoutDelegate.ts

@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {getItemElement} from './utils';
 import {Key, LayoutDelegate, Rect, RefObject, Size} from '@react-types/shared';
 
 export class DOMLayoutDelegate implements LayoutDelegate {
@@ -24,7 +25,7 @@ export class DOMLayoutDelegate implements LayoutDelegate {
     if (!container) {
       return null;
     }
-    let item = key != null ? container.querySelector(`[data-key="${CSS.escape(key.toString())}"]`) : null;
+    let item = key != null ? getItemElement(this.ref, key) : null;
     if (!item) {
       return null;
     }

package/src/useSelectableCollection.ts

@@ -10,13 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling, isCtrlKeyPressed, mergeProps, scrollIntoView, scrollIntoViewport, UPDATE_ACTIVEDESCENDANT, useEffectEvent, useEvent, useRouter, useUpdateLayoutEffect} from '@react-aria/utils';
+import {CLEAR_FOCUS_EVENT, FOCUS_EVENT, focusWithoutScrolling, isCtrlKeyPressed, mergeProps, scrollIntoView, scrollIntoViewport, useEffectEvent, useEvent, useRouter, useUpdateLayoutEffect} from '@react-aria/utils';
 import {DOMAttributes, FocusableElement, FocusStrategy, Key, KeyboardDelegate, RefObject} from '@react-types/shared';
 import {flushSync} from 'react-dom';
 import {FocusEvent, KeyboardEvent, useEffect, useRef} from 'react';
-import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
-import {getInteractionModality} from '@react-aria/interactions';
-import {isNonContiguousSelectionModifier} from './utils';
+import {focusSafely, getInteractionModality} from '@react-aria/interactions';
+import {getFocusableTreeWalker, moveVirtualFocus} from '@react-aria/focus';
+import {getItemElement, isNonContiguousSelectionModifier, useCollectionId} from './utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useLocale} from '@react-aria/i18n';
 import {useTypeSelect} from './useTypeSelect';
@@ -140,7 +140,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
             manager.setFocusedKey(key, childFocus);
           });
 
-          let item = scrollRef.current?.querySelector(`[data-key="${CSS.escape(key.toString())}"]`);
+          let item = getItemElement(ref, key);
           let itemProps = manager.getItemProps(key);
           if (item) {
             router.open(item, e, itemProps.href, itemProps.routerOptions);
@@ -342,12 +342,11 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     }
 
     manager.setFocused(true);
-
     if (manager.focusedKey == null) {
-      let navigateToFirstKey = (key: Key | undefined | null) => {
+      let navigateToKey = (key: Key | undefined | null) => {
         if (key != null) {
           manager.setFocusedKey(key);
-          if (selectOnFocus) {
+          if (selectOnFocus && !manager.isSelected(key)) {
             manager.replaceSelection(key);
           }
         }
@@ -357,9 +356,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       // and either focus the first or last item accordingly.
       let relatedTarget = e.relatedTarget as Element;
       if (relatedTarget && (e.currentTarget.compareDocumentPosition(relatedTarget) & Node.DOCUMENT_POSITION_FOLLOWING)) {
-        navigateToFirstKey(manager.lastSelectedKey ?? delegate.getLastKey?.());
+        navigateToKey(manager.lastSelectedKey ?? delegate.getLastKey?.());
       } else {
-        navigateToFirstKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
+        navigateToKey(manager.firstSelectedKey ?? delegate.getFirstKey?.());
       }
     } else if (!isVirtualized && scrollRef.current) {
       // Restore the scroll position to what it was before.
@@ -369,10 +368,10 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
     if (manager.focusedKey != null && scrollRef.current) {
       // Refocus and scroll the focused item into view if it exists within the scrollable region.
-      let element = scrollRef.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
-      if (element) {
+      let element = getItemElement(ref, manager.focusedKey);
+      if (element instanceof HTMLElement) {
         // This prevents a flash of focus on the first/last element in the collection, or the collection itself.
-        if (!element.contains(document.activeElement)) {
+        if (!element.contains(document.activeElement) && !shouldUseVirtualFocus) {
           focusWithoutScrolling(element);
         }
 
@@ -414,12 +413,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
     // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
     if (keyToFocus == null) {
-      ref.current?.dispatchEvent(
-        new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
-          cancelable: true,
-          bubbles: true
-        })
-      );
+      moveVirtualFocus(ref.current);
 
       // If there wasn't a focusable key but the collection had items, then that means we aren't in an intermediate load state and all keys are disabled.
       // Reset shouldVirtualFocusFirst so that we don't erronously autofocus an item when the collection is filtered again.
@@ -455,13 +449,16 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     resetFocusFirstFlag();
   }, [manager.focusedKey, resetFocusFirstFlag]);
 
-  useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e) => {
+  useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e: any) => {
     e.stopPropagation();
     manager.setFocused(false);
-    manager.setFocusedKey(null);
+    if (e.detail?.clearFocusKey) {
+      manager.setFocusedKey(null);
+    }
   });
 
   const autoFocusRef = useRef(autoFocus);
+  const didAutoFocusRef = useRef(false);
   useEffect(() => {
     if (autoFocusRef.current) {
       let focusedKey: Key | null = null;
@@ -491,23 +488,28 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       if (focusedKey == null && !shouldUseVirtualFocus && ref.current) {
         focusSafely(ref.current);
       }
+
+      // Wait until the collection has items to autofocus.
+      if (manager.collection.size > 0) {
+        autoFocusRef.current = false;
+        didAutoFocusRef.current = true;
+      }
     }
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, []);
+  });
 
   // Scroll the focused element into view when the focusedKey changes.
   let lastFocusedKey = useRef(manager.focusedKey);
   useEffect(() => {
-    if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || autoFocusRef.current) && scrollRef.current && ref.current) {
+    if (manager.isFocused && manager.focusedKey != null && (manager.focusedKey !== lastFocusedKey.current || didAutoFocusRef.current) && scrollRef.current && ref.current) {
       let modality = getInteractionModality();
-      let element = ref.current.querySelector(`[data-key="${CSS.escape(manager.focusedKey.toString())}"]`) as HTMLElement;
-      if (!element) {
+      let element = getItemElement(ref, manager.focusedKey);
+      if (!(element instanceof HTMLElement)) {
         // If item element wasn't found, return early (don't update autoFocusRef and lastFocusedKey).
         // The collection may initially be empty (e.g. virtualizer), so wait until the element exists.
         return;
       }
 
-      if (modality === 'keyboard' || autoFocusRef.current) {
+      if (modality === 'keyboard' || didAutoFocusRef.current) {
         scrollIntoView(scrollRef.current, element);
 
         // Avoid scroll in iOS VO, since it may cause overlay to close (i.e. RAC submenu)
@@ -523,7 +525,7 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     }
 
     lastFocusedKey.current = manager.focusedKey;
-    autoFocusRef.current = false;
+    didAutoFocusRef.current = false;
   });
 
   // Intercept FocusScope restoration since virtualized collections can reuse DOM nodes.
@@ -559,14 +561,13 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
   let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
     tabIndex = manager.focusedKey == null ? 0 : -1;
-  } else {
-    tabIndex = -1;
   }
 
+  let collectionId = useCollectionId(manager.collection);
   return {
-    collectionProps: {
-      ...handlers,
-      tabIndex
-    }
+    collectionProps: mergeProps(handlers, {
+      tabIndex,
+      'data-collection': collectionId
+    })
   };
 }

package/src/useSelectableItem.ts

@@ -11,11 +11,11 @@
  */
 
 import {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
-import {focusSafely} from '@react-aria/focus';
-import {isCtrlKeyPressed, mergeProps, openLink, UPDATE_ACTIVEDESCENDANT, useId, useRouter} from '@react-aria/utils';
-import {isNonContiguousSelectionModifier} from './utils';
+import {focusSafely, PressProps, 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';
 import {MultipleSelectionManager} from '@react-stately/selection';
-import {PressProps, useLongPress, usePress} from '@react-aria/interactions';
 import {useEffect, useRef} from 'react';
 
 export interface SelectableItemOptions extends DOMProps {
@@ -161,7 +161,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
 
   // Focus the associated DOM node when this item becomes the focusedKey
   // TODO: can't make this useLayoutEffect bacause it breaks menus inside dialogs
-  // However, if this is a useEffect, it runs twice and dispatches two UPDATE_ACTIVEDESCENDANT and immediately sets
+  // However, if this is a useEffect, it runs twice and dispatches two blur events and immediately sets
   // aria-activeDescendant in useAutocomplete... I've worked around this for now
   useEffect(() => {
     let isFocused = key === manager.focusedKey;
@@ -173,12 +173,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
           focusSafely(ref.current);
         }
       } else {
-        let updateActiveDescendant = new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
-          cancelable: true,
-          bubbles: true
-        });
-
-        ref.current?.dispatchEvent(updateActiveDescendant);
+        moveVirtualFocus(ref.current);
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -320,8 +315,28 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     };
   }
 
+  itemProps['data-collection'] = getCollectionId(manager.collection);
   itemProps['data-key'] = key;
   itemPressProps.preventFocusOnPress = shouldUseVirtualFocus;
+
+  // When using virtual focus, make sure the focused key gets updated on press.
+  if (shouldUseVirtualFocus) {
+    itemPressProps = mergeProps(itemPressProps, {
+      onPressStart(e) {
+        if (e.pointerType !== 'touch') {
+          manager.setFocused(true);
+          manager.setFocusedKey(key);
+        }
+      },
+      onPress(e) {
+        if (e.pointerType === 'touch') {
+          manager.setFocused(true);
+          manager.setFocusedKey(key);
+        }
+      }
+    });
+  }
+
   let {pressProps, isPressed} = usePress(itemPressProps);
 
   // Double clicking with a mouse with selectionBehavior = 'replace' performs an action.
@@ -367,9 +382,11 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
   return {
     itemProps: mergeProps(
       itemProps,
-      allowsSelection || hasPrimaryAction ? pressProps : {},
+      allowsSelection || hasPrimaryAction || shouldUseVirtualFocus ? pressProps : {},
       longPressEnabled ? longPressProps : {},
-      {onDoubleClick, onDragStartCapture, onClick, id}
+      {onDoubleClick, onDragStartCapture, onClick, id},
+      // Prevent DOM focus from moving on mouse down when using virtual focus
+      shouldUseVirtualFocus ? {onMouseDown: e => e.preventDefault()} : undefined
     ),
     isPressed,
     isSelected: manager.isSelected(key),