@primer/behaviors 0.0.0-202201710334 → 0.0.0-2022017122041

package/lib/scroll-into-view.js

@@ -0,0 +1,42 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.scrollIntoView = scrollIntoView;
+
+function scrollIntoView(child, viewingArea, {
+  direction = 'vertical',
+  startMargin = 0,
+  endMargin = 0,
+  behavior = 'smooth'
+} = {}) {
+  const startSide = direction === 'vertical' ? 'top' : 'left';
+  const endSide = direction === 'vertical' ? 'bottom' : 'right';
+  const scrollSide = direction === 'vertical' ? 'scrollTop' : 'scrollLeft';
+  const {
+    [startSide]: childStart,
+    [endSide]: childEnd
+  } = child.getBoundingClientRect();
+  const {
+    [startSide]: viewingAreaStart,
+    [endSide]: viewingAreaEnd
+  } = viewingArea.getBoundingClientRect();
+  const isChildStartAboveViewingArea = childStart < viewingAreaStart + startMargin;
+  const isChildBottomBelowViewingArea = childEnd > viewingAreaEnd - endMargin;
+
+  if (isChildStartAboveViewingArea) {
+    const scrollHeightToChildStart = childStart - viewingAreaStart + viewingArea[scrollSide];
+    viewingArea.scrollTo({
+      behavior,
+      [startSide]: scrollHeightToChildStart - startMargin
+    });
+  } else if (isChildBottomBelowViewingArea) {
+    const scrollHeightToChildBottom = childEnd - viewingAreaEnd + viewingArea[scrollSide];
+    viewingArea.scrollTo({
+      behavior,
+      [startSide]: scrollHeightToChildBottom + endMargin
+    });
+  } // either completely in view or outside viewing area on both ends, don't scroll
+
+}

package/lib/utils/index.d.ts

@@ -0,0 +1,3 @@
+export * from './iterate-focusable-elements.js';
+export * from './unique-id.js';
+export * from './user-agent.js';

package/lib/utils/index.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+
+var _iterateFocusableElements = require("./iterate-focusable-elements.js");
+
+Object.keys(_iterateFocusableElements).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _iterateFocusableElements[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _iterateFocusableElements[key];
+    }
+  });
+});
+
+var _uniqueId = require("./unique-id.js");
+
+Object.keys(_uniqueId).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _uniqueId[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _uniqueId[key];
+    }
+  });
+});
+
+var _userAgent = require("./user-agent.js");
+
+Object.keys(_userAgent).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _userAgent[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _userAgent[key];
+    }
+  });
+});

package/lib/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/utils/iterate-focusable-elements.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isFocusable = isFocusable;
+exports.isTabbable = isTabbable;
+exports.iterateFocusableElements = iterateFocusableElements;
+
+/**
+ * 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/unique-id.d.ts

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

package/lib/utils/unique-id.js

@@ -0,0 +1,12 @@
+"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/user-agent.d.ts

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

package/lib/utils/user-agent.js

@@ -0,0 +1,15 @@
+"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/__tests__/anchored-position.test.d.ts

@@ -0,0 +1 @@
+export {};

package/lib-esm/__tests__/anchored-position.test.js

@@ -0,0 +1,386 @@
+import { getAnchoredPosition } from '../anchored-position.js';
+/*
+
+Note: In each test below, we check the calculation from getAnchoredPosition against exact
+values. For each `expect` call, there is an accompanying comment that distills the effective
+calculation from the inputs, which may help debugging in the event of a test failure.
+
+*/
+// The DOMRect constructor isn't available in JSDOM, so we improvise here.
+
+function makeDOMRect(x, y, width, height) {
+  return {
+    x,
+    y,
+    width,
+    height,
+    top: y,
+    left: x,
+    right: x + width,
+    bottom: y + height,
+
+    toJSON() {
+      return this;
+    }
+
+  };
+} // Since Jest/JSDOM doesn't support layout, we can stub out getBoundingClientRect if we know the
+// correct dimensions. JSDOM will handle the rest of the DOM API used by getAnchoredPosition.
+
+
+function createVirtualDOM(parentRect, anchorRect, floatingRect, parentBorders = {
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+}) {
+  const parent = document.createElement('div');
+  parent.style.overflow = 'hidden';
+  parent.style.position = 'relative';
+  parent.style.borderTopWidth = `${parentBorders.top}px`;
+  parent.style.borderRightWidth = `${parentBorders.right}px`;
+  parent.style.borderBottomWidth = `${parentBorders.bottom}px`;
+  parent.style.borderLeftWidth = `${parentBorders.left}px`;
+  parent.id = 'parent';
+  parent.innerHTML = '<div id="float"></div><div id="anchor"></div>';
+  const float = parent.querySelector('#float');
+  const anchor = parent.querySelector('#anchor');
+
+  anchor.getBoundingClientRect = () => anchorRect;
+
+  parent.getBoundingClientRect = () => parentRect;
+
+  float.getBoundingClientRect = () => floatingRect;
+
+  return {
+    float,
+    parent,
+    anchor
+  };
+}
+
+describe('getAnchoredPosition', () => {
+  it('returns the correct position in the default case with no overflow', () => {
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    document.body.innerHTML = '<div id="float"></div><div id="anchor"></div>';
+    const float = document.querySelector('#float');
+    const anchor = document.querySelector('#anchor');
+
+    float.getBoundingClientRect = () => floatingRect;
+
+    anchor.getBoundingClientRect = () => anchorRect;
+
+    document.body.getBoundingClientRect = () => makeDOMRect(0, 0, 1920, 0);
+
+    Object.defineProperty(window, 'innerHeight', {
+      get: () => 1080
+    });
+    const settings = {
+      anchorOffset: 4
+    };
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(254);
+    expect(left).toEqual(300);
+  });
+  it('returns the correct position in the default case with no overflow, inside a clipping parent', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {
+      anchorOffset: 4
+    };
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(234);
+    expect(left).toEqual(280);
+  });
+  it('returns the correct position for different outside side settings with no overflow', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    let top = 0;
+    let left = 0; // should be the same calculation as the default settings test above
+
+    settings.side = 'outside-bottom';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(234); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(280); // anchorRect.left - parentRect.left
+
+    settings.side = 'outside-left';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(180); // anchorRect.top - parentRect.top
+
+    expect(left).toEqual(176); // anchorRect.left - floatingRect.width - (settings.anchorOffset ?? 4) - parentRect.left
+
+    settings.side = 'outside-right';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(180); // anchorRect.top - parentRect.top
+
+    expect(left).toEqual(334); // anchorRect.left + anchorRect.width + (settings.anchorOffset ?? 4) - parentRect.left
+
+    settings.side = 'outside-top';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(76); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(280); // anchorRect.left - parentRect.left
+  });
+  it('returns the correct position for different inside side settings', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    let top = 0;
+    let left = 0;
+    settings.side = 'inside-bottom';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + anchorRect.height - (settings.anchorOffset ?? 4) - floatingRect.height - parentRect.top
+
+    expect(top).toEqual(126); // anchorRect.left + (settings.alignmentOffset ?? 4) - parentRect.left
+
+    expect(left).toEqual(284);
+    settings.side = 'inside-left';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(184); // anchorRect.top + (settings.alignmentOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(284); // anchorRect.left + (settings.anchorOffset ?? 4) - parentRect.left
+
+    settings.side = 'inside-right';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + (settings.alignmentOffset ?? 4) - parentRect.top
+
+    expect(top).toEqual(184); // anchorRect.left + anchorRect.width - (settings.anchorOffset ?? 4) - floatingRect.width - parentRect.left
+
+    expect(left).toEqual(226); // almost the same as inside-left, with the exception of offsets
+
+    settings.side = 'inside-top';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(184); // anchorRect.top + (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(284); // anchorRect.left + (settings.alignmentOffset ?? 4) - parentRect.left
+
+    settings.side = 'inside-center';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(184); // anchorRect.top + (settings.alignmentOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(255); // anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2 - parentRect.left
+  });
+  it('returns the correct position inside centering along both axes', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {
+      side: 'inside-center',
+      align: 'center'
+    };
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(155); // anchorRect.top + anchorRect.height / 2 - floatingRect.height / 2 - parentRect.top
+
+    expect(left).toEqual(255); // anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2 - parentRect.left
+  });
+  it('returns the correct position for different alignment settings with no overflow', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    let top = 0;
+    let left = 0;
+    settings.align = 'start';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings));
+    expect(top).toEqual(234); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(280); // anchorRect.left + (settings.alignmentOffset ?? 0) - parentRect.left
+
+    settings.align = 'center';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(top).toEqual(234); // anchorRect.left + anchorRect.width / 2 - floatingRect.width / 2 + (settings.anchorOffset ?? 0) - parentRect.left
+
+    expect(left).toEqual(255);
+    settings.align = 'end';
+    ({
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings)); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(top).toEqual(234); // anchorRect.left + anchorRect.width - floatingRect.width - (settings.alignmentOffset ?? 0) - parentRect.left
+
+    expect(left).toEqual(230);
+  });
+  it('properly flips to the opposite side if the calculated position overflows along the same axis', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 400, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(276); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(280); // anchorRect.left - parentRect.left
+  });
+  it('properly moves to an adjacent side if overflow happens along side edge and flipped edge', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 200);
+    const anchorRect = makeDOMRect(300, 100, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(80); // anchorRect.top - parentRect.top
+
+    expect(left).toEqual(334); // anchorRect.left + anchorRect.width + (settings.anchorOffset ?? 4) - parentRect.left
+  });
+  it('properly adjusts the position using an alignment offset if overflow happens along the alignment edge', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 200, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 400, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(234); // anchorRect.top + anchorRect.height + (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(100); // parentRect.width - floatingRect.width
+  });
+  it('properly calculates the position that needs to be flipped and offset-adjusted', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(300, 400, 50, 50);
+    const floatingRect = makeDOMRect(NaN, NaN, 400, 100);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {};
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings);
+    expect(top).toEqual(276); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
+
+    expect(left).toEqual(100); // parentRect.width - floatingRect.width
+  });
+  it('properly calculates the outside position with many simultaneous settings interactions (stress test)', () => {
+    const parentRect = makeDOMRect(20, 20, 200, 500);
+    const anchorRect = makeDOMRect(95, 295, 100, 200);
+    const floatingRect = makeDOMRect(NaN, NaN, 175, 200);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {
+      side: 'outside-right',
+      align: 'center',
+      alignmentOffset: 10,
+      anchorOffset: -10
+    };
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings); // expect to try right, left, and bottom before ending on top
+
+    expect(top).toEqual(85); // anchorRect.top - floatingRect.height - (settings.anchorOffset ?? 4) - parentRect.top
+    // expect center alignment to run against edge, so ignored. Also causes alignment offset to be ignored.
+
+    expect(left).toEqual(25); // parentRect.width - floatingRect.width
+  });
+  it('properly calculates the inside position with many simultaneous settings interactions (stress test)', () => {
+    const parentRect = makeDOMRect(20, 20, 500, 500);
+    const anchorRect = makeDOMRect(100, 100, 300, 300);
+    const floatingRect = makeDOMRect(NaN, NaN, 100, 200);
+    const {
+      float,
+      anchor
+    } = createVirtualDOM(parentRect, anchorRect, floatingRect);
+    const settings = {
+      side: 'inside-right',
+      align: 'center',
+      alignmentOffset: 10,
+      anchorOffset: -10
+    };
+    const {
+      top,
+      left
+    } = getAnchoredPosition(float, anchor, settings); // anchorRect.top + anchorRect.height / 2 - floatingRect.height / 2 + (settings.alignmentOffset ?? 4) - parentRect.top
+
+    expect(top).toEqual(140); // anchorRect.left + anchorRect.width - floatingRect.width - (settings.anchorOffset ?? 4) - parentRect.left
+
+    expect(left).toEqual(290);
+  });
+});

package/lib-esm/__tests__/focus-trap.test.d.ts

@@ -0,0 +1 @@
+export {};