Build update

Bumps [webpack](https://github.com/webpack/webpack) from 4.42.1 to 4.43.0.
- [Release notes](https://github.com/webpack/webpack/releases)
- [Commits](https://github.com/webpack/webpack/compare/v4.42.1...v4.43.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.eslintignore

@@ -0,0 +1 @@
+build/*

.eslintrc.json

@@ -0,0 +1,34 @@
+{
+    "parser": "babel-eslint",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "modules": true,
+            "experimentalObjectRestSpread": true
+        }
+    },
+    "plugins": [
+        "react"
+    ],
+    "extends": ["eslint:recommended", "plugin:react/recommended"],
+    "rules": {
+        "comma-dangle": 0,
+        "no-unused-vars": "warn",
+        "no-unexpected-multiline": "warn",
+        "prefer-const": "warn"
+    },
+    "settings": {
+        "react": {
+            "pragma": "React",
+            "version": "15.6.1"
+        }
+    },
+    "env": {
+        "browser": true,
+        "node": true,
+        "jasmine": true,
+        "jest": true
+    }
+}

.github/workflows/main.yml

@@ -1,5 +1,5 @@
 name: Build
-on: [push, pull_request]
+on: [push]
 
 jobs:
   build:

.github/workflows/publish.yml

@@ -18,6 +18,7 @@ jobs:
         
       - name: Setup GIT
         run: |
+          git reset --hard
           git config --local --list
           git checkout master
           git config user.email "$GH_EMAIL"

.github/workflows/pull_request.yml

@@ -0,0 +1,24 @@
+name: Build PR
+on: [pull_request]
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: [12.x]
+        os: [ubuntu-latest]
+    steps:
+    - uses: actions/checkout@v1
+    - name: Use Node.js ${{ matrix.node_version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node_version }}
+    - name: npm install, build, and test
+      run: |
+        npm install
+        npm run start -- --testMode
+        npm run demo
+        npm run coverage
+      env:
+        CI: true

.npmignore

@@ -28,3 +28,5 @@ config
 .travis.yml
 CHANGELOG.md
 README.md
+.eslintignore
+.eslintrc.json

README.md

@@ -28,7 +28,7 @@
   </a>
 </p>
 
-> The slick virtual keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.
+<blockquote>The slick virtual keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
 
 ## 🚀 Demo
 [Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.27.1
+ *   simple-keyboard v2.29.1
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)
@@ -8,5 +8,5 @@
  *   This source code is licensed under the MIT license found in the
  *   LICENSE file in the root directory of this source tree.
  *   
- */body,html{margin:0;padding:0}.simple-keyboard{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.simple-keyboard .hg-row{display:flex}.simple-keyboard .hg-row:not(:last-child){margin-bottom:5px}.simple-keyboard .hg-row .hg-button-container,.simple-keyboard .hg-row .hg-button:not(:last-child){margin-right:5px}.simple-keyboard .hg-row>div:last-child{margin-right:0}.simple-keyboard .hg-row .hg-button-container{display:flex}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.simple-keyboard .hg-button span{pointer-events:none}.simple-keyboard.hg-theme-default{background-color:rgba(0,0,0,.1);padding:5px;border-radius:5px}.simple-keyboard.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.simple-keyboard.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd,.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.simple-keyboard.hg-theme-default .hg-button.hg-button-com{max-width:85px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
+ */.hg-theme-default{width:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;overflow:hidden;touch-action:manipulation}.hg-theme-default .hg-button span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.hg-theme-default{font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;background-color:#ececec;padding:5px;border-radius:5px}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5;cursor:pointer;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{width:33.3%;height:60px;align-items:center;display:flex;justify-content:center}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}
 /*# sourceMappingURL=index.css.map */

build/index.d.ts

@@ -93,6 +93,11 @@ declare module 'simple-keyboard' {
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
     preventMouseDownDefault?: boolean;
+    
+    /**
+     * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseDownPropagation?: boolean;
 
     /**
      * Define the text color that the physical keyboard highlighted key should have.
@@ -178,10 +183,16 @@ declare module 'simple-keyboard' {
      * Executes the callback function on input change. Returns the input object with all defined inputs.
      */
     onChangeAll?: (inputs: any) => any;
+
+    /**
+     * Module classes to be loaded by simple-keyboard.
+     */
+    modules?: any[];
   }
 
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
+    constructor(selector: HTMLDivElement, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
 
     /**

config/webpack.config.js

@@ -1,5 +1,3 @@
-'use strict';
-
 const fs = require('fs');
 const isWsl = require('is-wsl');
 const path = require('path');
@@ -13,9 +11,7 @@ const TerserPlugin = require('terser-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const safePostCssParser = require('postcss-safe-parser');
-const ManifestPlugin = require('webpack-manifest-plugin');
 const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WorkboxWebpackPlugin = require('workbox-webpack-plugin');
 const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
 const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
 const getCSSModuleLocalIdent = require('react-dev-utils/getCSSModuleLocalIdent');
@@ -28,10 +24,7 @@ const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
 const CopyWebpackPlugin = require('copy-webpack-plugin');
 const getPackageJson = require('./getPackageJson');
 const PrettierPlugin = require("prettier-webpack-plugin");
-const eslint = require('eslint');
-
 const postcssNormalize = require('postcss-normalize');
-
 const appPackageJson = require(paths.appPackageJson);
 
 // Source maps are resource heavy and can cause out of memory issue for large source files.
@@ -65,7 +58,7 @@ const banner = `
   ${name} v${version}
   ${repository.url}
 
-  Copyright (c) ${author.replace(/ *\<[^)]*\> */g, " ")}
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")}
 
   This source code is licensed under the ${license} license found in the
   LICENSE file in the root directory of this source tree.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.27.1",
+  "version": "2.29.1",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -40,68 +40,68 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.7.2",
-    "@babel/plugin-proposal-class-properties": "^7.7.0",
-    "@babel/preset-env": "^7.7.1",
-    "@babel/preset-react": "^7.7.0",
-    "@svgr/webpack": "4.3.3",
+    "@babel/core": "7.9.0",
+    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/preset-env": "^7.9.5",
+    "@babel/preset-react": "^7.9.4",
+    "@svgr/webpack": "5.3.1",
     "@typescript-eslint/eslint-plugin": "1.13.0",
     "@typescript-eslint/parser": "1.13.0",
-    "babel-eslint": "10.0.3",
-    "babel-jest": "^24.8.0",
-    "babel-loader": "8.0.6",
-    "babel-plugin-named-asset-import": "^0.3.3",
-    "babel-preset-react-app": "^9.0.1",
-    "camelcase": "^5.2.0",
-    "case-sensitive-paths-webpack-plugin": "2.2.0",
-    "copy-webpack-plugin": "^5.0.5",
-    "css-loader": "3.2.0",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "^25.4.0",
+    "babel-loader": "8.1.0",
+    "babel-plugin-named-asset-import": "^0.3.6",
+    "babel-preset-react-app": "^9.1.2",
+    "camelcase": "^6.0.0",
+    "case-sensitive-paths-webpack-plugin": "2.3.0",
+    "copy-webpack-plugin": "^5.1.1",
+    "css-loader": "3.5.2",
     "dotenv": "8.2.0",
     "dotenv-expand": "5.1.0",
-    "eslint": "^6.6.0",
+    "eslint": "^6.8.0",
     "eslint-config-react-app": "^5.0.1",
-    "eslint-loader": "3.0.2",
+    "eslint-loader": "4.0.0",
     "eslint-plugin-flowtype": "3.13.0",
-    "eslint-plugin-import": "2.18.2",
+    "eslint-plugin-import": "2.20.2",
     "eslint-plugin-jsx-a11y": "6.2.3",
-    "eslint-plugin-react": "7.16.0",
-    "eslint-plugin-react-hooks": "^2.2.0",
-    "file-loader": "4.2.0",
-    "fs-extra": "8.1.0",
-    "html-webpack-plugin": "4.0.0-beta.8",
+    "eslint-plugin-react": "7.19.0",
+    "eslint-plugin-react-hooks": "^3.0.0",
+    "file-loader": "6.0.0",
+    "fs-extra": "9.0.0",
+    "html-webpack-plugin": "4.2.0",
     "identity-obj-proxy": "3.0.0",
     "is-wsl": "^2.1.0",
-    "jest": "24.9.0",
-    "jest-environment-jsdom-fourteen": "0.1.0",
-    "jest-resolve": "24.9.0",
-    "jest-watch-typeahead": "0.4.0",
-    "mini-css-extract-plugin": "0.8.0",
+    "jest": "25.4.0",
+    "jest-environment-jsdom-fourteen": "1.0.1",
+    "jest-resolve": "25.4.0",
+    "jest-watch-typeahead": "0.5.0",
+    "mini-css-extract-plugin": "0.9.0",
     "optimize-css-assets-webpack-plugin": "5.0.3",
-    "pnp-webpack-plugin": "1.5.0",
-    "prettier": "^1.17.0",
-    "prettier-webpack-plugin": "^1.2.0",
-    "postcss-flexbugs-fixes": "4.1.0",
+    "pnp-webpack-plugin": "1.6.4",
+    "postcss-flexbugs-fixes": "4.2.0",
     "postcss-loader": "3.0.0",
-    "postcss-normalize": "8.0.1",
+    "postcss-normalize": "9.0.0",
     "postcss-preset-env": "6.7.0",
-    "postcss-safe-parser": "4.0.1",
-    "react": "^16.11.0",
-    "react-app-polyfill": "^1.0.2",
-    "react-dev-utils": "^9.0.3",
-    "react-dom": "^16.11.0",
-    "resolve": "1.12.0",
-    "resolve-url-loader": "3.1.0",
-    "sass-loader": "7.3.1",
-    "semver": "6.3.0",
-    "style-loader": "1.0.0",
-    "terser-webpack-plugin": "2.2.1",
-    "ts-pnp": "1.1.4",
-    "uglifyjs-webpack-plugin": "^2.1.2",
-    "url-loader": "2.2.0",
-    "webpack": "4.41.2",
-    "webpack-dev-server": "3.9.0",
+    "postcss-safe-parser": "4.0.2",
+    "prettier": "^1.19.1",
+    "prettier-webpack-plugin": "^1.2.0",
+    "react": "^16.13.1",
+    "react-app-polyfill": "^1.0.6",
+    "react-dev-utils": "10.1.0",
+    "react-dom": "^16.13.1",
+    "resolve": "1.16.1",
+    "resolve-url-loader": "3.1.1",
+    "sass-loader": "8.0.2",
+    "semver": "7.3.2",
+    "style-loader": "1.1.4",
+    "terser-webpack-plugin": "2.3.5",
+    "ts-pnp": "1.2.0",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "4.1.0",
+    "webpack": "4.43.0",
+    "webpack-dev-server": "3.10.3",
     "webpack-manifest-plugin": "2.2.0",
-    "workbox-webpack-plugin": "4.3.1"
+    "workbox-webpack-plugin": "5.1.2"
   },
   "eslintConfig": {
     "extends": "react-app"

src/demo/BasicDemo.js

@@ -43,8 +43,8 @@ class Demo {
   }
 
   handleShift() {
-    let currentLayout = this.keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     this.keyboard.setOptions({
       layoutName: shiftToggle

src/demo/ButtonThemeDemo.js

@@ -61,8 +61,8 @@ class Demo {
   }
 
   handleShift() {
-    let currentLayout = this.keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     this.keyboard.setOptions({
       layoutName: shiftToggle

src/demo/DOMElementDemo.js

@@ -0,0 +1,31 @@
+import Keyboard from "../lib";
+import "./css/DOMElementDemo.css";
+
+class Demo {
+  constructor() {
+    const rootDOM =
+      document.querySelector("#root") || document.createElement("div");
+
+    const keyboard1DOM = document.createElement("div");
+    keyboard1DOM.className = "my-keyboard";
+
+    const keyboard2DOM = document.createElement("div");
+    keyboard2DOM.className = "my-keyboard2";
+
+    /**
+     * Demo Start
+     */
+    this.keyboard1 = new Keyboard(keyboard1DOM, {
+      onChange: input => console.log(this.keyboard1.keyboardDOMClass, input)
+    });
+
+    this.keyboard2 = new Keyboard(keyboard2DOM, {
+      onChange: input => console.log(this.keyboard2.keyboardDOMClass, input)
+    });
+
+    rootDOM.appendChild(keyboard1DOM);
+    rootDOM.appendChild(keyboard2DOM);
+  }
+}
+
+export default Demo;

src/demo/FullKeyboardDemo.js

@@ -27,7 +27,7 @@ class Demo {
     /**
      * Demo Start
      */
-    let commonKeyboardOptions = {
+    const commonKeyboardOptions = {
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       theme: "simple-keyboard hg-theme-default hg-layout-default",
@@ -116,8 +116,8 @@ class Demo {
       }
     });
 
-    document.querySelector(".input").addEventListener("input", event => {
-      let input = document.querySelector(".input").value;
+    document.querySelector(".input").addEventListener("input", () => {
+      const input = document.querySelector(".input").value;
       this.keyboard.setInput(input);
     });
   }
@@ -145,8 +145,8 @@ class Demo {
   }
 
   handleShift() {
-    let currentLayout = this.keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     this.keyboard.setOptions({
       layoutName: shiftToggle

src/demo/MultipleKeyboardsDestroyDemo.js

@@ -33,6 +33,20 @@ class Demo {
 
     console.log(this.keyboard);
     setTimeout(this.keyboard.destroy, 10000);
+    setTimeout(() => {
+      this.keyboard = new Keyboard({
+        theme: "hg-theme-default myTheme",
+        onChange: input => this.onChange(input),
+        onKeyPress: button => this.onKeyPress(button),
+        debug: true,
+        onInit: () => {
+          console.log(
+            "Reinitialized simple-keyboard instance:",
+            this.keyboard.keyboardDOMClass
+          );
+        }
+      });
+    }, 15000);
 
     /**
      * Update simple-keyboard when input is changed directly
@@ -62,9 +76,9 @@ class Demo {
   }
 
   handleShift(keyboardInstanceKey) {
-    let keyboard = this[keyboardInstanceKey || "keyboard"];
-    let currentLayout = keyboard.options.layoutName;
-    let shiftToggle = currentLayout === "default" ? "shift" : "default";
+    const keyboard = this[keyboardInstanceKey || "keyboard"];
+    const currentLayout = keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
 
     keyboard.setOptions({
       layoutName: shiftToggle

src/demo/css/DOMElementDemo.css

@@ -0,0 +1,14 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.my-keyboard,
+.my-keyboard2 {
+  max-width: 850px;
+  margin-top: 20px;
+}

src/demo/css/MultipleKeyboardsDestroyDemo.css

@@ -10,3 +10,7 @@ input {
 .simple-keyboard {
   max-width: 850px;
 }
+
+.simple-keyboard.hg-theme-default.myTheme {
+  background-color: #bde6c6;
+}

src/demo/index.js

@@ -4,9 +4,10 @@ import "./css/index.css";
  * Demos
  */
 import BasicDemo from "./BasicDemo";
-//import FullKeyboardDemo from "./FullKeyboardDemo";
-//import ButtonThemeDemo from "./ButtonThemeDemo";
-//import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
+// import ButtonThemeDemo from "./ButtonThemeDemo";
+// import DOMElementDemo from "./DOMElementDemo";
+// import FullKeyboardDemo from "./FullKeyboardDemo";
+// import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
 
 /**
  * Selected demo

src/demo/tests/BasicDemo.test.js

@@ -1,18 +1,18 @@
 import TestUtility from '../../utils/TestUtility';
 import BasicDemo from '../BasicDemo';
 
-let testUtil = new TestUtility();
+const testUtil = new TestUtility();
 
 it('Demo will load', () => {
   testUtil.setDOM();
 
-  let demo = new BasicDemo();
+  new BasicDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
   testUtil.setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
@@ -20,7 +20,7 @@ it('Demo onDOMLoaded will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   demo.onChange("test");
   
@@ -30,7 +30,7 @@ it('Demo onChange will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -40,7 +40,7 @@ it('Demo onChange will work', () => {
 it('Demo input change will work', () => {
   testUtil.setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -51,7 +51,7 @@ it('Demo input change will work', () => {
 it('Demo handleShiftButton will work', () => {
   testUtil.setDOM();
 
-  let demo = new BasicDemo();
+  const demo = new BasicDemo();
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");

src/demo/tests/ButtonThemeDemo.test.js

@@ -1,18 +1,18 @@
 import TestUtility from '../../utils/TestUtility';
 import ButtonThemeDemo from '../ButtonThemeDemo';
 
-let testUtil = new TestUtility();
+const testUtil = new TestUtility();
 
 it('Demo will load', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  new ButtonThemeDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
@@ -20,7 +20,7 @@ it('Demo onDOMLoaded will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   demo.onChange("test");
   
@@ -30,7 +30,7 @@ it('Demo onChange will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -40,7 +40,7 @@ it('Demo onChange will work', () => {
 it('Demo input change will work', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -51,7 +51,7 @@ it('Demo input change will work', () => {
 it('Demo handleShiftButton will work', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");
@@ -63,15 +63,15 @@ it('Demo handleShiftButton will work', () => {
 it('Demo buttons will have proper attributes and classes', () => {
   testUtil.setDOM();
 
-  let demo = new ButtonThemeDemo();
+  const demo = new ButtonThemeDemo();
 
-  let buttonDOM = demo.keyboard.getButtonElement("b");
+  const buttonDOM = demo.keyboard.getButtonElement("b");
 
   console.log("buttonDOM", buttonDOM.outerHTML);
 
-  let hasAttribute = buttonDOM.hasAttribute("aria-label");
+  const hasAttribute = buttonDOM.hasAttribute("aria-label");
   expect(hasAttribute).toBeTruthy();
 
-  let hasClass = buttonDOM.classList.contains("my-button-outline");
+  const hasClass = buttonDOM.classList.contains("my-button-outline");
   expect(hasClass).toBeTruthy();
 });

src/demo/tests/DOMElementDemo.test.js

@@ -0,0 +1,22 @@
+import DOMElementDemo from '../DOMElementDemo';
+import Keyboard from '../../lib/components/Keyboard';
+
+it('Demo will load', () => {
+  new DOMElementDemo();
+});
+
+it('Demo keyboards will be instantiated', () => {
+  const demo = new DOMElementDemo();
+  expect(demo.keyboard1).toBeInstanceOf(Keyboard);
+  expect(demo.keyboard2).toBeInstanceOf(Keyboard);
+});
+
+it('Demo input change will work', () => {
+  const demo = new DOMElementDemo();
+
+  demo.keyboard1.getButtonElement("q").onclick();
+  demo.keyboard2.getButtonElement("e").onclick();
+  
+  expect(demo.keyboard1.getInput()).toBe("q");
+  expect(demo.keyboard2.getInput()).toBe("e");
+});

src/demo/tests/FullKeyboardDemo.test.js

@@ -1,18 +1,17 @@
 import TestUtility from '../../utils/TestUtility';
 import FullKeyboardDemo from '../FullKeyboardDemo';
 
-let testUtil = new TestUtility();
+const testUtil = new TestUtility();
 
 it('Demo will load', () => {
   testUtil.setDOM();
-
-  let demo = new FullKeyboardDemo();
+  new FullKeyboardDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
   testUtil.setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
@@ -20,7 +19,7 @@ it('Demo onDOMLoaded will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   demo.onChange("test");
   
@@ -30,7 +29,7 @@ it('Demo onChange will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -40,7 +39,7 @@ it('Demo onChange will work', () => {
 it('Demo input change will work', () => {
   testUtil.setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -52,7 +51,7 @@ it('Demo input change will work', () => {
 it('Demo handleShiftButton will work', () => {
   testUtil.setDOM();
 
-  let demo = new FullKeyboardDemo();
+  const demo = new FullKeyboardDemo();
 
   demo.keyboard.getButtonElement("{shiftleft}").onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");

src/demo/tests/MultipleKeyboardsDestroyDemo.test.js

@@ -1,18 +1,20 @@
 import TestUtility from '../../utils/TestUtility';
 import MultipleKeyboardsDestroyDemo from '../MultipleKeyboardsDestroyDemo';
 
-let testUtil = new TestUtility();
+jest.useFakeTimers();
+
+const testUtil = new TestUtility();
 
 it('Demo will load', () => {
   testUtil.setDOM();
 
-  let demo = new MultipleKeyboardsDestroyDemo();
+  new MultipleKeyboardsDestroyDemo();
 });
 
 it('Demo onDOMLoaded will work', () => {
   testUtil.setDOM();
 
-  let demo = new MultipleKeyboardsDestroyDemo();
+  const demo = new MultipleKeyboardsDestroyDemo();
 
   expect(demo.keyboard).toBeTruthy();
 });
@@ -20,7 +22,7 @@ it('Demo onDOMLoaded will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new MultipleKeyboardsDestroyDemo();
+  const demo = new MultipleKeyboardsDestroyDemo();
 
   demo.onChange("test");
   demo.keyboard2.getButtonElement("q").click();
@@ -32,7 +34,7 @@ it('Demo onChange will work', () => {
 it('Demo onChange will work', () => {
   testUtil.setDOM();
 
-  let demo = new MultipleKeyboardsDestroyDemo();
+  const demo = new MultipleKeyboardsDestroyDemo();
 
   demo.keyboard.getButtonElement("q").onclick();
   
@@ -42,7 +44,7 @@ it('Demo onChange will work', () => {
 it('Demo input change will work', () => {
   testUtil.setDOM();
 
-  let demo = new MultipleKeyboardsDestroyDemo();
+  const demo = new MultipleKeyboardsDestroyDemo();
 
   document.body.querySelector('.input').value = "test";
   document.body.querySelector('.input').dispatchEvent(new Event('input'));
@@ -57,11 +59,26 @@ it('Demo input change will work', () => {
 it('Demo handleShiftButton will work', () => {
   testUtil.setDOM();
 
-  let demo = new MultipleKeyboardsDestroyDemo();
+  const demo = new MultipleKeyboardsDestroyDemo();
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("shift");
 
   demo.keyboard.getButtonElement("{shift}")[0].onclick();
   expect(demo.keyboard.options.layoutName).toBe("default");
+});
+
+it('MultipleKeyboardsDestroyDemo will run all timers', () => {
+  testUtil.setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+  jest.runAllTimers();
+
+  expect(demo.keyboard.options.theme).toBe("hg-theme-default myTheme");
+
+  demo.keyboard.getButtonElement("{shift}")[0].onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("A").onclick();
+  expect(demo.keyboard.input.default).toBe("A");
 });

src/lib/@types/index.d.ts

@@ -93,6 +93,11 @@ declare module 'simple-keyboard' {
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
     preventMouseDownDefault?: boolean;
+    
+    /**
+     * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseDownPropagation?: boolean;
 
     /**
      * Define the text color that the physical keyboard highlighted key should have.
@@ -178,10 +183,16 @@ declare module 'simple-keyboard' {
      * Executes the callback function on input change. Returns the input object with all defined inputs.
      */
     onChangeAll?: (inputs: any) => any;
+
+    /**
+     * Module classes to be loaded by simple-keyboard.
+     */
+    modules?: any[];
   }
 
   class Keyboard {
     constructor(selector: string, options: KeyboardOptions);
+    constructor(selector: HTMLDivElement, options: KeyboardOptions);
     constructor(options: KeyboardOptions);
 
     /**

src/lib/components/Keyboard.css

@@ -1,12 +1,8 @@
-body,
-html {
-  margin: 0;
-  padding: 0;
-}
-
-.simple-keyboard {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
-    Helvetica, Arial, "Lucida Grande", sans-serif;
+/**
+ * simple-keyboard
+ * Theme: hg-theme-default
+ */
+.hg-theme-default {
   width: 100%;
   user-select: none;
   box-sizing: border-box;
@@ -14,50 +10,56 @@ html {
   touch-action: manipulation;
 }
 
-.simple-keyboard .hg-row {
-  display: flex;
+.hg-theme-default .hg-button span {
+  pointer-events: none;
 }
 
-.simple-keyboard .hg-row:not(:last-child) {
-  margin-bottom: 5px;
+/* When using option "useButtonTag" */
+.hg-theme-default button.hg-button {
+  border-width: 0;
+  outline: 0;
+  font-size: inherit;
 }
 
-.simple-keyboard .hg-row .hg-button:not(:last-child) {
-  margin-right: 5px;
+.hg-theme-default {
+  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue",
+    Helvetica, Arial, "Lucida Grande", sans-serif;
+  background-color: #ececec;
+  padding: 5px;
+  border-radius: 5px;
 }
 
-.simple-keyboard .hg-row .hg-button-container {
-  margin-right: 5px;
-}
-
-.simple-keyboard .hg-row > div:last-child {
-  margin-right: 0;
-}
-
-.simple-keyboard .hg-row .hg-button-container {
-  display: flex;
-}
-
-.simple-keyboard .hg-button {
+.hg-theme-default .hg-button {
   display: inline-block;
   flex-grow: 1;
   cursor: pointer;
 }
 
-.simple-keyboard .hg-button span {
-  pointer-events: none;
+.hg-theme-default .hg-row {
+  display: flex;
 }
 
-/**
- * hg-theme-default theme
- */
-.simple-keyboard.hg-theme-default {
-  background-color: rgba(0, 0, 0, 0.1);
-  padding: 5px;
-  border-radius: 5px;
+.hg-theme-default .hg-row:not(:last-child) {
+  margin-bottom: 5px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button {
+.hg-theme-default .hg-row .hg-button:not(:last-child) {
+  margin-right: 5px;
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+  margin-right: 5px;
+}
+
+.hg-theme-default .hg-row > div:last-child {
+  margin-right: 0;
+}
+
+.hg-theme-default .hg-row .hg-button-container {
+  display: flex;
+}
+
+.hg-theme-default .hg-button {
   box-shadow: 0px 0px 3px -1px rgba(0, 0, 0, 0.3);
   height: 40px;
   border-radius: 5px;
@@ -72,18 +74,11 @@ html {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-activeButton {
+.hg-theme-default .hg-button.hg-activeButton {
   background: #efefef;
 }
 
-/* When using option "useButtonTag" */
-.simple-keyboard button.hg-button {
-  border-width: 0;
-  outline: 0;
-  font-size: inherit;
-}
-
-.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {
+.hg-theme-default.hg-layout-numeric .hg-button {
   width: 33.3%;
   height: 60px;
   align-items: center;
@@ -91,35 +86,35 @@ html {
   justify-content: center;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadadd {
+.hg-theme-default .hg-button.hg-button-numpadadd {
   height: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpadenter {
+.hg-theme-default .hg-button.hg-button-numpadenter {
   height: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-numpad0 {
+.hg-theme-default .hg-button.hg-button-numpad0 {
   width: 105px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-button-com {
+.hg-theme-default .hg-button.hg-button-com {
   max-width: 85px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
+.hg-theme-default .hg-button.hg-standardBtn.hg-button-at {
   max-width: 45px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
+.hg-theme-default .hg-button.hg-selectedButton {
   background: rgba(5, 25, 70, 0.53);
   color: white;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"] {
   max-width: 82px;
 }
 
-.simple-keyboard.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
+.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"] {
   max-width: 60px;
 }

src/lib/components/Keyboard.js

@@ -1,8 +1,8 @@
 import "./Keyboard.css";
 
 // Services
+import { getDefaultLayout } from "../services/KeyboardLayout";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
-import KeyboardLayout from "../services/KeyboardLayout";
 import Utilities from "../services/Utilities";
 
 /**
@@ -18,11 +18,9 @@ class SimpleKeyboard {
    * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
    */
   constructor(...params) {
-    let keyboardDOMQuery =
-      typeof params[0] === "string" ? params[0] : ".simple-keyboard";
-    let options = typeof params[0] === "object" ? params[0] : params[1];
-
-    if (!options) options = {};
+    const { keyboardDOMClass, keyboardDOM, options = {} } = this.handleParams(
+      params
+    );
 
     /**
      * Initializing Utilities
@@ -41,7 +39,7 @@ class SimpleKeyboard {
     /**
      * Processing options
      */
-    this.keyboardDOM = document.querySelector(keyboardDOMQuery);
+    this.keyboardDOM = keyboardDOM;
 
     /**
      * @type {object}
@@ -50,8 +48,8 @@ class SimpleKeyboard {
      * @property {object} display Replaces variable buttons (such as {bksp}) with a human-friendly name (e.g.: “backspace”).
      * @property {boolean} mergeDisplay By default, when you set the display property, you replace the default one. This setting merges them instead.
      * @property {string} theme A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
-     * @property {Array} buttonTheme A prop to add your own css classes to one or several buttons.
-     * @property {Array} buttonAttributes A prop to add your own attributes to one or several buttons.
+     * @property {array} buttonTheme A prop to add your own css classes to one or several buttons.
+     * @property {array} buttonAttributes A prop to add your own attributes to one or several buttons.
      * @property {boolean} debug Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
      * @property {boolean} newLineOnEnter Specifies whether clicking the “ENTER” button will input a newline (\n) or not.
      * @property {boolean} tabCharOnTab Specifies whether clicking the “TAB” button will input a tab character (\t) or not.
@@ -61,6 +59,7 @@ class SimpleKeyboard {
      * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
      * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
      * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
+     * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
      * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
      * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
      * @property {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
@@ -77,6 +76,7 @@ class SimpleKeyboard {
      * @property {function} destroy Clears keyboard listeners and DOM elements.
      * @property {boolean} disableButtonHold Disable button hold action.
      * @property {function} onKeyReleased Executes the callback function on key release.
+     * @property {array} modules Module classes to be loaded by simple-keyboard.
      */
     this.options = options;
     this.options.layoutName = this.options.layoutName || "default";
@@ -100,7 +100,7 @@ class SimpleKeyboard {
      * This removes any dependency to input DOM elements. You can type and directly display the value in a div element, for example.
      * @example
      * // To get entered input
-     * let input = keyboard.getInput();
+     * const input = keyboard.getInput();
      *
      * // To clear entered input.
      * keyboard.clearInput();
@@ -115,7 +115,7 @@ class SimpleKeyboard {
     /**
      * @type {string} DOM class of the keyboard wrapper, normally "simple-keyboard" by default.
      */
-    this.keyboardDOMClass = keyboardDOMQuery.split(".").join("");
+    this.keyboardDOMClass = keyboardDOMClass;
 
     /**
      * @type {object} Contains the DOM elements of every rendered button, the key being the button's layout name (e.g.: "{enter}").
@@ -153,7 +153,7 @@ class SimpleKeyboard {
      */
     if (this.keyboardDOM) this.render();
     else {
-      console.warn(`"${keyboardDOMQuery}" was not found in the DOM.`);
+      console.warn(`".${keyboardDOMClass}" was not found in the DOM.`);
       throw new Error("KEYBOARD_DOM_ERROR");
     }
 
@@ -164,6 +164,56 @@ class SimpleKeyboard {
     this.loadModules();
   }
 
+  /**
+   * parseParams
+   */
+  handleParams = params => {
+    let keyboardDOMClass;
+    let keyboardDOM;
+    let options;
+
+    /**
+     * If first parameter is a string:
+     * Consider it as an element's class
+     */
+    if (typeof params[0] === "string") {
+      keyboardDOMClass = params[0].split(".").join("");
+      keyboardDOM = document.querySelector(`.${keyboardDOMClass}`);
+      options = params[1];
+
+      /**
+       * If first parameter is an HTMLDivElement
+       * Consider it as the keyboard DOM element
+       */
+    } else if (params[0] instanceof HTMLDivElement) {
+      /**
+       * This element must have a class, otherwise throw
+       */
+      if (!params[0].className) {
+        console.warn("Any DOM element passed as parameter must have a class.");
+        throw new Error("KEYBOARD_DOM_CLASS_ERROR");
+      }
+
+      keyboardDOMClass = params[0].className.split(" ")[0];
+      keyboardDOM = params[0];
+      options = params[1];
+
+      /**
+       * Otherwise, search for .simple-keyboard DOM element
+       */
+    } else {
+      keyboardDOMClass = "simple-keyboard";
+      keyboardDOM = document.querySelector(`.${keyboardDOMClass}`);
+      options = params[0];
+    }
+
+    return {
+      keyboardDOMClass,
+      keyboardDOM,
+      options
+    };
+  };
+
   /**
    * Getters
    */
@@ -175,7 +225,7 @@ class SimpleKeyboard {
    * @param  {string} button The button's layout name.
    */
   handleButtonClicked(button) {
-    let debug = this.options.debug;
+    const debug = this.options.debug;
 
     /**
      * Ignoring placeholder buttons
@@ -191,7 +241,7 @@ class SimpleKeyboard {
     if (!this.input[this.options.inputName])
       this.input[this.options.inputName] = "";
 
-    let updatedInput = this.utilities.getUpdatedInput(
+    const updatedInput = this.utilities.getUpdatedInput(
       button,
       this.input[this.options.inputName],
       this.caretPosition
@@ -418,19 +468,37 @@ class SimpleKeyboard {
    * Set new option or modify existing ones after initialization.
    * @param  {object} options The options to set
    */
-  setOptions(options) {
-    options = options || {};
+  setOptions(options = {}) {
+    const changedOptions = this.changedOptions(options);
     this.options = Object.assign(this.options, options);
 
-    /**
-     * Some option changes require adjustments before re-render
-     */
-    this.onSetOptions(options);
+    if (changedOptions.length) {
+      if (this.options.debug) {
+        console.log("changedOptions", changedOptions);
+      }
 
-    /**
-     * Rendering
-     */
-    this.render();
+      /**
+       * Some option changes require adjustments before re-render
+       */
+      this.onSetOptions(options);
+
+      /**
+       * Rendering
+       */
+      this.render();
+    }
+  }
+
+  /**
+   * Detecting changes to non-function options
+   * This allows us to ascertain whether a button re-render is needed
+   */
+  changedOptions(newOptions) {
+    return Object.keys(newOptions).filter(
+      optionName =>
+        JSON.stringify(newOptions[optionName]) !==
+        JSON.stringify(this.options[optionName])
+    );
   }
 
   /**
@@ -498,7 +566,7 @@ class SimpleKeyboard {
           if (buttonTheme.class.split(" ").includes(classNameItem)) {
             classNameFound = true;
 
-            let buttonThemeArray = buttonTheme.buttons.split(" ");
+            const buttonThemeArray = buttonTheme.buttons.split(" ");
             if (!buttonThemeArray.includes(button)) {
               classNameFound = true;
               buttonThemeArray.push(button);
@@ -546,8 +614,8 @@ class SimpleKeyboard {
       Array.isArray(this.options.buttonTheme) &&
       this.options.buttonTheme.length
     ) {
-      let buttonArray = buttons.split(" ");
-      buttonArray.forEach((button, key) => {
+      const buttonArray = buttons.split(" ");
+      buttonArray.forEach(button => {
         this.options.buttonTheme.map((buttonTheme, index) => {
           /**
            * If className is set, we affect the buttons only for that class
@@ -557,7 +625,7 @@ class SimpleKeyboard {
             (className && className.includes(buttonTheme.class)) ||
             !className
           ) {
-            let filteredButtonArray = buttonTheme.buttons
+            const filteredButtonArray = buttonTheme.buttons
               .split(" ")
               .filter(item => item !== button);
 
@@ -587,7 +655,7 @@ class SimpleKeyboard {
   getButtonElement(button) {
     let output;
 
-    let buttonArr = this.buttonElements[button];
+    const buttonArr = this.buttonElements[button];
     if (buttonArr) {
       if (buttonArr.length > 1) {
         output = buttonArr;
@@ -604,7 +672,7 @@ class SimpleKeyboard {
    * by checking if the provided inputPattern passes
    */
   inputPatternIsValid(inputVal) {
-    let inputPatternRaw = this.options.inputPattern;
+    const inputPatternRaw = this.options.inputPattern;
     let inputPattern;
 
     /**
@@ -617,7 +685,7 @@ class SimpleKeyboard {
     }
 
     if (inputPattern && inputVal) {
-      let didInputMatch = inputPattern.test(inputVal);
+      const didInputMatch = inputPattern.test(inputVal);
 
       if (this.options.debug) {
         console.log(
@@ -785,7 +853,6 @@ class SimpleKeyboard {
 
     this.recurseButtons(deleteButton);
 
-    this.buttonElements = null;
     this.recurseButtons = null;
     deleteButton = null;
 
@@ -796,21 +863,28 @@ class SimpleKeyboard {
     this.keyboardDOM.ontouchstart = null;
     this.keyboardDOM.onmousedown = null;
 
-    this.keyboardDOM.remove();
-    this.keyboardDOM = null;
+    /**
+     * Clearing keyboard wrapper
+     */
+    this.clear();
 
     /**
      * Remove instance
      */
     window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
     delete window["SimpleKeyboardInstances"][this.currentInstanceName];
+
+    /**
+     * Reset initialized flag
+     */
+    this.initialized = false;
   }
 
   /**
    * Process buttonTheme option
    */
   getButtonThemeClasses(button) {
-    let buttonTheme = this.options.buttonTheme;
+    const buttonTheme = this.options.buttonTheme;
     let buttonClasses = [];
 
     if (Array.isArray(buttonTheme)) {
@@ -818,10 +892,11 @@ class SimpleKeyboard {
         if (
           themeObj.class &&
           typeof themeObj.class === "string" &&
-          (themeObj.buttons && typeof themeObj.buttons === "string")
+          themeObj.buttons &&
+          typeof themeObj.buttons === "string"
         ) {
-          let themeObjClasses = themeObj.class.split(" ");
-          let themeObjButtons = themeObj.buttons.split(" ");
+          const themeObjClasses = themeObj.class.split(" ");
+          const themeObjButtons = themeObj.buttons.split(" ");
 
           if (themeObjButtons.includes(button)) {
             buttonClasses = [...buttonClasses, ...themeObjClasses];
@@ -842,17 +917,19 @@ class SimpleKeyboard {
    * Process buttonAttributes option
    */
   setDOMButtonAttributes(button, callback) {
-    let buttonAttributes = this.options.buttonAttributes;
+    const buttonAttributes = this.options.buttonAttributes;
 
     if (Array.isArray(buttonAttributes)) {
       buttonAttributes.forEach(attrObj => {
         if (
           attrObj.attribute &&
           typeof attrObj.attribute === "string" &&
-          (attrObj.value && typeof attrObj.value === "string") &&
-          (attrObj.buttons && typeof attrObj.buttons === "string")
+          attrObj.value &&
+          typeof attrObj.value === "string" &&
+          attrObj.buttons &&
+          typeof attrObj.buttons === "string"
         ) {
-          let attrObjButtons = attrObj.buttons.split(" ");
+          const attrObjButtons = attrObj.buttons.split(" ");
 
           if (attrObjButtons.includes(button)) {
             callback(attrObj.attribute, attrObj.value);
@@ -1001,19 +1078,22 @@ class SimpleKeyboard {
    */
   loadModules() {
     if (Array.isArray(this.options.modules)) {
-      this.options.modules.forEach(Module => {
-        let module = new Module();
+      this.options.modules.forEach(KeyboardModule => {
+        const keyboardModule = new KeyboardModule();
 
         /* istanbul ignore next */
-        if (module.constructor.name && module.constructor.name !== "Function") {
-          let classStr = `module-${this.utilities.camelCase(
-            module.constructor.name
+        if (
+          keyboardModule.constructor.name &&
+          keyboardModule.constructor.name !== "Function"
+        ) {
+          const classStr = `module-${this.utilities.camelCase(
+            keyboardModule.constructor.name
           )}`;
           this.keyboardPluginClasses =
             this.keyboardPluginClasses + ` ${classStr}`;
         }
 
-        module.init(this);
+        keyboardModule.init(this);
       });
 
       this.keyboardPluginClasses =
@@ -1049,12 +1129,12 @@ class SimpleKeyboard {
     containerStartIndexes,
     containerEndIndexes
   ) {
-    let rowDOMArray = Array.from(rowDOM.children);
+    const rowDOMArray = Array.from(rowDOM.children);
     let removedElements = 0;
 
     if (rowDOMArray.length) {
       containerStartIndexes.forEach((startIndex, arrIndex) => {
-        let endIndex = containerEndIndexes[arrIndex];
+        const endIndex = containerEndIndexes[arrIndex];
 
         /**
          * If there exists a respective end index
@@ -1069,21 +1149,21 @@ class SimpleKeyboard {
          * This is since the removal of buttons to place a single button container
          * results in a modified array size
          */
-        let updated_startIndex = startIndex - removedElements;
-        let updated_endIndex = endIndex - removedElements;
+        const updated_startIndex = startIndex - removedElements;
+        const updated_endIndex = endIndex - removedElements;
 
         /**
          * Create button container
          */
-        let containerDOM = document.createElement("div");
+        const containerDOM = document.createElement("div");
         containerDOM.className += "hg-button-container";
-        let containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
+        const containerUID = `${this.options.layoutName}-r${rowIndex}c${arrIndex}`;
         containerDOM.setAttribute("data-skUID", containerUID);
 
         /**
          * Taking elements due to be inserted into container
          */
-        let containedElements = rowDOMArray.splice(
+        const containedElements = rowDOMArray.splice(
           updated_startIndex,
           updated_endIndex - updated_startIndex + 1
         );
@@ -1124,6 +1204,17 @@ class SimpleKeyboard {
     return rowDOM;
   }
 
+  /**
+   * getKeyboardClassString
+   */
+  getKeyboardClassString = (...baseDOMClasses) => {
+    const keyboardClasses = [this.keyboardDOMClass, ...baseDOMClasses].filter(
+      DOMClass => !!DOMClass
+    );
+
+    return keyboardClasses.join(" ");
+  };
+
   /**
    * Renders rows and buttons as per options
    */
@@ -1145,23 +1236,28 @@ class SimpleKeyboard {
      */
     this.beforeRender();
 
-    let layoutClass = `hg-layout-${this.options.layoutName}`;
-    let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
-    let useTouchEvents = this.options.useTouchEvents || false;
-    let useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
-    let useMouseEvents = this.options.useMouseEvents || false;
-    let disableRowButtonContainers = this.options.disableRowButtonContainers;
+    const layoutClass = `hg-layout-${this.options.layoutName}`;
+    const layout = this.options.layout || getDefaultLayout();
+    const useTouchEvents = this.options.useTouchEvents || false;
+    const useTouchEventsClass = useTouchEvents ? "hg-touch-events" : "";
+    const useMouseEvents = this.options.useMouseEvents || false;
+    const disableRowButtonContainers = this.options.disableRowButtonContainers;
 
     /**
      * Adding themeClass, layoutClass to keyboardDOM
      */
-    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass} ${this.keyboardPluginClasses} ${useTouchEventsClass}`;
+    this.keyboardDOM.className = this.getKeyboardClassString(
+      this.options.theme,
+      layoutClass,
+      this.keyboardPluginClasses,
+      useTouchEventsClass
+    );
 
     /**
      * Iterating through each row
      */
     layout[this.options.layoutName].forEach((row, rIndex) => {
-      let rowArray = row.split(" ");
+      const rowArray = row.split(" ");
 
       /**
        * Creating empty row
@@ -1172,8 +1268,8 @@ class SimpleKeyboard {
       /**
        * Tracking container indicators in rows
        */
-      let containerStartIndexes = [];
-      let containerEndIndexes = [];
+      const containerStartIndexes = [];
+      const containerEndIndexes = [];
 
       /**
        * Iterating through each button in row
@@ -1182,11 +1278,11 @@ class SimpleKeyboard {
         /**
          * Check if button has a container indicator
          */
-        let buttonHasContainerStart =
+        const buttonHasContainerStart =
           !disableRowButtonContainers &&
           button.includes("[") &&
           button.length > 1;
-        let buttonHasContainerEnd =
+        const buttonHasContainerEnd =
           !disableRowButtonContainers &&
           button.includes("]") &&
           button.length > 1;
@@ -1215,8 +1311,8 @@ class SimpleKeyboard {
         /**
          * Processing button options
          */
-        let fctBtnClass = this.utilities.getButtonClass(button);
-        let buttonDisplayName = this.utilities.getButtonDisplayName(
+        const fctBtnClass = this.utilities.getButtonClass(button);
+        const buttonDisplayName = this.utilities.getButtonDisplayName(
           button,
           this.options.display,
           this.options.mergeDisplay
@@ -1225,8 +1321,8 @@ class SimpleKeyboard {
         /**
          * Creating button
          */
-        let buttonType = this.options.useButtonTag ? "button" : "div";
-        let buttonDOM = document.createElement(buttonType);
+        const buttonType = this.options.useButtonTag ? "button" : "div";
+        const buttonDOM = document.createElement(buttonType);
         buttonDOM.className += `hg-button ${fctBtnClass}`;
 
         /**
@@ -1309,13 +1405,13 @@ class SimpleKeyboard {
          * Adding unique id
          * Since there's no limit on spawning same buttons, the unique id ensures you can style every button
          */
-        let buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
+        const buttonUID = `${this.options.layoutName}-r${rIndex}b${bIndex}`;
         buttonDOM.setAttribute("data-skBtnUID", buttonUID);
 
         /**
          * Adding button label to button
          */
-        let buttonSpanDOM = document.createElement("span");
+        const buttonSpanDOM = document.createElement("span");
         buttonSpanDOM.innerHTML = buttonDisplayName;
         buttonDOM.appendChild(buttonSpanDOM);
 

src/lib/components/tests/Keyboard.test.js

@@ -1,7 +1,7 @@
 import Keyboard from '../Keyboard';
 import TestUtility from '../../../utils/TestUtility';
 
-let testUtil = new TestUtility();
+const testUtil = new TestUtility();
 
 it('Keyboard will not render without target element', () => {
   try {
@@ -38,7 +38,7 @@ it('Keyboard will run with custom DOM target', () => {
 it('Keyboard will run with debug option set', () => {
   testUtil.setDOM();
   
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
@@ -51,10 +51,10 @@ it('Keyboard will use touch events', () => {
   testUtil.clear()
 
   document.body.innerHTML = `
-    <div id="keyboard"></div>
+    <div class="keyboard"></div>
   `;
 
-  const keyboard = new Keyboard('#keyboard', {
+  const keyboard = new Keyboard('.keyboard', {
     useTouchEvents: true,
     onChange: () => touched = true,
     layout: {
@@ -73,7 +73,7 @@ it('Keyboard will use touch events', () => {
 
 it('Keyboard standard buttons will work', () => {
   testUtil.setDOM();
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       "default": 10
     }
@@ -85,7 +85,7 @@ it('Keyboard standard buttons will work', () => {
 
 it('Keyboard shift buttons will work', () => {
   testUtil.setDOM();
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.setOptions({
     layoutName: "shift",
@@ -97,7 +97,7 @@ it('Keyboard shift buttons will work', () => {
 
 it('Keyboard setOptions will work without a param', () => {
   testUtil.setDOM();
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.setOptions();
 });
@@ -105,7 +105,7 @@ it('Keyboard setOptions will work without a param', () => {
 it('Keyboard empty buttons wont do anything as expected', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     layout: {
       default: [
         "{//} {button} d",
@@ -122,7 +122,7 @@ it('Keyboard onKeyPress will work', () => {
 
   let pressed = false;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     onKeyPress: () => {
       pressed = true;
     },
@@ -137,7 +137,7 @@ it('Keyboard onKeyPress will work', () => {
 it('Keyboard standard function buttons will not change input', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     useButtonTag: true
   });
 
@@ -158,7 +158,7 @@ it('Keyboard syncInstanceInputs will work', () => {
     <div class="keyboard2"></div>
   `;
 
-  let sharedOptions = {
+  const sharedOptions = {
     syncInstanceInputs: true
   };
 
@@ -195,7 +195,7 @@ it('Keyboard onChange will work', () => {
 
   let output = false;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     onChange: (input) => {
       output = input;
     },
@@ -212,7 +212,7 @@ it('Keyboard onChangeAll will work', () => {
 
   let output;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     onChangeAll: (input) => {
       output = input ? input.default : null;
     },
@@ -227,7 +227,7 @@ it('Keyboard onChangeAll will work', () => {
 it('Keyboard clearInput will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   /**
    * Avoid setInput for this test
@@ -249,12 +249,12 @@ it('Keyboard clearInput will work with syncInstanceInputs', () => {
     <div class="keyboard2"></div>
   `;
 
-  let sharedOptions = {
+  const sharedOptions = {
     syncInstanceInputs: true
   };
 
-  let keyboard1 = new Keyboard(".keyboard1", sharedOptions);
-  let keyboard2 = new Keyboard(".keyboard2", sharedOptions);
+  const keyboard1 = new Keyboard(".keyboard1", sharedOptions);
+  const keyboard2 = new Keyboard(".keyboard2", sharedOptions);
 
   /**
    * Avoid setInput for this test
@@ -271,7 +271,7 @@ it('Keyboard clearInput will work with syncInstanceInputs', () => {
 it('Keyboard setInput will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.setInput("hello");
 
@@ -286,12 +286,12 @@ it('Keyboard setInput will work with syncInstanceInputs', () => {
     <div class="keyboard2"></div>
   `;
 
-  let sharedOptions = {
+  const sharedOptions = {
     syncInstanceInputs: true
   };
 
-  let keyboard1 = new Keyboard(".keyboard1", sharedOptions);
-  let keyboard2 = new Keyboard(".keyboard2", sharedOptions);
+  const keyboard1 = new Keyboard(".keyboard1", sharedOptions);
+  const keyboard2 = new Keyboard(".keyboard2", sharedOptions);
 
   keyboard1.setInput("hello");
 
@@ -306,8 +306,8 @@ it('Keyboard dispatch will work', () => {
     <div class="keyboard2"></div>
   `;
 
-  let keyboard1 = new Keyboard(".keyboard1");
-  let keyboard2 = new Keyboard(".keyboard2");
+  const keyboard1 = new Keyboard(".keyboard1");
+  const keyboard2 = new Keyboard(".keyboard2");
 
   keyboard1.dispatch(instance => {
     instance.setOptions({
@@ -331,8 +331,8 @@ it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
     <div class="keyboard2"></div>
   `;
 
-  let keyboard1 = new Keyboard(".keyboard1");
-  let keyboard2 = new Keyboard(".keyboard2");
+  const keyboard1 = new Keyboard(".keyboard1");
+  new Keyboard(".keyboard2");
 
   window['SimpleKeyboardInstances'] = null;
 
@@ -357,8 +357,8 @@ it('Keyboard dispatch will not work without SimpleKeyboardInstances', () => {
 it('Keyboard addButtonTheme will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
-  let returnVal = keyboard.addButtonTheme("q", "test");
+  const keyboard = new Keyboard();
+  keyboard.addButtonTheme("q", "test");
 
   expect(keyboard.options.buttonTheme[0].class).toBe("test");
 });
@@ -366,8 +366,8 @@ it('Keyboard addButtonTheme will work', () => {
 it('Keyboard addButtonTheme will not work without params', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
-  let returnVal = keyboard.addButtonTheme();
+  const keyboard = new Keyboard();
+  const returnVal = keyboard.addButtonTheme();
 
   expect(returnVal).toBeFalsy();
 });
@@ -375,7 +375,7 @@ it('Keyboard addButtonTheme will not work without params', () => {
 it('Keyboard addButtonTheme will amend a buttonTheme', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -392,7 +392,7 @@ it('Keyboard addButtonTheme will amend a buttonTheme', () => {
 it('Keyboard addButtonTheme will create a buttonTheme', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "blurb",
@@ -409,7 +409,7 @@ it('Keyboard addButtonTheme will create a buttonTheme', () => {
 it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -426,7 +426,7 @@ it('Keyboard addButtonTheme will ignore a repeated buttonTheme', () => {
 it('Keyboard addButtonTheme will amend a buttonTheme', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -444,7 +444,7 @@ it('Keyboard addButtonTheme will amend a buttonTheme', () => {
 it('Keyboard removeButtonTheme without params will remove all button themes', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -462,7 +462,7 @@ it('Keyboard removeButtonTheme without params will remove all button themes', ()
 it('Keyboard removeButtonTheme will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -479,7 +479,7 @@ it('Keyboard removeButtonTheme will work', () => {
 it('Keyboard removeButtonTheme will work wihtout a class', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -496,7 +496,7 @@ it('Keyboard removeButtonTheme will work wihtout a class', () => {
 it('Keyboard removeButtonTheme will do nothing without a button param', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -513,7 +513,7 @@ it('Keyboard removeButtonTheme will do nothing without a button param', () => {
 it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTheme', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -530,7 +530,7 @@ it('Keyboard removeButtonTheme does nothing if req button doesnt have a buttonTh
 it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "testy",
@@ -547,7 +547,7 @@ it('Keyboard removeButtonTheme does nothing if buttonTheme class does not exist'
 it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the requested buttons', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -564,7 +564,7 @@ it('Keyboard removeButtonTheme does nothing if buttonTheme doesnt have the reque
 it('Keyboard getButtonElement will not return anything if empty match', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     layout: {
       default: [
         "{//} {button} d",
@@ -579,7 +579,7 @@ it('Keyboard getButtonElement will not return anything if empty match', () => {
 it('Keyboard getButtonElement will return multiple matched buttons', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   expect(keyboard.getButtonElement("{shift}").length).toBe(2);
 });
@@ -606,7 +606,7 @@ it('Keyboard will receive physical keyboard events', () => {
 it('Keyboard caretEventHandler will detect input, textarea focus', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.caretEventHandler({
     charCode: 0,
@@ -625,7 +625,7 @@ it('Keyboard caretEventHandler will detect input, textarea focus', () => {
 it('Keyboard caretEventHandler will not set caretPosition on disableCaretPositioning', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.caretEventHandler({
     charCode: 0,
@@ -661,7 +661,7 @@ it('Keyboard caretEventHandler will not set caretPosition on disableCaretPositio
 it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.isMouseHold = true;
 
@@ -682,7 +682,7 @@ it('Keyboard caretEventHandler ignore positioning if input, textarea is blur', (
 it('Keyboard caretEventHandler will work with debug', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
@@ -705,7 +705,7 @@ it('Keyboard onInit will work', () => {
 
   let passed = false;
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     onInit: () => {
       passed = true
     }
@@ -719,7 +719,7 @@ it('Keyboard onRender will work', () => {
 
   let passed = false;
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     onRender: () => {
       passed = true
     }
@@ -731,7 +731,7 @@ it('Keyboard onRender will work', () => {
 it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     buttonTheme: [
       {
         class: null,
@@ -744,7 +744,7 @@ it('Keyboard buttonTheme that is invalid will be ignored and not throw', () => {
 it('Keyboard buttonTheme buttons that are invalid will be ignored and not throw', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     buttonTheme: [
       {
         class: null,
@@ -772,7 +772,7 @@ it('Keyboard buttonTheme will be ignored if buttons param not a string', () => {
 it('Keyboard buttonTheme will be ignored if already added', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     buttonTheme: [
       {
         class: "test",
@@ -801,7 +801,7 @@ it('Keyboard buttonTheme will be ignored if already added', () => {
 it('Keyboard can set a module', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.registerModule(
     "test",
@@ -816,7 +816,7 @@ it('Keyboard can set a module', () => {
 it('Keyboard registerModule will return current module tree', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.modules.test = {
     testy: "test"
@@ -836,7 +836,7 @@ it('Keyboard registerModule will return current module tree', () => {
 it('Keyboard can set a module by amending the modules tree', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.modules = {
     testman: {
@@ -857,7 +857,7 @@ it('Keyboard can set a module by amending the modules tree', () => {
 it('Keyboard will not retrieve an option for an inexistent module', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   expect(keyboard.getModuleProp("test", "foo")).toBeFalsy();
 });
@@ -865,7 +865,7 @@ it('Keyboard will not retrieve an option for an inexistent module', () => {
 it('Keyboard will get a list of modules', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.registerModule(
     "test",
@@ -886,7 +886,7 @@ it('Keyboard loadModules will load a simple module', () => {
     };
   }
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     modules: [
       myClass
     ]
@@ -896,7 +896,7 @@ it('Keyboard loadModules will load a simple module', () => {
 it('Keyboard handleButtonMouseUp will set isMouseHold to false', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.isMouseHold = true;
 
@@ -908,7 +908,7 @@ it('Keyboard handleButtonMouseUp will set isMouseHold to false', () => {
 it('Keyboard handleButtonMouseUp clear holdInteractionTimeout', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.isMouseHold = true;
   keyboard.holdInteractionTimeout = setTimeout(() => {}, 10000);
@@ -919,7 +919,7 @@ it('Keyboard handleButtonMouseUp clear holdInteractionTimeout', () => {
 it('Keyboard handleButtonMouseDown will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.handleButtonMouseDown("q", {
     target: keyboard.getButtonElement("q"),
@@ -937,7 +937,7 @@ it('Keyboard handleButtonMouseDown will work', () => {
 it('Keyboard handleButtonMouseDown will work with preventMouseDownDefault', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.options.preventMouseDownDefault = true;
 
@@ -965,7 +965,7 @@ it('Keyboard onModulesLoaded will work', () => {
 
   let foo;
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     modules: [
       myClass
     ],
@@ -980,7 +980,7 @@ it('Keyboard onModulesLoaded will work', () => {
 it('Keyboard inputPattern will work globally', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     inputPattern: /^\d+$/,
     useMouseEvents: true
   });
@@ -997,7 +997,7 @@ it('Keyboard inputPattern will work globally', () => {
 it('Keyboard inputPattern will work by input name', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true,
     inputName: "test1",
     inputPattern: {
@@ -1026,7 +1026,7 @@ it('Keyboard processAutoTouchEvents will work', () => {
 
   navigator.maxTouchPoints = true;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     autoUseTouchEvents: true
   });
 
@@ -1038,7 +1038,7 @@ it('Keyboard processAutoTouchEvents will work with debugging enabled', () => {
 
   navigator.maxTouchPoints = true;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     autoUseTouchEvents: true,
     debug: true
   });
@@ -1051,7 +1051,7 @@ it('Keyboard beforeFirstRender method will work', () => {
 
   let timesCalled = 0;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     beforeFirstRender: () => {
       timesCalled++;
     }
@@ -1074,7 +1074,7 @@ it('Keyboard beforeFirstRender will show PointerEvents warning', () => {
 
   window.PointerEvent = window.PointerEvent ? window.PointerEvent : () => {};
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     debug: true,
     beforeFirstRender: () => {
       timesCalled++;
@@ -1089,7 +1089,7 @@ it('Keyboard beforeRender method will work', () => {
 
   let timesCalled = 0;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     beforeRender: () => {
       timesCalled++;
     }
@@ -1108,7 +1108,7 @@ it('Keyboard beforeRender method will work', () => {
 it('Keyboard parseRowDOMContainers will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     layout: {
       'default': [
         '` [1 2 3 4 5 6 7 8 9] 0 - = {bksp}',
@@ -1127,7 +1127,7 @@ it('Keyboard parseRowDOMContainers will work', () => {
     }
   });
 
-  let containers = Array.from(document.querySelectorAll(".hg-button-container"));
+  const containers = Array.from(document.querySelectorAll(".hg-button-container"));
 
   expect(containers.length).toBe(5);
 
@@ -1144,7 +1144,7 @@ it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
   let failed = false;
 
   try {
-    let keyboard = new Keyboard();
+    const keyboard = new Keyboard();
     keyboard.parseRowDOMContainers({
       children: []
     });
@@ -1159,7 +1159,7 @@ it('Keyboard parseRowDOMContainers will ignore empty rows', () => {
 it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex before startIndex', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     layout: {
       'default': [
         '` [1 2 3 4 5 6 7 8 9 0 - = {bksp}',
@@ -1168,7 +1168,7 @@ it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex befo
     }
   });
 
-  let containers = Array.from(document.querySelectorAll(".hg-button-container"));
+  const containers = Array.from(document.querySelectorAll(".hg-button-container"));
 
   expect(containers.length).toBe(0);
 });
@@ -1176,7 +1176,7 @@ it('Keyboard parseRowDOMContainers will ignore missing endIndex or endIndex befo
 it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     disableRowButtonContainers: true,
     layout: {
       'default': [
@@ -1196,7 +1196,7 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
     }
   });
 
-  let containers = Array.from(document.querySelectorAll(".hg-button-container"));
+  const containers = Array.from(document.querySelectorAll(".hg-button-container"));
 
   expect(containers.length).toBe(0);
 });
@@ -1204,7 +1204,7 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
 it('Keyboard inputName change will trigget caretPosition reset', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.caretPosition = 0;
 
@@ -1227,23 +1227,23 @@ it('Keyboard inputName change will trigget caretPosition reset', () => {
 it('Keyboard destroy will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
   keyboard.destroy();
-  expect(keyboard.keyboardDOM).toBe(null);
+  expect(keyboard.keyboardDOM.innerHTML).toBe("");
 });
 
 it('Keyboard destroy will work with debug option', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({ debug: true });
+  const keyboard = new Keyboard({ debug: true });
   keyboard.destroy();
-  expect(keyboard.keyboardDOM).toBe(null);
+  expect(keyboard.keyboardDOM.innerHTML).toBe("");
 });
 
 it('Keyboard disableButtonHold will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     disableButtonHold: true
   });
 
@@ -1253,7 +1253,7 @@ it('Keyboard disableButtonHold will work', () => {
 it('Keyboard caretEventHandler will be triggered on mouseup and ontouchend', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     disableCaretPositioning: true
   });
 
@@ -1289,7 +1289,7 @@ it('Keyboard onKeyReleased will work', () => {
   let firedTimes = 0;
   let buttonPressed;
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     onKeyReleased: button => {
       pressed = true;
       buttonPressed = button;
@@ -1309,7 +1309,7 @@ it('Keyboard onKeyReleased will work', () => {
 it('Keyboard buttonAttribute will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     buttonAttributes: [
       {
         attribute: "aria-label",
@@ -1323,7 +1323,7 @@ it('Keyboard buttonAttribute will work', () => {
 it('Keyboard buttonAttribute will warn about invalid entries', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     buttonAttributes: [
       {
         attribute: false,
@@ -1335,6 +1335,29 @@ it('Keyboard buttonAttribute will warn about invalid entries', () => {
 
 it('Keyboard recurseButtons will not work without a valid param', () => {
   testUtil.setDOM();
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
   expect(keyboard.recurseButtons()).toBe(false);
 });
+
+it('Keyboard will not work with a DOM element param without class', () => {
+  try {
+    const keyboardDOM = document.createElement("div");
+    new Keyboard(keyboardDOM);
+    expect(true).toBe(false);
+  } catch (e) {
+    expect(e.message).toBe("KEYBOARD_DOM_CLASS_ERROR");
+  }
+});
+
+it('Keyboard will work with a DOM element param with class', () => {
+  try {
+    const keyboardClass = "my-keyboard";
+    const keyboardDOM = document.createElement("div");
+    keyboardDOM.className = keyboardClass;
+    const keyboard = new Keyboard(keyboardDOM);
+
+    expect(keyboard.keyboardDOMClass).toBe(keyboardClass);
+  } catch (e) {
+    expect(true).toBe(false);
+  }
+});

src/lib/services/KeyboardLayout.js

@@ -1,29 +1,18 @@
-/**
- * Keyboard Layout Service
- */
-class KeyboardLayout {
-  /**
-   * Get default simple-keyboard layout
-   * @return {object} The default layout (US-QWERTY)
-   */
-  static getDefaultLayout() {
-    return {
-      default: [
-        "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
-        "{tab} q w e r t y u i o p [ ] \\",
-        "{lock} a s d f g h j k l ; ' {enter}",
-        "{shift} z x c v b n m , . / {shift}",
-        ".com @ {space}"
-      ],
-      shift: [
-        "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
-        "{tab} Q W E R T Y U I O P { } |",
-        '{lock} A S D F G H J K L : " {enter}',
-        "{shift} Z X C V B N M < > ? {shift}",
-        ".com @ {space}"
-      ]
-    };
-  }
-}
-
-export default KeyboardLayout;
+export const getDefaultLayout = () => {
+  return {
+    default: [
+      "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+      "{tab} q w e r t y u i o p [ ] \\",
+      "{lock} a s d f g h j k l ; ' {enter}",
+      "{shift} z x c v b n m , . / {shift}",
+      ".com @ {space}"
+    ],
+    shift: [
+      "~ ! @ # $ % ^ & * ( ) _ + {bksp}",
+      "{tab} Q W E R T Y U I O P { } |",
+      '{lock} A S D F G H J K L : " {enter}',
+      "{shift} Z X C V B N M < > ? {shift}",
+      ".com @ {space}"
+    ]
+  };
+};

src/lib/services/PhysicalKeyboard.js

@@ -21,11 +21,11 @@ class PhysicalKeyboard {
   }
 
   handleHighlightKeyDown(event) {
-    let options = this.getOptions();
-    let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+    const options = this.getOptions();
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch(instance => {
-      let buttonDOM =
+      const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
@@ -39,10 +39,10 @@ class PhysicalKeyboard {
   }
 
   handleHighlightKeyUp(event) {
-    let buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch(instance => {
-      let buttonDOM =
+      const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 

src/lib/services/Utilities.js

@@ -23,11 +23,11 @@ class Utilities {
    * @return {string} The classes to be added to the button
    */
   getButtonClass(button) {
-    let buttonTypeClass =
+    const buttonTypeClass =
       button.includes("{") && button.includes("}") && button !== "{//}"
         ? "functionBtn"
         : "standardBtn";
-    let buttonWithoutBraces = button.replace("{", "").replace("}", "");
+    const buttonWithoutBraces = button.replace("{", "").replace("}", "");
     let buttonNormalized = "";
 
     if (buttonTypeClass !== "standardBtn")
@@ -128,7 +128,7 @@ class Utilities {
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
   getUpdatedInput(button, input, caretPos, moveCaret) {
-    let options = this.getOptions();
+    const options = this.getOptions();
     let output = input;
 
     if (
@@ -186,7 +186,7 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPos(length, minus) {
-    let newCaretPos = this.updateCaretPosAction(length, minus);
+    const newCaretPos = this.updateCaretPosAction(length, minus);
 
     this.dispatch(instance => {
       instance.caretPosition = newCaretPos;
@@ -200,7 +200,7 @@ class Utilities {
    * @param  {boolean} minus Whether the cursor should be moved to the left or not.
    */
   updateCaretPosAction(length, minus) {
-    let options = this.getOptions();
+    const options = this.getOptions();
     let caretPosition = this.getCaretPosition();
 
     if (minus) {
@@ -253,7 +253,7 @@ class Utilities {
    * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
    */
   removeAt(source, position, moveCaret) {
-    let caretPosition = this.getCaretPosition();
+    const caretPosition = this.getCaretPosition();
 
     if (caretPosition === 0) {
       return source;
@@ -262,7 +262,7 @@ class Utilities {
     let output;
     let prevTwoChars;
     let emojiMatched;
-    let emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
+    const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
 
     /**
      * Emojis are made out of two characters, so we must take a custom approach to trim them.
@@ -301,10 +301,10 @@ class Utilities {
    * @param  {string} updatedInput
    */
   handleMaxLength(inputObj, updatedInput) {
-    let options = this.getOptions();
-    let maxLength = options.maxLength;
-    let currentInput = inputObj[options.inputName];
-    let condition = updatedInput.length - 1 >= maxLength;
+    const options = this.getOptions();
+    const maxLength = options.maxLength;
+    const currentInput = inputObj[options.inputName];
+    const condition = updatedInput.length - 1 >= maxLength;
 
     if (
       /**
@@ -334,7 +334,7 @@ class Utilities {
     }
 
     if (typeof maxLength === "object") {
-      let condition = currentInput.length === maxLength[options.inputName];
+      const condition = currentInput.length === maxLength[options.inputName];
 
       if (options.debug) {
         console.log("maxLength (obj) reached:", condition);
@@ -377,8 +377,8 @@ class Utilities {
 
   static bindMethods(myClass, instance) {
     // eslint-disable-next-line no-unused-vars
-    for (let myMethod of Object.getOwnPropertyNames(myClass.prototype)) {
-      let excludeMethod =
+    for (const myMethod of Object.getOwnPropertyNames(myClass.prototype)) {
+      const excludeMethod =
         myMethod === "constructor" || myMethod === "bindMethods";
       if (!excludeMethod) {
         instance[myMethod] = instance[myMethod].bind(instance);

src/lib/services/tests/PhysicalKeyboard.test.js

@@ -1,12 +1,12 @@
 import Keyboard from '../../components/Keyboard';
 import TestUtility from '../../../utils/TestUtility';
 
-let testUtil = new TestUtility();
+const testUtil = new TestUtility();
 
 it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -22,7 +22,7 @@ it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', ()
 it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: false
   });
 
@@ -38,7 +38,7 @@ it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight',
 it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -54,7 +54,7 @@ it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
 it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -70,7 +70,7 @@ it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () =
 it('PhysicalKeyboard keyup will be handle special buttons', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true
   });
 
@@ -86,7 +86,7 @@ it('PhysicalKeyboard keyup will be handle special buttons', () => {
 it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true,
     debug: true
   });
@@ -103,7 +103,7 @@ it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
 it('PhysicalKeyboard will work with F1-F12 keys', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  new Keyboard({
     physicalKeyboardHighlight: true,
     debug: true
   });

src/lib/services/tests/Utilities.test.js

@@ -1,12 +1,12 @@
 import Keyboard from '../../components/Keyboard';
 import TestUtility from '../../../utils/TestUtility';
 
-let testUtil = new TestUtility();
+const testUtil = new TestUtility();
 
 it('Keyboard mergeDisplay will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     mergeDisplay: true,
     display: {
       "q": "qreplaced"
@@ -29,9 +29,9 @@ it('Keyboard function buttons will work', () => {
 it('Keyboard {bksp} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
   
   expect(output).toBe("tes");
 });
@@ -39,9 +39,9 @@ it('Keyboard {bksp} button will work', () => {
 it('Keyboard {space} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{space}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{space}", "test");
   
   expect(output).toBe("test ");
 });
@@ -49,9 +49,9 @@ it('Keyboard {space} button will work', () => {
 it('Keyboard {tab} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{tab}", "test");
   
   expect(output).toBe("test\t");
 });
@@ -59,11 +59,11 @@ it('Keyboard {tab} button will work', () => {
 it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     tabCharOnTab: false
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{tab}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{tab}", "test");
   
   expect(output).toBe("test");
 });
@@ -71,9 +71,9 @@ it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
 it('Keyboard {enter} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{enter}", "test");
   
   expect(output).toBe("test");
 });
@@ -81,11 +81,11 @@ it('Keyboard {enter} button will work', () => {
 it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     newLineOnEnter: true
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{enter}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{enter}", "test");
   
   expect(output).toBe("test\n");
 });
@@ -93,10 +93,10 @@ it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
 it('Keyboard {numpadX} buttons will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   for(let i = 0;i<=9;i++){
-    let output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
+    const output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
     expect(output).toBe(`test${i}`);
   }
 });
@@ -104,9 +104,9 @@ it('Keyboard {numpadX} buttons will work', () => {
 it('Keyboard {numpaddivide} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
   
   expect(output).toBe("test/");
 });
@@ -114,9 +114,9 @@ it('Keyboard {numpaddivide} button will work', () => {
 it('Keyboard {numpadmultiply} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
   
   expect(output).toBe("test*");
 });
@@ -124,9 +124,9 @@ it('Keyboard {numpadmultiply} button will work', () => {
 it('Keyboard {numpadsubtract} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
   
   expect(output).toBe("test-");
 });
@@ -134,9 +134,9 @@ it('Keyboard {numpadsubtract} button will work', () => {
 it('Keyboard {numpadadd} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
   
   expect(output).toBe("test+");
 });
@@ -144,9 +144,9 @@ it('Keyboard {numpadadd} button will work', () => {
 it('Keyboard {numpadadd} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
   
   expect(output).toBe("test+");
 });
@@ -154,9 +154,9 @@ it('Keyboard {numpadadd} button will work', () => {
 it('Keyboard {numpaddecimal} button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
   
   expect(output).toBe("test.");
 });
@@ -164,7 +164,7 @@ it('Keyboard {numpaddecimal} button will work', () => {
 it('Keyboard custom function buttons will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     layout: {
       default: [
         "{randombuttontest}"
@@ -172,7 +172,7 @@ it('Keyboard custom function buttons will work', () => {
     }
   });
 
-  let output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
+  const output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
   
   expect(output).toBe("test");
   expect(keyboard.getButtonElement("{randombuttontest}").onclick).toBeTruthy();
@@ -181,9 +181,9 @@ it('Keyboard custom function buttons will work', () => {
 it('Keyboard "{" button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("{", "test");
+  const output = keyboard.utilities.getUpdatedInput("{", "test");
   
   expect(output).toBe("test{");
 });
@@ -191,9 +191,9 @@ it('Keyboard "{" button will work', () => {
 it('Keyboard "}" button will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
-  let output = keyboard.utilities.getUpdatedInput("}", "test");
+  const output = keyboard.utilities.getUpdatedInput("}", "test");
   
   expect(output).toBe("test}");
 });
@@ -201,11 +201,11 @@ it('Keyboard "}" button will work', () => {
 it('Keyboard standard button will affect input', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   for (let i = 65; i <= 90; i++) {
-    let char = String.fromCharCode(i);
-    let output = keyboard.utilities.getUpdatedInput(char, "test");
+    const char = String.fromCharCode(i);
+    const output = keyboard.utilities.getUpdatedInput(char, "test");
     expect(output).toBe(`test${char}`);
   }
 });
@@ -213,7 +213,7 @@ it('Keyboard standard button will affect input', () => {
 it('Keyboard updateCaretPos will work with minus', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     syncInstanceInputs: true
   });
 
@@ -226,7 +226,7 @@ it('Keyboard updateCaretPos will work with minus', () => {
 it('Keyboard updateCaretPos will work with minus', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.caretPosition = 5;
   keyboard.utilities.updateCaretPos(2, true);
@@ -237,7 +237,7 @@ it('Keyboard updateCaretPos will work with minus', () => {
 it('Keyboard updateCaretPos will work with plus', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.caretPosition = 5;
   keyboard.utilities.updateCaretPos(2);
@@ -248,7 +248,7 @@ it('Keyboard updateCaretPos will work with plus', () => {
 it('Keyboard addStringAt will work with debug', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
@@ -260,7 +260,7 @@ it('Keyboard addStringAt will work with debug', () => {
 it('Keyboard addStringAt will work with position', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
@@ -275,7 +275,7 @@ it('Keyboard addStringAt will work with position', () => {
 it('Keyboard addStringAt will respect maxLength', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true,
     maxLength: 4
   });
@@ -292,13 +292,13 @@ it('Keyboard addStringAt will respect maxLength', () => {
 it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
   keyboard.setInput("test");
 
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
 
   expect(output).toBeFalsy();
 });
@@ -306,7 +306,7 @@ it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
 it('Keyboard handleMaxLength will work with object maxLength', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       default: 4
     }
@@ -314,7 +314,7 @@ it('Keyboard handleMaxLength will work with object maxLength', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
@@ -322,7 +322,7 @@ it('Keyboard handleMaxLength will work with object maxLength', () => {
 it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       default: 4
     },
@@ -331,7 +331,7 @@ it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
@@ -339,7 +339,7 @@ it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
 it('Keyboard handleMaxLength will return false if obj maxLength not reached', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: {
       default: 7
     }
@@ -347,7 +347,7 @@ it('Keyboard handleMaxLength will return false if obj maxLength not reached', ()
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -356,13 +356,13 @@ it('Keyboard handleMaxLength will return false if obj maxLength not reached', ()
 it('Keyboard handleMaxLength will work without debug', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: 4
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeTruthy();
 });
@@ -371,13 +371,13 @@ it('Keyboard handleMaxLength will work without debug', () => {
 it('Keyboard handleMaxLength will work with numeric maxLength', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: 3
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBe(true);
 });
@@ -385,13 +385,13 @@ it('Keyboard handleMaxLength will work with numeric maxLength', () => {
 it('Keyboard handleMaxLength wont work with non numeric or object maxLength', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: "wrong"
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -399,14 +399,14 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength', ()
 it('Keyboard handleMaxLength wont work with non numeric or object maxLength (with debug)', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: "wrong",
     debug: true
   });
 
   keyboard.setInput("test");
   
-  let output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
 
   expect(output).toBeFalsy();
 });
@@ -414,11 +414,11 @@ it('Keyboard handleMaxLength wont work with non numeric or object maxLength (wit
 it('Keyboard isMaxLengthReached will work', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     maxLength: 5
   });
 
-  let output = keyboard.utilities.isMaxLengthReached();
+  const output = keyboard.utilities.isMaxLengthReached();
 
   expect(output).toBeFalsy();
 });
@@ -426,7 +426,7 @@ it('Keyboard isMaxLengthReached will work', () => {
 it('Keyboard removeAt will exit out on caretPosition:0', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.setInput("test");
   keyboard.caretPosition = 0;
@@ -442,7 +442,7 @@ it('Keyboard removeAt will exit out on caretPosition:0', () => {
 it('Keyboard removeAt will remove multi-byte unicodes with caretPos>0', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
 
   keyboard.caretPosition = 6;
   let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6);
@@ -456,7 +456,7 @@ it('Keyboard removeAt will remove multi-byte unicodes with caretPos>0', () => {
 it('Keyboard removeAt will not remove multi-byte unicodes with caretPos:0', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
   let output = keyboard.utilities.removeAt("\uD83D\uDE00");
   expect(output).toBeFalsy();
 
@@ -467,7 +467,7 @@ it('Keyboard removeAt will not remove multi-byte unicodes with caretPos:0', () =
 it('Keyboard removeAt will remove regular strings', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard({
+  const keyboard = new Keyboard({
     debug: true
   });
 
@@ -482,12 +482,12 @@ it('Keyboard removeAt will remove regular strings', () => {
 
 it('Keyboard will work with custom (and weird) class', () => {
   testUtil.setDOM("my--weird--class");
-  let keyboard = new Keyboard(".my--weird--class");
+  const keyboard = new Keyboard(".my--weird--class");
   expect(keyboard.keyboardDOMClass).toBe("my--weird--class");
 });
 
 it('Keyboard camelCase will work with empty strings', () => {
   testUtil.setDOM();
-  let keyboard = new Keyboard();
+  const keyboard = new Keyboard();
   expect(keyboard.utilities.camelCase()).toBeFalsy();
 });

src/utils/TestUtility.js

@@ -3,7 +3,7 @@
  */
 export default class TestUtility {
   /**
-   * Set's a basic DOM structure to test in
+   * Sets a basic DOM structure to test in
    */
   setDOM = (divClass) => {
     this.clear();
@@ -109,4 +109,4 @@ export default class TestUtility {
       });
     });
   }
-}
+}