@react-aria/selection 3.21.0 → 3.23.0

package/dist/utils.mjs

@@ -1,4 +1,4 @@
-import {isAppleDevice as $jUnAJ$isAppleDevice, isMac as $jUnAJ$isMac} from "@react-aria/utils";
+import {isAppleDevice as $jUnAJ$isAppleDevice, useId as $jUnAJ$useId} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,11 +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$16792effe837dba3(e) {
-    if ((0, $jUnAJ$isMac)()) return e.metaKey;
-    return 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, $feb5ffebff200149$export$16792effe837dba3 as isCtrlKeyPressed};
+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, isMac as $jUnAJ$isMac} from "@react-aria/utils";
+import {isAppleDevice as $jUnAJ$isAppleDevice, useId as $jUnAJ$useId} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,11 +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$16792effe837dba3(e) {
-    if ((0, $jUnAJ$isMac)()) return e.metaKey;
-    return 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, $feb5ffebff200149$export$16792effe837dba3 as isCtrlKeyPressed};
+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;AAEO,SAAS,0CAAiB,CAAQ;IACvC,IAAI,CAAA,GAAA,YAAI,KACN,OAAO,EAAE,OAAO;IAGlB,OAAO,EAAE,OAAO;AAClB","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, isMac} 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\nexport function isCtrlKeyPressed(e: Event) {\n  if (isMac()) {\n    return e.metaKey;\n  }\n\n  return 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.21.0",
+  "version": "3.23.0",
   "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.0",
-    "@react-aria/i18n": "^3.12.4",
-    "@react-aria/interactions": "^3.22.5",
-    "@react-aria/utils": "^3.26.0",
-    "@react-stately/selection": "^3.18.0",
-    "@react-types/shared": "^3.26.0",
+    "@react-aria/focus": "^3.20.0",
+    "@react-aria/i18n": "^3.12.6",
+    "@react-aria/interactions": "^3.24.0",
+    "@react-aria/utils": "^3.28.0",
+    "@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": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "4d3c72c94eea2d72eb3a0e7d56000c6ef7e39726"
 }

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, 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 {focusWithoutScrolling, mergeProps, scrollIntoView, scrollIntoViewport, useEvent, useRouter} from '@react-aria/utils';
-import {getInteractionModality} from '@react-aria/interactions';
-import {isCtrlKeyPressed, 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);
@@ -222,6 +222,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
       }
       case 'Home':
         if (delegate.getFirstKey) {
+          if (manager.focusedKey === null && e.shiftKey) {
+            return;
+          }
           e.preventDefault();
           let firstKey: Key | null = delegate.getFirstKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(firstKey);
@@ -236,6 +239,9 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
         break;
       case 'End':
         if (delegate.getLastKey) {
+          if (manager.focusedKey === null && e.shiftKey) {
+            return;
+          }
           e.preventDefault();
           let lastKey = delegate.getLastKey(manager.focusedKey, isCtrlKeyPressed(e));
           manager.setFocusedKey(lastKey);
@@ -336,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);
           }
         }
@@ -351,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.
@@ -363,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);
         }
 
@@ -385,7 +390,75 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
     }
   };
 
+  // Ref to track whether the first item in the collection should be automatically focused. Specifically used for autocomplete when user types
+  // to focus the first key AFTER the collection updates.
+  // TODO: potentially expand the usage of this
+  let shouldVirtualFocusFirst = useRef(false);
+  // Add event listeners for custom virtual events. These handle updating the focused key in response to various keyboard events
+  // at the autocomplete level
+  // TODO: fix type later
+  useEvent(ref, FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e: any) => {
+    let {detail} = e;
+    e.stopPropagation();
+    manager.setFocused(true);
+
+    // If the user is typing forwards, autofocus the first option in the list.
+    if (detail?.focusStrategy === 'first') {
+      shouldVirtualFocusFirst.current = true;
+    }
+  });
+
+  let updateActiveDescendant = useEffectEvent(() => {
+    let keyToFocus = delegate.getFirstKey?.() ?? null;
+
+    // If no focusable items exist in the list, make sure to clear any activedescendant that may still exist
+    if (keyToFocus == null) {
+      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.
+      if (manager.collection.size > 0) {
+        shouldVirtualFocusFirst.current = false;
+      }
+    } else {
+      manager.setFocusedKey(keyToFocus);
+      // Only set shouldVirtualFocusFirst to false if we've successfully set the first key as the focused key
+      // If there wasn't a key to focus, we might be in a temporary loading state so we'll want to still focus the first key
+      // after the collection updates after load
+      shouldVirtualFocusFirst.current = false;
+    }
+  });
+
+  useUpdateLayoutEffect(() => {
+    if (shouldVirtualFocusFirst.current) {
+      updateActiveDescendant();
+    }
+
+  }, [manager.collection, updateActiveDescendant]);
+
+  let resetFocusFirstFlag = useEffectEvent(() => {
+    // If user causes the focused key to change in any other way, clear shouldVirtualFocusFirst so we don't
+    // accidentally move focus from under them. Skip this if the collection was empty because we might be in a load
+    // state and will still want to focus the first item after load
+    if (manager.collection.size > 0) {
+      shouldVirtualFocusFirst.current = false;
+    }
+  });
+
+  useUpdateLayoutEffect(() => {
+    resetFocusFirstFlag();
+  }, [manager.focusedKey, resetFocusFirstFlag]);
+
+  useEvent(ref, CLEAR_FOCUS_EVENT, !shouldUseVirtualFocus ? undefined : (e: any) => {
+    e.stopPropagation();
+    manager.setFocused(false);
+    if (e.detail?.clearFocusKey) {
+      manager.setFocusedKey(null);
+    }
+  });
+
   const autoFocusRef = useRef(autoFocus);
+  const didAutoFocusRef = useRef(false);
   useEffect(() => {
     if (autoFocusRef.current) {
       let focusedKey: Key | null = null;
@@ -415,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)
@@ -447,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.
@@ -480,17 +558,16 @@ export function useSelectableCollection(options: AriaSelectableCollectionOptions
 
   // If nothing is focused within the collection, make the collection itself tabbable.
   // This will be marshalled to either the first or last item depending on where focus came from.
-  // If using virtual focus, don't set a tabIndex at all so that VoiceOver on iOS 14 doesn't try
-  // to move real DOM focus to the element anyway.
   let tabIndex: number | undefined = undefined;
   if (!shouldUseVirtualFocus) {
     tabIndex = manager.focusedKey == null ? 0 : -1;
   }
 
+  let collectionId = useCollectionId(manager.collection);
   return {
-    collectionProps: {
-      ...handlers,
-      tabIndex
-    }
+    collectionProps: mergeProps(handlers, {
+      tabIndex,
+      'data-collection': collectionId
+    })
   };
 }

package/src/useSelectableItem.ts

@@ -10,15 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMAttributes, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
-import {focusSafely} from '@react-aria/focus';
-import {isCtrlKeyPressed, isNonContiguousSelectionModifier} from './utils';
-import {mergeProps, openLink, useRouter} from '@react-aria/utils';
+import {DOMAttributes, DOMProps, FocusableElement, Key, LongPressEvent, PointerType, PressEvent, RefObject} from '@react-types/shared';
+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 {
+export interface SelectableItemOptions extends DOMProps {
   /**
    * An interface for reading and updating multiple selection state.
    */
@@ -108,6 +108,7 @@ export interface SelectableItemAria extends SelectableItemStates {
  */
 export function useSelectableItem(options: SelectableItemOptions): SelectableItemAria {
   let {
+    id,
     selectionManager: manager,
     key,
     ref,
@@ -120,7 +121,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
     linkBehavior = 'action'
   } = options;
   let router = useRouter();
-
+  id = useId(id);
   let onSelect = (e: PressEvent | LongPressEvent | PointerEvent) => {
     if (e.pointerType === 'keyboard' && isNonContiguousSelectionModifier(e)) {
       manager.toggleSelection(key);
@@ -159,13 +160,20 @@ 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 blur events and immediately sets
+  // aria-activeDescendant in useAutocomplete... I've worked around this for now
   useEffect(() => {
     let isFocused = key === manager.focusedKey;
-    if (isFocused && manager.isFocused && !shouldUseVirtualFocus) {
-      if (focus) {
-        focus();
-      } else if (document.activeElement !== ref.current && ref.current) {
-        focusSafely(ref.current);
+    if (isFocused && manager.isFocused) {
+      if (!shouldUseVirtualFocus) {
+        if (focus) {
+          focus();
+        } else if (document.activeElement !== ref.current && ref.current) {
+          focusSafely(ref.current);
+        }
+      } else {
+        moveVirtualFocus(ref.current);
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -241,7 +249,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       }
     };
 
-    // If allowsDifferentPressOrigin, make selection happen on pressUp (e.g. open menu on press down, selection on menu item happens on press up.)
+    // 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.)
     // Otherwise, have selection happen onPress (prevents listview row selection when clicking on interactable elements in the row)
     if (!allowsDifferentPressOrigin) {
       itemPressProps.onPress = (e) => {
@@ -257,12 +265,16 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       };
     } else {
       itemPressProps.onPressUp = hasPrimaryAction ? undefined : (e) => {
-        if (e.pointerType !== 'keyboard' && allowsSelection) {
+        if (e.pointerType === 'mouse' && allowsSelection) {
           onSelect(e);
         }
       };
 
-      itemPressProps.onPress = hasPrimaryAction ? performAction : undefined;
+      itemPressProps.onPress = hasPrimaryAction ? performAction : (e) => {
+        if (e.pointerType !== 'keyboard' && e.pointerType !== 'mouse' && allowsSelection) {
+          onSelect(e);
+        }
+      };
     }
   } else {
     itemPressProps.onPressStart = (e) => {
@@ -303,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.
@@ -350,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}
+      {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),

package/src/utils.ts

@@ -10,7 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
-import {isAppleDevice, isMac} from '@react-aria/utils';
+import {Collection, Key} from '@react-types/shared';
+import {isAppleDevice, useId} from '@react-aria/utils';
+import {RefObject} from 'react';
 
 interface Event {
   altKey: boolean,
@@ -24,10 +26,22 @@ export function isNonContiguousSelectionModifier(e: Event) {
   return isAppleDevice() ? e.altKey : e.ctrlKey;
 }
 
-export function isCtrlKeyPressed(e: Event) {
-  if (isMac()) {
-    return e.metaKey;
+export function getItemElement(collectionRef: RefObject<HTMLElement | null>, key: Key) {
+  let selector = `[data-key="${CSS.escape(String(key))}"]`;
+  let collection = collectionRef.current?.dataset.collection;
+  if (collection) {
+    selector = `[data-collection="${CSS.escape(collection)}"]${selector}`;
   }
+  return collectionRef.current?.querySelector(selector);
+}
+
+const collectionMap = new WeakMap();
+export function useCollectionId(collection: Collection<any>) {
+  let id = useId();
+  collectionMap.set(collection, id);
+  return id;
+}
 
-  return e.ctrlKey;
+export function getCollectionId(collection: Collection<any>) {
+  return collectionMap.get(collection)!;
 }