@lion/ui 0.0.10 → 0.0.12

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
  */
@@ -32,6 +32,10 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
         :host([hidden]) {
           display: none;
         }
+
+        ::slotted([slot='content']) {
+          width: max-content;
+        }
       `,
     ];
   }
@@ -49,101 +53,24 @@ export class LionTooltip extends ArrowMixin(OverlayMixin(LitElement)) {
      * @type {'label'|'description'}
      */
     this.invokerRelation = 'description';
-    /** @protected */
-    this._mouseActive = false;
-    /** @protected */
-    this._keyActive = false;
   }
 
   /** @protected */
   // eslint-disable-next-line class-methods-use-this
   _defineOverlayConfig() {
+    const superCfg = super._defineOverlayConfig();
+    const tooltipCfg = withTooltipConfig({ invokerRelation: this.invokerRelation });
     return /** @type {OverlayConfig} */ ({
-      ...super._defineOverlayConfig(),
-      placementMode: 'local',
-      elementToFocusAfterHide: undefined,
-      hidesOnEsc: true,
-      hidesOnOutsideEsc: true,
-      handlesAccessibility: true,
-      isTooltip: true,
-      invokerRelation: this.invokerRelation,
+      ...superCfg,
+      ...tooltipCfg,
+      popperConfig: {
+        ...(superCfg.popperConfig || {}),
+        ...(tooltipCfg.popperConfig || {}),
+        modifiers: [
+          ...(superCfg.popperConfig?.modifiers || []),
+          ...(tooltipCfg.popperConfig?.modifiers || []),
+        ],
+      },
     });
   }
-
-  /** @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`
@@ -217,8 +248,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 +261,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)
         `,
       );