@primer/behaviors 1.3.1-rc.8de3bf8 → 1.3.2-rc.b275ab5

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @primer/behaviors
 
+## 1.3.2
+
+### Patch Changes
+
+- [#176](https://github.com/primer/behaviors/pull/176) [`5e74867`](https://github.com/primer/behaviors/commit/5e7486702074bbb89e6a7a96a4b0db71d763c74c) Thanks [@jbrown1618](https://github.com/jbrown1618)! - Use a binary search to find the insertion index for new elements managed by the focus zone.
+  For a use case with 1000 elements managed by the focus zone, added one at a time (by react),
+  this takes us from 500,000 calls to `compareDocumentPosition` over 1000ms to 8,000 calls
+  over 16ms.
+
 ## 1.3.1
 
 ### Patch Changes

package/dist/cjs/focus-zone.js

@@ -190,8 +190,7 @@ function focusZone(container, settings) {
         if (filteredElements.length === 0) {
             return;
         }
-        const insertIndex = focusableElements.findIndex(e => (e.compareDocumentPosition(filteredElements[0]) & Node.DOCUMENT_POSITION_PRECEDING) > 0);
-        focusableElements.splice(insertIndex === -1 ? focusableElements.length : insertIndex, 0, ...filteredElements);
+        focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
         for (const element of filteredElements) {
             if (!savedTabIndex.has(element)) {
                 savedTabIndex.set(element, element.getAttribute('tabindex'));
@@ -202,6 +201,27 @@ function focusZone(container, settings) {
             updateFocusedElement(getFirstFocusableElement());
         }
     }
+    function findInsertionIndex(elementsToInsert) {
+        const firstElementToInsert = elementsToInsert[0];
+        if (focusableElements.length === 0)
+            return 0;
+        let iMin = 0;
+        let iMax = focusableElements.length - 1;
+        while (iMin <= iMax) {
+            const i = Math.floor((iMin + iMax) / 2);
+            const element = focusableElements[i];
+            if (followsInDocument(firstElementToInsert, element)) {
+                iMax = i - 1;
+            }
+            else {
+                iMin = i + 1;
+            }
+        }
+        return iMin;
+    }
+    function followsInDocument(first, second) {
+        return (second.compareDocumentPosition(first) & Node.DOCUMENT_POSITION_PRECEDING) > 0;
+    }
     function endFocusManagement(...elements) {
         for (const element of elements) {
             const focusableElementIndex = focusableElements.indexOf(element);

package/dist/esm/focus-zone.js

@@ -187,8 +187,7 @@ export function focusZone(container, settings) {
         if (filteredElements.length === 0) {
             return;
         }
-        const insertIndex = focusableElements.findIndex(e => (e.compareDocumentPosition(filteredElements[0]) & Node.DOCUMENT_POSITION_PRECEDING) > 0);
-        focusableElements.splice(insertIndex === -1 ? focusableElements.length : insertIndex, 0, ...filteredElements);
+        focusableElements.splice(findInsertionIndex(filteredElements), 0, ...filteredElements);
         for (const element of filteredElements) {
             if (!savedTabIndex.has(element)) {
                 savedTabIndex.set(element, element.getAttribute('tabindex'));
@@ -199,6 +198,27 @@ export function focusZone(container, settings) {
             updateFocusedElement(getFirstFocusableElement());
         }
     }
+    function findInsertionIndex(elementsToInsert) {
+        const firstElementToInsert = elementsToInsert[0];
+        if (focusableElements.length === 0)
+            return 0;
+        let iMin = 0;
+        let iMax = focusableElements.length - 1;
+        while (iMin <= iMax) {
+            const i = Math.floor((iMin + iMax) / 2);
+            const element = focusableElements[i];
+            if (followsInDocument(firstElementToInsert, element)) {
+                iMax = i - 1;
+            }
+            else {
+                iMin = i + 1;
+            }
+        }
+        return iMin;
+    }
+    function followsInDocument(first, second) {
+        return (second.compareDocumentPosition(first) & Node.DOCUMENT_POSITION_PRECEDING) > 0;
+    }
     function endFocusManagement(...elements) {
         for (const element of elements) {
             const focusableElementIndex = focusableElements.indexOf(element);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "1.3.1-rc.8de3bf8",
+  "version": "1.3.2-rc.b275ab5",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -74,7 +74,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.37",
-    "esbuild": "^0.14.1",
+    "esbuild": "^0.15.16",
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.3.0",
     "eslint-plugin-github": "^4.3.5",