Add keyboardControl option and typo in readme

index.html

@@ -278,6 +278,7 @@ driver.highlight({
   nextBtnText: 'Next', // Next button text for this step
   prevBtnText: 'Previous', // Previous button text for this step
   showButtons: false, // Do not show control buttons in footer
+  keyboardControl: true, // Allow controlling through keyboard (escape to close, arrow keys to move)
   scrollIntoViewOptions: {}, // We use `scrollIntoView()` when possible, pass here the options for it if you want any
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {}, // Called when element is fully highlighted
@@ -322,7 +323,7 @@ driver.hasPreviousStep(); // Checks if there is previous step to move to
 // Gets the currently highlighted element on screen
 const activeElement = driver.getHighlightedElement();
 const lastActiveElement = driver.getLastHighlightedElement();
-activeElement.getScreenCoordinates(); // Gets screen co-ordinates of the active element
+activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
 activeElement.hidePopover();  // Hide the popover
 activeElement.showPopover();  // Show the popover
 

readme.md

@@ -167,6 +167,7 @@ const driver = new Driver({
   nextBtnText: 'Next',              // Next button text for this step
   prevBtnText: 'Previous',          // Previous button text for this step
   showButtons: false,               // Do not show control buttons in footer
+  keyboardControl: true,            // Allow controlling through keyboard (escape to close, arrow keys to move)
   scrollIntoViewOptions: {},        // We use `scrollIntoView()` when possible, pass here the options for it if you want any
   onHighlightStarted: (Element) {}, // Called when element is about to be highlighted
   onHighlighted: (Element) {},      // Called when element is fully highlighted
@@ -258,9 +259,9 @@ const activeElement = driver.getHighlightedElement();
 // Gets the last highlighted element, would be an instance of `/src/core/element.js`
 const lastActiveElement = driver.getLastHighlightedElement();
 
-activeElement.getScreenCoordinates(); // Gets screen co-ordinates of the active element
-activeElement.hidePopover();          // Hide the popover
-activeElement.showPopover();          // Show the popover
+activeElement.getCalculatedPosition(); // Gets screen co-ordinates of the active element
+activeElement.hidePopover();           // Hide the popover
+activeElement.showPopover();           // Show the popover
 
 activeElement.getNode();  // Gets the DOM Element behind this element
 ```

src/common/constants.js

@@ -3,6 +3,7 @@ export const OVERLAY_PADDING = 10;
 
 export const SHOULD_ANIMATE_OVERLAY = true;
 export const SHOULD_OUTSIDE_CLICK_CLOSE = true;
+export const ALLOW_KEYBOARD_CONTROL = true;
 export const SHOULD_OUTSIDE_CLICK_NEXT = false;
 
 export const ESC_KEY_CODE = 27;

src/index.js

@@ -15,6 +15,7 @@ import {
   SHOULD_ANIMATE_OVERLAY,
   SHOULD_OUTSIDE_CLICK_CLOSE,
   SHOULD_OUTSIDE_CLICK_NEXT,
+  ALLOW_KEYBOARD_CONTROL,
 } from './common/constants';
 import Stage from './core/stage';
 import { isDomElement } from './common/utils';
@@ -33,6 +34,7 @@ export default class Driver {
       padding: OVERLAY_PADDING, // Spacing around the element from the overlay
       scrollIntoViewOptions: null,  // Options to be passed to `scrollIntoView`
       allowClose: SHOULD_OUTSIDE_CLICK_CLOSE,    // Whether to close overlay on click outside the element
+      keyboardControl: ALLOW_KEYBOARD_CONTROL,  // Whether to allow controlling through keyboard or not
       overlayClickNext: SHOULD_OUTSIDE_CLICK_NEXT,  // Whether to move next on click outside the element
       stageBackground: '#ffffff',   // Background color for the stage
       onHighlightStarted: () => {   // When element is about to be highlighted
@@ -137,7 +139,8 @@ export default class Driver {
    * @private
    */
   onKeyUp(event) {
-    if (!this.isActivated) {
+    // If driver is not active or keyboard control is disabled
+    if (!this.isActivated || !this.options.keyboardControl) {
       return;
     }
 

types/index.d.ts

@@ -645,6 +645,12 @@ declare module 'driver.js' {
        */
       allowClose?: boolean,
 
+      /**
+       * Whether to allow controlling steps through keyboard
+       * @default true
+       */
+      keyboardControl?: boolean,
+
       /**
        * Clicking outside the highlighted element should move next
        * @default false