@primer/behaviors 0.0.0-202201891142 → 0.0.0-2022020145740

package/dist/esm/anchored-position.js

@@ -0,0 +1,206 @@
+const alternateOrders = {
+    'outside-top': ['outside-bottom', 'outside-right', 'outside-left', 'outside-bottom'],
+    'outside-bottom': ['outside-top', 'outside-right', 'outside-left', 'outside-bottom'],
+    'outside-left': ['outside-right', 'outside-bottom', 'outside-top', 'outside-bottom'],
+    'outside-right': ['outside-left', 'outside-bottom', 'outside-top', 'outside-bottom']
+};
+export function getAnchoredPosition(floatingElement, anchorElement, settings = {}) {
+    const parentElement = getPositionedParent(floatingElement);
+    const clippingRect = getClippingRect(parentElement);
+    const parentElementStyle = getComputedStyle(parentElement);
+    const parentElementRect = parentElement.getBoundingClientRect();
+    const [borderTop, borderLeft] = [parentElementStyle.borderTopWidth, parentElementStyle.borderLeftWidth].map(v => parseInt(v, 10) || 0);
+    const relativeRect = {
+        top: parentElementRect.top + borderTop,
+        left: parentElementRect.left + borderLeft
+    };
+    return pureCalculateAnchoredPosition(clippingRect, relativeRect, floatingElement.getBoundingClientRect(), anchorElement instanceof Element ? anchorElement.getBoundingClientRect() : anchorElement, getDefaultSettings(settings));
+}
+function getPositionedParent(element) {
+    let parentNode = element.parentNode;
+    while (parentNode !== null) {
+        if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
+            return parentNode;
+        }
+        parentNode = parentNode.parentNode;
+    }
+    return document.body;
+}
+function getClippingRect(element) {
+    let parentNode = element;
+    while (parentNode !== null) {
+        if (parentNode === document.body) {
+            break;
+        }
+        const parentNodeStyle = getComputedStyle(parentNode);
+        if (parentNodeStyle.overflow !== 'visible') {
+            break;
+        }
+        parentNode = parentNode.parentNode;
+    }
+    const clippingNode = parentNode === document.body || !(parentNode instanceof HTMLElement) ? document.body : parentNode;
+    const elemRect = clippingNode.getBoundingClientRect();
+    const elemStyle = getComputedStyle(clippingNode);
+    const [borderTop, borderLeft, borderRight, borderBottom] = [
+        elemStyle.borderTopWidth,
+        elemStyle.borderLeftWidth,
+        elemStyle.borderRightWidth,
+        elemStyle.borderBottomWidth
+    ].map(v => parseInt(v, 10) || 0);
+    return {
+        top: elemRect.top + borderTop,
+        left: elemRect.left + borderLeft,
+        width: elemRect.width - borderRight - borderLeft,
+        height: Math.max(elemRect.height - borderTop - borderBottom, clippingNode === document.body ? window.innerHeight : -Infinity)
+    };
+}
+const positionDefaults = {
+    side: 'outside-bottom',
+    align: 'start',
+    anchorOffset: 4,
+    alignmentOffset: 4,
+    allowOutOfBounds: false
+};
+function getDefaultSettings(settings = {}) {
+    var _a, _b, _c, _d, _e;
+    const side = (_a = settings.side) !== null && _a !== void 0 ? _a : positionDefaults.side;
+    const align = (_b = settings.align) !== null && _b !== void 0 ? _b : positionDefaults.align;
+    return {
+        side,
+        align,
+        anchorOffset: (_c = settings.anchorOffset) !== null && _c !== void 0 ? _c : (side === 'inside-center' ? 0 : positionDefaults.anchorOffset),
+        alignmentOffset: (_d = settings.alignmentOffset) !== null && _d !== void 0 ? _d : (align !== 'center' && side.startsWith('inside') ? positionDefaults.alignmentOffset : 0),
+        allowOutOfBounds: (_e = settings.allowOutOfBounds) !== null && _e !== void 0 ? _e : positionDefaults.allowOutOfBounds
+    };
+}
+function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingRect, anchorRect, { side, align, allowOutOfBounds, anchorOffset, alignmentOffset }) {
+    const relativeViewportRect = {
+        top: viewportRect.top - relativePosition.top,
+        left: viewportRect.left - relativePosition.left,
+        width: viewportRect.width,
+        height: viewportRect.height
+    };
+    let pos = calculatePosition(floatingRect, anchorRect, side, align, anchorOffset, alignmentOffset);
+    let anchorSide = side;
+    pos.top -= relativePosition.top;
+    pos.left -= relativePosition.left;
+    if (!allowOutOfBounds) {
+        const alternateOrder = alternateOrders[side];
+        let positionAttempt = 0;
+        if (alternateOrder) {
+            let prevSide = side;
+            while (positionAttempt < alternateOrder.length &&
+                shouldRecalculatePosition(prevSide, pos, relativeViewportRect, floatingRect)) {
+                const nextSide = alternateOrder[positionAttempt++];
+                prevSide = nextSide;
+                pos = calculatePosition(floatingRect, anchorRect, nextSide, align, anchorOffset, alignmentOffset);
+                pos.top -= relativePosition.top;
+                pos.left -= relativePosition.left;
+                anchorSide = nextSide;
+            }
+        }
+        if (pos.top < relativeViewportRect.top) {
+            pos.top = relativeViewportRect.top;
+        }
+        if (pos.left < relativeViewportRect.left) {
+            pos.left = relativeViewportRect.left;
+        }
+        if (pos.left + floatingRect.width > viewportRect.width + relativeViewportRect.left) {
+            pos.left = viewportRect.width + relativeViewportRect.left - floatingRect.width;
+        }
+        if (alternateOrder && positionAttempt < alternateOrder.length) {
+            if (pos.top + floatingRect.height > viewportRect.height + relativeViewportRect.top) {
+                pos.top = viewportRect.height + relativeViewportRect.top - floatingRect.height;
+            }
+        }
+    }
+    return Object.assign(Object.assign({}, pos), { anchorSide });
+}
+function calculatePosition(elementDimensions, anchorPosition, side, align, anchorOffset, alignmentOffset) {
+    const anchorRight = anchorPosition.left + anchorPosition.width;
+    const anchorBottom = anchorPosition.top + anchorPosition.height;
+    let top = -1;
+    let left = -1;
+    if (side === 'outside-top') {
+        top = anchorPosition.top - anchorOffset - elementDimensions.height;
+    }
+    else if (side === 'outside-bottom') {
+        top = anchorBottom + anchorOffset;
+    }
+    else if (side === 'outside-left') {
+        left = anchorPosition.left - anchorOffset - elementDimensions.width;
+    }
+    else if (side === 'outside-right') {
+        left = anchorRight + anchorOffset;
+    }
+    if (side === 'outside-top' || side === 'outside-bottom') {
+        if (align === 'start') {
+            left = anchorPosition.left + alignmentOffset;
+        }
+        else if (align === 'center') {
+            left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset;
+        }
+        else {
+            left = anchorRight - elementDimensions.width - alignmentOffset;
+        }
+    }
+    if (side === 'outside-left' || side === 'outside-right') {
+        if (align === 'start') {
+            top = anchorPosition.top + alignmentOffset;
+        }
+        else if (align === 'center') {
+            top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset;
+        }
+        else {
+            top = anchorBottom - elementDimensions.height - alignmentOffset;
+        }
+    }
+    if (side === 'inside-top') {
+        top = anchorPosition.top + anchorOffset;
+    }
+    else if (side === 'inside-bottom') {
+        top = anchorBottom - anchorOffset - elementDimensions.height;
+    }
+    else if (side === 'inside-left') {
+        left = anchorPosition.left + anchorOffset;
+    }
+    else if (side === 'inside-right') {
+        left = anchorRight - anchorOffset - elementDimensions.width;
+    }
+    else if (side === 'inside-center') {
+        left = (anchorRight + anchorPosition.left) / 2 - elementDimensions.width / 2 + anchorOffset;
+    }
+    if (side === 'inside-top' || side === 'inside-bottom') {
+        if (align === 'start') {
+            left = anchorPosition.left + alignmentOffset;
+        }
+        else if (align === 'center') {
+            left = anchorPosition.left - (elementDimensions.width - anchorPosition.width) / 2 + alignmentOffset;
+        }
+        else {
+            left = anchorRight - elementDimensions.width - alignmentOffset;
+        }
+    }
+    else if (side === 'inside-left' || side === 'inside-right' || side === 'inside-center') {
+        if (align === 'start') {
+            top = anchorPosition.top + alignmentOffset;
+        }
+        else if (align === 'center') {
+            top = anchorPosition.top - (elementDimensions.height - anchorPosition.height) / 2 + alignmentOffset;
+        }
+        else {
+            top = anchorBottom - elementDimensions.height - alignmentOffset;
+        }
+    }
+    return { top, left };
+}
+function shouldRecalculatePosition(side, currentPos, containerDimensions, elementDimensions) {
+    if (side === 'outside-top' || side === 'outside-bottom') {
+        return (currentPos.top < containerDimensions.top ||
+            currentPos.top + elementDimensions.height > containerDimensions.height + containerDimensions.top);
+    }
+    else {
+        return (currentPos.left < containerDimensions.left ||
+            currentPos.left + elementDimensions.width > containerDimensions.width + containerDimensions.left);
+    }
+}

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

@@ -0,0 +1,2 @@
+export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
+export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;

package/dist/esm/focus-trap.js

@@ -0,0 +1,107 @@
+import { isTabbable, iterateFocusableElements } from './utils/iterate-focusable-elements.js';
+import { polyfill as eventListenerSignalPolyfill } from './polyfills/event-listener-signal.js';
+eventListenerSignalPolyfill();
+const suspendedTrapStack = [];
+let activeTrap = undefined;
+function tryReactivate() {
+    const trapToReactivate = suspendedTrapStack.pop();
+    if (trapToReactivate) {
+        focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
+    }
+}
+function followSignal(signal) {
+    const controller = new AbortController();
+    signal.addEventListener('abort', () => {
+        controller.abort();
+    });
+    return controller;
+}
+function getFocusableChild(container, lastChild = false) {
+    return iterateFocusableElements(container, { reverse: lastChild, strict: true, onlyTabbable: true }).next().value;
+}
+export function focusTrap(container, initialFocus, abortSignal) {
+    const controller = new AbortController();
+    const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
+    container.setAttribute('data-focus-trap', 'active');
+    let lastFocusedChild = undefined;
+    function ensureTrapZoneHasFocus(focusedElement) {
+        if (focusedElement instanceof HTMLElement && document.contains(container)) {
+            if (container.contains(focusedElement)) {
+                lastFocusedChild = focusedElement;
+                return;
+            }
+            else {
+                if (lastFocusedChild && isTabbable(lastFocusedChild) && container.contains(lastFocusedChild)) {
+                    lastFocusedChild.focus();
+                    return;
+                }
+                else if (initialFocus && container.contains(initialFocus)) {
+                    initialFocus.focus();
+                    return;
+                }
+                else {
+                    const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
+                    if (containerNeedsTemporaryTabIndex) {
+                        container.setAttribute('tabindex', '-1');
+                    }
+                    container.focus();
+                    if (containerNeedsTemporaryTabIndex) {
+                        container.addEventListener('blur', () => container.removeAttribute('tabindex'), { once: true });
+                    }
+                    return;
+                }
+            }
+        }
+    }
+    const wrappingController = followSignal(signal);
+    container.addEventListener('keydown', event => {
+        if (event.key !== 'Tab' || event.defaultPrevented) {
+            return;
+        }
+        const { target } = event;
+        const firstFocusableChild = getFocusableChild(container);
+        const lastFocusableChild = getFocusableChild(container, true);
+        if (target === firstFocusableChild && event.shiftKey) {
+            event.preventDefault();
+            lastFocusableChild === null || lastFocusableChild === void 0 ? void 0 : lastFocusableChild.focus();
+        }
+        else if (target === lastFocusableChild && !event.shiftKey) {
+            event.preventDefault();
+            firstFocusableChild === null || firstFocusableChild === void 0 ? void 0 : firstFocusableChild.focus();
+        }
+    }, { signal: wrappingController.signal });
+    if (activeTrap) {
+        const suspendedTrap = activeTrap;
+        activeTrap.container.setAttribute('data-focus-trap', 'suspended');
+        activeTrap.controller.abort();
+        suspendedTrapStack.push(suspendedTrap);
+    }
+    wrappingController.signal.addEventListener('abort', () => {
+        activeTrap = undefined;
+    });
+    signal.addEventListener('abort', () => {
+        container.removeAttribute('data-focus-trap');
+        const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+        if (suspendedTrapIndex >= 0) {
+            suspendedTrapStack.splice(suspendedTrapIndex, 1);
+        }
+        tryReactivate();
+    });
+    document.addEventListener('focus', event => {
+        ensureTrapZoneHasFocus(event.target);
+    }, { signal: wrappingController.signal, capture: true });
+    ensureTrapZoneHasFocus(document.activeElement);
+    activeTrap = {
+        container,
+        controller: wrappingController,
+        initialFocus,
+        originalSignal: signal
+    };
+    const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
+    if (suspendedTrapIndex >= 0) {
+        suspendedTrapStack.splice(suspendedTrapIndex, 1);
+    }
+    if (!abortSignal) {
+        return controller;
+    }
+}

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

@@ -0,0 +1,32 @@
+export declare type Direction = 'previous' | 'next' | 'start' | 'end';
+export declare type FocusMovementKeys = 'ArrowLeft' | 'ArrowDown' | 'ArrowUp' | 'ArrowRight' | 'h' | 'j' | 'k' | 'l' | 'a' | 's' | 'w' | 'd' | 'Tab' | 'Home' | 'End' | 'PageUp' | 'PageDown';
+export declare enum FocusKeys {
+    ArrowHorizontal = 1,
+    ArrowVertical = 2,
+    JK = 4,
+    HL = 8,
+    HomeAndEnd = 16,
+    PageUpDown = 256,
+    WS = 32,
+    AD = 64,
+    Tab = 128,
+    ArrowAll = 3,
+    HJKL = 12,
+    WASD = 96,
+    All = 511
+}
+export interface FocusZoneSettings {
+    focusOutBehavior?: 'stop' | 'wrap';
+    getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
+    focusableElementFilter?: (element: HTMLElement) => boolean;
+    bindKeys?: FocusKeys;
+    abortSignal?: AbortSignal;
+    activeDescendantControl?: HTMLElement;
+    onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
+    focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
+}
+export declare const isActiveDescendantAttribute = "data-is-active-descendant";
+export declare const activeDescendantActivatedDirectly = "activated-directly";
+export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
+export declare const hasActiveDescendantAttribute = "data-has-active-descendant";
+export declare function focusZone(container: HTMLElement, settings?: FocusZoneSettings): AbortController;