@lion/ui 0.0.9 → 0.0.11

package/components/select-rich/test/lion-select-rich.test.js

@@ -1,5 +1,4 @@
 import { LitElement } from 'lit';
-import { renderLitAsNode } from '@lion/ui/helpers.js';
 import { LionOption } from '@lion/ui/listbox.js';
 import { getListboxMembers } from '@lion/ui/listbox-test-helpers.js';
 import { OverlayController } from '@lion/ui/overlays.js';
@@ -152,7 +151,7 @@ describe('lion-select-rich', () => {
     });
 
     it('updates the invoker when the selected element is the same but the modelValue was updated asynchronously', async () => {
-      const tag = defineCE(
+      const tagString = defineCE(
         class LionCustomOption extends LionOption {
           render() {
             return html`${this.modelValue.value}`;
@@ -163,27 +162,26 @@ describe('lion-select-rich', () => {
           }
         },
       );
-      const tagString = unsafeStatic(tag);
-
+      const tag = unsafeStatic(tagString);
       const firstOption = /** @type {LionOption} */ (
-        renderLitAsNode(html`<${tagString} checked .choiceValue=${10}></${tagString}>`)
+        await _fixture(html`<${tag} checked .choiceValue=${10}></${tag}>`)
       );
 
       const el = await fixture(html`
         <lion-select-rich>
           ${firstOption}
-          <${tagString} .choiceValue=${20}></${tagString}>
+          <${tag} .choiceValue=${20}></${tag}>
         </lion-select-rich>
       `);
 
       const { _invokerNode } = getSelectRichMembers(el);
+
       const firstChild = /** @type {HTMLElement} */ (
         /** @type {ShadowRoot} */ (_invokerNode.shadowRoot).firstElementChild
       );
       expect(firstChild.textContent).to.equal('10');
 
       firstOption.modelValue = { value: 30, checked: true };
-      await firstOption.updateComplete;
       await el.updateComplete;
       expect(firstChild.textContent).to.equal('30');
     });

package/components/tooltip/src/LionTooltip.js

@@ -1,8 +1,8 @@
 import { css, LitElement } from 'lit';
-import { ArrowMixin, OverlayMixin } from '@lion/ui/overlays.js';
+import { ArrowMixin, OverlayMixin, withTooltipConfig } from '@lion/ui/overlays.js';
 
 /**
- * @typedef {import('../../overlays/types/OverlayConfig.js').OverlayConfig} OverlayConfig
+ * @typedef {import('@lion/ui/types/overlays.js').OverlayConfig} OverlayConfig
  * @typedef {import('lit').CSSResult} CSSResult
  * @typedef {import('lit').CSSResultArray} CSSResultArray
  */
@@ -49,10 +49,6 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
      * @type {'label'|'description'}
      */
     this.invokerRelation = 'description';
-    /** @protected */
-    this._mouseActive = false;
-    /** @protected */
-    this._keyActive = false;
   }
 
   /** @protected */
@@ -60,90 +56,7 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
   _defineOverlayConfig() {
     return /** @type {OverlayConfig} */ ({
       ...super._defineOverlayConfig(),
-      placementMode: 'local',
-      elementToFocusAfterHide: undefined,
-      hidesOnEsc: true,
-      hidesOnOutsideEsc: true,
-      handlesAccessibility: true,
-      isTooltip: true,
-      invokerRelation: this.invokerRelation,
+      ...withTooltipConfig({ invokerRelation: this.invokerRelation }),
     });
   }
-
-  /** @protected */
-  _hasDisabledInvoker() {
-    if (this._overlayCtrl && this._overlayCtrl.invoker) {
-      return (
-        /** @type {HTMLElement & { disabled: boolean }} */ (this._overlayCtrl.invoker).disabled ||
-        this._overlayCtrl.invoker.getAttribute('aria-disabled') === 'true'
-      );
-    }
-    return false;
-  }
-
-  /** @protected */
-  _setupOpenCloseListeners() {
-    super._setupOpenCloseListeners();
-    this.__resetActive = this.__resetActive.bind(this);
-    this._overlayCtrl.addEventListener('hide', this.__resetActive);
-
-    this.addEventListener('mouseenter', this._showMouse);
-    this.addEventListener('mouseleave', this._hideMouse);
-
-    this._showKey = this._showKey.bind(this);
-    this._overlayInvokerNode.addEventListener('focusin', this._showKey);
-
-    this._hideKey = this._hideKey.bind(this);
-    this._overlayInvokerNode.addEventListener('focusout', this._hideKey);
-  }
-
-  /** @protected */
-  _teardownOpenCloseListeners() {
-    super._teardownOpenCloseListeners();
-    this._overlayCtrl.removeEventListener('hide', this.__resetActive);
-    this.removeEventListener('mouseenter', this._showMouse);
-    this.removeEventListener('mouseleave', this._hideMouse);
-    this._overlayInvokerNode.removeEventListener('focusin', this._showKey);
-    this._overlayInvokerNode.removeEventListener('focusout', this._hideKey);
-  }
-
-  /** @private */
-  __resetActive() {
-    this._mouseActive = false;
-    this._keyActive = false;
-  }
-
-  /** @protected */
-  _showMouse() {
-    if (!this._keyActive) {
-      this._mouseActive = true;
-      if (!this._hasDisabledInvoker()) {
-        this.opened = true;
-      }
-    }
-  }
-
-  /** @protected */
-  _hideMouse() {
-    if (!this._keyActive) {
-      this.opened = false;
-    }
-  }
-
-  /** @protected */
-  _showKey() {
-    if (!this._mouseActive) {
-      this._keyActive = true;
-      if (!this._hasDisabledInvoker()) {
-        this.opened = true;
-      }
-    }
-  }
-
-  /** @protected */
-  _hideKey() {
-    if (!this._mouseActive) {
-      this.opened = false;
-    }
-  }
 }

package/components/tooltip/test/lion-tooltip.test.js

@@ -1,6 +1,7 @@
 import '@lion/ui/define/lion-tooltip.js';
 import { aTimeout, expect, fixture, html, unsafeStatic } from '@open-wc/testing';
 import { runOverlayMixinSuite } from '@lion/ui/overlays-test-suites.js';
+import sinon from 'sinon';
 
 /**
  * @typedef {import('../src/LionTooltip.js').LionTooltip} LionTooltip
@@ -20,6 +21,15 @@ describe('lion-tooltip', () => {
   });
 
   describe('Basic', () => {
+    /** @type {sinon.SinonFakeTimers} */
+    let clock;
+    beforeEach(() => {
+      clock = sinon.useFakeTimers();
+    });
+    afterEach(() => {
+      clock.restore();
+    });
+
     it('shows content on mouseenter and hide on mouseleave', async () => {
       const el = /** @type {LionTooltip} */ (
         await fixture(html`
@@ -30,15 +40,19 @@ describe('lion-tooltip', () => {
         `)
       );
       const eventMouseEnter = new Event('mouseenter');
-      el.dispatchEvent(eventMouseEnter);
+      // @ts-expect-error [allow-protected-in-tests]
+      el._overlayInvokerNode.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      clock.tick(300);
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
       const eventMouseLeave = new Event('mouseleave');
-      el.dispatchEvent(eventMouseLeave);
+      // @ts-expect-error [allow-protected-in-tests]
+      el._overlayInvokerNode.dispatchEvent(eventMouseLeave);
+      clock.tick(300);
       await el.updateComplete;
       await el.updateComplete; // webkit needs longer
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
 
@@ -52,14 +66,18 @@ describe('lion-tooltip', () => {
         `)
       );
       const eventMouseEnter = new Event('mouseenter');
-      el.dispatchEvent(eventMouseEnter);
+      // @ts-expect-error [allow-protected-in-tests]
+      el._overlayInvokerNode.dispatchEvent(eventMouseEnter);
+      clock.tick(300);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
       const eventFocusOut = new Event('focusout');
-      el.dispatchEvent(eventFocusOut);
+      // @ts-expect-error [allow-protected-in-tests]
+      el._overlayContentNode.dispatchEvent(eventFocusOut);
+      clock.tick(300);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
     });
 
@@ -77,14 +95,16 @@ describe('lion-tooltip', () => {
       );
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
+      clock.tick(300);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
       const eventFocusOut = new Event('focusout');
       invoker.dispatchEvent(eventFocusOut);
+      clock.tick(300);
       await el.updateComplete;
       await el.updateComplete; // webkit needs longer
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
 
@@ -102,13 +122,15 @@ describe('lion-tooltip', () => {
       );
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
+      clock.tick(300);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
       const eventMouseLeave = new Event('mouseleave');
       invoker.dispatchEvent(eventMouseLeave);
+      clock.tick(300);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(true);
     });
 
@@ -127,12 +149,12 @@ describe('lion-tooltip', () => {
       const eventMouseEnter = new Event('mouseenter');
       el.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
 
@@ -151,12 +173,12 @@ describe('lion-tooltip', () => {
       const eventMouseEnter = new Event('mouseenter');
       el.dispatchEvent(eventMouseEnter);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
       const eventFocusIn = new Event('focusin');
       invoker.dispatchEvent(eventFocusIn);
       await el.updateComplete;
-      // @ts-expect-error allow protected props in tests
+      // @ts-expect-error [allow-protected-in-tests]
       expect(el._overlayCtrl.isShown).to.equal(false);
     });
 
@@ -182,6 +204,15 @@ describe('lion-tooltip', () => {
   });
 
   describe('Arrow', () => {
+    /** @type {sinon.SinonFakeTimers} */
+    let clock;
+    beforeEach(() => {
+      clock = sinon.useFakeTimers();
+    });
+    afterEach(() => {
+      clock.restore();
+    });
+
     it('shows when "has-arrow" is configured', async () => {
       const el = /** @type {LionTooltip} */ (
         await fixture(html`
@@ -196,7 +227,8 @@ describe('lion-tooltip', () => {
       expect(el._arrowNode).to.be.displayed;
     });
 
-    it('makes sure positioning of the arrow is correct', async () => {
+    // TODO: promise for dynamic import popper does not resolve?
+    it.skip('makes sure positioning of the arrow is correct', async () => {
       const el = /** @type {LionTooltip} */ (
         await fixture(html`
           <lion-tooltip
@@ -217,8 +249,9 @@ describe('lion-tooltip', () => {
       );
 
       el.opened = true;
-
+      clock.tick(300);
       await el.repositionComplete;
+
       // Pretty sure we use flex for this now so that's why it fails
       /* expect(getComputedStyle(el.__arrowElement).getPropertyValue('top')).to.equal(
         '11px',
@@ -229,8 +262,7 @@ describe('lion-tooltip', () => {
         getComputedStyle(/** @type {HTMLElement} */ (el._arrowNode)).getPropertyValue('left'),
       ).to.equal(
         '-10px',
-        `
-          arrow height is 8px so this offset should be taken into account to align the arrow properly,
+        `arrow height is 8px so this offset should be taken into account to align the arrow properly,
           as well as half the difference between width and height ((12 - 8) / 2 = 2)
         `,
       );