Move hook from popover to elementg

index.html

@@ -489,12 +489,12 @@ npm install driver.js</pre
             },
             {
               element: ".dynamic-el",
+              onDeselected: element => {
+                element?.parentElement?.removeChild(element);
+              },
               popover: {
                 title: "Dynamic Elements",
                 description: "This was created before we moved here",
-                onDeselected: element => {
-                  element?.parentElement?.removeChild(element);
-                },
               },
             },
             {

src/config.ts

@@ -11,14 +11,15 @@ export type Config = {
   opacity?: number;
   stagePadding?: number;
   stageRadius?: number;
+
   allowKeyboardControl?: boolean;
 
   // Popover specific configuration
   popoverClass?: string;
   popoverOffset?: number;
   showButtons?: AllowedButtons[];
-  showProgress?: boolean;
   disableButtons?: AllowedButtons[];
+  showProgress?: boolean;
 
   // Button texts
   progressText?: string;

src/driver.ts

@@ -10,6 +10,7 @@ import { getState, resetState, setState } from "./state";
 
 export type DriveStep = {
   element?: string | Element;
+  onDeselected?: (element: Element | undefined, step: DriveStep) => void;
   popover?: Popover;
 };
 
@@ -120,9 +121,14 @@ export function driver(options: Config = {}) {
 
     const doneBtnText = currentStep.popover?.doneBtnText || getConfig("doneBtnText") || "Done";
     const allowsClosing = getConfig("allowClose");
-    const showProgress = typeof currentStep.popover?.showProgress !== "undefined" ? currentStep.popover?.showProgress : getConfig("showProgress")
+    const showProgress =
+      typeof currentStep.popover?.showProgress !== "undefined"
+        ? currentStep.popover?.showProgress
+        : getConfig("showProgress");
     const progressText = currentStep.popover?.progressText || getConfig("progressText") || "{{current}} of {{total}}";
-    const progressTextReplaced = progressText.replace("{{current}}", `${stepIndex + 1}`).replace("{{total}}", `${steps.length}`);
+    const progressTextReplaced = progressText
+      .replace("{{current}}", `${stepIndex + 1}`)
+      .replace("{{total}}", `${steps.length}`);
 
     console.log(showProgress);
     highlight({
@@ -164,7 +170,7 @@ export function driver(options: Config = {}) {
       return;
     }
 
-    const onDeselected = activeStep?.popover?.onDeselected || getConfig("onDeselected");
+    const onDeselected = activeStep?.onDeselected || getConfig("onDeselected");
     const onDestroyed = getConfig("onDestroyed");
 
     document.body.classList.remove("driver-active", "driver-fade", "driver-simple");

src/highlight.ts

@@ -72,7 +72,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
   const isAnimatedTour = getConfig("animate");
   const highlightStartedHook = getConfig("onHighlightStarted");
   const highlightedHook = getConfig("onHighlighted");
-  const deselectedHook = fromStep?.popover?.onDeselected || getConfig("onDeselected");
+  const deselectedHook = fromStep?.onDeselected || getConfig("onDeselected");
 
   if (!isFirstHighlight && deselectedHook) {
     deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!);

src/popover.ts

@@ -29,7 +29,6 @@ export type Popover = {
 
   // Called after the popover is rendered
   onPopoverRendered?: (popover: PopoverDOM) => void;
-  onDeselected?: (element: Element | undefined, step: DriveStep) => void;
 
   // Button callbacks
   onNextClick?: (element: Element | undefined, step: DriveStep) => void;