@primer/behaviors 0.0.0-20231221153723 → 0.0.0-20231223202501

package/dist/cjs/anchored-position.js

@@ -37,22 +37,27 @@ function getPositionedParent(element) {
     }
     return document.body;
 }
-function isOnTopLayer(element) {
+function isModalDialog(element) {
+    return element.matches('dialog:modal');
+}
+function isFullscreen(element) {
+    return element.matches(':fullscreen');
+}
+function isPopover(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;
-        }
+        return (element.matches(':popover-open') && /native code/.test((_a = document.body.showPopover) === null || _a === void 0 ? void 0 : _a.toString()));
     }
     catch (_b) {
         return false;
     }
-    return false;
 }
-function getClippingRect(element) {
+function isOnTopLayer(element) {
+    return isModalDialog(element) || isFullscreen(element) || isPopover(element);
+}
+function getClippingParent(element) {
+    if (element === document.body)
+        return element;
     let parentNode = element;
     while (parentNode !== null) {
         if (!(parentNode instanceof Element)) {
@@ -64,7 +69,10 @@ function getClippingRect(element) {
         }
         parentNode = parentNode.parentNode;
     }
-    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
+    return parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
+}
+function getClippingRect(element) {
+    const clippingNode = getClippingParent(element);
     const elemRect = clippingNode.getBoundingClientRect();
     const elemStyle = getComputedStyle(clippingNode);
     const [borderTop, borderLeft, borderRight, borderBottom] = [
@@ -151,7 +159,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
         }
         if (alternateOrder && positionAttempt < alternateOrder.length) {
             if (pos.top + floatingRect.height > viewportRect.height + relativeViewportRect.top) {
-                pos.top = Math.max(viewportRect.height + relativeViewportRect.top - floatingRect.height, 0);
+                pos.top = viewportRect.height + relativeViewportRect.top - floatingRect.height;
             }
         }
     }

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

@@ -1,4 +1,3 @@
-import { IterateFocusableElements } from './utils/iterate-focusable-elements.js';
 export type Direction = 'previous' | 'next' | 'start' | 'end';
 export type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown' | 'Backspace';
 export declare enum FocusKeys {
@@ -17,7 +16,7 @@ export declare enum FocusKeys {
     WASD = 96,
     All = 511
 }
-export type FocusZoneSettings = IterateFocusableElements & {
+export interface FocusZoneSettings {
     focusOutBehavior?: 'stop' | 'wrap';
     getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
     focusableElementFilter?: (element: HTMLElement) => boolean;
@@ -27,7 +26,7 @@ export type FocusZoneSettings = IterateFocusableElements & {
     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";
 export declare const activeDescendantActivatedIndirectly = "activated-indirectly";

package/dist/cjs/focus-zone.js

@@ -244,36 +244,21 @@ function focusZone(container, settings) {
             }
         }
     }
-    const iterateFocusableElementsOptions = {
-        reverse: settings === null || settings === void 0 ? void 0 : settings.reverse,
-        strict: settings === null || settings === void 0 ? void 0 : settings.strict,
-        onlyTabbable: settings === null || settings === void 0 ? void 0 : settings.onlyTabbable,
-    };
-    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container, iterateFocusableElementsOptions));
+    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(container));
     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) {
                 if (removedNode instanceof HTMLElement) {
-                    endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode, iterateFocusableElementsOptions));
-                }
-            }
-            if (mutation.type === 'attributes' && mutation.oldValue === null) {
-                if (mutation.target instanceof HTMLElement) {
-                    endFocusManagement(mutation.target);
+                    endFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(removedNode));
                 }
             }
         }
         for (const mutation of mutations) {
             for (const addedNode of mutation.addedNodes) {
                 if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode, iterateFocusableElementsOptions));
-                }
-            }
-            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
-                if (mutation.target instanceof HTMLElement) {
-                    beginFocusManagement(mutation.target);
+                    beginFocusManagement(...(0, iterate_focusable_elements_js_1.iterateFocusableElements)(addedNode));
                 }
             }
         }
@@ -281,8 +266,6 @@ function focusZone(container, settings) {
     observer.observe(container, {
         subtree: true,
         childList: true,
-        attributeFilter: ['hidden', 'disabled'],
-        attributeOldValue: true,
     });
     const controller = new AbortController();
     const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;

package/dist/cjs/utils/iterate-focusable-elements.js

@@ -46,21 +46,16 @@ function isFocusable(elem, strict = false) {
         return false;
     }
     if (strict) {
-        const style = getComputedStyle(elem);
         const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
-        const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
-        const displayInert = style.display === 'none' || !elem.offsetParent;
+        const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
         const clientRectsInert = elem.getClientRects().length === 0;
-        if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
+        if (sizeInert || visibilityInert || clientRectsInert) {
             return false;
         }
     }
     if (elem.getAttribute('tabindex') != null) {
         return true;
     }
-    if (elem.getAttribute('contenteditable') === 'true' || elem.getAttribute('contenteditable') === 'plaintext-only') {
-        return true;
-    }
     if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
         return false;
     }

package/dist/esm/anchored-position.js

@@ -33,22 +33,27 @@ function getPositionedParent(element) {
     }
     return document.body;
 }
-function isOnTopLayer(element) {
+function isModalDialog(element) {
+    return element.matches('dialog:modal');
+}
+function isFullscreen(element) {
+    return element.matches(':fullscreen');
+}
+function isPopover(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;
-        }
+        return (element.matches(':popover-open') && /native code/.test((_a = document.body.showPopover) === null || _a === void 0 ? void 0 : _a.toString()));
     }
     catch (_b) {
         return false;
     }
-    return false;
 }
-function getClippingRect(element) {
+function isOnTopLayer(element) {
+    return isModalDialog(element) || isFullscreen(element) || isPopover(element);
+}
+function getClippingParent(element) {
+    if (element === document.body)
+        return element;
     let parentNode = element;
     while (parentNode !== null) {
         if (!(parentNode instanceof Element)) {
@@ -60,7 +65,10 @@ function getClippingRect(element) {
         }
         parentNode = parentNode.parentNode;
     }
-    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
+    return parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
+}
+function getClippingRect(element) {
+    const clippingNode = getClippingParent(element);
     const elemRect = clippingNode.getBoundingClientRect();
     const elemStyle = getComputedStyle(clippingNode);
     const [borderTop, borderLeft, borderRight, borderBottom] = [
@@ -147,7 +155,7 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
         }
         if (alternateOrder && positionAttempt < alternateOrder.length) {
             if (pos.top + floatingRect.height > viewportRect.height + relativeViewportRect.top) {
-                pos.top = Math.max(viewportRect.height + relativeViewportRect.top - floatingRect.height, 0);
+                pos.top = viewportRect.height + relativeViewportRect.top - floatingRect.height;
             }
         }
     }

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

@@ -1,4 +1,3 @@
-import { IterateFocusableElements } from './utils/iterate-focusable-elements.js';
 export type Direction = 'previous' | 'next' | 'start' | 'end';
 export type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown' | 'Backspace';
 export declare enum FocusKeys {
@@ -17,7 +16,7 @@ export declare enum FocusKeys {
     WASD = 96,
     All = 511
 }
-export type FocusZoneSettings = IterateFocusableElements & {
+export interface FocusZoneSettings {
     focusOutBehavior?: 'stop' | 'wrap';
     getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
     focusableElementFilter?: (element: HTMLElement) => boolean;
@@ -27,7 +26,7 @@ export type FocusZoneSettings = IterateFocusableElements & {
     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";
 export declare const activeDescendantActivatedIndirectly = "activated-indirectly";

package/dist/esm/focus-zone.js

@@ -241,36 +241,21 @@ export function focusZone(container, settings) {
             }
         }
     }
-    const iterateFocusableElementsOptions = {
-        reverse: settings === null || settings === void 0 ? void 0 : settings.reverse,
-        strict: settings === null || settings === void 0 ? void 0 : settings.strict,
-        onlyTabbable: settings === null || settings === void 0 ? void 0 : settings.onlyTabbable,
-    };
-    beginFocusManagement(...iterateFocusableElements(container, iterateFocusableElementsOptions));
+    beginFocusManagement(...iterateFocusableElements(container));
     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) {
                 if (removedNode instanceof HTMLElement) {
-                    endFocusManagement(...iterateFocusableElements(removedNode, iterateFocusableElementsOptions));
-                }
-            }
-            if (mutation.type === 'attributes' && mutation.oldValue === null) {
-                if (mutation.target instanceof HTMLElement) {
-                    endFocusManagement(mutation.target);
+                    endFocusManagement(...iterateFocusableElements(removedNode));
                 }
             }
         }
         for (const mutation of mutations) {
             for (const addedNode of mutation.addedNodes) {
                 if (addedNode instanceof HTMLElement) {
-                    beginFocusManagement(...iterateFocusableElements(addedNode, iterateFocusableElementsOptions));
-                }
-            }
-            if (mutation.type === 'attributes' && mutation.oldValue !== null) {
-                if (mutation.target instanceof HTMLElement) {
-                    beginFocusManagement(mutation.target);
+                    beginFocusManagement(...iterateFocusableElements(addedNode));
                 }
             }
         }
@@ -278,8 +263,6 @@ export function focusZone(container, settings) {
     observer.observe(container, {
         subtree: true,
         childList: true,
-        attributeFilter: ['hidden', 'disabled'],
-        attributeOldValue: true,
     });
     const controller = new AbortController();
     const signal = (_e = settings === null || settings === void 0 ? void 0 : settings.abortSignal) !== null && _e !== void 0 ? _e : controller.signal;

package/dist/esm/utils/iterate-focusable-elements.js

@@ -41,21 +41,16 @@ export function isFocusable(elem, strict = false) {
         return false;
     }
     if (strict) {
-        const style = getComputedStyle(elem);
         const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
-        const visibilityInert = ['hidden', 'collapse'].includes(style.visibility);
-        const displayInert = style.display === 'none' || !elem.offsetParent;
+        const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
         const clientRectsInert = elem.getClientRects().length === 0;
-        if (sizeInert || visibilityInert || clientRectsInert || displayInert) {
+        if (sizeInert || visibilityInert || clientRectsInert) {
             return false;
         }
     }
     if (elem.getAttribute('tabindex') != null) {
         return true;
     }
-    if (elem.getAttribute('contenteditable') === 'true' || elem.getAttribute('contenteditable') === 'plaintext-only') {
-        return true;
-    }
     if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
         return false;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-20231221153723",
+  "version": "0.0.0-20231223202501",
   "description": "Shared behaviors for JavaScript components",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -72,16 +72,15 @@
     "@size-limit/preset-small-lib": "^8.2.4",
     "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^14.5.1",
-    "@types/jest": "^29.5.11",
-    "@types/node": "^20.10.5",
+    "@types/jest": "^27.0.3",
+    "@types/node": "^18.18.0",
     "@types/react": "^18.2.23",
     "esbuild": "^0.19.4",
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.50.0",
     "eslint-plugin-github": "^4.10.0",
     "eslint-plugin-prettier": "^5.0.0",
-    "jest": "^29.7.0",
-    "jest-environment-jsdom": "^29.7.0",
+    "jest": "^27.4.3",
     "prettier": "^3.0.3",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",