From e5c78a3d8896aeaee19e0da4fd9ee16ebaa033bf Mon Sep 17 00:00:00 2001
From: Nina Repetto <ninamrepetto@gmail.com>
Date: Wed, 18 Dec 2024 11:30:31 -0300
Subject: [PATCH] feat(hovercard): DP-119841 hovercard fixes for Fast Connect
 (#597)

---
 .../docs/components/hovercard.md              |  2 -
 .../components/hovercard/hovercard.stories.js |  5 ++
 .../components/hovercard/hovercard.test.js    |  5 +-
 .../components/hovercard/hovercard.vue        | 42 ++++++++---
 .../hovercard/hovercard_default.story.vue     |  3 +
 .../hovercard/hovercard_many.story.vue        |  2 +
 .../components/hovercard/timer.js             | 67 -----------------
 .../components/popover/popover.vue            | 72 +++++++------------
 .../components/hovercard/hovercard.stories.js |  5 ++
 .../components/hovercard/hovercard.vue        | 39 ++++++++--
 .../hovercard/hovercard_default.story.vue     |  3 +
 .../hovercard/hovercard_many.story.vue        |  2 +
 .../components/hovercard/timer.js             | 68 ------------------
 .../components/popover/popover.vue            | 72 +++++++------------
 14 files changed, 136 insertions(+), 251 deletions(-)
 delete mode 100644 packages/dialtone-vue2/components/hovercard/timer.js
 delete mode 100644 packages/dialtone-vue3/components/hovercard/timer.js

diff --git a/apps/dialtone-documentation/docs/components/hovercard.md b/apps/dialtone-documentation/docs/components/hovercard.md
index bc4be3c41b..463f8b4954 100644
--- a/apps/dialtone-documentation/docs/components/hovercard.md
+++ b/apps/dialtone-documentation/docs/components/hovercard.md
@@ -69,8 +69,6 @@ showHtmlWarning />
 
 ### Many hovercards
 
-Initially, there is a 300ms delay when numerous hovercards are present. However, when transitioning from one anchor to another, the delay is determined by the mouse movement time. This implies that the closer the anchors are, the faster the hovercard appears. To achieve this, the component uses a global timer. Move the mouse over the avatars to reveal the hovercards in the example.
-
 <code-well-header>
   <dt-stack direction="row" gap="500">
     <example-hovercard v-for="data in exampleData" :label="data.label" :content="data.content" />
diff --git a/packages/dialtone-vue2/components/hovercard/hovercard.stories.js b/packages/dialtone-vue2/components/hovercard/hovercard.stories.js
index c384d3e8b9..dd67551769 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard.stories.js
+++ b/packages/dialtone-vue2/components/hovercard/hovercard.stories.js
@@ -50,6 +50,11 @@ export const argTypesData = {
   },
 
   // Props
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
   fallbackPlacements: {
     description: `If the popover does not fit in the direction described by "placement",
     it will attempt to change its direction to the "fallbackPlacements".
diff --git a/packages/dialtone-vue2/components/hovercard/hovercard.test.js b/packages/dialtone-vue2/components/hovercard/hovercard.test.js
index 09997382b2..733cd50c2a 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard.test.js
+++ b/packages/dialtone-vue2/components/hovercard/hovercard.test.js
@@ -94,9 +94,8 @@ describe('DtHovercard Tests', () => {
         await anchor.trigger('mouseleave');
         await vi.runAllTimers();
 
-        content = getHovercardContent();
-
-        expect(content).toBeNull();
+        const dialog = document.querySelector('[data-qa="dt-hovercard__dialog"] > div');
+        expect(dialog.style.display).toBe('none');
       });
     });
 
diff --git a/packages/dialtone-vue2/components/hovercard/hovercard.vue b/packages/dialtone-vue2/components/hovercard/hovercard.vue
index b7c53f3d07..d91159cfa1 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard.vue
+++ b/packages/dialtone-vue2/components/hovercard/hovercard.vue
@@ -14,8 +14,10 @@
     :footer-class="footerClass"
     :append-to="appendTo"
     :hovercard="true"
-    :timer="timer"
     data-qa="dt-hovercard"
+    :open="open"
+    :enter-delay="enterDelay"
+    :leave-delay="leaveDelay"
     @opened="(e) => ($emit('opened', e))"
   >
     <template #anchor="{ attrs }">
@@ -39,9 +41,8 @@
 
 <script>
 import { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';
-import { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';
+import { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 import { getUniqueString } from '@/common/utils';
-import useTimer from './timer';
 
 export default {
   name: 'DtHovercard',
@@ -52,6 +53,17 @@ export default {
 
   props: {
   /**
+     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+    open: {
+      type: Boolean,
+      default: null,
+    },
+
+    /**
    * Fade transition when the content display is toggled.
    * @type boolean
    * @values true, false
@@ -165,6 +177,24 @@ export default {
             (appendTo instanceof HTMLElement);
       },
     },
+
+    /**
+     * The enter delay in milliseconds before the hovercard is shown.
+     * @type number
+     */
+    enterDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
+    },
+
+    /**
+     * The leave delay in milliseconds before the hovercard is hidden.
+     * @type number
+     */
+    leaveDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
+    },
   },
 
   emits: [
@@ -176,11 +206,5 @@ export default {
      */
     'opened',
   ],
-
-  data () {
-    return {
-      timer: useTimer(),
-    };
-  },
 };
 </script>
diff --git a/packages/dialtone-vue2/components/hovercard/hovercard_default.story.vue b/packages/dialtone-vue2/components/hovercard/hovercard_default.story.vue
index ad936d864f..43a4bfc237 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard_default.story.vue
+++ b/packages/dialtone-vue2/components/hovercard/hovercard_default.story.vue
@@ -11,6 +11,9 @@
     :header-class="$attrs.headerClass"
     :footer-class="$attrs.footerClass"
     :append-to="$attrs.appendTo"
+    :open="$attrs.open"
+    :enter-delay="$attrs.enterDelay"
+    :leave-delay="$attrs.leaveDelay"
     @opened="$attrs.onOpened"
   >
     <template #anchor="slotProps">
diff --git a/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue b/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue
index de9198f545..ac216e42ff 100644
--- a/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue
+++ b/packages/dialtone-vue2/components/hovercard/hovercard_many.story.vue
@@ -25,6 +25,8 @@
           :header-class="$attrs.headerClass"
           :footer-class="$attrs.footerClass"
           :append-to="$attrs.appendTo"
+          :enter-delay="$attrs.enterDelay"
+          :leave-delay="$attrs.leaveDelay"
           @opened="$attrs.onOpened"
         >
           <template #anchor="slotProps">
diff --git a/packages/dialtone-vue2/components/hovercard/timer.js b/packages/dialtone-vue2/components/hovercard/timer.js
deleted file mode 100644
index f3874e4af3..0000000000
--- a/packages/dialtone-vue2/components/hovercard/timer.js
+++ /dev/null
@@ -1,67 +0,0 @@
-import { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
-
-export default (function () {
-  const current = { value: null };
-  let timerLeave, timerEnter;
-  let start = null;
-  let prevCard = null;
-
-  // Handles the timer for when the event that opens the hovercard
-  // is triggered.
-  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.
-  // If there was an active hovercard, the delay depends on the time it takes
-  // to move from one anchor to the other.
-  function enter (id) {
-    if (prevCard) {
-      const time = Date.now() - start + 100;
-      if (timerLeave) clearTimeout(timerLeave);
-      if (prevCard !== id) {
-        timerLeave = setTimeout(
-          () => {
-            if (current.value !== null) {
-              start = Date.now();
-            }
-            current.value = null;
-          },
-          time,
-        );
-        if (timerEnter) clearTimeout(timerEnter);
-        timerEnter = setTimeout(
-          () => {
-            current.value = id;
-            prevCard = id;
-          },
-          time,
-        );
-      }
-    } else {
-      timerEnter = setTimeout(() => {
-        current.value = id;
-        prevCard = id;
-      }, TOOLTIP_DELAY_MS);
-    }
-  }
-
-  // Handles the timer for when the event that closes the hovercard
-  // is triggered.
-  function leave () {
-    if (timerEnter) {
-      clearTimeout(timerEnter);
-      timerEnter = null;
-    }
-    start = Date.now();
-    timerLeave = setTimeout(() => {
-      current.value = null;
-      prevCard = null;
-    }, TOOLTIP_DELAY_MS);
-  }
-
-  let instance = null;
-
-  return () => {
-    if (instance === null) {
-      instance = { current, enter, leave };
-    }
-    return instance;
-  };
-})();
diff --git a/packages/dialtone-vue2/components/popover/popover.vue b/packages/dialtone-vue2/components/popover/popover.vue
index 6583cc0e09..88bdbd8494 100644
--- a/packages/dialtone-vue2/components/popover/popover.vue
+++ b/packages/dialtone-vue2/components/popover/popover.vue
@@ -26,8 +26,8 @@
         @keydown.up.prevent="onArrowKeyPress"
         @keydown.down.prevent="onArrowKeyPress"
         @keydown.escape.capture="closePopover"
-        @mouseenter="onEnterAnchor"
-        @mouseleave="onLeaveAnchor"
+        @mouseenter="openHovercard"
+        @mouseleave="closeHovercard"
       >
         <!-- @slot Anchor element that activates the popover. Usually a button. -->
         <slot
@@ -58,8 +58,8 @@
         :tabindex="contentTabindex"
         appear
         v-on="popoverListeners"
-        @mouseenter="onEnterContent"
-        @mouseleave="onLeaveContent"
+        @mouseenter="openHovercard"
+        @mouseleave="closeHovercard"
       >
         <popover-header-footer
           v-if="$slots.headerContent || showCloseButton"
@@ -515,17 +515,21 @@ export default {
     },
 
     /**
-     * The timer is used only when the hovercard prop is true.
-     * It defines the delays when opening several hovercards.
-     * It must have the keys: enter, leave and current.
-     * If null, the default delay of 300ms will be used.
+     * The enter delay in milliseconds before the hovercard is shown.
+     * @type number
      */
-    timer: {
-      type: [Object, null],
-      default: null,
-      validator: timer => {
-        return timer === null || (timer.enter && timer.leave && Object.keys(timer).includes('current'));
-      },
+    enterDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
+    },
+
+    /**
+     * The leave delay in milliseconds before the hovercard is hidden.
+     * @type number
+     */
+    leaveDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
     },
   },
 
@@ -593,10 +597,6 @@ export default {
       // there is no aria-label and the labelledby should point to the anchor.
       return this.ariaLabelledby || (!this.ariaLabel && getUniqueString('DtPopover__anchor'));
     },
-
-    currentHovercard () {
-      return this.timer?.current.value;
-    },
   },
 
   watch: {
@@ -663,16 +663,6 @@ export default {
         this.tip.hide();
       }
     },
-
-    currentHovercard () {
-      if (this.hovercard && this.timer) {
-        if (this.currentHovercard === this.id) {
-          this.isOpen = true;
-        } else {
-          this.isOpen = false;
-        }
-      }
-    },
   },
 
   mounted () {
@@ -1029,45 +1019,31 @@ export default {
     setInTimer () {
       this.inTimer = setTimeout(() => {
         this.isOpen = true;
-      }, TOOLTIP_DELAY_MS);
+      }, this.enterDelay);
     },
 
     setOutTimer () {
       this.outTimer = setTimeout(() => {
         this.isOpen = false;
-      }, TOOLTIP_DELAY_MS);
+      }, this.leaveDelay);
     },
 
-    onEnterAnchor () {
+    openHovercard () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.enter(this.id);
-      else {
+      if (this.open === null || this.open === undefined) {
         clearTimeout(this.outTimer);
         this.setInTimer();
       }
     },
 
-    onLeaveAnchor () {
+    closeHovercard () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.leave();
-      else {
+      if (this.open === null || this.open === undefined) {
         clearTimeout(this.inTimer);
         this.setOutTimer();
       }
     },
 
-    onEnterContent () {
-      if (!this.hovercard) return;
-      if (this.timer) this.timer.enter(this.id);
-      else clearTimeout(this.outTimer);
-    },
-
-    onLeaveContent () {
-      if (!this.hovercard) return;
-      if (this.timer) this.timer.leave();
-      else this.setOutTimer();
-    },
-
     //  ============================================================================
     //  $ HOVERCARD
     //  ----------------------------------------------------------------------------
diff --git a/packages/dialtone-vue3/components/hovercard/hovercard.stories.js b/packages/dialtone-vue3/components/hovercard/hovercard.stories.js
index 4dcb1738bc..fff0b41436 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard.stories.js
+++ b/packages/dialtone-vue3/components/hovercard/hovercard.stories.js
@@ -50,6 +50,11 @@ export const argTypesData = {
   },
 
   // Props
+  open: {
+    control: {
+      type: 'boolean',
+    },
+  },
   fallbackPlacements: {
     description: `If the popover does not fit in the direction described by "placement",
     it will attempt to change its direction to the "fallbackPlacements".
diff --git a/packages/dialtone-vue3/components/hovercard/hovercard.vue b/packages/dialtone-vue3/components/hovercard/hovercard.vue
index 6fbfbcac50..41781ec5a4 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard.vue
+++ b/packages/dialtone-vue3/components/hovercard/hovercard.vue
@@ -14,8 +14,10 @@
     :footer-class="footerClass"
     :append-to="appendTo"
     :hovercard="true"
-    :timer="timer"
     data-qa="dt-hovercard"
+    :open="open"
+    :enter-delay="enterDelay"
+    :leave-delay="leaveDelay"
     @opened="(e) => ($emit('opened', e))"
   >
     <template #anchor="{ attrs }">
@@ -42,13 +44,9 @@
 </template>
 
 <script setup>
-import { reactive } from 'vue';
 import { POPOVER_APPEND_TO_VALUES, POPOVER_PADDING_CLASSES, DtPopover } from '@/components/popover/index.js';
-import { TOOLTIP_DIRECTIONS } from '@/components/tooltip/index.js';
+import { TOOLTIP_DIRECTIONS, TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
 import { getUniqueString } from '@/common/utils';
-import useTimer from './timer';
-
-const timer = reactive(useTimer());
 
 defineProps({
   /**
@@ -61,6 +59,17 @@ defineProps({
     default: false,
   },
 
+  /**
+     * Controls whether the hovercard is shown. Leaving this null will have the hovercard trigger on hover by default.
+     * If you set this value, the default trigger behavior will be disabled, and you can control it as you need.
+     * Supports .sync modifier
+     * @values null, true, false
+     */
+  open: {
+    type: Boolean,
+    default: null,
+  },
+
   /**
       * If the popover does not fit in the direction described by "placement",
      * it will attempt to change its direction to the "fallbackPlacements".
@@ -164,6 +173,24 @@ defineProps({
       return POPOVER_APPEND_TO_VALUES.includes(appendTo) ||
             (appendTo instanceof HTMLElement);
     },
+
+    /**
+     * The enter delay in milliseconds before the hovercard is shown.
+     * @type number
+     */
+    enterDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
+    },
+
+    /**
+     * The leave delay in milliseconds before the hovercard is hidden.
+     * @type number
+     */
+    leaveDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
+    },
   },
 });
 
diff --git a/packages/dialtone-vue3/components/hovercard/hovercard_default.story.vue b/packages/dialtone-vue3/components/hovercard/hovercard_default.story.vue
index ad936d864f..43a4bfc237 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard_default.story.vue
+++ b/packages/dialtone-vue3/components/hovercard/hovercard_default.story.vue
@@ -11,6 +11,9 @@
     :header-class="$attrs.headerClass"
     :footer-class="$attrs.footerClass"
     :append-to="$attrs.appendTo"
+    :open="$attrs.open"
+    :enter-delay="$attrs.enterDelay"
+    :leave-delay="$attrs.leaveDelay"
     @opened="$attrs.onOpened"
   >
     <template #anchor="slotProps">
diff --git a/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue b/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue
index de9198f545..ac216e42ff 100644
--- a/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue
+++ b/packages/dialtone-vue3/components/hovercard/hovercard_many.story.vue
@@ -25,6 +25,8 @@
           :header-class="$attrs.headerClass"
           :footer-class="$attrs.footerClass"
           :append-to="$attrs.appendTo"
+          :enter-delay="$attrs.enterDelay"
+          :leave-delay="$attrs.leaveDelay"
           @opened="$attrs.onOpened"
         >
           <template #anchor="slotProps">
diff --git a/packages/dialtone-vue3/components/hovercard/timer.js b/packages/dialtone-vue3/components/hovercard/timer.js
deleted file mode 100644
index 5bfb9430c0..0000000000
--- a/packages/dialtone-vue3/components/hovercard/timer.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { ref } from 'vue';
-import { TOOLTIP_DELAY_MS } from '@/components/tooltip/index.js';
-
-export default (function () {
-  const current = ref(null);
-  let timerLeave, timerEnter;
-  let start = null;
-  let prevCard = null;
-
-  // Handles the timer for when the event that opens the hovercard
-  // is triggered.
-  // If no hovercard is active, it sets a delay of TOOLTIP_DELAY_MS.
-  // If there was an active hovercard, the delay depends on the time it takes
-  // to move from one anchor to the other.
-  function enter (id) {
-    if (prevCard) {
-      const time = Date.now() - start + 100;
-      if (timerLeave) clearTimeout(timerLeave);
-      if (prevCard !== id) {
-        timerLeave = setTimeout(
-          () => {
-            if (current.value !== null) {
-              start = Date.now();
-            }
-            current.value = null;
-          },
-          time,
-        );
-        if (timerEnter) clearTimeout(timerEnter);
-        timerEnter = setTimeout(
-          () => {
-            current.value = id;
-            prevCard = id;
-          },
-          time,
-        );
-      }
-    } else {
-      timerEnter = setTimeout(() => {
-        current.value = id;
-        prevCard = id;
-      }, TOOLTIP_DELAY_MS);
-    }
-  }
-
-  // Handles the timer for when the event that closes the hovercard
-  // is triggered.
-  function leave () {
-    if (timerEnter) {
-      clearTimeout(timerEnter);
-      timerEnter = null;
-    }
-    start = Date.now();
-    timerLeave = setTimeout(() => {
-      current.value = null;
-      prevCard = null;
-    }, TOOLTIP_DELAY_MS);
-  }
-
-  let instance = null;
-
-  return () => {
-    if (instance === null) {
-      instance = { current, enter, leave };
-    }
-    return instance;
-  };
-})();
diff --git a/packages/dialtone-vue3/components/popover/popover.vue b/packages/dialtone-vue3/components/popover/popover.vue
index 2f0c695553..fcc08c37b9 100644
--- a/packages/dialtone-vue3/components/popover/popover.vue
+++ b/packages/dialtone-vue3/components/popover/popover.vue
@@ -30,8 +30,8 @@
         @keydown.escape.capture="closePopover"
         @keydown.enter="$emit('keydown', $event)"
         @keydown.space="$emit('keydown', $event)"
-        @mouseenter="onEnterAnchor"
-        @mouseleave="onLeaveAnchor"
+        @mouseenter="openHovercard"
+        @mouseleave="closeHovercard"
       >
         <!-- @slot Anchor element that activates the popover. Usually a button. -->
         <slot
@@ -63,8 +63,8 @@
         :css="$attrs.css"
         :tabindex="contentTabindex"
         v-on="popoverListeners"
-        @mouseenter="onEnterContent"
-        @mouseleave="onLeaveContent"
+        @mouseenter="openHovercard"
+        @mouseleave="closeHovercard"
       >
         <popover-header-footer
           v-if="hasSlotContent($slots.headerContent) || showCloseButton"
@@ -526,17 +526,21 @@ export default {
     },
 
     /**
-     * The timer is used only when the hovercard prop is true.
-     * It defines the delays when opening several hovercards.
-     * It must have the keys: enter, leave and current.
-     * If null, the default delay of 300ms will be used.
+     * The enter delay in milliseconds before the hovercard is shown.
+     * @type number
      */
-    timer: {
-      type: [Object, null],
-      default: null,
-      validator: timer => {
-        return timer === null || (timer.enter && timer.leave && Object.keys(timer).includes('current'));
-      },
+    enterDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
+    },
+
+    /**
+     * The leave delay in milliseconds before the hovercard is hidden.
+     * @type number
+     */
+    leaveDelay: {
+      type: Number,
+      default: TOOLTIP_DELAY_MS,
     },
   },
 
@@ -609,10 +613,6 @@ export default {
       // there is no aria-label and the labelledby should point to the anchor.
       return this.ariaLabelledby || (!this.ariaLabel && getUniqueString('DtPopover__anchor'));
     },
-
-    currentHovercard () {
-      return this.timer?.current;
-    },
   },
 
   watch: {
@@ -690,16 +690,6 @@ export default {
         this.tip.hide();
       }
     },
-
-    currentHovercard () {
-      if (this.hovercard && this.timer) {
-        if (this.currentHovercard === this.id) {
-          this.isOpen = true;
-        } else {
-          this.isOpen = false;
-        }
-      }
-    },
   },
 
   mounted () {
@@ -1065,45 +1055,31 @@ export default {
     setInTimer () {
       this.inTimer = setTimeout(() => {
         this.isOpen = true;
-      }, TOOLTIP_DELAY_MS);
+      }, this.enterDelay);
     },
 
     setOutTimer () {
       this.outTimer = setTimeout(() => {
         this.isOpen = false;
-      }, TOOLTIP_DELAY_MS);
+      }, this.leaveDelay);
     },
 
-    onEnterAnchor () {
+    openHovercard () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.enter(this.id);
-      else {
+      if (this.open === null || this.open === undefined) {
         clearTimeout(this.outTimer);
         this.setInTimer();
       }
     },
 
-    onLeaveAnchor () {
+    closeHovercard () {
       if (!this.hovercard) return;
-      if (this.timer) this.timer.leave();
-      else {
+      if (this.open === null || this.open === undefined) {
         clearTimeout(this.inTimer);
         this.setOutTimer();
       }
     },
 
-    onEnterContent () {
-      if (!this.hovercard) return;
-      if (this.timer) this.timer.enter(this.id);
-      else clearTimeout(this.outTimer);
-    },
-
-    onLeaveContent () {
-      if (!this.hovercard) return;
-      if (this.timer) this.timer.leave();
-      else this.setOutTimer();
-    },
-
     //  ============================================================================
     //  $ HOVERCARD
     //  ----------------------------------------------------------------------------