Better highlighting/highlighted hooks

index.html

@@ -419,6 +419,15 @@ npm install driver.js</pre
       document.getElementById("without-element-btn").addEventListener("click", () => {
         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

@@ -11,10 +11,10 @@ export type Config = {
   popoverOffset?: number;
   showButtons?: boolean;
 
-  onHighlightStarted?: (element: Element, step: DriveStep) => void;
-  onHighlighted?: (element: Element, step: DriveStep) => void;
+  onHighlightStarted?: (element: Element | undefined, step: DriveStep) => void;
+  onHighlighted?: (element: Element | undefined, step: DriveStep) => void;
 
-  onDeselected?: (element: Element, step: DriveStep) => void;
+  onDeselected?: (element: Element | undefined, step: DriveStep) => void;
 };
 
 let currentConfig: Config = {};

src/driver.ts

@@ -25,7 +25,7 @@ export function driver(options: Config = {}) {
     const activeElement = getState("activeElement");
     const onDeselected = getConfig("onDeselected");
     if (activeStep && activeElement && onDeselected) {
-      onDeselected(activeElement, activeStep);
+      onDeselected(activeElement.id === "driver-dummy-element" ? undefined : activeElement, activeStep);
     }
 
     destroy();

src/highlight.ts

@@ -74,12 +74,12 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   const highlightedHook = getConfig("onHighlighted");
   const deselectedHook = getConfig("onDeselected");
 
-  if (!isFirstHighlight && !isFromDummyElement && deselectedHook) {
-    deselectedHook(fromElement, fromStep!);
+  if (!isFirstHighlight && deselectedHook) {
+    deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!);
   }
 
-  if (!isToDummyElement && highlightStartedHook) {
-    highlightStartedHook(toElement, toStep);
+  if (highlightStartedHook) {
+    highlightStartedHook(isToDummyElement ? undefined : toElement, toStep);
   }
 
   const hasDelayedPopover = !isFirstHighlight && (hasNoPreviousPopover || isFromDummyElement || isToDummyElement);
@@ -111,8 +111,8 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     } else {
       trackActiveElement(toElement);
 
-      if (!isToDummyElement && highlightedHook) {
-        highlightedHook(toElement, toStep);
+      if (highlightedHook) {
+        highlightedHook(isToDummyElement ? undefined : toElement, toStep);
       }
 
       setState("transitionCallback", undefined);