refactor: leverage native iterators and improve type inference

- This PR cleans up several utility functions in the codebase by replacing
hand-rolled implementations with native ECMAScript iterator helpers.
- Improved type inference in the `findElementFromEventPath` function.
- Replaced and removed the `createCounter` function with module-level counters.

Author: rkaraivanov

src/components/button-group/button-group.ts

@@ -167,7 +167,7 @@ export default class IgcButtonGroupComponent extends EventEmitterMixin<
   }
 
   private handleClick(event: MouseEvent) {
-    const button = findElementFromEventPath<IgcToggleButtonComponent>(
+    const button = findElementFromEventPath(
       IgcToggleButtonComponent.tagName,
       event
     );

src/components/calendar/days-view/days-view.ts

@@ -9,13 +9,7 @@ import { registerComponent } from '../../common/definitions/register.js';
 import type { Constructor } from '../../common/mixins/constructor.js';
 import { EventEmitterMixin } from '../../common/mixins/event-emitter.js';
 import { partMap } from '../../common/part-map.js';
-import {
-  addSafeEventListener,
-  chunk,
-  first,
-  last,
-  take,
-} from '../../common/util.js';
+import { addSafeEventListener, chunk, first, last } from '../../common/util.js';
 import { IgcCalendarBaseComponent } from '../base.js';
 import {
   areSameMonth,
@@ -500,26 +494,25 @@ export default class IgcDaysViewComponent extends EventEmitterMixin<
     const aria = getDateFormatter().getIntlFormatter(this.locale, {
       weekday: 'long',
     });
-    const days = take(
-      generateMonth(this._activeDate, this._firstDayOfWeek),
-      DAYS_IN_WEEK
-    );
 
     const weekNumber = this.showWeekNumbers
       ? this._renderHeaderWeekNumber()
       : nothing;
 
-    const headers = days.map(
-      (day) => html`
-        <span
-          role="columnheader"
-          part="label"
-          aria-label=${aria.format(day.native)}
-        >
-          <span part="label-inner">${label.format(day.native)}</span>
-        </span>
-      `
-    );
+    const headers = generateMonth(this._activeDate, this._firstDayOfWeek)
+      .take(DAYS_IN_WEEK)
+      .map(
+        (day) => html`
+          <span
+            role="columnheader"
+            part="label"
+            aria-label=${aria.format(day.native)}
+          >
+            <span part="label-inner">${label.format(day.native)}</span>
+          </span>
+        `
+      )
+      .toArray();
 
     return html`
       <div role="row" part="days-row first">${weekNumber}${headers}</div>

src/components/calendar/helpers.ts

@@ -154,7 +154,10 @@ export function convertToDates(
  * Returns the value of the selected/activated element (day/month/year) in the calendar view.
  */
 export function getViewElement(event: Event): number {
-  const element = findElementFromEventPath<HTMLElement>('[data-value]', event);
+  const element = findElementFromEventPath(
+    '[data-value]',
+    event
+  ) as HTMLElement;
   return element ? asNumber(element.dataset.value, -1) : -1;
 }
 

src/components/carousel/carousel.ts

@@ -501,7 +501,7 @@ export default class IgcCarouselComponent extends EventEmitterMixin<
   }
 
   private async _handleIndicatorClick(event: PointerEvent): Promise<void> {
-    const indicator = findElementFromEventPath<IgcCarouselIndicatorComponent>(
+    const indicator = findElementFromEventPath(
       IgcCarouselIndicatorComponent.tagName,
       event
     )!;

src/components/combo/combo-item.ts

@@ -10,7 +10,7 @@ import { styles } from './themes/combo-item.base.css.js';
 
 /* blazorSuppress */
 export default class IgcComboItemComponent extends LitElement {
-  public static readonly tagName: string = 'igc-combo-item';
+  public static readonly tagName = 'igc-combo-item';
   public static override styles = [styles, shared];
 
   /* blazorSuppress */

src/components/combo/combo.ts

@@ -821,7 +821,7 @@ export default class IgcComboComponent<
 
   protected itemClickHandler(event: PointerEvent) {
     this._setTouchedState();
-    const target = findElementFromEventPath<IgcComboItemComponent>(
+    const target = findElementFromEventPath(
       IgcComboItemComponent.tagName,
       event
     );

src/components/common/util.ts

@@ -24,14 +24,6 @@ export function numberInRangeInclusive(
   return value >= min && value <= max;
 }
 
-export function createCounter() {
-  let i = 0;
-  return () => {
-    i++;
-    return i;
-  };
-}
-
 /**
  * Returns whether an element has a Left-to-Right directionality.
  */
@@ -153,19 +145,25 @@ export function isElement(node: unknown): node is Element {
   return node instanceof Node && node.nodeType === Node.ELEMENT_NODE;
 }
 
-export function getElementsFromEventPath<T extends Element>(event: Event) {
-  return event.composedPath().filter((item) => isElement(item)) as T[];
-}
-
+export function findElementFromEventPath<K extends keyof HTMLElementTagNameMap>(
+  predicate: K,
+  event: Event
+): HTMLElementTagNameMap[K] | undefined;
 export function findElementFromEventPath<T extends Element>(
   predicate: string | ((element: Element) => boolean),
   event: Event
+): T | undefined;
+export function findElementFromEventPath(
+  predicate: string | ((element: Element) => boolean),
+  event: Event
 ) {
   const func = isString(predicate)
     ? (e: Element) => e.matches(predicate)
     : (e: Element) => predicate(e);
 
-  return getElementsFromEventPath(event).find(func) as T | undefined;
+  return Iterator.from(event.composedPath()).find(
+    (item) => isElement(item) && func(item)
+  ) as Element | undefined;
 }
 
 export function first<T>(arr: T[]) {
@@ -181,44 +179,27 @@ export function modulo(n: number, d: number) {
 }
 
 /**
- * Creates an array of `n` elements from a given iterator.
- *
- */
-export function take<T>(iterable: IterableIterator<T>, n: number) {
-  const result: T[] = [];
-  let i = 0;
-  let current = iterable.next();
-
-  while (i < n && !current.done) {
-    result.push(current.value);
-    current = iterable.next();
-    i++;
-  }
-
-  return result;
-}
-
-/**
- * Splits an array into chunks of length `size` and returns a generator
- * yielding each chunk.
- * The last chunk may contain less than `size` elements.
+ * Splits an array into chunks of a specified size and returns a generator that yields each chunk.
  *
  * @example
  * ```typescript
- * const arr = [0,1,2,3,4,5,6,7,8,9];
- *
- * Array.from(chunk(arr, 2)) // [[0, 1], [2, 3], [4, 5], [6, 7], [8, 9]]
- * Array.from(chunk(arr, 3)) // [[0, 1, 2], [3, 4, 5], [6, 7, 8], [9]]
- * Array.from(chunk([], 3)) // []
- * Array.from(chunk(arr, -3)) // Error
+ * [...chunk([1, 2, 3, 4, 5], 2)]; // [[1, 2], [3, 4], [5]]
  * ```
+ *
+ * @throws If the `size` parameter is not a safe integer greater than or equal to 1.
  */
-export function* chunk<T>(arr: T[], size: number) {
-  if (size < 1) {
+export function* chunk<T>(arr: T[], size: number): Generator<T[]> {
+  if (!Number.isSafeInteger(size) || size < 1) {
     throw new Error('size must be an integer >= 1');
   }
-  for (let i = 0; i < arr.length; i += size) {
-    yield arr.slice(i, i + size);
+
+  const iterator = Iterator.from(arr);
+  const length = arr.length;
+  let i = 0;
+
+  while (i < length) {
+    yield iterator.take(size).toArray();
+    i += size;
   }
 }
 

src/components/date-range-picker/date-range-picker.ts

@@ -51,7 +51,6 @@ import {
   addSafeEventListener,
   asNumber,
   clamp,
-  createCounter,
   equal,
   findElementFromEventPath,
   isEmpty,
@@ -90,6 +89,8 @@ export interface IgcDateRangePickerComponentEventMap {
   igcInput: CustomEvent<DateRangeValue | null>;
 }
 
+let nextId = 1;
+
 /* blazorIndirectRender */
 /* blazorSupportsVisualChildren */
 /**
@@ -217,9 +218,7 @@ export default class IgcDateRangePickerComponent extends FormAssociatedRequiredM
 
   // #region Internal state & properties
 
-  private static readonly _increment = createCounter();
-
-  protected readonly _inputId = `date-range-picker-${IgcDateRangePickerComponent._increment()}`;
+  protected readonly _inputId = `date-range-picker-${nextId++}`;
 
   private readonly _themes = addThemingController(this, all);
 

src/components/dropdown/dropdown.ts

@@ -241,7 +241,7 @@ export default class IgcDropdownComponent extends EventEmitterMixin<
   }
 
   private handleListBoxClick(event: MouseEvent) {
-    const item = findElementFromEventPath<IgcDropdownItemComponent>(
+    const item = findElementFromEventPath(
       IgcDropdownItemComponent.tagName,
       event
     );

src/components/resize-container/resize-controller.ts

@@ -200,10 +200,8 @@ class ResizeController implements ReactiveController {
     const refs = this._options.ref?.map(({ value }) => value) ?? [this._host];
 
     this._activeRef =
-      findElementFromEventPath<HTMLElement>(
-        (e) => refs.includes(e as HTMLElement),
-        event
-      ) ?? null;
+      findElementFromEventPath((e) => refs.includes(e as HTMLElement), event) ??
+      null;
   }
 
   private _setResizeState(enabled = true): void {