@lion/ui 0.0.1

package/components/overlays/test/utils-tests/contain-focus.test.js

@@ -0,0 +1,231 @@
+/* eslint-disable lit-a11y/no-autofocus */
+import { expect, fixture, nextFrame } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import { renderLitAsNode } from '@lion/ui/helpers.js';
+import { getDeepActiveElement, getFocusableElements } from '@lion/ui/overlays.js';
+
+import { keyCodes } from '../../src/utils/key-codes.js';
+import { containFocus } from '../../src/utils/contain-focus.js';
+
+function simulateTabWithinContainFocus() {
+  const event = new CustomEvent('keydown', { detail: 0, bubbles: true });
+  // @ts-ignore override keyCode
+  event.keyCode = keyCodes.tab;
+  window.dispatchEvent(event);
+}
+
+/**
+ * @param {HTMLElement} elToRecieveFocus
+ */
+function simulateTabInWindow(elToRecieveFocus) {
+  window.dispatchEvent(new Event('blur'));
+  elToRecieveFocus.focus();
+  window.dispatchEvent(new Event('focusin'));
+}
+
+const interactionElementsNode = renderLitAsNode(html`
+  <div>
+    <button id="el1"></button>
+    <a id="el2" href="#">foo</a>
+    <div id="el3" tabindex="0"></div>
+    <input id="el4" />
+    <div id="el5" contenteditable="true"></div>
+    <textarea id="el6"></textarea>
+    <select id="el7">
+      <option>1</option>
+    </select>
+  </div>
+`);
+
+const lightDomTemplate = html`
+  <div>
+    <button id="outside-1">outside 1</button>
+    <div id="rootElement">${interactionElementsNode}</div>
+    <button id="outside-2">outside 2</button>
+  </div>
+`;
+
+const lightDomAutofocusTemplate = html`
+  <div>
+    <button id="outside-1">outside 1</button>
+
+    <div id="rootElement">
+      <button id="el1"></button>
+      <a id="el2" href="#">foo</a>
+      <div id="el3" tabindex="0"></div>
+      <input id="el4" autofocus />
+      <div id="el5" contenteditable="true"></div>
+      <textarea id="el6"></textarea>
+      <select id="el7">
+        <option>1</option>
+      </select>
+    </div>
+
+    <button id="outside-2">outside 2</button>
+  </div>
+`;
+
+function createShadowDomNode() {
+  const shadowDomNode = renderLitAsNode(html`
+    <div>
+      <button id="outside-1">outside 1</button>
+      <div id="rootElementShadow"></div>
+      <button id="outside-2">outside 2</button>
+    </div>
+  `);
+  const rootElementShadow = shadowDomNode?.querySelector('#rootElementShadow');
+  rootElementShadow?.attachShadow({ mode: 'open' });
+  if (interactionElementsNode) {
+    rootElementShadow?.shadowRoot?.appendChild(interactionElementsNode);
+  }
+  return shadowDomNode;
+}
+
+describe('containFocus()', () => {
+  it('starts focus at the root element when there is no element with [autofocus]', async () => {
+    await fixture(lightDomTemplate);
+    const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+    const { disconnect } = containFocus(root);
+
+    expect(getDeepActiveElement()).to.equal(root);
+    expect(root.getAttribute('tabindex')).to.equal('-1');
+    expect(root.style.getPropertyValue('outline-style')).to.equal('none');
+
+    disconnect();
+  });
+
+  it('starts focus at the element with [autofocus] attribute', async () => {
+    await fixture(lightDomAutofocusTemplate);
+    const el = /** @type {HTMLElement} */ (document.querySelector('input[autofocus]'));
+    const { disconnect } = containFocus(el);
+
+    expect(getDeepActiveElement()).to.equal(el);
+
+    disconnect();
+  });
+
+  it('on tab, focuses first focusable element if focus was on element outside root element', async () => {
+    await fixture(lightDomTemplate);
+    const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+    const focusableElements = getFocusableElements(root);
+    const { disconnect } = containFocus(root);
+
+    /** @type {HTMLElement} */ (document.getElementById('outside-1')).focus();
+
+    simulateTabWithinContainFocus();
+    expect(getDeepActiveElement()).to.equal(focusableElements[0]);
+
+    disconnect();
+  });
+
+  it('on tab, focuses first focusable element if focus was on the last focusable element', async () => {
+    await fixture(lightDomTemplate);
+    const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+    const focusableElements = getFocusableElements(root);
+    const { disconnect } = containFocus(root);
+
+    focusableElements[focusableElements.length - 1].focus();
+
+    simulateTabWithinContainFocus();
+    expect(getDeepActiveElement()).to.equal(focusableElements[0]);
+
+    disconnect();
+  });
+
+  it('on tab, does not interfere if focus remains within the root element', async () => {
+    await fixture(lightDomTemplate);
+    const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+    const focusableElements = getFocusableElements(root);
+    const { disconnect } = containFocus(root);
+
+    focusableElements[2].focus();
+
+    simulateTabWithinContainFocus();
+    /**
+     * We test if focus remained on the same element because we cannot simulate
+     * actual tab key press. So the best we can do is if we didn't redirect focus
+     * to the first element.
+     */
+    expect(getDeepActiveElement()).to.equal(focusableElements[2]);
+
+    disconnect();
+  });
+
+  it.skip('restores focus to root element if focusout event happens where activeElement goes outside', async () => {
+    await fixture(lightDomTemplate);
+    const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+    const focusableElements = getFocusableElements(root);
+    const { disconnect } = containFocus(root);
+
+    focusableElements[2].focus();
+    expect(getDeepActiveElement()).to.equal(focusableElements[2]);
+    document.body.click(); // this does not cause focusout event :( doesn't seem possible to mock
+    expect(getDeepActiveElement()).to.equal(root);
+
+    disconnect();
+  });
+
+  describe('Tabbing into window', () => {
+    it('reinserts tab detection element when contentNode changes inner content', async () => {
+      await fixture(lightDomTemplate);
+      const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+      const { disconnect } = containFocus(root);
+      expect(root.querySelector('[data-is-tab-detection-element]')).to.exist;
+      root.innerHTML = `my content`;
+      await nextFrame();
+      expect(root.querySelector('[data-is-tab-detection-element]')).to.exist;
+      disconnect();
+    });
+
+    it('restores focus within root element', async () => {
+      await fixture(lightDomTemplate);
+      const root = /** @type {HTMLElement} */ (document.getElementById('rootElement'));
+      const focusableElements = getFocusableElements(root);
+      const { disconnect } = containFocus(root);
+
+      // Simulate tab in window
+      simulateTabInWindow(/** @type {HTMLElement} */ (document.getElementById('outside-1')));
+      expect(getDeepActiveElement()).to.equal(focusableElements[0]);
+
+      // Simulate shift+tab in window
+      simulateTabInWindow(/** @type {HTMLElement} */ (document.getElementById('outside-2')));
+      expect(getDeepActiveElement()).to.equal(focusableElements[focusableElements.length - 1]);
+
+      disconnect();
+    });
+
+    it('restores focus within root element with shadow dom', async () => {
+      const el = await fixture(html`${createShadowDomNode()}`);
+      const root = /** @type {HTMLElement} */ (el.querySelector('#rootElementShadow'));
+      const focusableElements = getFocusableElements(root);
+      const { disconnect } = containFocus(root);
+
+      // Simulate tab in window
+      simulateTabInWindow(/** @type {HTMLElement} */ (document.getElementById('outside-1')));
+      expect(getDeepActiveElement()).to.equal(focusableElements[0]);
+
+      // Simulate shift+tab in window
+      simulateTabInWindow(/** @type {HTMLElement} */ (document.getElementById('outside-2')));
+      expect(getDeepActiveElement()).to.equal(focusableElements[focusableElements.length - 1]);
+
+      disconnect();
+    });
+
+    it('keeps focus if already in rootElement', async () => {
+      const el = await fixture(html`${createShadowDomNode()}`);
+      const root = /** @type {HTMLElement} */ (el.querySelector('#rootElementShadow'));
+      const focusableElements = getFocusableElements(root);
+      const { disconnect } = containFocus(root);
+
+      // Simulate tab in window
+      simulateTabInWindow(focusableElements[0]);
+      expect(getDeepActiveElement()).to.equal(focusableElements[0]);
+
+      // Simulate shift+tab in window
+      simulateTabInWindow(focusableElements[focusableElements.length - 1]);
+      expect(getDeepActiveElement()).to.equal(focusableElements[focusableElements.length - 1]);
+
+      disconnect();
+    });
+  });
+});

package/components/overlays/test/utils-tests/deep-contains.test.js

@@ -0,0 +1,127 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit';
+
+import { deepContains } from '@lion/ui/overlays.js';
+
+describe('deepContains()', () => {
+  it('returns true if element contains a target element with a shadow boundary in between', async () => {
+    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
+    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <button id="el-1">Button</button>
+      <a id="el-2" href="#foo">Href</a>
+      <input id="el-3">
+    `;
+    const shadowElementChild = /** @type {HTMLElement} */ (shadowRoot.querySelector('#el-1'));
+    const element = /** @type {HTMLElement} */ (
+      await fixture(html`
+        <div id="light">
+          ${shadowElement}
+          <button id="light-el-1"></button>
+        </div>
+      `)
+    );
+    const lightChildEl = /** @type {HTMLElement} */ (element.querySelector('#light-el-1'));
+
+    expect(deepContains(element, element)).to.be.true;
+    expect(deepContains(element, shadowElement)).to.be.true;
+    expect(deepContains(element, shadowElementChild)).to.be.true;
+    expect(deepContains(element, lightChildEl)).to.be.true;
+    expect(deepContains(shadowElement, shadowElement)).to.be.true;
+    expect(deepContains(shadowElement, shadowElementChild)).to.be.true;
+    expect(deepContains(shadowRoot, shadowElementChild)).to.be.true;
+
+    // Siblings
+    expect(
+      deepContains(
+        /** @type {HTMLElement} */ (element.firstElementChild),
+        /** @type {HTMLElement} */ (element.lastElementChild),
+      ),
+    ).to.be.false;
+    // Unrelated
+    expect(deepContains(lightChildEl, shadowElementChild)).to.be.false;
+  });
+
+  it('returns true if element contains a target element with a shadow boundary in between, for multiple shadowroots', async () => {
+    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
+    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <button id="el-1">Button</button>
+      <a id="el-2" href="#foo">Href</a>
+      <input id="el-3">
+    `;
+
+    const shadowElement2 = /** @type {HTMLElement} */ (await fixture('<div id="shadow2"></div>'));
+    const shadowRoot2 = shadowElement2.attachShadow({ mode: 'open' });
+    shadowRoot2.innerHTML = `
+      <button id="el-1">Button</button>
+      <a id="el-2" href="#foo">Href</a>
+      <input id="el-3">
+    `;
+
+    const shadowElementChild = /** @type {HTMLElement} */ (shadowRoot.querySelector('#el-2'));
+    const shadowElementChild2 = /** @type {HTMLElement} */ (shadowRoot2.querySelector('#el-2'));
+    const element = /** @type {HTMLElement} */ (
+      await fixture(html`
+        <div id="light">
+          ${shadowElement} ${shadowElement2}
+          <button id="light-el-1"></button>
+        </div>
+      `)
+    );
+
+    expect(deepContains(element, shadowElementChild)).to.be.true;
+    expect(deepContains(shadowElement, shadowElementChild)).to.be.true;
+    expect(deepContains(shadowRoot, shadowElementChild)).to.be.true;
+
+    expect(deepContains(element, shadowElementChild2)).to.be.true;
+    expect(deepContains(shadowElement2, shadowElementChild2)).to.be.true;
+    expect(deepContains(shadowRoot2, shadowElementChild2)).to.be.true;
+  });
+
+  it('can detect containing elements inside multiple nested shadow roots', async () => {
+    const shadowNestedElement = await fixture('<div id="shadow-nested"></div>');
+    const shadowNestedRoot = shadowNestedElement.attachShadow({ mode: 'open' });
+    shadowNestedRoot.innerHTML = `
+      <button id="nested-el-1">Button</button>
+      <a id="nested-el-2" href="#foo">Href</a>
+      <input id="nested-el-3">
+    `;
+
+    const shadowElement = /** @type {HTMLElement} */ (await fixture('<div id="shadow"></div>'));
+    const shadowRoot = shadowElement.attachShadow({ mode: 'open' });
+    shadowRoot.innerHTML = `
+      <button id="el-1">Button</button>
+
+      <input id="el-3">
+    `;
+    shadowRoot.insertBefore(shadowNestedElement, shadowRoot.lastElementChild);
+
+    const element = /** @type {HTMLElement} */ (
+      await fixture(html`
+        <div id="light">
+          ${shadowElement}
+          <button id="light-el-1"></button>
+        </div>
+      `)
+    );
+
+    const elementFirstChild = /** @type {HTMLElement} */ (element.firstElementChild);
+    const elementFirstChildShadow = /** @type {ShadowRoot} */ (elementFirstChild.shadowRoot);
+    const elementFirstChildShadowChildren = /** @type {HTMLElement[]} */ (
+      Array.from(elementFirstChildShadow.children)
+    );
+    const elementFirstChildShadowChildShadow = /** @type {ShadowRoot} */ (
+      elementFirstChildShadowChildren[1].shadowRoot
+    );
+    const elementFirstChildShadowChildShadowLastChild = /** @type {HTMLElement} */ (
+      elementFirstChildShadowChildShadow.lastElementChild
+    );
+
+    expect(deepContains(element, elementFirstChild)).to.be.true;
+    expect(deepContains(element, elementFirstChildShadow)).to.be.true;
+    expect(deepContains(element, elementFirstChildShadowChildren[1])).to.be.true;
+    expect(deepContains(element, elementFirstChildShadowChildShadow)).to.be.true;
+    expect(deepContains(element, elementFirstChildShadowChildShadowLastChild)).to.be.true;
+  });
+});

package/components/overlays/test/utils-tests/get-focusable-elements.test.js

@@ -0,0 +1,196 @@
+import { expect, fixture, defineCE } from '@open-wc/testing';
+import { LitElement, html } from 'lit';
+
+import { getFocusableElements } from '@lion/ui/overlays.js';
+
+class ElementB extends LitElement {
+  render() {
+    const marker = this.getAttribute('marker') || '';
+    return html`
+      <a id="el-b-${marker}-1" href="#">foo</a>
+
+      <div>
+        <div id="el-b-${marker}-2" tabindex="0">
+          <input id="el-b-${marker}-3" />
+        </div>
+      </div>
+    `;
+  }
+}
+
+customElements.define('element-b', ElementB);
+
+describe('getFocusableElements()', () => {
+  it('collects focusable nodes', async () => {
+    const element = await fixture(`
+      <div>
+        <button id='el1'></button>
+        <a id='el2' href='#'></a>
+        <div id='el3' tabindex='0'></div>
+        <input id='el4'>
+        <div id='el5' contenteditable></div>
+        <textarea id='el6'></textarea>
+        <select id='el7'>
+          <option>1</option>
+        </select>
+      </div>
+    `);
+    const nodes = getFocusableElements(element);
+    const ids = nodes.map(n => n.id);
+
+    expect(ids).eql(['el1', 'el2', 'el3', 'el4', 'el5', 'el6', 'el7']);
+  });
+
+  it('handles nested nodes', async () => {
+    const element = await fixture(`
+      <div>
+        <a id='el1' href='#'></a>
+
+        <div>
+          <button id='el2'></button>
+
+          <div id='el3' tabindex='0'>
+            <input id='el4'>
+          </div>
+        </div>
+
+        <div style='display: contents;'>
+          <button id='el5'></button>
+        </div>
+      </div>
+    `);
+    const nodes = getFocusableElements(element);
+    const ids = nodes.map(n => n.id);
+
+    expect(ids).eql(['el1', 'el2', 'el3', 'el4', 'el5']);
+  });
+
+  it('skips elements that should not receive focus', async () => {
+    const element = await fixture(`
+      <div>
+        <input id='el1'>
+        <input id='el2' disabled>
+
+        <a id='el3' href='#'>foo</a>
+        <a id='el4'>foo</a>
+
+        <span id='el5'>foo</span>
+        <h1 id='el6'>foo</h1>
+
+        <div id='el7'>
+
+          <a id='el8' href='foo'>foo</a>
+          <a id='el9'>
+            <button id='el10' disabled>foo</button>
+            <button id='el11'>foo</button>
+          </a>
+
+        </div>
+      </div>
+    `);
+    const nodes = getFocusableElements(element);
+    const ids = nodes.map(n => n.id);
+
+    expect(ids).eql(['el1', 'el3', 'el8', 'el11']);
+  });
+
+  it('respects tabindex order', async () => {
+    const element = await fixture(`
+      <div>
+        <div id='el1' tabindex='0'></div>
+        <div id='el2' tabindex='0'></div>
+        <div id='el3' tabindex='0'></div>
+        <div id='el4' tabindex='-1'></div>
+        <div id='el5' tabindex='3'></div>
+        <div id='el6' tabindex='4'></div>
+        <div id='el7' tabindex='5'></div>
+        <div>
+          <div id='el8' tabindex='1'></div>
+          <div id='el9' tabindex='6'></div>
+        </div>
+        <div id='el10' tabindex='2'></div>
+      </div>
+    `);
+    const nodes = getFocusableElements(element);
+    const ids = nodes.map(n => n.id);
+
+    expect(ids).eql(['el8', 'el10', 'el5', 'el6', 'el7', 'el9', 'el1', 'el2', 'el3']);
+  });
+
+  it('handles shadow dom', async () => {
+    const element = await fixture(`
+      <div>
+        <element-b marker='marker'></element-b>
+      </div>
+    `);
+
+    const nodes = getFocusableElements(element);
+    const ids = nodes.map(n => n.id);
+
+    expect(ids).eql(['el-b-marker-1', 'el-b-marker-2', 'el-b-marker-3']);
+  });
+
+  it('handles slotted elements', async () => {
+    const elTag = defineCE(
+      class extends LitElement {
+        render() {
+          return html`
+            <button id="el-a-1"></button>
+
+            <element-b marker="marker-1"></element-b>
+
+            <slot name="slot-a"></slot>
+
+            <a id="el-a-2" href="#">foo</a>
+
+            <slot></slot>
+
+            <slot name="slot-b"></slot>
+
+            <element-b id="el-a-3" marker="marker-2" tabindex="0"></element-b>
+          `;
+        }
+      },
+    );
+
+    const element = await fixture(`
+      <div>
+        <${elTag}>
+
+          <button id='el-1' slot='slot-b'></button>
+          <div>
+            <a id='el-2' href='#'></a>
+          </div>
+
+          <div id='el-3' tabindex='0' slot='slot-a'>
+            <input id='el-4'>
+          </div>
+
+          <div id='el-5' slot='slot-b' contenteditable></div>
+          <textarea id='el-6' slot='slot-a'></textarea>
+
+        </${elTag}>
+      </div>
+    `);
+    const nodes = getFocusableElements(element);
+    const ids = nodes.map(n => n.id);
+
+    expect(ids).eql([
+      'el-a-1',
+      'el-b-marker-1-1',
+      'el-b-marker-1-2',
+      'el-b-marker-1-3',
+      'el-3',
+      'el-4',
+      'el-6',
+      'el-a-2',
+      'el-2',
+      'el-1',
+      'el-5',
+      'el-a-3',
+      'el-b-marker-2-1',
+      'el-b-marker-2-2',
+      'el-b-marker-2-3',
+    ]);
+  });
+});

package/components/overlays/test/utils-tests/is-equal-config.test.js

@@ -0,0 +1,81 @@
+import { expect } from '@open-wc/testing';
+import { isEqualConfig } from '../../src/utils/is-equal-config.js';
+
+function TestConfig() {
+  return {
+    placementMode: /** @type {'local'|'global'} */ ('local'),
+    hidesOnOutsideClick: true,
+    popperConfig: {
+      modifiers: [
+        {
+          name: 'offset',
+          enabled: false,
+        },
+      ],
+    },
+  };
+}
+
+/** Used for detecting if it's safe to disregard OverlayConfig changes with equal value. */
+describe('isEqualConfig()', () => {
+  it('returns true for same reference', () => {
+    const config = TestConfig();
+    expect(isEqualConfig(config, config)).eql(true);
+  });
+
+  it('compares null props', () => {
+    const config = TestConfig();
+    const nullPropConfig = {
+      ...config,
+      elementToFocusAfterHide: {
+        nullProp: null,
+      },
+    };
+    // @ts-ignore
+    expect(isEqualConfig(nullPropConfig, nullPropConfig)).eql(true);
+  });
+
+  it('compares shallow props', () => {
+    const config = TestConfig();
+    expect(isEqualConfig(config, { ...config })).eql(true);
+    const differentConfig = { ...config, hidesOnOutsideClick: !config.hidesOnOutsideClick };
+    expect(isEqualConfig(config, differentConfig)).eql(false);
+  });
+
+  it('compares prop count', () => {
+    const config = TestConfig();
+    expect(isEqualConfig(config, { ...config, isBlocking: true })).eql(false);
+    expect(isEqualConfig({ ...config, isBlocking: true }, config)).eql(false);
+  });
+
+  it('regards missing props different from ones with undefined value', () => {
+    const config = TestConfig();
+    expect(isEqualConfig(config, { ...config, referenceNode: undefined })).eql(false);
+  });
+
+  it('compares nested props', () => {
+    const config = TestConfig();
+    const sameConfig = {
+      ...config,
+      popperConfig: {
+        ...config.popperConfig,
+        modifiers: [...config.popperConfig.modifiers],
+      },
+    };
+    expect(isEqualConfig(config, sameConfig)).eql(true);
+    const differentConfig = {
+      ...config,
+      popperConfig: {
+        ...config.popperConfig,
+        modifiers: [
+          ...config.popperConfig.modifiers,
+          {
+            name: 'offset',
+            enabled: !config.popperConfig.modifiers.find(mod => mod.name === 'offset')?.enabled,
+          },
+        ],
+      },
+    };
+    expect(isEqualConfig(config, differentConfig)).eql(false);
+  });
+});

package/components/overlays/test/utils-tests/local-positioning-helpers.js

@@ -0,0 +1,16 @@
+/**
+ * @desc Compensates for browsers that use floats in output
+ * - from: 'transform3d(12.25px, 6.75px, 0px)'
+ * - to: 'transform3d(12px, 7px, 0px)'
+ * @param {string} cssValue
+ */
+export function normalizeTransformStyle(cssValue) {
+  // eslint-disable-next-line no-unused-vars
+  const [, transformType, positionPart] = cssValue.match(/(.*)\((.*?)\)/) || [];
+  const normalizedNumbers = positionPart
+    .split(',')
+    .map(p => Math.round(Number(p.replace('px', ''))));
+  return `${transformType}(${normalizedNumbers
+    .map((n, i) => `${n}px${normalizedNumbers.length - 1 === i ? '' : ', '}`)
+    .join('')})`;
+}