From d656141ed89f15410a1ebbf177ddf9334447d412 Mon Sep 17 00:00:00 2001
From: Kamran Ahmed <kamranahmed.se@gmail.com>
Date: Tue, 13 Jun 2023 03:56:22 +0100
Subject: [PATCH] Add on deselected hook

---
 index.html       | 16 +++++++++++++++-
 src/config.ts    |  2 ++
 src/driver.ts    | 17 +++++++++++++----
 src/highlight.ts |  5 +++++
 4 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/index.html b/index.html
index f4840a3..eebb746 100644
--- a/index.html
+++ b/index.html
@@ -314,6 +314,9 @@ npm install driver.js</pre
           animate: true,
           popoverOffset: 10,
           stagePadding: 10,
+          onDeselected: (element, step) => {
+            console.log("Deselected element", element, step);
+          },
           onHighlightStarted: (element, step) => {
             console.log("Started highlighting element", element, step);
           },
@@ -359,7 +362,18 @@ npm install driver.js</pre
       });
 
       document.getElementById("transition-highlight-btn").addEventListener("click", () => {
-        const driverObj = driver({ animate: true });
+        const driverObj = driver({
+          animate: true,
+          onDeselected: (element, step) => {
+            console.log("Deselected element", element, step);
+          },
+          onHighlightStarted: (element, step) => {
+            console.log("Started highlighting element", element, step);
+          },
+          onHighlighted: (element, step) => {
+            console.log("Highlighted element", element, step);
+          },
+        });
 
         driverObj.highlight({
           popover: {
diff --git a/src/config.ts b/src/config.ts
index b2b3f4f..c60c6c4 100644
--- a/src/config.ts
+++ b/src/config.ts
@@ -13,6 +13,8 @@ export type Config = {
 
   onHighlightStarted?: (element: Element, step: DriveStep) => void;
   onHighlighted?: (element: Element, step: DriveStep) => void;
+
+  onDeselected?: (element: Element, step: DriveStep) => void;
 };
 
 let currentConfig: Config = {};
diff --git a/src/driver.ts b/src/driver.ts
index 40e9a35..cbd33d1 100644
--- a/src/driver.ts
+++ b/src/driver.ts
@@ -21,6 +21,13 @@ export function driver(options: Config = {}) {
       return;
     }
 
+    const activeStep = getState("activeStep");
+    const activeElement = getState("activeElement");
+    const onDeselected = getConfig("onDeselected");
+    if (activeStep && activeElement && onDeselected) {
+      onDeselected(activeElement, activeStep);
+    }
+
     destroy();
   }
 
@@ -60,10 +67,12 @@ export function driver(options: Config = {}) {
       init();
       highlight({
         ...step,
-        popover: step.popover ? {
-          showButtons: false,
-          ...step.popover!,
-        } : undefined,
+        popover: step.popover
+          ? {
+              showButtons: false,
+              ...step.popover!,
+            }
+          : undefined,
       });
     },
     destroy,
diff --git a/src/highlight.ts b/src/highlight.ts
index db33eb5..aececf6 100644
--- a/src/highlight.ts
+++ b/src/highlight.ts
@@ -72,6 +72,11 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
 
   const highlightStartedHook = getConfig("onHighlightStarted");
   const highlightedHook = getConfig("onHighlighted");
+  const deselectedHook = getConfig("onDeselected");
+
+  if (!isFirstHighlight && !isFromDummyElement && deselectedHook) {
+    deselectedHook(fromElement, fromStep!);
+  }
 
   if (!isToDummyElement && highlightStartedHook) {
     highlightStartedHook(toElement, toStep);