@react-aria/selection 3.21.0 → 3.22.0

package/dist/utils.main.js

@@ -6,7 +6,6 @@ function $parcel$export(e, n, v, s) {
 }
 
 $parcel$export(module.exports, "isNonContiguousSelectionModifier", () => $ee0bdf4faa47f2a8$export$d3e3bd3e26688c04);
-$parcel$export(module.exports, "isCtrlKeyPressed", () => $ee0bdf4faa47f2a8$export$16792effe837dba3);
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -23,10 +22,6 @@ 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$16792effe837dba3(e) {
-    if ((0, $gP8Dl$reactariautils.isMac)()) return e.metaKey;
-    return e.ctrlKey;
-}
 
 
 //# 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;AAEO,SAAS,0CAAiB,CAAQ;IACvC,IAAI,CAAA,GAAA,2BAAI,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.main.js.map"}
+{"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"}

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} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,11 +16,7 @@ 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;
-}
 
 
-export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier, $feb5ffebff200149$export$16792effe837dba3 as isCtrlKeyPressed};
+export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier};
 //# 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} from "@react-aria/utils";
 
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -16,11 +16,7 @@ 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;
-}
 
 
-export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier, $feb5ffebff200149$export$16792effe837dba3 as isCtrlKeyPressed};
+export {$feb5ffebff200149$export$d3e3bd3e26688c04 as isNonContiguousSelectionModifier};
 //# 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;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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-aria/selection",
-  "version": "3.21.0",
+  "version": "3.22.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.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",
     "@swc/helpers": "^0.5.0"
   },
   "peerDependencies": {
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "71f0ef23053f9e03ee7e97df736e8b083e006849"
+  "gitHead": "09e7f44bebdc9d89122926b2b439a0a38a2814ea"
 }

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 {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 {isNonContiguousSelectionModifier} from './utils';
 import {MultipleSelectionManager} from '@react-stately/selection';
 import {useLocale} from '@react-aria/i18n';
 import {useTypeSelect} from './useTypeSelect';
@@ -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);
@@ -385,6 +391,76 @@ 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) {
+      ref.current?.dispatchEvent(
+        new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
+          cancelable: true,
+          bubbles: true
+        })
+      );
+
+      // 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) => {
+    e.stopPropagation();
+    manager.setFocused(false);
+    manager.setFocusedKey(null);
+  });
+
   const autoFocusRef = useRef(autoFocus);
   useEffect(() => {
     if (autoFocusRef.current) {
@@ -480,11 +556,11 @@ 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;
+  } else {
+    tabIndex = -1;
   }
 
   return {

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 {DOMAttributes, DOMProps, 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 {isCtrlKeyPressed, mergeProps, openLink, UPDATE_ACTIVEDESCENDANT, useId, useRouter} from '@react-aria/utils';
+import {isNonContiguousSelectionModifier} from './utils';
 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,25 @@ 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
+  // 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 {
+        let updateActiveDescendant = new CustomEvent(UPDATE_ACTIVEDESCENDANT, {
+          cancelable: true,
+          bubbles: true
+        });
+
+        ref.current?.dispatchEvent(updateActiveDescendant);
       }
     }
   // eslint-disable-next-line react-hooks/exhaustive-deps
@@ -241,7 +254,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 +270,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) => {
@@ -352,7 +369,7 @@ export function useSelectableItem(options: SelectableItemOptions): SelectableIte
       itemProps,
       allowsSelection || hasPrimaryAction ? pressProps : {},
       longPressEnabled ? longPressProps : {},
-      {onDoubleClick, onDragStartCapture, onClick}
+      {onDoubleClick, onDragStartCapture, onClick, id}
     ),
     isPressed,
     isSelected: manager.isSelected(key),

package/src/utils.ts

@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {isAppleDevice, isMac} from '@react-aria/utils';
+import {isAppleDevice} from '@react-aria/utils';
 
 interface Event {
   altKey: boolean,
@@ -23,11 +23,3 @@ export function isNonContiguousSelectionModifier(e: Event) {
   // On Windows and Ubuntu, Alt + Space has a system wide meaning.
   return isAppleDevice() ? e.altKey : e.ctrlKey;
 }
-
-export function isCtrlKeyPressed(e: Event) {
-  if (isMac()) {
-    return e.metaKey;
-  }
-
-  return e.ctrlKey;
-}