@primer/behaviors 0.0.0-202111322495 → 0.0.0-2022017101021

package/lib/polyfills/event-listener-signal.js

@@ -0,0 +1,64 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.polyfill = polyfill;
+
+/*
+
+This file polyfills the following: https://github.com/whatwg/dom/issues/911
+Once all targeted browsers support this DOM feature, this polyfill can be deleted.
+
+This allows users to pass an AbortSignal to a call to addEventListener as part of the
+AddEventListenerOptions object. When the signal is aborted, the event listener is
+removed.
+
+*/
+let signalSupported = false; // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+function noop() {}
+
+try {
+  const options = Object.create({}, {
+    signal: {
+      get() {
+        signalSupported = true;
+      }
+
+    }
+  });
+  window.addEventListener('test', noop, options);
+  window.removeEventListener('test', noop, options);
+} catch (e) {
+  /* */
+}
+
+function featureSupported() {
+  return signalSupported;
+}
+
+function monkeyPatch() {
+  if (typeof window === 'undefined') {
+    return;
+  }
+
+  const originalAddEventListener = EventTarget.prototype.addEventListener;
+
+  EventTarget.prototype.addEventListener = function (name, originalCallback, optionsOrCapture) {
+    if (typeof optionsOrCapture === 'object' && 'signal' in optionsOrCapture && optionsOrCapture.signal instanceof AbortSignal) {
+      originalAddEventListener.call(optionsOrCapture.signal, 'abort', () => {
+        this.removeEventListener(name, originalCallback, optionsOrCapture);
+      });
+    }
+
+    return originalAddEventListener.call(this, name, originalCallback, optionsOrCapture);
+  };
+}
+
+function polyfill() {
+  if (!featureSupported()) {
+    monkeyPatch();
+    signalSupported = true;
+  }
+}

package/lib/scroll-into-view.d.ts

@@ -0,0 +1,7 @@
+export interface ScrollIntoViewOptions {
+    direction?: 'horizontal' | 'vertical';
+    startMargin?: number;
+    endMargin?: number;
+    behavior?: ScrollBehavior;
+}
+export declare function scrollIntoView(child: HTMLElement, viewingArea: HTMLElement, { direction, startMargin, endMargin, behavior }?: ScrollIntoViewOptions): void;

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.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 {};