chore: merge tag 1.3.5 from https://github.com/kamranahmedse/driver.js

README.md

@@ -14,11 +14,11 @@ license: mit
   <a href="https://github.com/kamranahmedse/driver.js/blob/master/license">
     <img src="https://img.shields.io/badge/License-MIT-yellow.svg" />
   </a>
-  <a href="https://npmjs.org/package/driver.js">
-    <img src="https://img.shields.io/npm/v/driver.js.svg" alt="version" />
+  <a href="https://www.jsdelivr.com/package/npm/driver.js">
+    <img src="https://data.jsdelivr.com/v1/package/npm/driver.js/badge?style=rounded" alt="jsdelivr hits" />
   </a>
   <a href="https://npmjs.org/package/driver.js">
-    <img src="https://img.shields.io/npm/dt/driver.js.svg" alt="downloads" />
+    <img src="https://img.shields.io/npm/dm/driver.js" alt="downloads" />
   </a>
 </p>
 

docs/src/components/CodeSample.tsx

@@ -53,7 +53,7 @@ export function CodeSample(props: CodeSampleProps) {
   const { heading, id, children, buttonText = "Show me an Example", className, config, highlight, tour } = props;
 
   if (id === "demo-hook-theme") {
-    config!.onPopoverRendered = attachFirstButton;
+    config!.onPopoverRender = attachFirstButton;
   }
 
   function onClick() {

docs/src/components/Examples.astro

@@ -499,7 +499,7 @@ import { ExampleButton } from "./ExampleButton";
       element: '#customizing-popover',
       popover: {
         title: "Customizing Popover",
-        description: "Add your own class using `popoverClass` or use `onPopoverRendered` to get full control over the popover. <br /><br /> Visit these pages which cover <a class='font-medium underline' href='/docs/styling-popover'>styling</a> and <a class='font-medium underline' href='/docs/buttons'>customizing popovers</a> in detail.",
+        description: "Add your own class using `popoverClass` or use `onPopoverRender` to get full control over the popover. <br /><br /> Visit these pages which cover <a class='font-medium underline' href='/docs/styling-popover'>styling</a> and <a class='font-medium underline' href='/docs/buttons'>customizing popovers</a> in detail.",
         side: 'top',
         align: 'start'
       }

docs/src/components/Features.astro

@@ -0,0 +1,84 @@
+---
+import { Earth, Smartphone, Settings, Feather, Code2, Layers, Keyboard } from "lucide-react";
+import Container from "./Container.astro";
+---
+
+<div class="py-0 mb-16 bg-white">
+  <Container>
+    <div class="max-w-screen-lg">
+      <h2 class="text-4xl md:text-5xl lg:text-6xl font-bold text-gray-900 mb-4 md:mb-6">Nothing else like it</h2>
+      <p class="text-base md:text-xl lg:text-2xl text-black mb-10 md:mb-14 lg:mb-16">
+        Lightweight with no external dependencies, supports all major browsers and is highly customizable.
+      </p>
+    </div>
+    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-8 md:gap-10 lg:gap-4">
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Earth className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Browser Support</h3>
+        <p class="text-gray-600 md:text-lg">
+          Works in all modern browsers including Chrome, IE9+, Safari, Firefox and Opera
+        </p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Smartphone className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Mobile Ready</h3>
+        <p class="text-gray-600 md:text-lg">Works on desktop, tablets and mobile devices</p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Settings className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Highly Customizable</h3>
+        <p class="text-gray-600 md:text-lg">Powerful API that allows you to customize it to your needs</p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Feather className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Lightweight</h3>
+        <p class="text-gray-600 md:text-lg">
+          Only 5KB minified, compared to other libraries which are typically >12KB minified
+        </p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Code2 className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">No Dependencies</h3>
+        <p class="text-gray-600 md:text-lg">Simple to use with absolutely no external dependencies</p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Layers className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Feature Rich</h3>
+        <p class="text-gray-600 md:text-lg">Create powerful feature introductions for your web applications</p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <span class="w-6 h-6 text-black lg:w-7 lg:h-7 font-black">MIT</span>
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">MIT License</h3>
+        <p class="text-gray-600 md:text-lg">Free for both personal and commercial use</p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <Keyboard className="w-6 h-6 text-black lg:w-7 lg:h-7" />
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Keyboard Control</h3>
+        <p class="text-gray-600 md:text-lg">All actions can be controlled via keyboard</p>
+      </div>
+      <div class="group bg-yellow-50 p-6 rounded-xl transition-colors">
+        <div class="flex justify-center items-center mb-4 w-12 h-12 rounded-xl bg-yellow-300 lg:h-14 lg:w-14">
+          <span class="w-6 h-6 text-black lg:w-7 lg:h-7 font-black">ALL</span>
+        </div>
+        <h3 class="mb-3 text-xl md:text-2xl font-bold text-black">Highlight Anything</h3>
+        <p class="text-gray-600 md:text-lg">Highlight any element on the page</p>
+      </div>
+    </div>
+  </Container>
+</div>

docs/src/components/HeroSection.astro

@@ -1,26 +1,52 @@
 ---
 import Container from "./Container.astro";
 ---
-<div class="bg-yellow-300">
+
+<div class="bg-white border-b border-gray-100 select-none">
+  <Container>
+    <div class="flex items-center justify-between h-16">
+      <a href="/" class="flex items-center justify-end text-xl font-bold text-gray-900 font-semibold gap-2.5">
+        <img src="/favicon.svg" alt="driver.js logo" class="h-10" />
+        driver.js
+      </a>
+      <span class="flex items-center gap-7">
+        <a href="/docs/installation" class="hover:underline underline-offset-4 text-lg font-medium text-gray-900">
+          <span class="hidden sm:inline">Documentation</span>
+          <span class="inline sm:hidden">Docs</span>
+        </a>
+        <a href="https://github.com/kamranahmedse/driver.js" target="_blank" class="hover:underline underline-offset-4 text-lg font-medium text-gray-900">GitHub</a>
+      </span>
+    </div>
+  </Container>
+</div>
+<div class="bg-yellow-300/80 overflow-hidden via-transparent">
   <Container>
     <div class="py-10 md:py-14 lg:py-20 flex justify-start items-center gap-4">
       <div class="flex-grow" data-hero-text>
         <h1 data-driver-name class="text-7xl md:text-8xl lg:text-9xl mb-2 md:mb-3 lg:mb-4 font-bold">driver.js</h1>
-        <p data-driver-tagline class="text-md md:text-2xl lg:text-3xl">Product tours, highlights, contextual help and more.</p>
+        <p data-driver-tagline class="text-base md:text-2xl lg:text-3xl !leading-normal">
+          Lightweight JavaScript library for product tours, highlights, and contextual help to guide users through your
+          product.
+        </p>
         <div class="mt-4 md:mt-8 lg:mt-10 flex flex-col sm:flex-row gap-2 items-stretch">
-          <button data-demo-tour class="bg-black rounded-xl py-2 md:py-3 px-6 font-medium text-white text-lg md:text-xl focus:outline-0 hover:bg-gray-800 focus:bg-gray-800">
-            Show Demo Tour
+          <button
+            data-demo-tour
+            class="bg-black rounded-xl py-2 md:py-3 px-6 font-medium text-white text-lg md:text-xl focus:outline-0 hover:bg-gray-800 focus:bg-gray-800"
+          >
+            Show Demo
           </button>
-          <a href="/docs/installation"
-             data-docs-link
-             class="bg-white rounded-xl py-2 md:py-3 px-6 font-medium text-black text-lg md:text-xl focus:outline-0 border-4 border-black text-center hover:bg-gray-200 focus:bg-gray-200">
+          <a
+            href="/docs/installation"
+            data-docs-link
+            class="bg-white rounded-xl py-2 md:py-3 px-6 font-medium text-black text-lg md:text-xl focus:outline-0 border-2 border-black text-center hover:bg-gray-200 focus:bg-gray-200"
+          >
             Get Started
           </a>
         </div>
       </div>
       <div class="flex-shrink-0 hidden sm:flex">
-        <img src="/driver.svg" alt="Hero Image" class="sm:h-48 md:h-60 lg:h-72" />
+        <img src="/driver.svg" alt="driver.js image" class="sm:h-48 md:h-60 lg:h-72" />
       </div>
     </div>
   </Container>
-</div>
+</div>

docs/src/components/OpenSourceLove.astro

@@ -4,7 +4,7 @@ import { getFormattedStars } from "../lib/github";
 
 const starCount = getFormattedStars('kamranahmedse/driver.js');
 ---
-<div class="py-10 md:py-12 lg:py-24 bg-white text-black border-t-2 border-t-black">
+<div class="py-10 md:py-12 lg:py-24 bg-white text-black border-t">
   <Container>
     <div class="flex items-center">
       <div>

docs/src/content/guides/configuration.mdx

@@ -73,7 +73,7 @@ type Config = {
   // PopoverDOM is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, container etc.
-  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Hooks to run before and after highlighting
   // each step. Each hook receives the following
@@ -82,9 +82,10 @@ type Config = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Hooks to run before and after the driver
   // is destroyed. Each hook receives
@@ -93,8 +94,9 @@ type Config = {
   //   - step: The step object configured for the currently active
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onDestroyStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onDestroyed?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Hooks to run on button clicks. Each hook receives
   // the following parameters:
@@ -102,9 +104,10 @@ type Config = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 };
 ```
 
@@ -167,7 +170,7 @@ type Popover = {
   // Parameter is an object with references to
   // the popover DOM elements such as buttons
   // title, descriptions, body, etc.
-  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, options: { config: Config; state: State, driver: Driver }) => void;
 
   // Callbacks for button clicks. You can use
   // these to add custom behavior to the buttons.
@@ -176,9 +179,10 @@ type Popover = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
-  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
-  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void
+  //   - options.driver: Current driver object
+  onNextClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
+  onPrevClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
+  onCloseClick?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void
 }
 ```
 
@@ -208,9 +212,10 @@ type DriveStep = {
   //   - step: The step object configured for the step
   //   - options.config: The current configuration options
   //   - options.state: The current state of the driver
-  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
-  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State }) => void;
+  //   - options.driver: Current driver object
+  onDeselected?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onHighlightStarted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
+  onHighlighted?: (element?: Element, step: DriveStep, options: { config: Config; state: State, driver: Driver }) => void;
 }
 ```
 

docs/src/content/guides/installation.mdx

@@ -20,8 +20,8 @@ yarn add driver.js
 Alternatively, you can use CDN and include the script in your HTML file:
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.js.iife.js"></script>
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@1.0.1/dist/driver.css"/>
+<script src="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.js.iife.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/driver.js@latest/dist/driver.css"/>
 ```
 
 ## Start Using

docs/src/layouts/BaseLayout.astro

@@ -1,111 +1,115 @@
 ---
 import Analytics from "../components/Analytics/Analytics.astro";
 export interface Props {
-	title: string;
+  permalink?: string;
+  title?: string;
+  description?: string;
 }
 
-export interface BaseLayoutProps extends Props {
-	permalink?: string;
-	title?: string;
-	description?: string;
-}
-
-const { permalink = '', title = "Driver.js", description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." } = Astro.props;
-
+const {
+  permalink = "",
+  title = "driver.js",
+  description = "A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page.",
+} = Astro.props;
 ---
 
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
-	<head>
-		<meta charset="UTF-8" />
-
-		<title>{ title }</title>
-		<meta name="robots" content="index,follow"/>
-		<meta name="description" itemprop="description" content={description}/>
-
-		<link href={`https://driverjs.com${permalink}`} rel="canonical">
-
-		<meta content="Kamran Ahmed" name=author>
-		<meta content="summary_large_image" name="twitter:card">
-		<meta content="@kamrify" name="twitter:creator">
-		<meta content="1200" property="og:image:width">
-		<meta content="630" property="og:image:height">
-		<meta content="https://driverjs.com/og-img.png" property="og:image">
-		<meta content="driverjs.com" property="og:image:alt">
-		<meta content="driverjs.com" property="og:site_name">
-		<meta content="Driver.js" property="og:title">
-		<meta content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page." property=og:description>
-		<meta content="website" property="og:type">
-		<meta content="https://driverjs.com/" property="og:url">
-
-		<meta name="viewport" content="width=device-width" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
-
-		<style is:global>
-			.driver-popover.driverjs-theme {
-				background-color: #fde047;
-				color: #000;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-title {
-				font-size: 20px;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-title,
-			.driver-popover.driverjs-theme .driver-popover-description,
-			.driver-popover.driverjs-theme .driver-popover-progress-text {
-				color: #000;
-			}
-
-			.driver-popover.driverjs-theme button {
-				flex: 1;
-				text-align: center;
-				background-color: #000;
-				color: #ffffff;
-				border: 2px solid #000;
-				text-shadow: none;
-				font-size: 14px;
-				padding: 5px 8px;
-				border-radius: 6px;
-			}
-
-			.driver-popover.driverjs-theme button:focus, .driver-popover.driverjs-theme button:hover {
-				background-color: #424242;
-				color: #ffffff;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-navigation-btns {
-				justify-content: space-between;
-				gap: 3px;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-close-btn {
-				color: #9b9b9b;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-close-btn:hover {
-				color: #000;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
-				border-left-color: #fde047;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
-				border-right-color: #fde047;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
-				border-top-color: #fde047;
-			}
-
-			.driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
-				border-bottom-color: #fde047;
-			}
-		</style>
-	</head>
-	<body>
-		<slot />
-        <Analytics />
-	</body>
-</html>
+  <head>
+    <meta charset="UTF-8" />
+
+    <title>{title}</title>
+    <meta name="robots" content="index,follow" />
+    <meta name="description" itemprop="description" content={description} />
+
+    <link href={`https://driverjs.com${permalink}`} rel="canonical" />
+
+    <meta content="Kamran Ahmed" name="author" />
+    <meta content="summary_large_image" name="twitter:card" />
+    <meta content="@kamrify" name="twitter:creator" />
+    <meta content="1200" property="og:image:width" />
+    <meta content="630" property="og:image:height" />
+    <meta content="https://driverjs.com/og-img.png" property="og:image" />
+    <meta content="driverjs.com" property="og:image:alt" />
+    <meta content="driverjs.com" property="og:site_name" />
+    <meta content="Driver.js" property="og:title" />
+    <meta
+      content="A light-weight, no-dependency, vanilla JavaScript library to drive user's focus across the page."
+      property="og:description"
+    />
+    <meta content="website" property="og:type" />
+    <meta content="https://driverjs.com/" property="og:url" />
+
+    <meta name="viewport" content="width=device-width" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+
+    <style is:global>
+      .driver-popover.driverjs-theme {
+        background-color: #fde047;
+        color: #000;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-title {
+        font-size: 20px;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-title,
+      .driver-popover.driverjs-theme .driver-popover-description,
+      .driver-popover.driverjs-theme .driver-popover-progress-text {
+        color: #000;
+      }
+
+      .driver-popover.driverjs-theme button {
+        flex: 1;
+        text-align: center;
+        background-color: #000;
+        color: #ffffff;
+        border: 1px solid #000;
+        text-shadow: none;
+        font-size: 14px;
+        padding: 5px 8px;
+        border-radius: 6px;
+      }
+
+      .driver-popover.driverjs-theme button:focus,
+      .driver-popover.driverjs-theme button:hover {
+        background-color: #000;
+        opacity: 0.8;
+        color: #ffffff;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-navigation-btns {
+        justify-content: space-between;
+        gap: 3px;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-close-btn {
+        color: #9b9b9b;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-close-btn:hover {
+        color: #000;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-left.driver-popover-arrow {
+        border-left-color: #fde047;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-right.driver-popover-arrow {
+        border-right-color: #fde047;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-top.driver-popover-arrow {
+        border-top-color: #fde047;
+      }
+
+      .driver-popover.driverjs-theme .driver-popover-arrow-side-bottom.driver-popover-arrow {
+        border-bottom-color: #fde047;
+      }
+    </style>
+  </head>
+  <body>
+    <slot />
+    <Analytics />
+  </body>
+</html>

docs/src/pages/index.astro

@@ -9,7 +9,7 @@ import Examples from "../components/Examples.astro";
 import UsecaseList from "../components/UsecaseList.astro";
 import OpenSourceLove from "../components/OpenSourceLove.astro";
 ---
-<BaseLayout>
+<BaseLayout title="driver.js">
   <HeroSection />
   <div
     class="bg-white overflow-x-hidden overflow-y-hidden relative h-[48px] md:h-[56px] lg:h-[64px] border-b-2 border-b-black"

index.html

@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
@@ -166,6 +166,8 @@
       <p>given below are the examples of simple `highlight`</p>
       <div class="buttons">
         <button id="highlight-btn">Animated Highlight</button>
+        <button id="buggy-highlight-btn">Buggy Highlight</button>
+        <button id="off-screen-highlight-btn">Off Screen Highlight</button>
         <button id="simple-highlight-btn">Simple Highlight</button>
         <button id="transition-highlight-btn">Transition Highlight</button>
         <button id="disallow-close">Disallow Close</button>
@@ -388,7 +390,7 @@ npm install driver.js</pre
           },
         },
         {
-          element: '.buttons',
+          element: ".buttons",
           popover: {
             title: "Buttons",
             description: "Here are some buttons",
@@ -468,13 +470,17 @@ npm install driver.js</pre
           disableActiveInteraction: true,
           showProgress: true,
           progressText: "{{current}} of {{total}} done",
-          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'}`
+          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"
+            }`;
 
             console.log(driverObj.getActiveIndex());
             console.log(driverObj.getActiveStep());
-          }
+          },
         });
 
         driverObj.drive(4);
@@ -491,16 +497,16 @@ npm install driver.js</pre
           {
             element: "h1",
             popover: {
-              description: "This is a new description"
-            }
+              description: "This is a new description",
+            },
           },
           {
             element: "p",
             popover: {
-              description: "This is another new description"
-            }
-          }
-        ])
+              description: "This is another new description",
+            },
+          },
+        ]);
 
         driverObj.drive();
       });
@@ -517,16 +523,16 @@ npm install driver.js</pre
           {
             element: "h1",
             popover: {
-              description: "This is a new description"
-            }
+              description: "This is a new description",
+            },
           },
           {
             element: "p",
             popover: {
-              description: "This is another new description"
-            }
-          }
-        ])
+              description: "This is another new description",
+            },
+          },
+        ]);
 
         driverObj.drive();
       });
@@ -624,7 +630,7 @@ npm install driver.js</pre
       document.getElementById("basic-tour").addEventListener("click", () => {
         const driverObj = driver({
           showProgress: true,
-          showButtons: ["next", 'previous', 'close'],
+          showButtons: ["next", "previous", "close"],
           steps: basicTourSteps,
         });
 
@@ -667,6 +673,10 @@ npm install driver.js</pre
             title: "Next and Close",
             showButtons: ["close", "next"],
             description: "This one only has next and close buttons, nothing else.",
+            onNextClick: (step, element, opts) => {
+              console.log("Next Clicked", step, element, opts);
+              opts.driver.destroy();
+            },
           },
         });
       });
@@ -835,10 +845,10 @@ npm install driver.js</pre
             driverObj.destroy();
           },
           steps: [
-            { popover: { title: "Some title", description: "Some description" }},
-            { popover: { title: "Another title", description: "Some description" }},
-            { popover: { title: "Yet another title", description: "Some description" }},
-          ]
+            { popover: { title: "Some title", description: "Some description" } },
+            { popover: { title: "Another title", description: "Some description" } },
+            { popover: { title: "Yet another title", description: "Some description" } },
+          ],
         });
 
         driverObj.drive();
@@ -856,10 +866,10 @@ npm install driver.js</pre
             });
           },
           steps: [
-            { popover: { title: "Some title", description: "Some description" }},
-            { popover: { title: "Another title", description: "Some description" }},
-            { popover: { title: "Yet another title", description: "Some description" }},
-          ]
+            { popover: { title: "Some title", description: "Some description" } },
+            { popover: { title: "Another title", description: "Some description" } },
+            { popover: { title: "Yet another title", description: "Some description" } },
+          ],
         });
 
         driverObj.drive();
@@ -902,6 +912,30 @@ npm install driver.js</pre
         }, 2000);
       });
 
+      document.getElementById("buggy-highlight-btn").addEventListener("click", () => {
+        driver().highlight({
+          element: ".page-header h1 sup",
+          popover: {
+            title: "Buggy Highlight",
+            description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+            side: "bottom",
+            align: "start",
+          },
+        });
+      });
+
+      document.getElementById("off-screen-highlight-btn").addEventListener("click", () => {
+        driver().highlight({
+          element: ".container",
+          popover: {
+            title: "Buggy Highlight",
+            description: "Unlike the older version, new version doesn't work with z-indexes so no more positional issues.",
+            side: "bottom",
+            align: "start",
+          },
+        });
+      });
+
       document.getElementById("highlight-btn").addEventListener("click", () => {
         driver({
           animate: true,
@@ -1103,7 +1137,7 @@ npm install driver.js</pre
       document.getElementById("click-overlay-to-next").addEventListener("click", () => {
         const driverObj = driver({
           animate: true,
-          overlayClickBehavior: 'nextStep',
+          overlayClickBehavior: "nextStep",
           steps: basicTourSteps,
         });
 

package.json

@@ -2,7 +2,7 @@
   "name": "@trincadev/driver.js",
   "license": "MIT",
   "private": false,
-  "version": "1.3.1-trincadev.2",
+  "version": "1.3.5-trincadev.1",
   "main": "./dist/driver.js.cjs",
   "module": "./dist/driver.js.mjs",
   "types": "./dist/driver.js.d.ts",
@@ -25,8 +25,9 @@
       "import": "./dist/driver.js.mjs"
     },
     "./dist/driver.css": {
+      "require": "./dist/driver.css",
       "import": "./dist/driver.css",
-      "require": "./dist/driver.css"
+      "default": "./dist/driver.css"
     }
   },
   "scripts": {

src/config.ts

@@ -1,8 +1,12 @@
-import { DriveStep } from "./driver";
+import { Driver, DriveStep } from "./driver";
 import { AllowedButtons, PopoverDOM } from "./popover";
 import { State } from "./state";
 
-export type DriverHook = (element: Element | undefined, step: DriveStep, opts: { config: Config; state: State }) => void;
+export type DriverHook = (
+  element: Element | undefined,
+  step: DriveStep,
+  opts: { config: Config; state: State; driver: Driver }
+) => void;
 
 export type Config = {
   steps?: DriveStep[];
@@ -12,7 +16,7 @@ export type Config = {
   overlayOpacity?: number;
   smoothScroll?: boolean;
   allowClose?: boolean;
-  overlayClickBehavior?: 'close' | 'nextStep';
+  overlayClickBehavior?: "close" | "nextStep";
   stagePadding?: number;
   stageRadius?: number;
 
@@ -34,7 +38,7 @@ export type Config = {
   doneBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State, driver: Driver }) => void;
 
   // State based callbacks, called upon state changes
   onHighlightStarted?: DriverHook;
@@ -50,12 +54,13 @@ export type Config = {
 };
 
 let currentConfig: Config = {};
+let currentDriver: Driver;
 
 export function configure(config: Config = {}) {
   currentConfig = {
     animate: true,
     allowClose: true,
-    overlayClickBehavior: 'close',
+    overlayClickBehavior: "close",
     overlayOpacity: 0.7,
     smoothScroll: false,
     disableActiveInteraction: false,
@@ -75,3 +80,11 @@ export function getConfig<K extends keyof Config>(key: K): Config[K];
 export function getConfig<K extends keyof Config>(key?: K) {
   return key ? currentConfig[key] : currentConfig;
 }
+
+export function setCurrentDriver(driver: Driver) {
+  currentDriver = driver;
+}
+
+export function getCurrentDriver() {
+  return currentDriver;
+}

src/driver.ts

@@ -1,7 +1,7 @@
 import { AllowedButtons, destroyPopover, Popover } from "./popover";
 import { destroyOverlay } from "./overlay";
 import { destroyEvents, initEvents, requireRefresh } from "./events";
-import { Config, configure, DriverHook, getConfig } from "./config";
+                                                                                                                              import { Config, configure, DriverHook, getConfig, getCurrentDriver, setCurrentDriver } from "./config";
 import { destroyHighlight, highlight } from "./highlight";
 import { destroyEmitter, listen } from "./emitter";
 import { getState, resetState, setState } from "./state";
@@ -16,7 +16,31 @@ export type DriveStep = {
   disableActiveInteraction?: boolean;
 };
 
-export function driver(options: Config = {}) {
+export interface Driver {
+  isActive: () => boolean;
+  refresh: () => void;
+  drive: (stepIndex?: number) => void;
+  setConfig: (config: Config) => void;
+  setSteps: (steps: DriveStep[]) => void;
+  getConfig: () => Config;
+  getState: (key?: string) => any;
+  getActiveIndex: () => number | undefined;
+  isFirstStep: () => boolean;
+  isLastStep: () => boolean;
+  getActiveStep: () => DriveStep | undefined;
+  getActiveElement: () => Element | undefined;
+  getPreviousElement: () => Element | undefined;
+  getPreviousStep: () => DriveStep | undefined;
+  moveNext: () => void;
+  movePrevious: () => void;
+  moveTo: (index: number) => void;
+  hasNextStep: () => boolean;
+  hasPreviousStep: () => boolean;
+  highlight: (step: DriveStep) => void;
+  destroy: () => void;
+}
+
+export function driver(options: Config = {}): Driver {
   configure(options);
 
   function handleClose() {
@@ -103,6 +127,7 @@ export function driver(options: Config = {}) {
       return onPrevClick(activeElement, activeStep, {
         config: getConfig(),
         state: getState(),
+        driver: getCurrentDriver(),
       });
     }
 
@@ -127,6 +152,7 @@ export function driver(options: Config = {}) {
       return onNextClick(activeElement, activeStep, {
         config: getConfig(),
         state: getState(),
+        driver: getCurrentDriver(),
       });
     }
 
@@ -241,6 +267,7 @@ export function driver(options: Config = {}) {
       onDestroyStarted(isActiveDummyElement ? undefined : activeElement, activeStep!, {
         config: getConfig(),
         state: getState(),
+        driver: getCurrentDriver(),
       });
       return;
     }
@@ -264,6 +291,7 @@ export function driver(options: Config = {}) {
         onDeselected(isActiveDummyElement ? undefined : activeElement, activeStep, {
           config: getConfig(),
           state: getState(),
+          driver: getCurrentDriver(),
         });
       }
 
@@ -271,6 +299,7 @@ export function driver(options: Config = {}) {
         onDestroyed(isActiveDummyElement ? undefined : activeElement, activeStep, {
           config: getConfig(),
           state: getState(),
+          driver: getCurrentDriver(),
         });
       }
     }
@@ -280,7 +309,7 @@ export function driver(options: Config = {}) {
     }
   }
 
-  return {
+  const api: Driver = {
     isActive: () => getState("isInitialized") || false,
     refresh: requireRefresh,
     drive: (stepIndex: number = 0) => {
@@ -316,13 +345,13 @@ export function driver(options: Config = {}) {
       const steps = getConfig("steps") || [];
       const activeIndex = getState("activeIndex");
 
-      return activeIndex !== undefined && steps[activeIndex + 1];
+      return activeIndex !== undefined && !!steps[activeIndex + 1];
     },
     hasPreviousStep: () => {
       const steps = getConfig("steps") || [];
       const activeIndex = getState("activeIndex");
 
-      return activeIndex !== undefined && steps[activeIndex - 1];
+      return activeIndex !== undefined && !!steps[activeIndex - 1];
     },
     highlight: (step: DriveStep) => {
       init();
@@ -342,6 +371,8 @@ export function driver(options: Config = {}) {
       destroy(false);
     },
   };
-}
 
-export type Driver = ReturnType<typeof driver>;
+  setCurrentDriver(api);
+
+  return api;
+}

src/highlight.ts

@@ -1,6 +1,6 @@
 import { DriveStep } from "./driver";
 import { refreshOverlay, trackActiveElement, transitionStage } from "./overlay";
-import { getConfig } from "./config";
+import { getConfig, getCurrentDriver } from "./config";
 import { hidePopover, renderPopover, repositionPopover } from "./popover";
 import { bringInView } from "./utils";
 import { getState, setState } from "./state";
@@ -71,7 +71,6 @@ export function refreshActiveHighlight() {
   repositionPopover(activeHighlight, activeStep);
 }
 
-
 function transferHighlight(toElement: Element, toStep: DriveStep) {
   const duration = 400;
   const start = Date.now();
@@ -98,6 +97,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     deselectedHook(isFromDummyElement ? undefined : fromElement, fromStep!, {
       config,
       state,
+      driver: getCurrentDriver(),
     });
   }
 
@@ -105,6 +105,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
     highlightStartedHook(isToDummyElement ? undefined : toElement, toStep, {
       config,
       state,
+      driver: getCurrentDriver(),
     });
   }
 
@@ -146,6 +147,7 @@ function transferHighlight(toElement: Element, toStep: DriveStep) {
         highlightedHook(isToDummyElement ? undefined : toElement, toStep, {
           config: getConfig(),
           state: getState(),
+          driver: getCurrentDriver(),
         });
       }
 

src/popover.ts

@@ -1,9 +1,9 @@
-import { bringInView, getFocusableElements } from "./utils";
-import { Config, DriverHook, getConfig } from "./config";
-import { getState, setState, State } from "./state";
-import { DriveStep } from "./driver";
-import { onDriverClick } from "./events";
+import { Config, DriverHook, getConfig, getCurrentDriver } from "./config";
+import { Driver, DriveStep } from "./driver";
 import { emit } from "./emitter";
+import { onDriverClick } from "./events";
+import { getState, setState, State } from "./state";
+import { bringInView, getFocusableElements } from "./utils";
 
 export type Side = "top" | "right" | "bottom" | "left" | "over";
 export type Alignment = "start" | "center" | "end";
@@ -28,7 +28,7 @@ export type Popover = {
   prevBtnText?: string;
 
   // Called after the popover is rendered
-  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State }) => void;
+  onPopoverRender?: (popover: PopoverDOM, opts: { config: Config; state: State; driver: Driver }) => void;
 
   // Button callbacks
   onNextClick?: DriverHook;
@@ -168,6 +168,7 @@ export function renderPopover(element: Element, step: DriveStep) {
           return onNextClick(element, step, {
             config: getConfig(),
             state: getState(),
+            driver: getCurrentDriver(),
           });
         } else {
           return emit("nextClick");
@@ -179,6 +180,7 @@ export function renderPopover(element: Element, step: DriveStep) {
           return onPrevClick(element, step, {
             config: getConfig(),
             state: getState(),
+            driver: getCurrentDriver(),
           });
         } else {
           return emit("prevClick");
@@ -190,6 +192,7 @@ export function renderPopover(element: Element, step: DriveStep) {
           return onCloseClick(element, step, {
             config: getConfig(),
             state: getState(),
+            driver: getCurrentDriver(),
           });
         } else {
           return emit("closeClick");
@@ -204,7 +207,7 @@ export function renderPopover(element: Element, step: DriveStep) {
       return (
         !popover?.description.contains(target) &&
         !popover?.title.contains(target) &&
-        typeof target.className === 'string' &&
+        typeof target.className === "string" &&
         target.className.includes("driver-popover")
       );
     }
@@ -217,6 +220,7 @@ export function renderPopover(element: Element, step: DriveStep) {
     onPopoverRender(popover, {
       config: getConfig(),
       state: getState(),
+      driver: getCurrentDriver(),
     });
   }
 
@@ -581,7 +585,6 @@ function renderPopoverArrow(alignment: Alignment, side: Side, element: Element)
       arrowSide = "right";
       arrowAlignment = "end";
     }
-  } else {
   }
 
   if (!arrowSide) {
@@ -589,6 +592,34 @@ function renderPopoverArrow(alignment: Alignment, side: Side, element: Element)
   } else {
     popoverArrow.classList.add(`driver-popover-arrow-side-${arrowSide}`);
     popoverArrow.classList.add(`driver-popover-arrow-align-${arrowAlignment}`);
+
+    const elementRect = element.getBoundingClientRect();
+    const arrowRect = popoverArrow.getBoundingClientRect();
+    const stagePadding = getConfig("stagePadding") || 0;
+
+    const isElementPartiallyInViewPort =
+      elementRect.left - stagePadding < window.innerWidth &&
+      elementRect.right + stagePadding > 0 &&
+      elementRect.top - stagePadding < window.innerHeight &&
+      elementRect.bottom + stagePadding > 0;
+
+    if (side === "bottom" && isElementPartiallyInViewPort) {
+      const isArrowWithinElementBounds =
+        arrowRect.x > elementRect.x && arrowRect.x + arrowRect.width < elementRect.x + elementRect.width;
+
+      if (!isArrowWithinElementBounds) {
+        popoverArrow.classList.remove(`driver-popover-arrow-align-${arrowAlignment}`);
+        popoverArrow.classList.add(`driver-popover-arrow-none`);
+        // reduce the top position by the padding
+        popover.wrapper.style.transform = `translateY(-${stagePadding / 2}px)`;
+      } else {
+        popover.wrapper.style.transform = `translateY(0)`;
+      }
+
+      // TODO: implement this using either of the following:
+      // 1 - move the arrow to the center of the element and point it towards the popover. This way, scrolling or resizing the window will move the arrow to the correct position.
+      // 2 - calculate the center position of the element and point the arrow towards the popover. However, we will have to re-calculate the position of the arrow when the window is resized or scrolled.
+    }
   }
 }
 

src/utils.ts

@@ -30,12 +30,14 @@ export function bringInView(element: Element) {
 
   const shouldSmoothScroll = getConfig("smoothScroll");
 
+  const isTallerThanViewport = (element as HTMLElement).offsetHeight > window.innerHeight;
+
   element.scrollIntoView({
     // Removing the smooth scrolling for elements which exist inside the scrollable parent
     // This was causing the highlight to not properly render
     behavior: !shouldSmoothScroll || hasScrollableParent(element) ? "auto" : "smooth",
     inline: "center",
-    block: "center",
+    block: isTallerThanViewport ? "start" : "center",
   });
 }