@primer/behaviors 0.0.0-2022927173910 → 0.0.0-20230925220411

package/dist/cjs/anchored-position.js

@@ -26,6 +26,8 @@ function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
 }
 exports.getAnchoredPosition = getAnchoredPosition;
 function getPositionedParent(element) {
+    if (isOnTopLayer(element))
+        return document.body;
     let parentNode = element.parentNode;
     while (parentNode !== null) {
         if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
@@ -35,6 +37,21 @@ function getPositionedParent(element) {
     }
     return document.body;
 }
+function isOnTopLayer(element) {
+    var _a;
+    if (element.tagName === 'DIALOG') {
+        return true;
+    }
+    try {
+        if (element.matches(':popover-open') && /native code/.test((_a = document.body.showPopover) === null || _a === void 0 ? void 0 : _a.toString())) {
+            return true;
+        }
+    }
+    catch (_b) {
+        return false;
+    }
+    return false;
+}
 function getClippingRect(element) {
     let parentNode = element;
     while (parentNode !== null) {

package/dist/cjs/focus-zone.d.ts

@@ -25,6 +25,7 @@ export interface FocusZoneSettings {
     activeDescendantControl?: HTMLElement;
     onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
     focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
+    preventScroll?: boolean;
 }
 export declare const isActiveDescendantAttribute = "data-is-active-descendant";
 export declare const activeDescendantActivatedDirectly = "activated-directly";

package/dist/cjs/focus-zone.js

@@ -127,7 +127,7 @@ exports.activeDescendantActivatedDirectly = 'activated-directly';
 exports.activeDescendantActivatedIndirectly = 'activated-indirectly';
 exports.hasActiveDescendantAttribute = 'data-has-active-descendant';
 function focusZone(container, settings) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const focusableElements = [];
     const savedTabIndex = new WeakMap();
     const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
@@ -136,6 +136,7 @@ function focusZone(container, settings) {
     const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
     const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
     let currentFocusedElement;
+    const preventScroll = (_d = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _d !== void 0 ? _d : false;
     function getFirstFocusableElement() {
         return focusableElements[0];
     }
@@ -189,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'));
@@ -201,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);
@@ -224,7 +245,8 @@ function focusZone(container, settings) {
         }
     }
     beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container));
-    updateFocusedElement(getFirstFocusableElement());
+    const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
+    updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             for (const removedNode of mutation.removedNodes) {
@@ -246,7 +268,7 @@ function focusZone(container, settings) {
         childList: true
     });
     const controller = new AbortController();
-    const signal = (_d = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _d !== void 0 ? _d : controller.signal;
+    const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
     signal.addEventListener('abort', () => {
         endFocusManagement(...focusableElements);
     });
@@ -259,7 +281,7 @@ function focusZone(container, settings) {
     if (activeDescendantControl) {
         container.addEventListener('focusin', event => {
             if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
-                activeDescendantControl.focus();
+                activeDescendantControl.focus({ preventScroll });
                 updateFocusedElement(event.target);
             }
         });
@@ -303,7 +325,7 @@ function focusZone(container, settings) {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
                             const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
                             const targetElement = focusableElements[targetElementIndex];
-                            targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
+                            targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({ preventScroll });
                             return;
                         }
                         else {
@@ -315,7 +337,7 @@ function focusZone(container, settings) {
                             const elementToFocus = focusInStrategy(event.relatedTarget);
                             const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
                             if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
-                                elementToFocus.focus();
+                                elementToFocus.focus({ preventScroll });
                                 return;
                             }
                             else {
@@ -400,7 +422,7 @@ function focusZone(container, settings) {
                 }
                 else if (nextElementToFocus) {
                     lastKeyboardFocusDirection = direction;
-                    nextElementToFocus.focus();
+                    nextElementToFocus.focus({ preventScroll });
                 }
                 if (event.key !== 'Tab' || nextElementToFocus) {
                     event.preventDefault();

package/dist/esm/anchored-position.js

@@ -22,6 +22,8 @@ export function getAnchoredPosition(floatingElement, anchorElement, settings = {
     return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
 }
 function getPositionedParent(element) {
+    if (isOnTopLayer(element))
+        return document.body;
     let parentNode = element.parentNode;
     while (parentNode !== null) {
         if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
@@ -31,6 +33,21 @@ function getPositionedParent(element) {
     }
     return document.body;
 }
+function isOnTopLayer(element) {
+    var _a;
+    if (element.tagName === 'DIALOG') {
+        return true;
+    }
+    try {
+        if (element.matches(':popover-open') && /native code/.test((_a = document.body.showPopover) === null || _a === void 0 ? void 0 : _a.toString())) {
+            return true;
+        }
+    }
+    catch (_b) {
+        return false;
+    }
+    return false;
+}
 function getClippingRect(element) {
     let parentNode = element;
     while (parentNode !== null) {

package/dist/esm/focus-zone.d.ts

@@ -25,6 +25,7 @@ export interface FocusZoneSettings {
     activeDescendantControl?: HTMLElement;
     onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
     focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
+    preventScroll?: boolean;
 }
 export declare const isActiveDescendantAttribute = "data-is-active-descendant";
 export declare const activeDescendantActivatedDirectly = "activated-directly";

package/dist/esm/focus-zone.js

@@ -124,7 +124,7 @@ export const activeDescendantActivatedDirectly = 'activated-directly';
 export const activeDescendantActivatedIndirectly = 'activated-indirectly';
 export const hasActiveDescendantAttribute = 'data-has-active-descendant';
 export function focusZone(container, settings) {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     const focusableElements = [];
     const savedTabIndex = new WeakMap();
     const bindKeys = (_a = settings === null || settings === void 0 ? void 0 : settings.bindKeys) !== null && _a !== void 0 ? _a : ((settings === null || settings === void 0 ? void 0 : settings.getNextFocusable) ? FocusKeys.ArrowAll : FocusKeys.ArrowVertical) | FocusKeys.HomeAndEnd;
@@ -133,6 +133,7 @@ export function focusZone(container, settings) {
     const activeDescendantControl = settings === null || settings === void 0 ? void 0 : settings.activeDescendantControl;
     const activeDescendantCallback = settings === null || settings === void 0 ? void 0 : settings.onActiveDescendantChanged;
     let currentFocusedElement;
+    const preventScroll = (_d = settings === null || settings === void 0 ? void 0 : settings.preventScroll) !== null && _d !== void 0 ? _d : false;
     function getFirstFocusableElement() {
         return focusableElements[0];
     }
@@ -186,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'));
@@ -198,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);
@@ -221,7 +242,8 @@ export function focusZone(container, settings) {
         }
     }
     beginFocusManagement(...iterateFocusableElements(container));
-    updateFocusedElement(getFirstFocusableElement());
+    const initialElement = typeof focusInStrategy === 'function' ? focusInStrategy(document.body) : getFirstFocusableElement();
+    updateFocusedElement(initialElement);
     const observer = new MutationObserver(mutations => {
         for (const mutation of mutations) {
             for (const removedNode of mutation.removedNodes) {
@@ -243,7 +265,7 @@ export function focusZone(container, settings) {
         childList: true
     });
     const controller = new AbortController();
-    const signal = (_d = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _d !== void 0 ? _d : controller.signal;
+    const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;
     signal.addEventListener('abort', () => {
         endFocusManagement(...focusableElements);
     });
@@ -256,7 +278,7 @@ export function focusZone(container, settings) {
     if (activeDescendantControl) {
         container.addEventListener('focusin', event => {
             if (event.target instanceof HTMLElement && focusableElements.includes(event.target)) {
-                activeDescendantControl.focus();
+                activeDescendantControl.focus({ preventScroll });
                 updateFocusedElement(event.target);
             }
         });
@@ -300,7 +322,7 @@ export function focusZone(container, settings) {
                         if (event.relatedTarget instanceof Element && !container.contains(event.relatedTarget)) {
                             const targetElementIndex = lastKeyboardFocusDirection === 'previous' ? focusableElements.length - 1 : 0;
                             const targetElement = focusableElements[targetElementIndex];
-                            targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus();
+                            targetElement === null || targetElement === void 0 ? void 0 : targetElement.focus({ preventScroll });
                             return;
                         }
                         else {
@@ -312,7 +334,7 @@ export function focusZone(container, settings) {
                             const elementToFocus = focusInStrategy(event.relatedTarget);
                             const requestedFocusElementIndex = elementToFocus ? focusableElements.indexOf(elementToFocus) : -1;
                             if (requestedFocusElementIndex >= 0 && elementToFocus instanceof HTMLElement) {
-                                elementToFocus.focus();
+                                elementToFocus.focus({ preventScroll });
                                 return;
                             }
                             else {
@@ -397,7 +419,7 @@ export function focusZone(container, settings) {
                 }
                 else if (nextElementToFocus) {
                     lastKeyboardFocusDirection = direction;
-                    nextElementToFocus.focus();
+                    nextElementToFocus.focus({ preventScroll });
                 }
                 if (event.key !== 'Tab' || nextElementToFocus) {
                     event.preventDefault();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-2022927173910",
+  "version": "0.0.0-20230925220411",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -30,17 +30,17 @@
     "dist/cjs/focus-trap.js"
   ],
   "scripts": {
-    "lint": "eslint src/",
-    "test": "npm run jest && npm run lint",
-    "test:watch": "jest --watch",
-    "jest": "jest",
     "clean": "rm -rf dist",
-    "prebuild": "npm run clean",
     "build": "npm run build:esm && npm run build:cjs",
     "build:esm": "tsc",
     "build:cjs": "tsc --module commonjs --outDir dist/cjs",
+    "lint": "eslint src/",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "prebuild": "npm run clean",
+    "release": "npm run build && changeset publish",
     "size-limit": "npm run build && size-limit",
-    "release": "npm run build && changeset publish"
+    "type-check": "tsc --noEmit"
   },
   "repository": {
     "type": "git",
@@ -69,12 +69,12 @@
     "@changesets/changelog-github": "^0.4.2",
     "@changesets/cli": "^2.18.1",
     "@github/prettier-config": "0.0.4",
-    "@size-limit/preset-small-lib": "^7.0.3",
+    "@size-limit/preset-small-lib": "^8.2.4",
     "@testing-library/react": "^12.1.2",
     "@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",
@@ -82,7 +82,7 @@
     "prettier": "^2.5.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "size-limit": "^7.0.3",
+    "size-limit": "^8.2.4",
     "typescript": "^4.5.2"
   }
 }