@primer/components 0.0.0-2021116182158 → 0.0.0-202111619107

package/lib/behaviors/anchoredPosition.js

@@ -1,316 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getAnchoredPosition = getAnchoredPosition;
-// When prettier supports template literal types...
-// export type AnchorSide = `${'inside' | 'outside'}-${'top' | 'bottom' | 'right' | 'left'}` | 'inside-center'
-
-/**
- * Settings that customize how a floating element is positioned
- * with respect to an anchor element.
- */
-// For each outside anchor position, list the order of alternate positions to try in
-// the event that the original position overflows. See comment on `allowOutOfBounds`
-// for a more detailed description.
-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']
-};
-
-/**
- * Given a floating element and an anchor element, return coordinates for the top-left
- * of the floating element in order to absolutely position it such that it appears
- * near the anchor element.
- *
- * @param floatingElement Element intended to be positioned near or within an anchor
- * @param anchorElement The element to serve as the position anchor
- * @param settings Settings to determine the rules for positioning the floating element
- * @returns {top: number, left: number} coordinates for the floating element
- */
-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));
-}
-/**
- * Returns the nearest proper HTMLElement parent of `element` whose
- * position is not "static", or document.body, whichever is closer
- */
-
-
-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;
-}
-/**
- * Returns the rectangle (relative to the window) that will clip the given element
- * if it is rendered outside of its bounds.
- * @param element
- * @returns
- */
-
-
-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,
-    // If the clipping node is document.body, it can expand to the full height of the window
-    height: Math.max(elemRect.height - borderTop - borderBottom, clippingNode === document.body ? window.innerHeight : -Infinity)
-  };
-} // Default settings to position a floating element
-
-
-const positionDefaults = {
-  side: 'outside-bottom',
-  align: 'start',
-  // note: the following default is not applied if side === "inside-center"
-  anchorOffset: 4,
-  // note: the following default is only applied if side starts with "inside"
-  // and align is not center
-  alignmentOffset: 4,
-  allowOutOfBounds: false
-};
-/**
- * Compute a full PositionSettings object from the given partial PositionSettings object
- * by filling in with defaults where applicable.
- * @param settings Partial settings - any omissions will be defaulted
- */
-
-function getDefaultSettings(settings = {}) {
-  var _settings$side, _settings$align, _settings$anchorOffse, _settings$alignmentOf, _settings$allowOutOfB;
-
-  const side = (_settings$side = settings.side) !== null && _settings$side !== void 0 ? _settings$side : positionDefaults.side;
-  const align = (_settings$align = settings.align) !== null && _settings$align !== void 0 ? _settings$align : positionDefaults.align;
-  return {
-    side,
-    align,
-    // offsets always default to 0 if their respective side/alignment is centered
-    anchorOffset: (_settings$anchorOffse = settings.anchorOffset) !== null && _settings$anchorOffse !== void 0 ? _settings$anchorOffse : side === 'inside-center' ? 0 : positionDefaults.anchorOffset,
-    alignmentOffset: (_settings$alignmentOf = settings.alignmentOffset) !== null && _settings$alignmentOf !== void 0 ? _settings$alignmentOf : align !== 'center' && side.startsWith('inside') ? positionDefaults.alignmentOffset : 0,
-    allowOutOfBounds: (_settings$allowOutOfB = settings.allowOutOfBounds) !== null && _settings$allowOutOfB !== void 0 ? _settings$allowOutOfB : positionDefaults.allowOutOfBounds
-  };
-}
-/**
- * Note: This is a pure function with no dependency on DOM APIs.
- * @see getAnchoredPosition
- * @see getDefaultSettings
- * @param viewportRect BoxPosition for the rectangle that will clip the floating element if it is
- *   rendered outside of the boundsof the rectangle.
- * @param relativePosition Position for the closest positioned proper parent of the floating element
- * @param floatingRect WidthAndHeight for the floating element
- * @param anchorRect BoxPosition for the anchor element
- * @param PositionSettings to customize the calculated position for the floating element.
- */
-
-
-function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingRect, anchorRect, {
-  side,
-  align,
-  allowOutOfBounds,
-  anchorOffset,
-  alignmentOffset
-}) {
-  // Compute the relative viewport rect, to bring it into the same coordinate space as `pos`
-  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; // Handle screen overflow
-
-  if (!allowOutOfBounds) {
-    const alternateOrder = alternateOrders[side];
-    let positionAttempt = 0;
-
-    if (alternateOrder) {
-      let prevSide = side; // Try all the alternate sides until one does not overflow
-
-      while (positionAttempt < alternateOrder.length && shouldRecalculatePosition(prevSide, pos, relativeViewportRect, floatingRect)) {
-        const nextSide = alternateOrder[positionAttempt++];
-        prevSide = nextSide; // If we have cut off in the same dimension as the "side" option, try flipping to the opposite side.
-
-        pos = calculatePosition(floatingRect, anchorRect, nextSide, align, anchorOffset, alignmentOffset);
-        pos.top -= relativePosition.top;
-        pos.left -= relativePosition.left;
-        anchorSide = nextSide;
-      }
-    } // At this point we've flipped the position if applicable. Now just nudge until it's on-screen.
-
-
-    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 we have exhausted all possible positions and none of them worked, we
-    // say that overflowing the bottom of the screen is acceptable since it is
-    // likely to be able to scroll.
-
-
-    if (alternateOrder && positionAttempt < alternateOrder.length) {
-      if (pos.top + floatingRect.height > viewportRect.height + relativeViewportRect.top) {
-        pos.top = viewportRect.height + relativeViewportRect.top - floatingRect.height;
-      }
-    }
-  }
-
-  return { ...pos,
-    anchorSide
-  };
-}
-/**
- * Given a floating element and an anchor element, return coordinates for the
- * top-left of the floating element in order to absolutely position it such
- * that it appears near the anchor element.
- *
- * @param elementDimensions Dimensions of the floating element
- * @param anchorPosition Position of the anchor element
- * @param side Side of the anchor to position the floating element
- * @param align How to align the floating element with the anchor element
- * @param anchorOffset Absolute pixel offset for anchor positioning
- * @param alignmentOffset Absolute pixel offset for alignment
- * @returns {top: number, left: number} coordinates for the floating element
- */
-
-
-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 {
-      // end
-      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 {
-      // end
-      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 {
-      // end
-      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 {
-      // end
-      top = anchorBottom - elementDimensions.height - alignmentOffset;
-    }
-  }
-
-  return {
-    top,
-    left
-  };
-}
-/**
- * Determines if there is an overflow
- * @param side
- * @param currentPos
- * @param containerDimensions
- * @param elementDimensions
- */
-
-
-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/lib/behaviors/focusTrap.d.ts

@@ -1,12 +0,0 @@
-/**
- * Traps focus within the given container.
- * @param container The container in which to trap focus
- * @returns AbortController - call `.abort()` to disable the focus trap
- */
-export declare function focusTrap(container: HTMLElement, initialFocus?: HTMLElement): AbortController;
-/**
- * Traps focus within the given container.
- * @param container The container in which to trap focus
- * @param abortSignal An AbortSignal to control the focus trap.
- */
-export declare function focusTrap(container: HTMLElement, initialFocus: HTMLElement | undefined, abortSignal: AbortSignal): void;

package/lib/behaviors/focusTrap.js

@@ -1,179 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.focusTrap = focusTrap;
-
-var _iterateFocusableElements = require("../utils/iterateFocusableElements");
-
-var _eventListenerSignal = require("../polyfills/eventListenerSignal");
-
-(0, _eventListenerSignal.polyfill)();
-const suspendedTrapStack = [];
-let activeTrap = undefined;
-
-function tryReactivate() {
-  const trapToReactivate = suspendedTrapStack.pop();
-
-  if (trapToReactivate) {
-    focusTrap(trapToReactivate.container, trapToReactivate.initialFocus, trapToReactivate.originalSignal);
-  }
-} // @todo If AbortController.prototype.follow is ever implemented, that
-// could replace this function. @see https://github.com/whatwg/dom/issues/920
-
-
-function followSignal(signal) {
-  const controller = new AbortController();
-  signal.addEventListener('abort', () => {
-    controller.abort();
-  });
-  return controller;
-}
-/**
- * Returns the first focusable child of `container`. If `lastChild` is true,
- * returns the last focusable child of `container`.
- * @param container
- * @param lastChild
- */
-
-
-function getFocusableChild(container, lastChild = false) {
-  return (0, _iterateFocusableElements.iterateFocusableElements)(container, {
-    reverse: lastChild,
-    strict: true,
-    onlyTabbable: true
-  }).next().value;
-}
-/**
- * Traps focus within the given container.
- * @param container The container in which to trap focus
- * @returns AbortController - call `.abort()` to disable the focus trap
- */
-
-
-function focusTrap(container, initialFocus, abortSignal) {
-  // Set up an abort controller if a signal was not passed in
-  const controller = new AbortController();
-  const signal = abortSignal !== null && abortSignal !== void 0 ? abortSignal : controller.signal;
-  container.setAttribute('data-focus-trap', 'active');
-  let lastFocusedChild = undefined; // Ensure focus remains in the trap zone by checking that a given recently-focused
-  // element is inside the trap zone. If it isn't, redirect focus to a suitable
-  // element within the trap zone. If need to redirect focus and a suitable element
-  // is not found, focus the container.
-
-  function ensureTrapZoneHasFocus(focusedElement) {
-    if (focusedElement instanceof HTMLElement && document.contains(container)) {
-      if (container.contains(focusedElement)) {
-        // If a child of the trap zone was focused, remember it
-        lastFocusedChild = focusedElement;
-        return;
-      } else {
-        if (lastFocusedChild && (0, _iterateFocusableElements.isTabbable)(lastFocusedChild) && container.contains(lastFocusedChild)) {
-          lastFocusedChild.focus();
-          return;
-        } else if (initialFocus && container.contains(initialFocus)) {
-          initialFocus.focus();
-          return;
-        } else {
-          // Ensure the container is focusable:
-          // - Either the container already has a `tabIndex`
-          // - Or provide a temporary `tabIndex`
-          const containerNeedsTemporaryTabIndex = container.getAttribute('tabindex') === null;
-
-          if (containerNeedsTemporaryTabIndex) {
-            container.setAttribute('tabindex', '-1');
-          } // Focus the container.
-
-
-          container.focus(); // If a temporary `tabIndex` was provided, remove it.
-
-          if (containerNeedsTemporaryTabIndex) {
-            // Once focus has moved from the container to a child within the FocusTrap,
-            // the container can be made un-refocusable by removing `tabIndex`.
-            container.addEventListener('blur', () => container.removeAttribute('tabindex'), {
-              once: true
-            }); // NB: If `tabIndex` was removed *before* `blur`, then certain browsers (e.g. Chrome)
-            // would consider `body` the `activeElement`, and as a result, keyboard navigation
-            // between children would break, since `body` is outside the `FocusTrap`.
-          }
-
-          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);
-  } // When this trap is canceled, either by the user or by us for suspension
-
-
-  wrappingController.signal.addEventListener('abort', () => {
-    activeTrap = undefined;
-  }); // Only when user-canceled
-
-  signal.addEventListener('abort', () => {
-    container.removeAttribute('data-focus-trap');
-    const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
-
-    if (suspendedTrapIndex >= 0) {
-      suspendedTrapStack.splice(suspendedTrapIndex, 1);
-    }
-
-    tryReactivate();
-  }); // Prevent focus leaving the trap container
-
-  document.addEventListener('focus', event => {
-    ensureTrapZoneHasFocus(event.target);
-  }, // use capture to ensure we get all events.  focus events do not bubble
-  {
-    signal: wrappingController.signal,
-    capture: true
-  }); // focus the first element
-
-  ensureTrapZoneHasFocus(document.activeElement);
-  activeTrap = {
-    container,
-    controller: wrappingController,
-    initialFocus,
-    originalSignal: signal
-  }; // If we are activating a focus trap for a container that was previously
-  // suspended, just remove it from the suspended list.
-
-  const suspendedTrapIndex = suspendedTrapStack.findIndex(t => t.container === container);
-
-  if (suspendedTrapIndex >= 0) {
-    suspendedTrapStack.splice(suspendedTrapIndex, 1);
-  }
-
-  if (!abortSignal) {
-    return controller;
-  }
-}

package/lib/behaviors/focusZone.d.ts

@@ -1,137 +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
-}
-/**
- * Options that control the behavior of the arrow focus behavior.
- */
-export interface FocusZoneSettings {
-    /**
-     * Choose the behavior applied in cases where focus is currently at either the first or
-     * last element of the container.
-     *
-     * "stop" - do nothing and keep focus where it was
-     * "wrap" - wrap focus around to the first element from the last, or the last element from the first
-     *
-     * Default: "stop"
-     */
-    focusOutBehavior?: 'stop' | 'wrap';
-    /**
-     * If set, this will be called to get the next focusable element. If this function
-     * returns null, we will try to determine the next direction ourselves. Use the
-     * `bindKeys` option to customize which keys are listened to.
-     *
-     * The function can accept a Direction, indicating the direction focus should move,
-     * the HTMLElement that was previously focused, and lastly the `KeyboardEvent` object
-     * created by the original `"keydown"` event.
-     */
-    getNextFocusable?: (direction: Direction, from: Element | undefined, event: KeyboardEvent) => HTMLElement | undefined;
-    /**
-     * Called to decide if a focusable element is allowed to participate in the arrow
-     * key focus behavior.
-     *
-     * By default, all focusable elements within the given container will participate
-     * in the arrow key focus behavior. If you need to withhold some elements from
-     * participation, implement this callback to return false for those elements.
-     */
-    focusableElementFilter?: (element: HTMLElement) => boolean;
-    /**
-     * Bit flags that identify keys that will be bound to. Each available key either
-     * moves focus to the "next" element or the "previous" element, so it is best
-     * to only bind the keys that make sense to move focus in your UI. Use the `FocusKeys`
-     * object to discover supported keys.
-     *
-     * Use the bitwise "OR" operator (`|`) to combine key types. For example,
-     * `FocusKeys.WASD | FocusKeys.HJKL` represents all of W, A, S, D, H, J, K, and L.
-     *
-     * A note on FocusKeys.PageUpDown: This behavior does not support paging, so by default
-     * using these keys will result in the same behavior as Home and End. To override this
-     * behavior, implement `getNextFocusable`.
-     *
-     * The default for this setting is `FocusKeys.ArrowVertical | FocusKeys.HomeAndEnd`, unless
-     * `getNextFocusable` is provided, in which case `FocusKeys.ArrowAll | FocusKeys.HomeAndEnd`
-     * is used as the default.
-     */
-    bindKeys?: FocusKeys;
-    /**
-     * If provided, this signal can be used to disable the behavior and remove any
-     * event listeners.
-     */
-    abortSignal?: AbortSignal;
-    /**
-     * If `activeDescendantControl` is supplied, do not move focus or alter `tabindex` on
-     * any element. Instead, manage `aria-activedescendant` according to the ARIA best
-     * practices guidelines.
-     * @see https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_focus_activedescendant
-     *
-     * The given `activeDescendantControl` will be given an `aria-controls` attribute that
-     * references the ID of the `container`. Additionally, it will be given an
-     * `aria-activedescendant` attribute that references the ID of the currently-active
-     * descendant.
-     *
-     * This element will retain DOM focus as arrow keys are pressed.
-     */
-    activeDescendantControl?: HTMLElement;
-    /**
-     * Called each time the active descendant changes. Note that either of the parameters
-     * may be undefined, e.g. when an element in the container first becomes active, or
-     * when the controlling element becomes unfocused.
-     */
-    onActiveDescendantChanged?: (newActiveDescendant: HTMLElement | undefined, previousActiveDescendant: HTMLElement | undefined, directlyActivated: boolean) => void;
-    /**
-     * This option allows customization of the behavior that determines which of the
-     * focusable elements should be focused when focus enters the container via the Tab key.
-     *
-     * When set to "first", whenever focus enters the container via Tab, we will focus the
-     * first focusable element. When set to "previous", the most recently focused element
-     * will be focused (fallback to first if there was no previous).
-     *
-     * The "closest" strategy works like "first", except either the first or the last element
-     * of the container will be focused, depending on the direction from which focus comes.
-     *
-     * If a function is provided, this function should return the HTMLElement intended
-     * to receive focus. This is useful if you want to focus the currently "selected"
-     * item or element.
-     *
-     * Default: "previous"
-     *
-     * For more information, @see https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_general_within
-     */
-    focusInStrategy?: 'first' | 'closest' | 'previous' | ((previousFocusedElement: Element) => HTMLElement | undefined);
-}
-export declare const isActiveDescendantAttribute = "data-is-active-descendant";
-/**
- * A value of activated-directly for data-is-active-descendant indicates the descendant was activated
- * by a manual user interaction with intent to move active descendant.  This usually translates to the
- * user pressing one of the bound keys (up/down arrow, etc) to move through the focus zone.  This is
- * intended to be roughly equivalent to the :focus-visible pseudo-class
- **/
-export declare const activeDescendantActivatedDirectly = "activated-directly";
-/**
- * A value of activated-indirectly for data-is-active-descendant indicates the descendant was activated
- * implicitly, and not by a direct key press.  This includes focus zone being created from scratch, focusable
- * elements being added/removed, and mouseover events. This is intended to be roughly equivalent
- * to :focus:not(:focus-visible)
- **/
-export declare const activeDescendantActivatedIndirectly = "activated-indirectly";
-export declare const hasActiveDescendantAttribute = "data-has-active-descendant";
-/**
- * Sets up the arrow key focus behavior for all focusable elements in the given `container`.
- * @param container
- * @param settings
- * @returns
- */
-export declare function focusZone(container: HTMLElement, settings?: FocusZoneSettings): AbortController;