@lion/ui 0.0.1

package/components/overlays/src/globalOverlaysStyle.js

@@ -0,0 +1,129 @@
+import { css } from 'lit';
+
+export const globalOverlaysStyle = css`
+  .global-overlays {
+    position: fixed;
+    z-index: 200;
+  }
+
+  .global-overlays__overlay {
+    pointer-events: auto;
+  }
+
+  .global-overlays__overlay-container {
+    display: flex;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+  }
+
+  .global-overlays__overlay-container--top-left {
+    justify-content: flex-start;
+    align-items: flex-start;
+  }
+
+  .global-overlays__overlay-container--top {
+    justify-content: center;
+    align-items: flex-start;
+  }
+
+  .global-overlays__overlay-container--top-right {
+    justify-content: flex-end;
+    align-items: flex-start;
+  }
+
+  .global-overlays__overlay-container--right {
+    justify-content: flex-end;
+    align-items: center;
+  }
+
+  .global-overlays__overlay-container--bottom-left {
+    justify-content: flex-start;
+    align-items: flex-end;
+  }
+
+  .global-overlays__overlay-container--bottom {
+    justify-content: center;
+    align-items: flex-end;
+  }
+
+  .global-overlays__overlay-container--bottom-right {
+    justify-content: flex-end;
+    align-items: flex-end;
+  }
+  .global-overlays__overlay-container--left {
+    justify-content: flex-start;
+    align-items: center;
+  }
+
+  .global-overlays__overlay-container--center {
+    justify-content: center;
+    align-items: center;
+  }
+
+  .global-overlays__overlay--bottom-sheet {
+    width: 100%;
+  }
+
+  .global-overlays .global-overlays__backdrop {
+    content: '';
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+    background-color: #333333;
+    filter: opacity(30%);
+    display: none;
+  }
+
+  .global-overlays .global-overlays__backdrop--visible {
+    display: block;
+  }
+
+  .global-overlays .global-overlays__backdrop--animation-in {
+    animation: global-overlays-backdrop-fade-in 300ms;
+  }
+
+  .global-overlays .global-overlays__backdrop--animation-out {
+    animation: global-overlays-backdrop-fade-out 300ms;
+    opacity: 0;
+  }
+
+  @keyframes global-overlays-backdrop-fade-in {
+    from {
+      opacity: 0;
+    }
+  }
+
+  @keyframes global-overlays-backdrop-fade-out {
+    from {
+      opacity: 0.3;
+    }
+  }
+
+  body > *[inert] {
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    -ms-user-select: none;
+    user-select: none;
+    pointer-events: none;
+  }
+
+  body.global-overlays-scroll-lock {
+    overflow: hidden;
+  }
+
+  body.global-overlays-scroll-lock-ios-fix {
+    position: fixed;
+    width: 100%;
+  }
+
+  html.global-overlays-scroll-lock-ios-fix {
+    height: 100vh;
+  }
+`;

package/components/overlays/src/singleton.js

@@ -0,0 +1,13 @@
+import { singletonManager } from 'singleton-manager';
+import { OverlaysManager } from './OverlaysManager.js';
+
+// eslint-disable-next-line import/no-mutable-exports
+export let overlays =
+  singletonManager.get('@lion/overlays::overlays::0.15.x') || new OverlaysManager();
+
+/**
+ * @param {OverlaysManager} newOverlays
+ */
+export function setOverlays(newOverlays) {
+  overlays = newOverlays;
+}

package/components/overlays/src/utils/contain-focus.js

@@ -0,0 +1,202 @@
+/* eslint-disable no-param-reassign */
+
+/**
+ * Implementation based on: https://github.com/PolymerElements/iron-overlay-behavior/blob/master/iron-focusables-helper.html
+ * The original implementation does not work for non-Polymer web components,
+ * and contains several bugs on IE11.
+ */
+
+import { getDeepActiveElement } from './get-deep-active-element.js';
+import { getFocusableElements } from './get-focusable-elements.js';
+import { deepContains } from './deep-contains.js';
+import { keyCodes } from './key-codes.js';
+
+/**
+ * Rotates focus within a list of elements. If shift key was not pressed and focus
+ * is on last item, puts focus on the first item. Reversed if shift key.
+ *
+ * @param {HTMLElement} rootElement The root element
+ * @param {KeyboardEvent} e The keyboard event
+ */
+export function rotateFocus(rootElement, e) {
+  // Find focusable elements
+  const els = getFocusableElements(rootElement);
+  // Determine the focus rotation boundaries.
+  let boundaryEls;
+
+  // If more than two elements, take the first and last
+  if (els.length >= 2) {
+    boundaryEls = [els[0], els[els.length - 1]];
+
+    // If 1 element, it is the boundary
+  } else if (els.length === 1) {
+    boundaryEls = [els[0], els[0]];
+
+    // If no focusable elements, root becomes the boundary
+  } else {
+    boundaryEls = [rootElement, rootElement];
+  }
+
+  // Reverse direction of boundaries if shift key was pressed
+  if (e.shiftKey) {
+    boundaryEls.reverse();
+  }
+
+  // Take first and last elements within boundary
+  const [first, last] = boundaryEls;
+
+  // Get the currently focused element
+  const activeElement = /** @type {HTMLElement} */ (getDeepActiveElement());
+
+  /**
+   * If currently focused on the root element or an element contained within the root element:
+   * allow native browser behavior (tab to the next node in DOM order).
+   *
+   * If currently focused on the last focusable element within the root element, or on an element
+   * outside of the root element: redirect focus to the first focusable element.
+   */
+  if (activeElement === rootElement || (els.includes(activeElement) && last !== activeElement)) {
+    return;
+  }
+
+  e.preventDefault();
+  first.focus();
+}
+
+/**
+ * Contains focus within given root element. When focus is on the last focusable
+ * element inside the root element, the next focus will be redirected to the first
+ * focusable element.
+ *
+ * @param {HTMLElement} rootElement The element to contain focus within
+ * @returns {{ disconnect: () => void }} handler with a disconnect callback
+ */
+export function containFocus(rootElement) {
+  const focusableElements = getFocusableElements(rootElement);
+  // Initial focus goes to first element with autofocus, or the root element
+  const initialFocus = focusableElements.find(e => e.hasAttribute('autofocus')) || rootElement;
+  /** @type {HTMLElement} */
+  let tabDetectionElement;
+  /** @type {MutationObserver} */
+  let rootElementMutationObserver;
+
+  // If root element will receive focus, it should have a tabindex of -1.
+  // This makes it focusable through js, but it won't appear in the tab order
+  if (initialFocus === rootElement) {
+    rootElement.tabIndex = -1;
+    rootElement.style.setProperty('outline', 'none');
+  }
+
+  // Focus first focusable element
+  initialFocus.focus();
+
+  /**
+   * Ensures focus stays inside root element on tab
+   * @param {KeyboardEvent} e
+   */
+  function handleKeydown(e) {
+    if (e.keyCode === keyCodes.tab) {
+      rotateFocus(rootElement, e);
+    }
+  }
+
+  function createHelpersDetectingTabDirection() {
+    tabDetectionElement = document.createElement('div');
+    tabDetectionElement.style.display = 'none';
+    tabDetectionElement.setAttribute('data-is-tab-detection-element', '');
+    rootElement.insertBefore(tabDetectionElement, rootElement.children[0]);
+
+    rootElementMutationObserver = new MutationObserver(mutationsList => {
+      for (const mutation of mutationsList) {
+        if (mutation.type === 'childList') {
+          const tabDetectionElIsMissing = !Array.from(rootElement.children).find(el =>
+            el.hasAttribute('data-is-tab-detection-element'),
+          );
+          const foundTabDetectionElInMutations = Array.from(mutation.addedNodes).find(
+            /** @param {Node} el */ el =>
+              el instanceof HTMLElement && el.hasAttribute('data-is-tab-detection-element'),
+          );
+          // Prevent infinite loop by detecting that mutation event is not from adding the tab detection el
+          if (tabDetectionElIsMissing && !foundTabDetectionElInMutations) {
+            rootElementMutationObserver.disconnect();
+            createHelpersDetectingTabDirection();
+          }
+        }
+      }
+    });
+    rootElementMutationObserver.observe(rootElement, { childList: true });
+  }
+
+  function isForwardTabInWindow() {
+    const compareMask = tabDetectionElement.compareDocumentPosition(
+      /** @type {Element} */ (document.activeElement),
+    );
+    return compareMask === Node.DOCUMENT_POSITION_PRECEDING;
+  }
+
+  /**
+   * @param {Object} opts
+   * @param {boolean} [opts.resetToRoot]
+   * @desc When we simulate a modal dialog, we need to restore the focus to the first or last
+   * element of the rootElement
+   */
+  function setFocusInRootElement({ resetToRoot = false } = {}) {
+    if (deepContains(rootElement, /** @type {HTMLElement} */ (getDeepActiveElement()))) {
+      return;
+    }
+
+    let nextActive;
+    if (resetToRoot) {
+      nextActive = rootElement;
+    } else {
+      nextActive = focusableElements[isForwardTabInWindow() ? 0 : focusableElements.length - 1];
+    }
+
+    if (nextActive) {
+      nextActive.focus();
+    }
+  }
+
+  function handleFocusin() {
+    window.removeEventListener('focusin', handleFocusin);
+    setFocusInRootElement();
+  }
+
+  function handleFocusout() {
+    /**
+     * There is a moment in time between focusout and focusin (when focus shifts)
+     * where the activeElement is reset to body first. So we use an async task to check
+     * a little bit later for activeElement, so we don't get a false positive.
+     *
+     * We used to check for focusin event for this, however,
+     * it can happen that focusout happens, but focusin never does, e.g. click outside but no focusable
+     * element is found to focus. If this happens, we should take the focus back to the rootElement.
+     */
+    setTimeout(() => {
+      if (!deepContains(rootElement, /** @type {HTMLElement} */ (getDeepActiveElement()))) {
+        setFocusInRootElement({ resetToRoot: true });
+      }
+    });
+
+    window.addEventListener('focusin', handleFocusin);
+  }
+
+  function disconnect() {
+    window.removeEventListener('keydown', handleKeydown);
+    window.removeEventListener('focusin', handleFocusin);
+    window.removeEventListener('focusout', handleFocusout);
+    // Guard this, since we also disconnect if we notice a missing tab
+    // detection element. We reinsert it, so it's okay to not fail here.
+    rootElementMutationObserver.disconnect();
+    if (Array.from(rootElement.children).includes(tabDetectionElement)) {
+      rootElement.removeChild(tabDetectionElement);
+    }
+    rootElement.style.removeProperty('outline');
+  }
+
+  window.addEventListener('keydown', handleKeydown);
+  window.addEventListener('focusout', handleFocusout);
+  createHelpersDetectingTabDirection();
+
+  return { disconnect };
+}

package/components/overlays/src/utils/deep-contains.js

@@ -0,0 +1,36 @@
+/**
+ * Whether first element contains the second element, also goes through shadow roots
+ * @param {HTMLElement|ShadowRoot} el
+ * @param {HTMLElement|ShadowRoot} targetEl
+ * @returns {boolean}
+ */
+export function deepContains(el, targetEl) {
+  let containsTarget = el.contains(targetEl);
+  if (containsTarget) {
+    return true;
+  }
+
+  /** @param {HTMLElement|ShadowRoot} elem */
+  function checkChildren(elem) {
+    for (let i = 0; i < elem.children.length; i += 1) {
+      const child = /** @type {HTMLElement}  */ (elem.children[i]);
+      if (child.shadowRoot && deepContains(child.shadowRoot, targetEl)) {
+        containsTarget = true;
+        break;
+      }
+      if (child.children.length > 0) {
+        checkChildren(child);
+      }
+    }
+  }
+
+  // If element is not shadowRoot itself
+  if (el instanceof HTMLElement && el.shadowRoot) {
+    containsTarget = deepContains(el.shadowRoot, targetEl);
+    if (containsTarget) {
+      return true;
+    }
+  }
+  checkChildren(el);
+  return containsTarget;
+}

package/components/overlays/src/utils/get-deep-active-element.js

@@ -0,0 +1,14 @@
+/**
+ * Returns the activeElement, even when they are inside a shadowRoot.
+ * (If an element in a shadowRoot is focused, document.activeElement
+ * returns the shadowRoot host.
+ *
+ * @returns {Element}
+ */
+export function getDeepActiveElement() {
+  let host = document.activeElement || document.body;
+  while (host && host.shadowRoot && host.shadowRoot.activeElement) {
+    host = host.shadowRoot.activeElement;
+  }
+  return host;
+}

package/components/overlays/src/utils/get-focusable-elements.js

@@ -0,0 +1,109 @@
+/**
+ * Implementation based on: https://github.com/PolymerElements/iron-overlay-behavior/blob/master/iron-focusables-helper.html
+ * The original implementation does not work for non-Polymer web components,
+ * and contains several bugs on IE11.
+ */
+
+import { isVisible } from './is-visible.js';
+import { sortByTabIndex } from './sort-by-tabindex.js';
+
+// IE11 supports matches as 'msMatchesSelector'
+const matchesFunc = 'matches' in Element.prototype ? 'matches' : 'msMatchesSelector';
+
+/**
+ * @param {HTMLElement} element
+ * @returns {boolean} Whether the element matches
+ */
+function isFocusable(element) {
+  // Elements that cannot be focused if they have [disabled] attribute.
+  if (element[matchesFunc]('input, select, textarea, button, object')) {
+    return element[matchesFunc](':not([disabled])');
+  }
+
+  // Elements that can be focused even if they have [disabled] attribute.
+  return element[matchesFunc]('a[href], area[href], iframe, [tabindex], [contentEditable]');
+}
+
+/**
+ * @param {HTMLElement} element
+ * @returns {Number}
+ */
+function getTabindex(element) {
+  if (isFocusable(element)) {
+    return Number(element.getAttribute('tabindex') || 0);
+  }
+  return -1;
+}
+
+/**
+ * @param {HTMLElement|HTMLSlotElement} element
+ */
+function getChildNodes(element) {
+  if (element.localName === 'slot') {
+    const slot = /** @type {HTMLSlotElement} */ (element);
+    return slot.assignedNodes({ flatten: true });
+  }
+
+  const { children } = element.shadowRoot || element;
+  // On IE11, SVGElement.prototype.children is undefined
+  return children || [];
+}
+
+/**
+ * @param {Element} element
+ * @returns {boolean}
+ */
+function isVisibleElement(element) {
+  if (element.nodeType !== Node.ELEMENT_NODE) {
+    return false;
+  }
+
+  // A slot is not visible, but it's children might so we need
+  // to treat is as such.
+  if (element.localName === 'slot') {
+    return true;
+  }
+
+  return isVisible(/** @type {HTMLElement} */ (element));
+}
+
+/**
+ * Recursive function that traverses the children of the target node and finds
+ * elements that can receive focus. Mutates the nodes property for performance.
+ *
+ * @param {Element} element
+ * @param {HTMLElement[]} nodes
+ * @returns {boolean} whether the returned node list should be sorted. This happens when
+ *                    there is an element with tabindex > 0
+ */
+function collectFocusableElements(element, nodes) {
+  // If not an element or not visible, no need to explore children.
+  if (!isVisibleElement(element)) {
+    return false;
+  }
+
+  const el = /** @type {HTMLElement} */ (element);
+  const tabIndex = getTabindex(el);
+  let needsSort = tabIndex > 0;
+  if (tabIndex >= 0) {
+    nodes.push(el);
+  }
+
+  const childNodes = /** @type {Element[]} */ (getChildNodes(el));
+  for (let i = 0; i < childNodes.length; i += 1) {
+    needsSort = collectFocusableElements(childNodes[i], nodes) || needsSort;
+  }
+  return needsSort;
+}
+
+/**
+ * @param {Element} element
+ * @returns {HTMLElement[]}
+ */
+export function getFocusableElements(element) {
+  /** @type {HTMLElement[]} */
+  const nodes = [];
+
+  const needsSort = collectFocusableElements(element, nodes);
+  return needsSort ? sortByTabIndex(nodes) : nodes;
+}

package/components/overlays/src/utils/inert-siblings.js

@@ -0,0 +1,36 @@
+/**
+ * Use the [inert] attribute to be forwards compatible with: https://html.spec.whatwg.org/multipage/interaction.html#inert
+ */
+
+/**
+ * Makes sibling elements inert, sets the inert attribute and aria-hidden for
+ * screen readers.
+ * @param {HTMLElement} element
+ */
+export function setSiblingsInert(element) {
+  const parentChildren = /** @type {HTMLCollection} */ (element.parentElement?.children);
+  for (let i = 0; i < parentChildren.length; i += 1) {
+    const sibling = parentChildren[i];
+
+    if (sibling !== element) {
+      sibling.setAttribute('inert', '');
+      sibling.setAttribute('aria-hidden', 'true');
+    }
+  }
+}
+
+/**
+ * Removes inert and aria-hidden attribute from sibling elements
+ * @param {HTMLElement} element
+ */
+export function unsetSiblingsInert(element) {
+  const parentChildren = /** @type {HTMLCollection} */ (element.parentElement?.children);
+  for (let i = 0; i < parentChildren.length; i += 1) {
+    const sibling = parentChildren[i];
+
+    if (sibling !== element) {
+      sibling.removeAttribute('inert');
+      sibling.removeAttribute('aria-hidden');
+    }
+  }
+}

package/components/overlays/src/utils/is-equal-config.js

@@ -0,0 +1,24 @@
+/**
+ * @typedef {import('../../types/OverlayConfig.js').OverlayConfig} OverlayConfig
+ */
+
+/**
+ * Compares two OverlayConfigs to equivalence. Intended to prevent unnecessary resets.
+ * Note that it doesn't cover as many use cases as common implementations, such as Lodash isEqual.
+ *
+ * @param {Partial<OverlayConfig>} a
+ * @param {Partial<OverlayConfig>} b
+ * @returns {boolean} Whether the configs are equivalent
+ */
+export function isEqualConfig(a, b) {
+  if (typeof a !== 'object' || typeof b !== 'object' || a === null || b === null) {
+    return a === b;
+  }
+  const aProps = Object.keys(a);
+  const bProps = Object.keys(b);
+  if (aProps.length !== bProps.length) {
+    return false;
+  }
+  const isEqual = /** @param {string} prop */ prop => isEqualConfig(a[prop], b[prop]);
+  return aProps.every(isEqual);
+}

package/components/overlays/src/utils/is-visible.js

@@ -0,0 +1,49 @@
+/**
+ * @param {CSSStyleDeclaration} styles
+ */
+const hasStyleVisibility = ({ visibility, display }) =>
+  visibility !== 'hidden' && display !== 'none';
+
+/**
+ * @param {CSSStyleDeclaration} styles
+ */
+const isDisplayContents = ({ display }) => display === 'contents';
+
+/**
+ * @param {HTMLElement} element
+ * @returns {boolean} Whether the element is visible
+ */
+export function isVisible(element) {
+  if (!element) {
+    return false;
+  }
+
+  // Check if element is connected to the DOM
+  if (!element.isConnected) {
+    return false;
+  }
+
+  // Check inline styles to avoid a reflow
+  // matches display: none, visibility: hidden on element
+  if (!hasStyleVisibility(element.style)) {
+    return false;
+  }
+
+  const computedStyle = window.getComputedStyle(element);
+
+  // Check computed styles
+  // matches display: none, visibility: hidden on element and visibility: hidden from parent
+  if (!hasStyleVisibility(computedStyle)) {
+    return false;
+  }
+
+  // Allow element that delegates layout (i.e. display: contents)
+  // matches display: contents
+  if (isDisplayContents(computedStyle)) {
+    return true;
+  }
+
+  // display: none is not inherited, so finally check if element has calculated width or height
+  // matches display: none from parent
+  return !!(element.offsetWidth || element.offsetHeight || element.getClientRects().length);
+}

package/components/overlays/src/utils/key-codes.js

@@ -0,0 +1,6 @@
+export const keyCodes = {
+  enter: 13,
+  space: 32,
+  escape: 27,
+  tab: 9,
+};

package/components/overlays/src/utils/simulate-tab.js

@@ -0,0 +1,14 @@
+import { getFocusableElements } from './get-focusable-elements.js';
+
+export function simulateTab(node = document.body) {
+  const current = /** @type {HTMLElement} */ (document.activeElement);
+  const all = getFocusableElements(node);
+
+  const currentIndex = all.indexOf(current);
+  let nextIndex = currentIndex + 1;
+  if (nextIndex === all.length) {
+    nextIndex = 0;
+  }
+
+  all[nextIndex].focus();
+}

package/components/overlays/src/utils/sort-by-tabindex.js

@@ -0,0 +1,56 @@
+/**
+ * Implementation based on:
+ * https://github.com/PolymerElements/iron-overlay-behavior/blob/master/iron-focusables-helper.html
+ * The original implementation does not work for non-Polymer web components, and contains several
+ * bugs on IE11.
+ */
+
+/**
+ * @param {HTMLElement} a
+ * @param {HTMLElement} b
+ * @returns {Boolean}
+ */
+function hasLowerTabOrder(a, b) {
+  // Normalize tabIndexes
+  // e.g. in Firefox `<div contenteditable>` has `tabIndex = -1`
+  const ati = Math.max(a.tabIndex, 0);
+  const bti = Math.max(b.tabIndex, 0);
+  return ati === 0 || bti === 0 ? bti > ati : ati > bti;
+}
+
+/**
+ * @param {HTMLElement[]} left
+ * @param {HTMLElement[]} right
+ * @returns {HTMLElement[]}
+ */
+function mergeSortByTabIndex(left, right) {
+  /** @type {HTMLElement[]} */
+  const result = [];
+  while (left.length > 0 && right.length > 0) {
+    if (hasLowerTabOrder(left[0], right[0])) {
+      result.push(/** @type {HTMLElement} */ (right.shift()));
+    } else {
+      result.push(/** @type {HTMLElement} */ (left.shift()));
+    }
+  }
+
+  return [...result, ...left, ...right];
+}
+
+/**
+ * @param {HTMLElement[]} elements
+ * @returns {HTMLElement[]}
+ */
+export function sortByTabIndex(elements) {
+  // Implement a merge sort as Array.prototype.sort does a non-stable sort
+  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
+  const len = elements.length;
+  if (len < 2) {
+    return elements;
+  }
+
+  const pivot = Math.ceil(len / 2);
+  const left = sortByTabIndex(elements.slice(0, pivot));
+  const right = sortByTabIndex(elements.slice(pivot));
+  return mergeSortByTabIndex(left, right);
+}