@primer/components 0.0.0-2021116153548 → 0.0.0-202111616587

package/lib/utils/iterateFocusableElements.js

@@ -1,113 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.iterateFocusableElements = iterateFocusableElements;
-exports.isFocusable = isFocusable;
-exports.isTabbable = isTabbable;
-
-/**
- * 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.
- */
-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
- */
-
-
-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
- */
-
-
-function isTabbable(elem, strict = false) {
-  return isFocusable(elem, strict) && elem.getAttribute('tabindex') !== '-1';
-}

package/lib/utils/uniqueId.d.ts

@@ -1 +0,0 @@
-export declare function uniqueId(): string;

package/lib/utils/uniqueId.js

@@ -1,12 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.uniqueId = uniqueId;
-// 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;
-
-function uniqueId() {
-  return `__primer_id_${idSeed++}`;
-}

package/lib/utils/userAgent.d.ts

@@ -1 +0,0 @@
-export declare function isMacOS(): boolean;

package/lib/utils/userAgent.js

@@ -1,15 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isMacOS = isMacOS;
-let isMac = undefined;
-
-function isMacOS() {
-  if (isMac === undefined) {
-    isMac = /^mac/i.test(window.navigator.platform);
-  }
-
-  return isMac;
-}

package/lib-esm/behaviors/anchoredPosition.d.ts

@@ -1,89 +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';
-/**
- * Settings that customize how a floating element is positioned
- * with respect to an anchor element.
- */
-export interface PositionSettings {
-    /**
-     * Sets the side of the anchor element that the floating element should be
-     * pinned to. This side is given by a string starting with either "inside" or
-     * "outside", followed by a hyphen, followed by either "top", "right", "bottom",
-     * or "left". Additionally, "inside-center" is an allowed value.
-     *
-     * The first part of this string, "inside" or "outside", determines whether the
-     * floating element should be attempted to be placed "inside" the anchor element
-     * or "outside" of it. Using "inside" is useful for making it appear that the
-     * anchor _contains_ the floating element, and it can be used for implementing a
-     * dialog that is centered on the screen. The "outside" value is more common and
-     * can be used for tooltips, popovers, menus, etc.
-     *
-     * The second part of this string determines the _edge_ on the anchor element that
-     * the floating element will be anchored to. If side is "inside-center", then
-     * the floating element will be centered in the X-direction (while align is used
-     * to position it in the Y-direction).
-     * Note: "outside-center" is _not_ a valid value for this property.
-     */
-    side: AnchorSide;
-    /**
-     * Determines how the floating element should align with the anchor element. If
-     * set to "start", the floating element's first edge (top or left) will align
-     * with the anchor element's first edge. If set to "center", the floating
-     * element will be centered along the axis of the anchor edge. If set to "end",
-     * the floating element's last edge will align with the anchor element's last edge.
-     */
-    align: AnchorAlignment;
-    /**
-     * The number of pixels between the anchor edge and the floating element.
-     *
-     * Positive values move the floating element farther from the anchor element
-     * (for outside positioning) or further inside the anchor element (for inside
-     * positioning). Negative values have the opposite effect.
-     */
-    anchorOffset: number;
-    /**
-     * An additional offset, in pixels, to move the floating element from
-     * the aligning edge.
-     *
-     * Positive values move the floating element in the direction of center-
-     * alignment. Negative values move the floating element away from center-
-     * alignment. When align is "center", positive offsets move the floating
-     * element right (top or bottom anchor side) or down (left or right
-     * anchor side).
-     */
-    alignmentOffset: number;
-    /**
-     * If false, when the above settings result in rendering the floating element
-     * wholly or partially outside of the bounds of the containing element, attempt
-     * to adjust the settings to prevent this. Only applies to "outside" positioning.
-     *
-     * First, attempt to flip to the opposite edge of the anchor if the floating
-     * element is getting clipped in that direction. If flipping results in a
-     * similar clipping, try moving to the adjacent sides.
-     *
-     * Once we find a side that does not clip the overlay in its own dimension,
-     * check the rest of the sides to see if we need to adjust the alignment offset
-     * to fit in other dimensions.
-     *
-     * If we try all four sides and get clipped each time, settle for overflowing
-     * and use the "bottom" side, since the ability to scroll is most likely in
-     * this direction.
-     */
-    allowOutOfBounds: boolean;
-}
-export interface AnchorPosition {
-    top: number;
-    left: number;
-    anchorSide: 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 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
- */
-export declare function getAnchoredPosition(floatingElement: Element, anchorElement: Element | DOMRect, settings?: Partial<PositionSettings>): AnchorPosition;

package/lib-esm/behaviors/anchoredPosition.js

@@ -1,309 +0,0 @@
-// 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
- */
-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));
-}
-/**
- * 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-esm/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;