@primer/behaviors 0.0.0-2021113221730 → 0.0.0-2022017101021

package/lib-esm/utils/iterate-focusable-elements.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Options to the focusable elements iterator
+ */
+export interface IterateFocusableElements {
+    /**
+     * (Default: false) Iterate through focusable elements in reverse-order
+     */
+    reverse?: boolean;
+    /**
+     * (Default: false) Perform additional checks to determine tabbability
+     * which may adversely affect app performance.
+     */
+    strict?: boolean;
+    /**
+     * (Default: false) Only iterate tabbable elements, which is the subset
+     * of focusable elements that are part of the page's tab sequence.
+     */
+    onlyTabbable?: boolean;
+}
+/**
+ * Returns an iterator over all of the focusable elements within `container`.
+ * Note: If `container` is itself focusable it will be included in the results.
+ * @param container The container over which to find focusable elements.
+ * @param reverse If true, iterate backwards through focusable elements.
+ */
+export declare function iterateFocusableElements(container: HTMLElement, options?: IterateFocusableElements): Generator<HTMLElement, undefined, undefined>;
+/**
+ * Determines whether the given element is focusable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant).
+ * @param elem
+ * @param strict
+ */
+export declare function isFocusable(elem: HTMLElement, strict?: boolean): boolean;
+/**
+ * Determines whether the given element is tabbable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant). This check
+ * ensures that the element is focusable and that its tabindex is not explicitly
+ * set to "-1" (which makes it focusable, but removes it from the tab order).
+ * @param elem
+ * @param strict
+ */
+export declare function isTabbable(elem: HTMLElement, strict?: boolean): boolean;

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

@@ -0,0 +1,102 @@
+/**
+ * Options to the focusable elements iterator
+ */
+
+/**
+ * Returns an iterator over all of the focusable elements within `container`.
+ * Note: If `container` is itself focusable it will be included in the results.
+ * @param container The container over which to find focusable elements.
+ * @param reverse If true, iterate backwards through focusable elements.
+ */
+export function* iterateFocusableElements(container, options = {}) {
+  var _options$strict, _options$onlyTabbable;
+
+  const strict = (_options$strict = options.strict) !== null && _options$strict !== void 0 ? _options$strict : false;
+  const acceptFn = ((_options$onlyTabbable = options.onlyTabbable) !== null && _options$onlyTabbable !== void 0 ? _options$onlyTabbable : false) ? isTabbable : isFocusable;
+  const walker = document.createTreeWalker(container, NodeFilter.SHOW_ELEMENT, {
+    acceptNode: node => node instanceof HTMLElement && acceptFn(node, strict) ? NodeFilter.FILTER_ACCEPT : NodeFilter.FILTER_SKIP
+  });
+  let nextNode = null; // Allow the container to participate
+
+  if (!options.reverse && acceptFn(container, strict)) {
+    yield container;
+  } // If iterating in reverse, continue traversing down into the last child until we reach
+  // a leaf DOM node
+
+
+  if (options.reverse) {
+    let lastChild = walker.lastChild();
+
+    while (lastChild) {
+      nextNode = lastChild;
+      lastChild = walker.lastChild();
+    }
+  } else {
+    nextNode = walker.firstChild();
+  }
+
+  while (nextNode instanceof HTMLElement) {
+    yield nextNode;
+    nextNode = options.reverse ? walker.previousNode() : walker.nextNode();
+  } // Allow the container to participate (in reverse)
+
+
+  if (options.reverse && acceptFn(container, strict)) {
+    yield container;
+  }
+
+  return undefined;
+}
+/**
+ * Determines whether the given element is focusable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant).
+ * @param elem
+ * @param strict
+ */
+
+export function isFocusable(elem, strict = false) {
+  // Certain conditions cause an element to never be focusable, even if they have tabindex="0"
+  const disabledAttrInert = ['BUTTON', 'INPUT', 'SELECT', 'TEXTAREA', 'OPTGROUP', 'OPTION', 'FIELDSET'].includes(elem.tagName) && elem.disabled;
+  const hiddenInert = elem.hidden;
+  const hiddenInputInert = elem instanceof HTMLInputElement && elem.type === 'hidden';
+
+  if (disabledAttrInert || hiddenInert || hiddenInputInert) {
+    return false;
+  } // Each of the conditions checked below require a reflow, thus are gated by the `strict`
+  // argument. If any are true, the element is not focusable, even if tabindex is set.
+
+
+  if (strict) {
+    const sizeInert = elem.offsetWidth === 0 || elem.offsetHeight === 0;
+    const visibilityInert = ['hidden', 'collapse'].includes(getComputedStyle(elem).visibility);
+    const clientRectsInert = elem.getClientRects().length === 0;
+
+    if (sizeInert || visibilityInert || clientRectsInert) {
+      return false;
+    }
+  } // Any element with `tabindex` explicitly set can be focusable, even if it's set to "-1"
+
+
+  if (elem.getAttribute('tabindex') != null) {
+    return true;
+  } // One last way `elem.tabIndex` can be wrong.
+
+
+  if (elem instanceof HTMLAnchorElement && elem.getAttribute('href') == null) {
+    return false;
+  }
+
+  return elem.tabIndex !== -1;
+}
+/**
+ * Determines whether the given element is tabbable. If `strict` is true, we may
+ * perform additional checks that require a reflow (less performant). This check
+ * ensures that the element is focusable and that its tabindex is not explicitly
+ * set to "-1" (which makes it focusable, but removes it from the tab order).
+ * @param elem
+ * @param strict
+ */
+
+export function isTabbable(elem, strict = false) {
+  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
+}

package/lib-esm/utils/unique-id.js

@@ -0,0 +1,5 @@
+// Note: uniqueId may be unsafe in SSR contexts if it is used create DOM IDs or otherwise cause a hydration warning. Use useSSRSafeId instead.
+let idSeed = 10000;
+export function uniqueId() {
+  return `__primer_id_${idSeed++}`;
+}

package/lib-esm/utils/user-agent.js

@@ -0,0 +1,8 @@
+let isMac = undefined;
+export function isMacOS() {
+  if (isMac === undefined) {
+    isMac = /^mac/i.test(window.navigator.platform);
+  }
+
+  return isMac;
+}

package/package.json

@@ -1,25 +1,40 @@
 {
   "name": "@primer/behaviors",
-  "version": "0.0.0-2021113221730",
+  "version": "0.0.0-2022017101021",
   "description": "Shared behaviors for JavaScript components",
-  "main": "./dist/index.js",
-  "type": "module",
+  "main": "lib/index.js",
+  "module": "lib-esm/index.js",
+  "exports": {
+    ".": {
+      "node": "./lib/index.js",
+      "default": "./lib-esm/index.js"
+    },
+    "./utils": {
+      "node": "./lib/utils.js",
+      "default": "./lib-esm/utils.js"
+    }
+  },
   "types": "dist/index.d.ts",
   "files": [
-    "dist"
+    "dist",
+    "utils",
+    "lib",
+    "lib-esm"
   ],
   "sideEffects": [
     "dist/focus-zone.js",
     "dist/focus-trap.js"
   ],
   "scripts": {
+    "build:esm": "cross-env BABEL_ENV=esmUnbundled babel src --extensions '.ts' --out-dir 'lib/esm' --source-maps",
+    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions '.ts' --out-dir 'lib/cjs' --source-maps",
     "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": "tsc",
+    "build": "./scripts/build",
     "size-limit": "npm run build && size-limit",
     "release": "npm run build && changeset publish"
   },
@@ -47,6 +62,22 @@
     }
   ],
   "devDependencies": {
+    "@babel/cli": "7.14.5",
+    "@babel/core": "7.14.8",
+    "@babel/eslint-parser": "7.15.7",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.16.0",
+    "@babel/plugin-proposal-optional-chaining": "7.14.5",
+    "@babel/plugin-transform-modules-commonjs": "7.14.5",
+    "@babel/preset-react": "7.14.5",
+    "@babel/preset-typescript": "7.15.0",
+    "babel-core": "7.0.0-bridge.0",
+    "babel-loader": "^8.2.2",
+    "babel-plugin-add-react-displayname": "0.0.5",
+    "babel-plugin-macros": "3.1.0",
+    "babel-plugin-preval": "5.0.0",
+    "babel-plugin-styled-components": "2.0.2",
+    "babel-plugin-transform-replace-expressions": "0.2.0",
+    "babel-polyfill": "6.26.0",
     "@changesets/changelog-github": "^0.4.2",
     "@changesets/cli": "^2.18.1",
     "@github/prettier-config": "0.0.4",
@@ -55,6 +86,7 @@
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^27.0.3",
     "@types/react": "^17.0.37",
+    "cross-env": "^7.0.3",
     "esbuild": "^0.14.1",
     "esbuild-jest": "^0.5.0",
     "eslint": "^8.3.0",

package/dist/anchored-position.d.ts

@@ -1,15 +0,0 @@
-export declare type AnchorAlignment = 'start' | 'center' | 'end';
-export declare type AnchorSide = 'inside-top' | 'inside-bottom' | 'inside-left' | 'inside-right' | 'inside-center' | 'outside-top' | 'outside-bottom' | 'outside-left' | 'outside-right';
-export interface PositionSettings {
-    side: AnchorSide;
-    align: AnchorAlignment;
-    anchorOffset: number;
-    alignmentOffset: number;
-    allowOutOfBounds: boolean;
-}
-export interface AnchorPosition {
-    top: number;
-    left: number;
-    anchorSide: AnchorSide;
-}
-export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/dist/anchored-position.js

@@ -1,206 +0,0 @@
-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/focus-trap.d.ts

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

package/dist/focus-trap.js

@@ -1,107 +0,0 @@
-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/focus-zone.d.ts

@@ -1,32 +0,0 @@
-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;