@ordergroove/offers 2.41.0 → 2.42.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ordergroove/offers",
-  "version": "2.41.0",
+  "version": "2.42.0",
   "description": "offer state component",
   "author": "Eugenio Lattanzio <eugenio63@gmail.com>",
   "homepage": "https://github.com/ordergroove/plush-toys#readme",
@@ -46,8 +46,8 @@
     "throttle-debounce": "^2.1.0"
   },
   "devDependencies": {
-    "@ordergroove/offers-templates": "^0.9.6",
+    "@ordergroove/offers-templates": "^0.9.7",
     "@types/lodash.memoize": "^4.1.9"
   },
-  "gitHead": "24e315047abbe0e265409f1f5265e3d9fd462672"
+  "gitHead": "7acd066ed3c38e3067555de011a9e3c2bd2b4439"
 }

package/src/components/Tooltip.js

@@ -152,7 +152,8 @@ export class Tooltip extends LitElement {
         border-left: solid var(--og-tooltip-background, #ececec) 10px;
       }
 
-      .tooltip:hover .content {
+      .tooltip:hover .content,
+      .trigger:focus + .content {
         opacity: 1;
         width: 200px;
         pointer-events: auto;
@@ -163,11 +164,12 @@ export class Tooltip extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.showTooltip = this.showTooltip.bind(this);
-    this.addEventListener('mouseenter', this.showTooltip);
+    this.recalculatePosition = this.recalculatePosition.bind(this);
+    this.addEventListener('mouseenter', this.recalculatePosition);
+    this.addEventListener('focusin', this.recalculatePosition);
   }
 
-  showTooltip() {
+  recalculatePosition() {
     const trigger = this.shadowRoot.querySelector('.trigger');
     const triggerRect = trigger.getBoundingClientRect();
     const content = this.shadowRoot.querySelector('.content');
@@ -180,14 +182,14 @@ export class Tooltip extends LitElement {
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.removeEventListener('mouseenter', this.showTooltip);
-    this.removeEventListener('mouseout', this.hideTooltip);
+    this.removeEventListener('mouseenter', this.recalculatePosition);
+    this.removeEventListener('focusin', this.recalculatePosition);
   }
 
   render() {
     return html`
       <span class="tooltip">
-        <span class="trigger">
+        <span class="trigger" tabindex="0">
           <slot name="trigger">${this.trigger}</slot>
         </span>
         <div class="content ${this.placement || 'bottom'}">

package/src/components/__tests__/Tooltip.spec.js

@@ -36,7 +36,7 @@ describe('Tooltip', () => {
       });
     }
 
-    element.showTooltip();
+    element.recalculatePosition();
     Object.keys(expectedStyles).forEach(key => expect(contentDiv.style[key]).toEqual(expectedStyles[key]));
   };