Rename onPopoverRendered to onPopoverRender

Author: kamranahmedse

docs/src/content/guides/buttons.mdx

@@ -235,7 +235,7 @@ You can use the `onNextClick`, `onPreviousClick` and `onCloseClick` callbacks to
 
 ## Custom Buttons
 
-You can add custom buttons using `onPopoverRendered` callback. This callback is called every time a popover is rendered. In the following example, we are adding a custom button that takes the user to the first step.
+You can add custom buttons using `onPopoverRender` callback. This callback is called before the popover is rendered. In the following example, we are adding a custom button that takes the user to the first step.
 
 
 <CodeSample
@@ -253,7 +253,7 @@ You can add custom buttons using `onPopoverRendered` callback. This callback is
         align: 'start',
         side: 'left',
         title: 'More Control with Hooks',
-        description: 'You can use onPopoverRendered hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.'
+        description: 'You can use onPopoverRender hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.'
       }
     },
     {
@@ -286,7 +286,7 @@ You can add custom buttons using `onPopoverRendered` callback. This callback is
     // Get full control over the popover rendering.
     // Here we are adding a custom button that takes
     // user to the first step.
-    onPopoverRendered: (popover, { config, state }) => {
+    onPopoverRender: (popover, { config, state }) => {
       const firstButton = document.createElement("button");
       firstButton.innerText = "Go to First";
       popover.footerButtons.appendChild(firstButton);

docs/src/content/guides/configuration.mdx

@@ -69,7 +69,7 @@ type Config = {
   // PopoverDOM is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, container etc.
-  onPopoverRendered?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
 
   // Hooks to run before and after highlighting
   // each step. Each hook receives the following
@@ -163,7 +163,7 @@ type Popover = {
   // Parameter is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, etc.
-  onPopoverRendered?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
 
   // Callbacks for button clicks. You can use
   // these to add custom behavior to the buttons.

docs/src/content/guides/styling-popover.mdx

@@ -8,7 +8,7 @@ import { CodeSample } from "../../components/CodeSample.tsx";
 
 You can either use the default class names and override the styles or you can pass a custom class name to the `popoverClass` option either globally or per step.
 
-Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRendered` callback to get the popover DOM element and do whatever you want with it.
+Alternatively, if want to modify the Popover DOM, you can use the `onPopoverRender` callback to get the popover DOM element and do whatever you want with it before popover is rendered.
 
 We have added a few examples below but have a look at the [theming section](/docs/theming#styling-popover) for detailed guide including class names to target etc.
 
@@ -155,7 +155,7 @@ Here is the CSS used for the above example:
         align: 'start',
         side: 'left',
         title: 'More Control with Hooks',
-        description: 'You can use onPopoverRendered hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.'
+        description: 'You can use onPopoverRender hook to modify the popover DOM. Here we are adding a custom button to the popover which takes the user to the first step.'
       }
     },
     {
@@ -188,7 +188,7 @@ Here is the CSS used for the above example:
     // Get full control over the popover rendering.
     // Here we are adding a custom button that takes
     // the user to the first step.
-    onPopoverRendered: (popover, { config, state }) => {
+    onPopoverRender: (popover, { config, state }) => {
       const firstButton = document.createElement("button");
       firstButton.innerText = "Go to First";
       popover.footerButtons.appendChild(firstButton);

docs/src/content/guides/theming.mdx

@@ -57,7 +57,7 @@ Visit the [example page](/docs/styling-popover) for an example that modifies the
 
 ## Modifying Popover DOM
 
-Alternatively, you can also use the `onPopoverRendered` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.
+Alternatively, you can also use the `onPopoverRender` hook to modify the popover DOM before it is displayed. The hook is called with the popover DOM as the first argument.
 
 ```typescript
 type PopoverDOM = {
@@ -73,7 +73,7 @@ type PopoverDOM = {
   footerButtons: HTMLElement;
 };
 
-onPopoverRendered?: (popover: PopoverDOM) => void;
+onPopoverRender?: (popover: PopoverDOM) => void;
 ```
 
 ## Styling Page

index.html

@@ -452,10 +452,9 @@ <h2>Usage and Demo</h2>
           steps: basicTourSteps,
           showProgress: true,
           progressText: "{{current}} of {{total}} done",
-          onPopoverRendered: (popover) => {
+          onPopoverRender: (popover) => {
             popover.title.innerHTML = `${driverObj.getActiveIndex()} ${driverObj.hasNextStep() ? 'Yes' : 'No'} ${driverObj.hasPreviousStep() ? 'Yes' : 'No'}`
             popover.description.innerHTML = `${driverObj.isFirstStep() ? 'Yes' : 'No'} ${driverObj.isLastStep() ? 'Yes' : 'No'}`
-            driverObj.refresh();
           }
         });
 
@@ -662,7 +661,7 @@ <h2>Usage and Demo</h2>
 
       document.getElementById("popover-hook").addEventListener("click", () => {
         const driverObj = driver({
-          onPopoverRendered: popover => {
+          onPopoverRender: popover => {
             popover.title.innerText = "Modified Parent";
           },
         });
@@ -673,7 +672,7 @@ <h2>Usage and Demo</h2>
             description: "Body of the popover",
             side: "bottom",
             align: "start",
-            onPopoverRendered: popover => {
+            onPopoverRender: popover => {
               popover.title.innerText = "Modified";
             },
           },
@@ -694,7 +693,7 @@ <h2>Usage and Demo</h2>
             description: "Body of the popover",
             side: "bottom",
             align: "start",
-            onPopoverRendered: popover => {
+            onPopoverRender: popover => {
               popover.title.innerText = "Modified";
             },
           },
@@ -777,7 +776,7 @@ <h2>Usage and Demo</h2>
 
       document.getElementById("popover-hook-config").addEventListener("click", () => {
         const driverObj = driver({
-          onPopoverRendered: popover => {
+          onPopoverRender: popover => {
             const firstButton = document.createElement("button");
             firstButton.innerText = "First";
             popover.footerButtons.appendChild(firstButton);

package.json

@@ -1,7 +1,7 @@
 {
   "name": "driver.js",
   "private": false,
-  "version": "1.0.2",
+  "version": "1.0.3",
   "main": "./dist/driver.js.cjs",
   "module": "./dist/driver.js.mjs",
   "types": "./dist/driver.js.d.ts",

src/config.ts

@@ -31,7 +31,7 @@ export type Config = {
   doneBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRendered?: (popover: PopoverDOM) => void;
+  onPopoverRender?: (popover: PopoverDOM) => void;
 
   // State based callbacks, called upon state changes
   onHighlightStarted?: DriverHook;

src/popover.ts

@@ -28,7 +28,7 @@ export type Popover = {
   prevBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRendered?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
 
   // Button callbacks
   onNextClick?: DriverHook;
@@ -203,16 +203,16 @@ export function renderPopover(element: Element, step: DriveStep) {
 
   setState("popover", popover);
 
-  repositionPopover(element, step);
-  bringInView(popoverWrapper);
-
-  const onPopoverRendered = step.popover?.onPopoverRendered || getConfig("onPopoverRendered");
-  if (onPopoverRendered) {
-    onPopoverRendered(popover, {
+  const onPopoverRender = step.popover?.onPopoverRender || getConfig("onPopoverRender");
+  if (onPopoverRender) {
+    onPopoverRender(popover, {
       config: getConfig(),
       state: getState(),
     });
   }
+
+  repositionPopover(element, step);
+  bringInView(popoverWrapper);
 }
 
 type PopoverDimensions = {