@lion/ui 0.22.0 → 0.24.0

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

@@ -1,8 +1,6 @@
 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') || '';
@@ -17,9 +15,7 @@ class ElementB extends LitElement {
     `;
   }
 }
-
 customElements.define('element-b', ElementB);
-
 describe('getFocusableElements()', () => {
   it('collects focusable nodes', async () => {
     const element = await fixture(`
@@ -36,11 +32,9 @@ describe('getFocusableElements()', () => {
       </div>
     `);
     const nodes = getFocusableElements(element);
-    const ids = nodes.map(n => n.id);
-
+    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>
@@ -60,11 +54,9 @@ describe('getFocusableElements()', () => {
       </div>
     `);
     const nodes = getFocusableElements(element);
-    const ids = nodes.map(n => n.id);
-
+    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>
@@ -89,11 +81,9 @@ describe('getFocusableElements()', () => {
       </div>
     `);
     const nodes = getFocusableElements(element);
-    const ids = nodes.map(n => n.id);
-
+    const ids = nodes.map((n) => n.id);
     expect(ids).eql(['el1', 'el3', 'el8', 'el11']);
   });
-
   it('respects tabindex order', async () => {
     const element = await fixture(`
       <div>
@@ -112,24 +102,19 @@ describe('getFocusableElements()', () => {
       </div>
     `);
     const nodes = getFocusableElements(element);
-    const ids = nodes.map(n => n.id);
-
+    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);
-
+    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 {
@@ -152,7 +137,6 @@ describe('getFocusableElements()', () => {
         }
       },
     );
-
     const element = await fixture(`
       <div>
         <${elTag}>
@@ -173,8 +157,7 @@ describe('getFocusableElements()', () => {
       </div>
     `);
     const nodes = getFocusableElements(element);
-    const ids = nodes.map(n => n.id);
-
+    const ids = nodes.map((n) => n.id);
     expect(ids).eql([
       'el-a-1',
       'el-b-marker-1-1',

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

@@ -1,9 +1,8 @@
 import { expect } from '@open-wc/testing';
 import { isEqualConfig } from '../../src/utils/is-equal-config.js';
-
 function TestConfig() {
   return {
-    placementMode: /** @type {'local'|'global'} */ ('local'),
+    placementMode: /** @type {'local'|'global'} */ 'local',
     hidesOnOutsideClick: true,
     popperConfig: {
       modifiers: [
@@ -22,7 +21,6 @@ describe('isEqualConfig()', () => {
     const config = TestConfig();
     expect(isEqualConfig(config, config)).eql(true);
   });
-
   it('compares null props', () => {
     const config = TestConfig();
     const nullPropConfig = {
@@ -34,25 +32,46 @@ describe('isEqualConfig()', () => {
     // @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, {
+        ...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);
+    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);
+    expect(
+      isEqualConfig(config, {
+        ...config,
+        referenceNode: undefined,
+      }),
+    ).eql(false);
   });
-
   it('compares nested props', () => {
     const config = TestConfig();
     const sameConfig = {
@@ -71,7 +90,7 @@ describe('isEqualConfig()', () => {
           ...config.popperConfig.modifiers,
           {
             name: 'offset',
-            enabled: !config.popperConfig.modifiers.find(mod => mod.name === 'offset')?.enabled,
+            enabled: !config.popperConfig.modifiers.find((mod) => mod.name === 'offset')?.enabled,
           },
         ],
       },

package/components/overlays/test/utils-tests/visibility.test.js

@@ -1,157 +1,122 @@
 import { expect, fixture } from '@open-wc/testing';
-
 import { isVisible } from '../../src/utils/is-visible.js';
-
 describe('isVisible()', () => {
   it('returns true for static block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
-      await fixture(`<div style="width:10px; height:10px;"></div>`)
-    );
-
+    const element =
+      /** @type {HTMLElement} */
+      await fixture(`<div style="width:10px; height:10px;"></div>`);
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns false for hidden static block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
-      await fixture(`<div style="width:10px; height:10px;" hidden></div>`)
-    );
-
+    const element =
+      /** @type {HTMLElement} */
+      await fixture(`<div style="width:10px; height:10px;" hidden></div>`);
     expect(isVisible(element)).to.equal(false);
   });
-
   it('returns true for relative block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(
         `<div style="width:10px; height:10px; position:relative; top:10px; left:10px;"></div>`,
-      )
-    );
-
+      );
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns false for hidden relative block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(
         `<div style="width:10px; height:10px; position:relative; top:10px; left:10px;" hidden></div>`,
-      )
-    );
-
+      );
     expect(isVisible(element)).to.equal(false);
   });
-
   it('returns true for absolute block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div style="width:10px; height:10px; position:absolute; top:10px; left:10px;"></div>
-    `)
-    );
-
+    `);
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns false for hidden absolute block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div style="width:10px; height:10px; position:absolute; top:10px; left:10px;" hidden></div>
-    `)
-    );
-
+    `);
     expect(isVisible(element)).to.equal(false);
   });
-
   it('returns true for relative block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div style="width:10px; height:10px; position:fixed;top:10px; left:10px;"></div>
-    `)
-    );
-
+    `);
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns true for relative block elements', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div style="width:10px; height:10px; position:fixed;top:10px; left:10px;" hidden></div>
-    `)
-    );
-
+    `);
     expect(isVisible(element)).to.equal(false);
   });
-
   it('returns true for inline elements', async () => {
-    const element = /** @type {HTMLElement} */ (await fixture(`<span>Inline content</span>`));
-
+    const element = /** @type {HTMLElement} */ await fixture(`<span>Inline content</span>`);
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns true for inline elements without content', async () => {
-    const element = /** @type {HTMLElement} */ (await fixture(`<span></span>`));
-
+    const element = /** @type {HTMLElement} */ await fixture(`<span></span>`);
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns true for static block elements with 0 dimensions', async () => {
-    const element = /** @type {HTMLElement} */ (
-      await fixture(`<div style="width:0; height:0;"></div>`)
-    );
-
+    const element =
+      /** @type {HTMLElement} */
+      await fixture(`<div style="width:0; height:0;"></div>`);
     expect(isVisible(element)).to.equal(true);
   });
-
   it('returns false for hidden inline elements', async () => {
-    const element = /** @type {HTMLElement} */ (
-      await fixture(`<span hidden>Inline content</span>`)
-    );
-
+    const element = /** @type {HTMLElement} */ await fixture(`<span hidden>Inline content</span>`);
     expect(isVisible(element)).to.equal(false);
   });
-
   it('returns false invisible elements', async () => {
-    const element = /** @type {HTMLElement} */ (
-      await fixture(`<div style="width:10px; height:10px; visibility: hidden;"></div>`)
-    );
-
+    const element =
+      /** @type {HTMLElement} */
+      await fixture(`<div style="width:10px; height:10px; visibility: hidden;"></div>`);
     expect(isVisible(element)).to.equal(false);
   });
-
   it('returns false when hidden by parent', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div hidden>
         <div id="target" style="width:10px; height:10px;"></div>
         <div></div>
       </div>
-    `)
-    );
-
-    const target = /** @type {HTMLElement} */ (element.querySelector('#target'));
+    `);
+    const target = /** @type {HTMLElement} */ element.querySelector('#target');
     expect(isVisible(target)).to.equal(false);
   });
-
   it('returns false when invisible by parent', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div style="visibility: hidden;">
         <div id="target" style="width:10px; height:10px;"></div>
         <div></div>
       </div>
-    `)
-    );
-
-    const target = /** @type {HTMLElement} */ (element.querySelector('#target'));
+    `);
+    const target = /** @type {HTMLElement} */ element.querySelector('#target');
     expect(isVisible(target)).to.equal(false);
   });
-
   it('returns true when display contents', async () => {
-    const element = /** @type {HTMLElement} */ (
+    const element =
+      /** @type {HTMLElement} */
       await fixture(`
       <div style="display: contents;">
         <div style="width:10px; height:10px;"></div>
       </div>
-      `)
-    );
-
+      `);
     expect(isVisible(element)).to.equal(true);
   });
 });

package/components/overlays/test-helpers/createShadowHost.js

@@ -3,10 +3,12 @@
  */
 export function createShadowHost() {
   const shadowHost = document.createElement('div');
-  shadowHost.attachShadow({ mode: 'open' });
-  /** @type {ShadowRoot} */ (shadowHost.shadowRoot).innerHTML = `<slot></slot>`;
+  shadowHost.attachShadow({
+    mode: 'open',
+  });
+  /** @type {ShadowRoot} */
+  shadowHost.shadowRoot.innerHTML = `<slot></slot>`;
   document.body.appendChild(shadowHost);
-
   return {
     shadowHost,
     cleanupShadowHost: () => {

package/components/overlays/test-helpers/normalizeTransformStyle.js

@@ -9,8 +9,6 @@ export function normalizeTransformStyle(cssValue) {
   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('')})`;
+    .map((p) => Math.round(Number(p.replace('px', ''))));
+  return `${transformType}(${normalizedNumbers.map((n, i) => `${n}px${normalizedNumbers.length - 1 === i ? '' : ', '}`).join('')})`;
 }