@lion/ui 0.23.0 → 0.24.0

package/components/overlays/test/OverlayMixin.test.js

@@ -2,7 +2,6 @@ import { defineCE, unsafeStatic } from '@open-wc/testing';
 import { LitElement, html } from 'lit';
 import { OverlayMixin } from '@lion/ui/overlays.js';
 import { runOverlayMixinSuite } from '../test-suites/OverlayMixin.suite.js';
-
 const tagString = defineCE(
   class extends OverlayMixin(LitElement) {
     render() {
@@ -16,7 +15,6 @@ const tagString = defineCE(
   },
 );
 const tag = unsafeStatic(tagString);
-
 describe('OverlayMixin integrations', () => {
   runOverlayMixinSuite({
     tagString,

package/components/overlays/test/OverlaysManager.test.js

@@ -13,28 +13,22 @@ describe('OverlaysManager', () => {
   let defaultOptions;
   /** @type {OverlaysManager} */
   let mngr;
-
   beforeEach(async () => {
-    const contentNode = /** @type {HTMLElement} */ (await fixture(html`<p>my content</p>`));
-
+    const contentNode = /** @type {HTMLElement} */ await fixture(html`<p>my content</p>`);
     defaultOptions = {
       placementMode: 'global',
       contentNode,
     };
     mngr = new OverlaysManager();
   });
-
   afterEach(() => {
     mngr.teardown();
   });
-
   it('provides global stylesheet for arrangement of body scroll', () => {
     expect(document.head.querySelectorAll('[data-overlays]').length).to.equal(1);
   });
-
   it('provides .teardown() for cleanup', () => {
     expect(document.head.querySelector('[data-overlays=""]')).not.be.undefined;
-
     mngr.teardown();
     expect(document.head.querySelector('[data-overlays=""]')).be.null;
 
@@ -48,84 +42,71 @@ describe('OverlaysManager', () => {
     // @ts-ignore [allow-private-in-test]
     expect(mngr._siblingsInert).to.be.false;
   });
-
   it('can add/remove controllers', () => {
     // OverlayControllers will add themselves
     const dialog = new OverlayController(defaultOptions, mngr);
     const popup = new OverlayController(defaultOptions, mngr);
-
     expect(mngr.list).to.deep.equal([dialog, popup]);
-
     mngr.remove(popup);
     expect(mngr.list).to.deep.equal([dialog]);
-
     mngr.remove(dialog);
     expect(mngr.list).to.deep.equal([]);
   });
-
   it('throws if you try to add the same controller', () => {
     const ctrl = new OverlayController(defaultOptions, mngr);
     expect(() => mngr.add(ctrl)).to.throw('controller instance is already added');
   });
-
   it('throws if you try to remove a non existing controller', () => {
     // we do not pass one our own manager so it will not be added to it
     const ctrl = new OverlayController(defaultOptions);
     expect(() => mngr.remove(ctrl)).to.throw('could not find controller to remove');
   });
-
   it('adds a reference to the manager to the controller', () => {
     const dialog = new OverlayController(defaultOptions, mngr);
-
     expect(dialog.manager).to.equal(mngr);
   });
-
   it('has a .shownList which is ordered based on last shown', async () => {
     const dialog = new OverlayController(defaultOptions, mngr);
     const dialog2 = new OverlayController(defaultOptions, mngr);
     expect(mngr.shownList).to.deep.equal([]);
-
     await dialog.show();
     expect(mngr.shownList).to.deep.equal([dialog]);
-
     await dialog2.show();
     expect(mngr.shownList).to.deep.equal([dialog2, dialog]);
-
     await dialog.show();
     expect(mngr.shownList).to.deep.equal([dialog, dialog2]);
-
     await dialog.hide();
     expect(mngr.shownList).to.deep.equal([dialog2]);
-
     await dialog2.hide();
     expect(mngr.shownList).to.deep.equal([]);
   });
-
   describe('Browser/device edge cases', () => {
     const isIOSDetectionStub = sinon.stub(browserDetection, 'isIOS');
     const isMacSafariDetectionStub = sinon.stub(browserDetection, 'isMacSafari');
-
     function mockIOS() {
       isIOSDetectionStub.value(true);
       isMacSafariDetectionStub.value(false);
     }
-
     function mockMacSafari() {
       // When we are iOS
       isIOSDetectionStub.value(false);
       isMacSafariDetectionStub.value(true);
     }
-
     afterEach(() => {
       // Restore original values
       isIOSDetectionStub.restore();
       isMacSafariDetectionStub.restore();
     });
-
     describe('When initialized with "preventsScroll: true"', () => {
       it('adds class "overlays-scroll-lock-ios-fix" to body and html on iOS', async () => {
         mockIOS();
-        const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        const dialog = new OverlayController(
+          {
+            ...defaultOptions,
+            preventsScroll: true,
+          },
+          mngr,
+        );
         await dialog.show();
         expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.contain(
@@ -140,18 +121,28 @@ describe('OverlaysManager', () => {
         // When we are not iOS nor MacSafari
         isIOSDetectionStub.value(false);
         isMacSafariDetectionStub.value(false);
-
-        const dialog2 = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        const dialog2 = new OverlayController(
+          {
+            ...defaultOptions,
+            preventsScroll: true,
+          },
+          mngr,
+        );
         await dialog2.show();
         expect(Array.from(document.body.classList)).to.not.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.not.contain(
           'overlays-scroll-lock-ios-fix',
         );
       });
-
       it('adds class "overlays-scroll-lock-ios-fix" to body on MacSafari', async () => {
         mockMacSafari();
-        const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        const dialog = new OverlayController(
+          {
+            ...defaultOptions,
+            preventsScroll: true,
+          },
+          mngr,
+        );
         await dialog.show();
         expect(Array.from(document.body.classList)).to.contain('overlays-scroll-lock-ios-fix');
         expect(Array.from(document.documentElement.classList)).to.not.contain(
@@ -165,13 +156,17 @@ describe('OverlaysManager', () => {
       });
       it('remove class "overlays-scroll-lock-ios-fix" after teardown', async () => {
         mockIOS();
-        const dialog = new OverlayController({ ...defaultOptions, preventsScroll: true }, mngr);
+        const dialog = new OverlayController(
+          {
+            ...defaultOptions,
+            preventsScroll: true,
+          },
+          mngr,
+        );
         await dialog.show();
-
         await dialog.teardown();
-
         expect(
-          Array.from(document.body.classList).filter(cls =>
+          Array.from(document.body.classList).filter((cls) =>
             ['overlays-scroll-lock', 'overlays-scroll-lock-ios-fix'].includes(cls),
           ),
         ).to.be.empty;

package/components/overlays/test/global-positioning.test.js

@@ -7,17 +7,14 @@ import { OverlayController, overlays } from '@lion/ui/overlays.js';
  * @typedef {import('../types/OverlayConfig.js').ViewportPlacement} ViewportPlacement
  */
 
-const withDefaultGlobalConfig = () =>
-  /** @type {OverlayConfig} */ ({
-    placementMode: 'global',
-    contentNode: fixtureSync(html`<p>my content</p>`),
-  });
-
+const withDefaultGlobalConfig = () => /** @type {OverlayConfig} */ ({
+  placementMode: 'global',
+  contentNode: fixtureSync(html`<p>my content</p>`),
+});
 describe('Global Positioning', () => {
   afterEach(() => {
     overlays.teardown();
   });
-
   describe('viewportConfig', () => {
     it('positions the overlay in center by default', async () => {
       const ctrl = new OverlayController({
@@ -27,7 +24,6 @@ describe('Global Positioning', () => {
       expect(ctrl.contentWrapperNode.classList.contains('overlays__overlay-container--center')).to
         .be.true;
     });
-
     it('positions relative to the viewport ', async () => {
       const placementMap = [
         'top-left',
@@ -40,11 +36,11 @@ describe('Global Positioning', () => {
         'left',
         'center',
       ];
-      placementMap.forEach(async viewportPlacement => {
+      placementMap.forEach(async (viewportPlacement) => {
         const ctrl = new OverlayController({
           ...withDefaultGlobalConfig(),
           viewportConfig: {
-            placement: /** @type {ViewportPlacement} */ (viewportPlacement),
+            placement: /** @type {ViewportPlacement} */ viewportPlacement,
           },
         });
         await ctrl.show();

package/components/overlays/test/local-positioning.test.js

@@ -17,41 +17,34 @@ import { normalizeTransformStyle } from '../test-helpers/normalizeTransformStyle
  * @param {{clickHandler?: function; width?: number; height?: number}} opts
  */
 function createInvokerSync({ clickHandler = () => {}, width = 100, height = 20 }) {
-  return /** @type {HTMLDivElement} */ (
-    fixtureSync(html`
-      <div
-        role="button"
-        style="width: ${width}px; height: ${height}px; background: red; color: white;"
-        @click=${clickHandler}
-      >
-        Invoker
-      </div>
-    `)
-  );
+  return /** @type {HTMLDivElement} */ fixtureSync(html`
+    <div
+      role="button"
+      style="width: ${width}px; height: ${height}px; background: red; color: white;"
+      @click=${clickHandler}
+    >
+      Invoker
+    </div>
+  `);
 }
 
 /**
  * @param {{ width?: number; height?: number }} opts
  */
 function createContentSync({ width = 80, height = 20 }) {
-  return /** @type {HTMLDivElement} */ (
-    fixtureSync(html`
-      <div style="width: ${width}px; height: ${height}px; background: green; color: white;">
-        Content
-      </div>
-    `)
-  );
+  return /** @type {HTMLDivElement} */ fixtureSync(html`
+    <div style="width: ${width}px; height: ${height}px; background: green; color: white;">
+      Content
+    </div>
+  `);
 }
-
-const withLocalTestConfig = () =>
-  /** @type {OverlayConfig} */ ({
-    placementMode: 'local',
-    contentNode: /** @type {HTMLElement} */ (fixtureSync(html` <div>my content</div> `)),
-    invokerNode: /** @type {HTMLElement} */ (
-      fixtureSync(html` <div role="button" style="width: 100px; height: 20px;">Invoker</div> `)
-    ),
-  });
-
+const withLocalTestConfig = () => /** @type {OverlayConfig} */ ({
+  placementMode: 'local',
+  contentNode: /** @type {HTMLElement} */ fixtureSync(html` <div>my content</div> `),
+  invokerNode:
+    /** @type {HTMLElement} */
+    fixtureSync(html` <div role="button" style="width: 100px; height: 20px;">Invoker</div> `),
+});
 describe('Local Positioning', () => {
   // Please use absolute positions in the tests below to prevent the HTML generated by
   // the test runner from interfering.
@@ -67,19 +60,18 @@ describe('Local Positioning', () => {
       // @ts-ignore [popper-instance-access-in-test]
       expect(ctrl._popper.state.modifiersData).to.exist;
     });
-
     it('positions correctly', async () => {
       // smoke test for integration of popper
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 30px; background: green;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 30px; background: green;"></div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 20px; height: 10px; background: orange;">Button</div>
-          `)
-        ),
+          `),
       });
       await fixture(html`
         <div style="position: fixed; left: 100px; top: 100px;">
@@ -92,25 +84,23 @@ describe('Local Positioning', () => {
       if (browserDetection.isFirefox) {
         return;
       }
-
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate(70px, -508px)',
       );
     });
-
     it('uses top as the default placement', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
               Button
             </div>
-          `)
-        ),
+          `),
       });
       await fixture(html`
         <div style="position: fixed; left: 100px; top: 100px;">
@@ -120,20 +110,19 @@ describe('Local Positioning', () => {
       await ctrl.show();
       expect(ctrl.contentWrapperNode.getAttribute('data-popper-placement')).to.equal('top');
     });
-
     it('positions to preferred place if placement is set and space is available', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
               Button
             </div>
-          `)
-        ),
+          `),
         popperConfig: {
           placement: 'left-start',
         },
@@ -143,24 +132,22 @@ describe('Local Positioning', () => {
           ${ctrl.invokerNode}${ctrl.contentWrapperNode}
         </div>
       `);
-
       await ctrl.show();
       expect(ctrl.contentWrapperNode.getAttribute('data-popper-placement')).to.equal('left-start');
     });
-
     it('positions to different place if placement is set and no space is available', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;">invoker</div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 20px;">invoker</div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
               content
             </div>
-          `)
-        ),
+          `),
         popperConfig: {
           placement: 'left',
         },
@@ -170,31 +157,35 @@ describe('Local Positioning', () => {
           ${ctrl.invokerNode}${ctrl.contentWrapperNode}
         </div>
       `);
-
       await ctrl.show();
       expect(ctrl.contentWrapperNode.getAttribute('data-popper-placement')).to.equal('right');
     });
-
     it('allows the user to override default Popper modifiers', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
               Button
             </div>
-          `)
-        ),
+          `),
         popperConfig: {
           modifiers: [
             {
               name: 'keepTogether',
               enabled: false,
             },
-            { name: 'offset', enabled: true, options: { offset: [0, 16] } },
+            {
+              name: 'offset',
+              enabled: true,
+              options: {
+                offset: [0, 16],
+              },
+            },
           ],
         },
       });
@@ -203,17 +194,25 @@ describe('Local Positioning', () => {
           ${ctrl.invokerNode}${ctrl.contentWrapperNode}
         </div>
       `);
-
       await ctrl.show();
       // @ts-ignore [popper-instance-access-in-test]
-      expect(ctrl._popper.state.modifiersData.offset.auto).to.eql({ x: 0, y: 16 });
+      expect(ctrl._popper.state.modifiersData.offset.auto).to.eql({
+        x: 0,
+        y: 16,
+      });
     });
-
     it('positions the Popper element correctly on show', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: createContentSync({ width: 80, height: 20 }),
-        invokerNode: createInvokerSync({ clickHandler: () => ctrl.show(), width: 100, height: 20 }),
+        contentNode: createContentSync({
+          width: 80,
+          height: 20,
+        }),
+        invokerNode: createInvokerSync({
+          clickHandler: () => ctrl.show(),
+          width: 100,
+          height: 20,
+        }),
         popperConfig: {
           placement: 'top',
         },
@@ -223,7 +222,6 @@ describe('Local Positioning', () => {
           ${ctrl.invokerNode}${ctrl.__wrappingDialogNode}
         </div>
       `);
-
       await ctrl.show();
 
       // TODO: test fails on Firefox, but looks fine in browser => try again in a later version and investigate when persists (or move to anchor positioning when available in all browsers)
@@ -236,7 +234,6 @@ describe('Local Positioning', () => {
         'translate(110px, -308px)',
         '110 = (100 + (100-80)/2); -308= 300 + 8',
       );
-
       await ctrl.hide();
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
@@ -249,16 +246,16 @@ describe('Local Positioning', () => {
     it.skip('updates placement properly even during hidden state', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
               Button
             </div>
-          `)
-        ),
+          `),
         popperConfig: {
           placement: 'top',
           modifiers: [
@@ -277,13 +274,11 @@ describe('Local Positioning', () => {
           ${ctrl.invokerNode} ${ctrl.contentWrapperNode}
         </div>
       `);
-
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -30px, 0px)',
         'Popper positioning values',
       );
-
       await ctrl.hide();
       await ctrl.updateConfig({
         popperConfig: {
@@ -311,16 +306,16 @@ describe('Local Positioning', () => {
     it.skip('updates positioning correctly during shown state when config gets updated', async () => {
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
-        contentNode: /** @type {HTMLElement} */ (
-          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `)
-        ),
-        invokerNode: /** @type {HTMLElement} */ (
+        contentNode:
+          /** @type {HTMLElement} */
+          fixtureSync(html` <div style="width: 80px; height: 20px;"></div> `),
+        invokerNode:
+          /** @type {HTMLElement} */
           fixtureSync(html`
             <div role="button" style="width: 100px; height: 20px;" @click=${() => ctrl.show()}>
               Invoker
             </div>
-          `)
-        ),
+          `),
         popperConfig: {
           placement: 'top',
           modifiers: [
@@ -339,16 +334,22 @@ describe('Local Positioning', () => {
           ${ctrl.invokerNode} ${ctrl.contentWrapperNode}
         </div>
       `);
-
       await ctrl.show();
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
         'translate3d(10px, -30px, 0px)',
         'Popper positioning values',
       );
-
       await ctrl.updateConfig({
         popperConfig: {
-          modifiers: [{ name: 'offset', enabled: true, options: { offset: [0, 20] } }],
+          modifiers: [
+            {
+              name: 'offset',
+              enabled: true,
+              options: {
+                offset: [0, 20],
+              },
+            },
+          ],
         },
       });
       expect(normalizeTransformStyle(ctrl.contentWrapperNode.style.transform)).to.equal(
@@ -356,11 +357,10 @@ describe('Local Positioning', () => {
         'Popper positioning Y value should be 10 less than previous, due to the added extra 10px offset',
       );
     });
-
     it('can set the contentNode minWidth as the invokerNode width', async () => {
-      const invokerNode = /** @type {HTMLElement} */ (
-        await fixture(html` <div role="button" style="width: 60px;">invoker</div> `)
-      );
+      const invokerNode =
+        /** @type {HTMLElement} */
+        await fixture(html` <div role="button" style="width: 60px;">invoker</div> `);
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
         inheritsReferenceWidth: 'min',
@@ -369,11 +369,10 @@ describe('Local Positioning', () => {
       await ctrl.show();
       expect(ctrl.contentWrapperNode.style.minWidth).to.equal('60px');
     });
-
     it('can set the contentNode maxWidth as the invokerNode width', async () => {
-      const invokerNode = /** @type {HTMLElement} */ (
-        await fixture(html` <div role="button" style="width: 60px;">invoker</div> `)
-      );
+      const invokerNode =
+        /** @type {HTMLElement} */
+        await fixture(html` <div role="button" style="width: 60px;">invoker</div> `);
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
         inheritsReferenceWidth: 'max',
@@ -382,11 +381,10 @@ describe('Local Positioning', () => {
       await ctrl.show();
       expect(ctrl.contentWrapperNode.style.maxWidth).to.equal('60px');
     });
-
     it('can set the contentNode width as the invokerNode width', async () => {
-      const invokerNode = /** @type {HTMLElement} */ (
-        await fixture(html` <div role="button" style="width: 60px;">invoker</div> `)
-      );
+      const invokerNode =
+        /** @type {HTMLElement} */
+        await fixture(html` <div role="button" style="width: 60px;">invoker</div> `);
       const ctrl = new OverlayController({
         ...withLocalTestConfig(),
         inheritsReferenceWidth: 'full',