@react-aria/selection - npm Package Compare versions

Comparing version 3.3.2 to 3.4.0

dist/main.js

 var {
+  useLocale,
   useCollator
@@ -54,3 +55,6 @@ } = require("@react-aria/i18n");
       e.preventDefault();
-      e.stopPropagation();
+
+      if (!('continuePropagation' in e)) {
+        e.stopPropagation();
+      }
     }
@@ -126,4 +130,8 @@
     disallowTypeAhead = false,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation = false
   } = options;
+  let {
+    direction
+  } = useLocale();
 
@@ -204,3 +212,3 @@ let onKeyDown = e => {
             if (nextKey != null) {
-              manager.setFocusedKey(nextKey);
+              manager.setFocusedKey(nextKey, direction === 'rtl' ? 'first' : 'last');
 
@@ -227,3 +235,3 @@ if (manager.selectionMode === 'single' && selectOnFocus) {
             if (nextKey != null) {
-              manager.setFocusedKey(nextKey);
+              manager.setFocusedKey(nextKey, direction === 'rtl' ? 'last' : 'first');
 
@@ -328,31 +336,33 @@ if (manager.selectionMode === 'single' && selectOnFocus) {
         {
-          // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
-          // However, collections should be treated as a single tab stop, with arrow key navigation internally.
-          // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
-          // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
-          // in the collection, so that the browser default behavior will apply starting from that element
-          // rather than the currently focused one.
-          if (e.shiftKey) {
-            ref.current.focus();
-          } else {
-            let walker = getFocusableTreeWalker(ref.current, {
-              tabbable: true
-            });
-            let next;
-            let last;
+          if (!allowsTabNavigation) {
+            // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
+            // However, collections should be treated as a single tab stop, with arrow key navigation internally.
+            // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
+            // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
+            // in the collection, so that the browser default behavior will apply starting from that element
+            // rather than the currently focused one.
+            if (e.shiftKey) {
+              ref.current.focus();
+            } else {
+              let walker = getFocusableTreeWalker(ref.current, {
+                tabbable: true
+              });
+              let next;
+              let last;
 
-            do {
-              last = walker.lastChild();
+              do {
+                last = walker.lastChild();
 
-              if (last) {
-                next = last;
+                if (last) {
+                  next = last;
+                }
+              } while (last);
+
+              if (next && !next.contains(document.activeElement)) {
+                next.focus();
               }
-            } while (last);
+            }
 
-            if (next && !next.contains(document.activeElement)) {
-              next.focus();
-            }
+            break;
           }
-
-          break;
         }
@@ -436,3 +446,3 @@ }
     // to the cell below, and not open a menu.
-    onKeyDownCapture: onKeyDown,
+    onKeyDown,
     onFocus,
@@ -503,3 +513,3 @@ onBlur,
     }
-  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus]); // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
+  }, [ref, isFocused, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]); // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver
@@ -729,3 +739,4 @@ // on iOS 14 doesn't try to move real DOM focus to the item anyway.
     disallowTypeAhead,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation
   } = props; // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
@@ -761,3 +772,4 @@ // When virtualized, the layout object will be passed in as a prop and override this.
     disallowTypeAhead,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation
   });
@@ -764,0 +776,0 @@ return {

dist/module.js

@@ -1,2 +0,2 @@
-import { useCollator } from "@react-aria/i18n";
+import { useLocale, useCollator } from "@react-aria/i18n";
 import { isMac, mergeProps } from "@react-aria/utils";
@@ -34,3 +34,6 @@ import { focusSafely, getFocusableTreeWalker } from "@react-aria/focus";
       e.preventDefault();
-      e.stopPropagation();
+
+      if (!('continuePropagation' in e)) {
+        e.stopPropagation();
+      }
     }
@@ -104,4 +107,8 @@
     disallowTypeAhead = false,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation = false
   } = options;
+  let {
+    direction
+  } = useLocale();
 
@@ -182,3 +189,3 @@ let onKeyDown = e => {
             if (nextKey != null) {
-              manager.setFocusedKey(nextKey);
+              manager.setFocusedKey(nextKey, direction === 'rtl' ? 'first' : 'last');
 
@@ -205,3 +212,3 @@ if (manager.selectionMode === 'single' && selectOnFocus) {
             if (nextKey != null) {
-              manager.setFocusedKey(nextKey);
+              manager.setFocusedKey(nextKey, direction === 'rtl' ? 'last' : 'first');
 
@@ -306,31 +313,33 @@ if (manager.selectionMode === 'single' && selectOnFocus) {
         {
-          // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
-          // However, collections should be treated as a single tab stop, with arrow key navigation internally.
-          // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
-          // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
-          // in the collection, so that the browser default behavior will apply starting from that element
-          // rather than the currently focused one.
-          if (e.shiftKey) {
-            ref.current.focus();
-          } else {
-            let walker = getFocusableTreeWalker(ref.current, {
-              tabbable: true
-            });
-            let next;
-            let last;
+          if (!allowsTabNavigation) {
+            // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
+            // However, collections should be treated as a single tab stop, with arrow key navigation internally.
+            // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
+            // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
+            // in the collection, so that the browser default behavior will apply starting from that element
+            // rather than the currently focused one.
+            if (e.shiftKey) {
+              ref.current.focus();
+            } else {
+              let walker = getFocusableTreeWalker(ref.current, {
+                tabbable: true
+              });
+              let next;
+              let last;
 
-            do {
-              last = walker.lastChild();
+              do {
+                last = walker.lastChild();
 
-              if (last) {
-                next = last;
+                if (last) {
+                  next = last;
+                }
+              } while (last);
+
+              if (next && !next.contains(document.activeElement)) {
+                next.focus();
               }
-            } while (last);
+            }
 
-            if (next && !next.contains(document.activeElement)) {
-              next.focus();
-            }
+            break;
           }
-
-          break;
         }
@@ -414,3 +423,3 @@ }
     // to the cell below, and not open a menu.
-    onKeyDownCapture: onKeyDown,
+    onKeyDown,
     onFocus,
@@ -479,3 +488,3 @@ onBlur,
     }
-  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus]); // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
+  }, [ref, isFocused, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]); // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused
   // item is tabbable.  If using virtual focus, don't set a tabIndex at all so that VoiceOver
@@ -701,3 +710,4 @@ // on iOS 14 doesn't try to move real DOM focus to the item anyway.
     disallowTypeAhead,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation
   } = props; // By default, a KeyboardDelegate is provided which uses the DOM to query layout information (e.g. for page up/page down).
@@ -733,3 +743,4 @@ // When virtualized, the layout object will be passed in as a prop and override this.
     disallowTypeAhead,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation
   });
@@ -736,0 +747,0 @@ return {

dist/types.d.ts

@@ -76,2 +76,6 @@ import { HTMLAttributes, Key, RefObject } from "react";
     shouldUseVirtualFocus?: boolean;
+    /**
+     * Whether navigation through tab key is enabled.
+     */
+    allowsTabNavigation?: boolean;
 }
@@ -191,2 +195,6 @@ interface SelectableCollectionAria {
     shouldUseVirtualFocus?: boolean;
+    /**
+     * Whether navigation through tab key is enabled.
+     */
+    allowsTabNavigation?: boolean;
 }
@@ -193,0 +201,0 @@ interface SelectableListAria {

package.json

 {
   "name": "@react-aria/selection",
-  "version": "3.3.2",
+  "version": "3.4.0",
   "description": "Spectrum UI components in React",
@@ -21,9 +21,9 @@ "license": "Apache-2.0",
     "@babel/runtime": "^7.6.2",
-    "@react-aria/focus": "^3.2.3",
+    "@react-aria/focus": "^3.2.4",
     "@react-aria/i18n": "^3.3.0",
-    "@react-aria/interactions": "^3.3.3",
-    "@react-aria/utils": "^3.6.0",
-    "@react-stately/collections": "^3.3.0",
-    "@react-stately/selection": "^3.3.0",
-    "@react-types/shared": "^3.4.0"
+    "@react-aria/interactions": "^3.3.4",
+    "@react-aria/utils": "^3.7.0",
+    "@react-stately/collections": "^3.3.1",
+    "@react-stately/selection": "^3.4.0",
+    "@react-types/shared": "^3.5.0"
   },
@@ -36,3 +36,3 @@ "peerDependencies": {
   },
-  "gitHead": "7f9dc7fa5144679d2dc733170cb5c1f40d0c5ee5"
+  "gitHead": "9920ffaa2596a03c4498a15cb940bd2f4ba5cd6a"
 }

src/useSelectableCollection.ts

@@ -18,2 +18,3 @@ /*
 import {MultipleSelectionManager} from '@react-stately/selection';
+import {useLocale} from '@react-aria/i18n';
 import {useTypeSelect} from './useTypeSelect';
@@ -75,3 +76,7 @@
    */
-  shouldUseVirtualFocus?: boolean
+  shouldUseVirtualFocus?: boolean,
+  /**
+   * Whether navigation through tab key is enabled.
+   */
+  allowsTabNavigation?: boolean
 }
@@ -98,4 +103,6 @@
     disallowTypeAhead = false,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation = false
   } = options;
+  let {direction} = useLocale();
 
@@ -168,3 +175,3 @@ let onKeyDown = (e: KeyboardEvent) => {
           if (nextKey != null) {
-            manager.setFocusedKey(nextKey);
+            manager.setFocusedKey(nextKey, direction === 'rtl' ? 'first' : 'last');
             if (manager.selectionMode === 'single' && selectOnFocus) {
@@ -185,3 +192,3 @@ manager.replaceSelection(nextKey);
           if (nextKey != null) {
-            manager.setFocusedKey(nextKey);
+            manager.setFocusedKey(nextKey, direction === 'rtl' ? 'last' : 'first');
             if (manager.selectionMode === 'single' && selectOnFocus) {
@@ -260,26 +267,28 @@ manager.replaceSelection(nextKey);
       case 'Tab': {
-        // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
-        // However, collections should be treated as a single tab stop, with arrow key navigation internally.
-        // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
-        // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
-        // in the collection, so that the browser default behavior will apply starting from that element
-        // rather than the currently focused one.
-        if (e.shiftKey) {
-          ref.current.focus();
-        } else {
-          let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
-          let next: HTMLElement;
-          let last: HTMLElement;
-          do {
-            last = walker.lastChild() as HTMLElement;
-            if (last) {
-              next = last;
+        if (!allowsTabNavigation) {
+          // There may be elements that are "tabbable" inside a collection (e.g. in a grid cell).
+          // However, collections should be treated as a single tab stop, with arrow key navigation internally.
+          // We don't control the rendering of these, so we can't override the tabIndex to prevent tabbing.
+          // Instead, we handle the Tab key, and move focus manually to the first/last tabbable element
+          // in the collection, so that the browser default behavior will apply starting from that element
+          // rather than the currently focused one.
+          if (e.shiftKey) {
+            ref.current.focus();
+          } else {
+            let walker = getFocusableTreeWalker(ref.current, {tabbable: true});
+            let next: HTMLElement;
+            let last: HTMLElement;
+            do {
+              last = walker.lastChild() as HTMLElement;
+              if (last) {
+                next = last;
+              }
+            } while (last);
+
+            if (next && !next.contains(document.activeElement)) {
+              next.focus();
             }
-          } while (last);
-
-          if (next && !next.contains(document.activeElement)) {
-            next.focus();
           }
+          break;
         }
-        break;
       }
@@ -358,3 +367,3 @@ }
     // to the cell below, and not open a menu.
-    onKeyDownCapture: onKeyDown,
+    onKeyDown,
     onFocus,
@@ -361,0 +370,0 @@ onBlur,

src/useSelectableItem.ts

@@ -84,3 +84,3 @@ /*
     }
-  }, [ref, isFocused, manager.focusedKey, manager.isFocused, shouldUseVirtualFocus]);
+  }, [ref, isFocused, manager.focusedKey, manager.childFocusStrategy, manager.isFocused, shouldUseVirtualFocus]);
 
@@ -87,0 +87,0 @@ // Set tabIndex to 0 if the element is focused, or -1 otherwise so that only the last focused

src/useSelectableList.ts

@@ -73,3 +73,7 @@ /*
    */
-  shouldUseVirtualFocus?: boolean
+  shouldUseVirtualFocus?: boolean,
+  /**
+   * Whether navigation through tab key is enabled.
+   */
+  allowsTabNavigation?: boolean
 }
@@ -100,3 +104,4 @@
     disallowTypeAhead,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation
   } = props;
@@ -129,3 +134,4 @@
     disallowTypeAhead,
-    shouldUseVirtualFocus
+    shouldUseVirtualFocus,
+    allowsTabNavigation
   });
@@ -132,0 +138,0 @@

src/useTypeSelect.ts

@@ -61,3 +61,5 @@ /*
       e.preventDefault();
-      e.stopPropagation();
+      if (!('continuePropagation' in e)) {
+        e.stopPropagation();
+      }
     }
@@ -64,0 +66,0 @@

No alert changes

Improved metrics

Total package byte prevSize

202101

1.85%

Lines of code

2350

2%

Dependency changes

• Updated

  @react-aria/focus@^3.2.4

• Updated

  @react-aria/interactions@^3.3.4

• Updated

  @react-aria/utils@^3.7.0

• Updated

  @react-stately/collections@^3.3.1

• Updated

  @react-stately/selection@^3.4.0

• Updated

  @react-types/shared@^3.5.0