@primer/react 38.6.3-rc.16be9114c → 38.6.3-rc.9e02ccb41

package/CHANGELOG.md

@@ -11,6 +11,12 @@
   Split AutocompleteContext into separate contexts for static values, setters, and dynamic state.
   Components now subscribe only to the context slices they need, reducing re-renders.
 
+- [#7342](https://github.com/primer/react/pull/7342) [`a8b42b2`](https://github.com/primer/react/commit/a8b42b2e4cff9575eae8df897e64c1ca67ee180a) Thanks [@mattcosta7](https://github.com/mattcosta7)! - perf(hasInteractiveNodes): Optimize with combined selector and early attribute checks
+
+  - Use combined querySelectorAll selector instead of recursive traversal
+  - Check attribute-based states (disabled, hidden, inert) before getComputedStyle
+  - Only call getComputedStyle when CSS-based visibility check is needed
+
 ## 38.6.2
 
 ### Patch Changes

package/dist/internal/utils/hasInteractiveNodes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hasInteractiveNodes.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/hasInteractiveNodes.ts"],"names":[],"mappings":"AAwBA;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,WAUxF"}
+{"version":3,"file":"hasInteractiveNodes.d.ts","sourceRoot":"","sources":["../../../src/internal/utils/hasInteractiveNodes.ts"],"names":[],"mappings":"AA2BA;;;;;;;;GAQG;AACH,wBAAgB,mBAAmB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,EAAE,WAAW,CAAC,EAAE,WAAW,EAAE,WAkBxF"}

package/dist/internal/utils/hasInteractiveNodes.js

@@ -7,6 +7,9 @@ const nonValidSelectors = {
 const interactiveElementsSelectors = [`a[href]`, `button`, 'summary', 'select', 'input:not([type=hidden])', 'textarea', '[tabindex="0"]', `audio[controls]`, `video[controls]`, `[contenteditable]`];
 const interactiveElements = interactiveElementsSelectors.map(selector => `${selector}:not(${Object.values(nonValidSelectors).join('):not(')})`);
 
+// Combined selector for fast querySelector check
+const interactiveSelector = interactiveElements.join(', ');
+
 /**
  * Finds interactive nodes within the passed node.
  * If the node itself is interactive, or children within are, it will return true.
@@ -23,26 +26,29 @@ function hasInteractiveNodes(node, ignoreNodes) {
   // If one does exist, we can abort early.
 
   const nodesToIgnore = [node];
-  const interactiveNodes = findInteractiveChildNodes(node, nodesToIgnore);
-  return Boolean(interactiveNodes);
+
+  // Performance optimization: Use querySelectorAll with combined selector first
+  // This avoids recursive getComputedStyle calls for each node
+  const candidates = node.querySelectorAll(interactiveSelector);
+  for (const candidate of candidates) {
+    if (!nodesToIgnore.includes(candidate) && !isNonValidInteractiveNode(candidate)) {
+      return true;
+    }
+  }
+  return false;
 }
+
+// Note: Only call getComputedStyle when CSS-based checks are insufficient
 function isNonValidInteractiveNode(node) {
-  const nodeStyle = getComputedStyle(node);
+  // Fast path: Check attribute-based states first (no style recalc needed)
   const isNonInteractive = node.matches('[disabled], [hidden], [inert]');
+  if (isNonInteractive) return true;
+
+  // Only call getComputedStyle if attribute checks passed
+  // This is necessary for display:none and visibility:hidden which aren't detectable via attributes
+  const nodeStyle = getComputedStyle(node);
   const isHiddenVisually = nodeStyle.display === 'none' || nodeStyle.visibility === 'hidden';
-  return isNonInteractive || isHiddenVisually;
-}
-function findInteractiveChildNodes(node, ignoreNodes) {
-  if (!node) return;
-  const ignoreSelector = ignoreNodes.find(elem => elem === node);
-  const isNotValidNode = isNonValidInteractiveNode(node);
-  if (node.matches(interactiveElements.join(', ')) && !ignoreSelector && !isNotValidNode) {
-    return node;
-  }
-  for (const child of node.children) {
-    const interactiveNode = findInteractiveChildNodes(child, ignoreNodes);
-    if (interactiveNode) return true;
-  }
+  return isHiddenVisually;
 }
 
 export { hasInteractiveNodes };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@primer/react",
   "type": "module",
-  "version": "38.6.3-rc.16be9114c",
+  "version": "38.6.3-rc.9e02ccb41",
   "description": "An implementation of GitHub's Primer Design System using React",
   "main": "./dist/index.js",
   "module": "./dist/index.js",