refactor: Simplify iterNodes implementation

Moved the filter logic from the JS loop into the
native TreeWalker implementation. Aside from a
potential performance boost, the code is easier
to grok.

Dropped support for digging into open shadow roots
which was a workaround for igc-radios created inside
another ShadowDOM boundry. Radios will now try to
resolve their siblings based on their rootNode scope
instead of the main document root.

Author: rkaraivanov

src/components/common/mixins/combo-box.ts

@@ -115,18 +115,20 @@ export abstract class IgcBaseComboBoxLikeComponent extends LitElement {
 }
 
 export function getItems<T extends HTMLElement>(root: Node, tagName: string) {
-  return iterNodes<T>(root, 'SHOW_ELEMENT', (item) => item.matches(tagName));
+  return iterNodes<T>(root, {
+    show: 'SHOW_ELEMENT',
+    filter: (item) => item.matches(tagName),
+  });
 }
 
 export function getActiveItems<T extends HTMLElement & { disabled: boolean }>(
   root: Node,
   tagName: string
 ) {
-  return iterNodes<T>(
-    root,
-    'SHOW_ELEMENT',
-    (item) => item.matches(tagName) && !item.disabled
-  );
+  return iterNodes<T>(root, {
+    show: 'SHOW_ELEMENT',
+    filter: (item) => item.matches(tagName) && !item.disabled,
+  });
 }
 
 export function getNextActiveItem<

src/components/common/util.ts

@@ -110,36 +110,40 @@ export function isDefined<T = unknown>(value: T) {
   return value !== undefined;
 }
 
-export function* iterNodes<T = Node>(
+export type IterNodesOptions<T = Node> = {
+  show?: keyof typeof NodeFilter;
+  filter?: (node: T) => boolean;
+};
+
+function createNodeFilter<T extends Node>(predicate: (node: T) => boolean) {
+  return {
+    acceptNode: (node: T): number =>
+      !predicate || predicate(node)
+        ? NodeFilter.FILTER_ACCEPT
+        : NodeFilter.FILTER_SKIP,
+  };
+}
+
+export function* iterNodes<T extends Node>(
   root: Node,
-  whatToShow?: keyof typeof NodeFilter,
-  filter?: (node: T) => boolean
+  options?: IterNodesOptions<T>
 ): Generator<T> {
   if (!isDefined(globalThis.document)) {
     return;
   }
 
-  const iter = globalThis.document.createTreeWalker(
-    root,
-    NodeFilter[whatToShow ?? 'SHOW_ALL']
-  );
-
-  let node = iter.nextNode() as T;
+  const whatToShow = options?.show
+    ? NodeFilter[options.show]
+    : NodeFilter.SHOW_ALL;
 
-  while (node) {
-    if (filter) {
-      if (filter(node)) {
-        yield node;
-      }
-    } else {
-      yield node;
-    }
+  const nodeFilter = options?.filter
+    ? createNodeFilter(options.filter)
+    : undefined;
 
-    if (isElement(node) && node.shadowRoot && node.shadowRoot.mode === 'open') {
-      yield* iterNodes(node.shadowRoot, whatToShow, filter);
-    }
+  const treeWalker = document.createTreeWalker(root, whatToShow, nodeFilter);
 
-    node = iter.nextNode() as T;
+  while (treeWalker.nextNode()) {
+    yield treeWalker.currentNode as T;
   }
 }
 

src/components/radio/utils.ts

@@ -1,4 +1,4 @@
-import { iterNodes } from '../common/util.js';
+import { type IterNodesOptions, getRoot, iterNodes } from '../common/util.js';
 import type IgcRadioComponent from './radio.js';
 
 type RadioQueryResult = {
@@ -36,13 +36,13 @@ export function getGroup(member: IgcRadioComponent) {
     return result;
   }
 
-  const iterator = iterNodes<IgcRadioComponent>(
-    globalThis.document.documentElement,
-    'SHOW_ELEMENT',
-    (radio) => radio.matches(member.tagName) && radio.name === member.name
-  );
+  const options: IterNodesOptions<IgcRadioComponent> = {
+    show: 'SHOW_ELEMENT',
+    filter: (radio) =>
+      radio.matches(member.tagName) && radio.name === member.name,
+  };
 
-  for (const each of iterator) {
+  for (const each of iterNodes<IgcRadioComponent>(getRoot(member), options)) {
     result.radios.push(each);
 
     if (!each.disabled) {