@primer/components 32.0.1-rc.c4c2c50a → 32.1.0

package/lib/behaviors/anchoredPosition.js

@@ -1,15 +1,26 @@
 "use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getAnchoredPosition = void 0;
+
+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']
+  '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
@@ -21,31 +32,35 @@ const alternateOrders = {
  * @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));
+  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));
 }
-exports.getAnchoredPosition = getAnchoredPosition;
 /**
  * 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;
+  let parentNode = element.parentNode;
+
+  while (parentNode !== null) {
+    if (parentNode instanceof HTMLElement && getComputedStyle(parentNode).position !== 'static') {
+      return parentNode;
     }
-    return document.body;
+
+    parentNode = parentNode.parentNode;
+  }
+
+  return document.body;
 }
 /**
  * Returns the rectangle (relative to the window) that will clip the given element
@@ -53,63 +68,68 @@ function getPositionedParent(element) {
  * @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;
+  let parentNode = element;
+
+  while (parentNode !== null) {
+    if (parentNode === document.body) {
+      break;
     }
-    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 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
+  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 = {}) {
-    const side = settings.side ?? positionDefaults.side;
-    const align = settings.align ?? positionDefaults.align;
-    return {
-        side,
-        align,
-        // offsets always default to 0 if their respective side/alignment is centered
-        anchorOffset: settings.anchorOffset ?? (side === 'inside-center' ? 0 : positionDefaults.anchorOffset),
-        alignmentOffset: settings.alignmentOffset ??
-            (align !== 'center' && side.startsWith('inside') ? positionDefaults.alignmentOffset : 0),
-        allowOutOfBounds: settings.allowOutOfBounds ?? positionDefaults.allowOutOfBounds
-    };
+  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.
@@ -122,56 +142,71 @@ function getDefaultSettings(settings = {}) {
  * @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;
-            }
-        }
+
+
+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 };
+  }
+
+  return { ...pos,
+    anchorSide
+  };
 }
 /**
  * Given a floating element and an anchor element, return coordinates for the
@@ -186,87 +221,82 @@ function pureCalculateAnchoredPosition(viewportRect, relativePosition, floatingR
  * @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;
+  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;
     }
-    else if (side === 'outside-right') {
-        left = anchorRight + anchorOffset;
+  }
+
+  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 === '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 === '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;
     }
-    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;
-        }
+  } 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;
     }
-    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 };
+  }
+
+  return {
+    top,
+    left
+  };
 }
 /**
  * Determines if there is an overflow
@@ -275,13 +305,12 @@ function calculatePosition(elementDimensions, anchorPosition, side, align, ancho
  * @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);
-    }
-}
+  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;
+  }
+}