Add on deselected hook

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: {

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 = {};

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,

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);