Add insertArrayAt method to prevent stack overflow with large arrays

Co-authored-by: JasonMore <383719+JasonMore@users.noreply.github.com>

Author: Copilot

src/__tests__/indexed-set.test.ts

@@ -42,6 +42,80 @@ describe('IndexedSet', () => {
     })
   })
 
+  describe('insertArrayAt', () => {
+    it('inserts an array of elements at the specified index', () => {
+      const set = new IndexedSet<string>()
+      set.insertArrayAt(0, ['a', 'b', 'c'])
+
+      expect(set.get(0)).toBe('a')
+      expect(set.get(1)).toBe('b')
+      expect(set.get(2)).toBe('c')
+      expect(set.size).toBe(3)
+    })
+
+    it('inserts elements in the middle', () => {
+      const set = new IndexedSet<string>()
+      set.insertArrayAt(0, ['a', 'c'])
+      set.insertArrayAt(1, ['b'])
+
+      expect(set.get(0)).toBe('a')
+      expect(set.get(1)).toBe('b')
+      expect(set.get(2)).toBe('c')
+    })
+
+    it('deduplicates elements', () => {
+      const set = new IndexedSet<string>()
+      set.insertArrayAt(0, ['a', 'b'])
+      set.insertArrayAt(2, ['b', 'c']) // 'b' should be ignored
+
+      expect(set.size).toBe(3)
+      expect(set.get(0)).toBe('a')
+      expect(set.get(1)).toBe('b')
+      expect(set.get(2)).toBe('c')
+    })
+
+    it('handles empty arrays', () => {
+      const set = new IndexedSet<string>()
+      set.insertArrayAt(0, ['a', 'b'])
+      set.insertArrayAt(0, []) // empty array
+
+      expect(set.size).toBe(2)
+    })
+
+    it('handles large arrays (500k elements) without stack overflow', () => {
+      const set = new IndexedSet<number>()
+      // Use 500k elements to ensure we test beyond the typical call stack limit
+      // which causes "Maximum call stack size exceeded" when using spread with splice
+      const largeArray = Array.from({length: 500000}, (_, i) => i)
+
+      // Use insertArrayAt for large arrays to avoid spread operator stack overflow
+      expect(() => {
+        set.insertArrayAt(0, largeArray)
+      }).not.toThrow()
+
+      expect(set.size).toBe(500000)
+      expect(set.get(0)).toBe(0)
+      expect(set.get(499999)).toBe(499999)
+      expect(set.has(250000)).toBe(true)
+    })
+
+    it('handles inserting large arrays at middle positions', () => {
+      const set = new IndexedSet<number>()
+      set.insertAt(0, -2, -1)
+      const largeArray = Array.from({length: 500000}, (_, i) => i)
+
+      // Use insertArrayAt for large arrays to avoid spread operator stack overflow
+      expect(() => {
+        set.insertArrayAt(1, largeArray)
+      }).not.toThrow()
+
+      expect(set.size).toBe(500002)
+      expect(set.get(0)).toBe(-2)
+      expect(set.get(1)).toBe(0)
+      expect(set.get(500001)).toBe(-1)
+    })
+  })
+
   describe('delete', () => {
     it('removes an element and returns true', () => {
       const set = new IndexedSet<string>()

src/focus-zone.ts

@@ -483,7 +483,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
     }
     // Insert all elements atomically.
     const insertionIndex = findInsertionIndex(filteredElements)
-    focusableElements.insertAt(insertionIndex, ...filteredElements)
+    focusableElements.insertArrayAt(insertionIndex, filteredElements)
     for (const element of filteredElements) {
       // Set tabindex="-1" on all tabbable elements, but save the original
       // value in case we need to disable the behavior
@@ -514,7 +514,7 @@ export function focusZone(container: HTMLElement, settings?: FocusZoneSettings):
   function reinitializeWithFreshElements() {
     const freshElements = [...iterateFocusableElements(container, iterateFocusableElementsOptions)]
     focusableElements.clear()
-    focusableElements.insertAt(0, ...freshElements)
+    focusableElements.insertArrayAt(0, freshElements)
     for (const element of freshElements) {
       if (!savedTabIndex.has(element)) {
         savedTabIndex.set(element, element.getAttribute('tabindex'))

src/utils/indexed-set.ts

@@ -10,18 +10,32 @@ export class IndexedSet<T> {
   private _itemSet = new Set<T>()
 
   /**
-   * Insert elements at a specific index. If index is omitted, appends to end.
+   * Insert an array of elements at a specific index.
+   * Use this method for large arrays to avoid stack overflow issues with spread operators.
    */
-  insertAt(index: number, ...elements: T[]): void {
+  insertArrayAt(index: number, elements: T[]): void {
     const newElements = elements.filter(e => !this._itemSet.has(e))
     if (newElements.length === 0) return
 
-    this._items.splice(index, 0, ...newElements)
+    // Avoid using spread with splice to prevent stack overflow with large arrays.
+    // Use Array.prototype.concat which handles large arrays without spreading.
+    const before = this._items.slice(0, index)
+    const after = this._items.slice(index)
+    this._items = before.concat(newElements, after)
+
     for (const element of newElements) {
       this._itemSet.add(element)
     }
   }
 
+  /**
+   * Insert elements at a specific index. If index is omitted, appends to end.
+   * Note: For large arrays, use insertArrayAt() instead to avoid stack overflow.
+   */
+  insertAt(index: number, ...elements: T[]): void {
+    this.insertArrayAt(index, elements)
+  }
+
   /**
    * Remove an element by reference. Returns true if element was found and removed.
    */