@react-aria/gridlist - npm Package Compare versions

Comparing version 3.4.1-nightly.3940 to 3.4.1-nightly.3943

dist/main.js

@@ -6,2 +6,3 @@ var $dSFus$reactariautils = require("@react-aria/utils");
 var $dSFus$reactariainteractions = require("@react-aria/interactions");
+var $dSFus$react = require("react");
 var $dSFus$reactariai18n = require("@react-aria/i18n");
@@ -125,2 +126,3 @@
 
+
 function $f7116f5928c03f32$export$9610e69494fadfd2(props, state, ref) {
@@ -132,6 +134,9 @@ // Copied from useGridCell + some modifications to make it not so grid specific
     let descriptionId = (0, $dSFus$reactariautils.useSlotId)();
+    // We need to track the key of the item at the time it was last focused so that we force
+    // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
+    let keyWhenFocused = (0, $dSFus$react.useRef)(null);
     let focus = ()=>{
         // Don't shift focus to the row if the active element is a element within the row already
         // (e.g. clicking on a row button)
-        if (!ref.current.contains(document.activeElement)) (0, $dSFus$reactariafocus.focusSafely)(ref.current);
+        if (keyWhenFocused.current != null && node.key !== keyWhenFocused.current || !ref.current.contains(document.activeElement)) (0, $dSFus$reactariafocus.focusSafely)(ref.current);
     };
@@ -230,2 +235,3 @@ let { itemProps: itemProps , ...itemStates } = (0, $dSFus$reactariaselection.useSelectableItem)({
     let onFocus = (e)=>{
+        keyWhenFocused.current = node.key;
         if (e.target !== ref.current) {
@@ -232,0 +238,0 @@ // useSelectableItem only handles setting the focused key when

dist/module.js

@@ -6,2 +6,3 @@ import {useId as $13Gtr$useId, filterDOMProps as $13Gtr$filterDOMProps, mergeProps as $13Gtr$mergeProps, useSlotId as $13Gtr$useSlotId, scrollIntoViewport as $13Gtr$scrollIntoViewport, getScrollParent as $13Gtr$getScrollParent} from "@react-aria/utils";
 import {isFocusVisible as $13Gtr$isFocusVisible} from "@react-aria/interactions";
+import {useRef as $13Gtr$useRef} from "react";
 import {useLocale as $13Gtr$useLocale} from "@react-aria/i18n";
@@ -118,2 +119,3 @@
 
+
 function $4e8b0456ef72939f$export$9610e69494fadfd2(props, state, ref) {
@@ -125,6 +127,9 @@ // Copied from useGridCell + some modifications to make it not so grid specific
     let descriptionId = (0, $13Gtr$useSlotId)();
+    // We need to track the key of the item at the time it was last focused so that we force
+    // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
+    let keyWhenFocused = (0, $13Gtr$useRef)(null);
     let focus = ()=>{
         // Don't shift focus to the row if the active element is a element within the row already
         // (e.g. clicking on a row button)
-        if (!ref.current.contains(document.activeElement)) (0, $13Gtr$focusSafely)(ref.current);
+        if (keyWhenFocused.current != null && node.key !== keyWhenFocused.current || !ref.current.contains(document.activeElement)) (0, $13Gtr$focusSafely)(ref.current);
     };
@@ -223,2 +228,3 @@ let { itemProps: itemProps , ...itemStates } = (0, $13Gtr$useSelectableItem)({
     let onFocus = (e)=>{
+        keyWhenFocused.current = node.key;
         if (e.target !== ref.current) {
@@ -225,0 +231,0 @@ // useSelectableItem only handles setting the focused key when

package.json

 {
   "name": "@react-aria/gridlist",
-  "version": "3.4.1-nightly.3940+b1545c0d2",
+  "version": "3.4.1-nightly.3943+06e63d3ae",
   "description": "Spectrum UI components in React",
@@ -25,11 +25,11 @@ "license": "Apache-2.0",
   "dependencies": {
-    "@react-aria/focus": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/grid": "3.7.2-nightly.3940+b1545c0d2",
-    "@react-aria/i18n": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/interactions": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/selection": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-aria/utils": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-stately/list": "3.8.2-nightly.3940+b1545c0d2",
-    "@react-types/checkbox": "3.0.0-nightly.2238+b1545c0d2",
-    "@react-types/shared": "3.0.0-nightly.2238+b1545c0d2",
+    "@react-aria/focus": "3.0.0-nightly.2241+06e63d3ae",
+    "@react-aria/grid": "3.7.2-nightly.3943+06e63d3ae",
+    "@react-aria/i18n": "3.0.0-nightly.2241+06e63d3ae",
+    "@react-aria/interactions": "3.0.0-nightly.2241+06e63d3ae",
+    "@react-aria/selection": "3.0.0-nightly.2241+06e63d3ae",
+    "@react-aria/utils": "3.0.0-nightly.2241+06e63d3ae",
+    "@react-stately/list": "3.8.2-nightly.3943+06e63d3ae",
+    "@react-types/checkbox": "3.0.0-nightly.2241+06e63d3ae",
+    "@react-types/shared": "3.0.0-nightly.2241+06e63d3ae",
     "@swc/helpers": "^0.4.14"
@@ -43,3 +43,3 @@ },
   },
-  "gitHead": "b1545c0d225b12672fb6a4e7b787268591d66b90"
+  "gitHead": "06e63d3ae7898b8cd81fdb6fa87b763faf2054bf"
 }

src/useGridListItem.ts

@@ -19,3 +19,3 @@ /*
 import type {ListState} from '@react-stately/list';
-import {KeyboardEvent as ReactKeyboardEvent, RefObject} from 'react';
+import {KeyboardEvent as ReactKeyboardEvent, RefObject, useRef} from 'react';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
@@ -59,6 +59,13 @@ import {useLocale} from '@react-aria/i18n';
   let descriptionId = useSlotId();
+
+  // We need to track the key of the item at the time it was last focused so that we force
+  // focus to go to the item when the DOM node is reused for a different item in a virtualizer.
+  let keyWhenFocused = useRef(null);
   let focus = () => {
     // Don't shift focus to the row if the active element is a element within the row already
     // (e.g. clicking on a row button)
-    if (!ref.current.contains(document.activeElement)) {
+    if (
+      (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
+      !ref.current.contains(document.activeElement)
+    ) {
       focusSafely(ref.current);
@@ -160,2 +167,3 @@ }
   let onFocus = (e) => {
+    keyWhenFocused.current = node.key;
     if (e.target !== ref.current) {
@@ -162,0 +170,0 @@ // useSelectableItem only handles setting the focused key when

New alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Fixed alerts

Manifest confusion

Supply chain risk

This package has inconsistent metadata. This could be malicious or caused by an error when publishing the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

125202

increased by2.17%

Lines of code

1304

increased by1.72%

Dependency changes

• Updated@react-aria/focus@3.0.0-nightly.2241+06e63d3ae

• Updated@react-aria/grid@3.7.2-nightly.3943+06e63d3ae

• Updated@react-aria/i18n@3.0.0-nightly.2241+06e63d3ae

• Updated@react-aria/interactions@3.0.0-nightly.2241+06e63d3ae

• Updated@react-aria/selection@3.0.0-nightly.2241+06e63d3ae

• Updated@react-aria/utils@3.0.0-nightly.2241+06e63d3ae

• Updated@react-stately/list@3.8.2-nightly.3943+06e63d3ae

• Updated@react-types/checkbox@3.0.0-nightly.2241+06e63d3ae

• Updated@react-types/shared@3.0.0-nightly.2241+06e63d3ae