npm update

[Angular] Fix return type of getButtonElement()

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.11.5
+ *   simple-keyboard v2.13.0
  *   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:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.hg-standardBtn{max-width:100px}.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}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.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}
+ */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:not(:last-child){margin-right:5px}.simple-keyboard .hg-button{display:inline-block;flex-grow:1;cursor:pointer}.hg-standardBtn{max-width:100px}.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}.simple-keyboard button.hg-button{border-width:0;outline:0;font-size:inherit}.simple-keyboard.hg-theme-default .hg-button:active{background:#e4e4e4}.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}
 /*# sourceMappingURL=index.css.map */

build/index.d.ts

@@ -0,0 +1,189 @@
+declare module 'simple-keyboard' {
+  interface KeyboardLayoutObject {
+    default: string[];
+    shift?: string[];
+  }
+
+  interface KeyboardButtonTheme {
+    class: string;
+    buttons: string;
+  }
+
+  interface KeyboardOptions {
+    /**
+     * Modify the keyboard layout.
+     */
+    layout?: KeyboardLayoutObject;
+
+    /**
+     * Specifies which layout should be used.
+     */
+    layoutName?: string;
+
+    /**
+     * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`).
+     */
+    display?: { [button: string]: string };
+
+    /**
+     * By default, when you set the display property, you replace the default one. This setting merges them instead.
+     */
+    mergeDisplay?: boolean;
+
+    /**
+     * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
+     */
+    theme?: string;
+
+    /**
+     * A prop to add your own css classes to one or several buttons.
+     */
+    buttonTheme?: KeyboardButtonTheme[];
+
+    /**
+     * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
+     */
+    debug?: boolean;
+
+    /**
+     * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
+     */
+    newLineOnEnter?: boolean;
+
+    /**
+     * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not.
+     */
+    tabCharOnTab?: boolean;
+
+    /**
+     * Allows you to use a single simple-keyboard instance for several inputs.
+     */
+    inputName?: string;
+
+    /**
+     * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     *
+     * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     */
+    maxLength?:
+      | number
+      | {
+          [inputName: string]: number;
+        };
+
+    /**
+     * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
+     */
+    syncInstanceInputs?: boolean;
+
+    /**
+     * Enable highlighting of keys pressed on physical keyboard.
+     */
+    physicalKeyboardHighlight?: boolean;
+
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Define the text color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightTextColor?: string;
+
+    /**
+     * Define the background color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightBgColor?: string;
+
+    /**
+     * Render buttons as a button element instead of a div element.
+     */
+    useButtonTag?: boolean;
+
+    /**
+     * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
+     */
+    onKeyPress?: (button: string) => any;
+
+    /**
+     * Executes the callback function on input change. Returns the current input's string.
+     */
+    onChange?: (input: string) => any;
+
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+    onRender?: () => void;
+
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+    onInit?: () => void;
+
+    /**
+     * Executes the callback function on input change. Returns the input object with all defined inputs.
+     */
+    onChangeAll?: (inputs: any) => any;
+  }
+
+  class Keyboard {
+    constructor(selector: string, options: KeyboardOptions);
+    constructor(options: KeyboardOptions);
+    options: KeyboardOptions;
+
+    /**
+     * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    addButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    removeButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Clear the keyboard's input.
+     *
+     * @param {string} [inputName] optional - the internal input to select
+     */
+    clearInput(inputName?: string): void;
+
+    /**
+     * Get the keyboard’s input (You can also get it from the onChange prop).
+     * @param  {string} [inputName] optional - the internal input to select
+     */
+    getInput(inputName?: string): string;
+
+    /**
+     * Set the keyboard’s input.
+     * @param  {string} input the input value
+     * @param  {string} inputName optional - the internal input to select
+     */
+    setInput(input: string, inputName?: string): void;
+
+    /**
+     * Set new option or modify existing ones after initialization.
+     * @param  {KeyboardOptions} option The option to set
+     */
+    setOptions(options: KeyboardOptions): void;
+
+    /**
+     * Send a command to all simple-keyboard instances at once (if you have multiple instances).
+     * @param  {function(instance: object, key: string)} callback Function to run on every instance
+     */
+    dispatch(callback: (instance: any, key: string) => void): void;
+
+    /**
+     * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
+     * @param  {string} button The button layout name to select
+     */
+    getButtonElement(button: string): HTMLElement | HTMLElement[];
+  }
+
+  export default Keyboard;
+}

config/paths.js

@@ -79,6 +79,7 @@ module.exports = {
   appPackageJson: resolveApp('package.json'),
   appSrc: resolveApp('src'),
   appSrcLib: resolveApp('src/lib'),
+  appSrcLibTypes: resolveApp('src/lib/@types'),
   appSrcDemo: resolveApp('src/demo'),
   appTsConfig: resolveApp('tsconfig.json'),
   yarnLockFile: resolveApp('yarn.lock'),

config/webpack.config.prod.js

@@ -21,6 +21,7 @@ const getClientEnvironment = require('./env');
 const ModuleNotFoundPlugin = require('react-dev-utils/ModuleNotFoundPlugin');
 const ForkTsCheckerWebpackPlugin = require('fork-ts-checker-webpack-plugin-alt');
 const typescriptFormatter = require('react-dev-utils/typescriptFormatter');
+const CopyWebpackPlugin = require('copy-webpack-plugin');
 const getPackageJson = require('./getPackageJson');
 
 
@@ -510,6 +511,12 @@ module.exports = {
     // https://github.com/jmblog/how-to-optimize-momentjs-with-webpack
     // You can remove this if you don't use Moment.js:
     new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/),
+    new CopyWebpackPlugin([
+      {
+        from: `${paths.appSrcLibTypes}`,
+        to: paths.appLayoutsBuild
+      }
+    ]),
     // Generate a service worker script that will precache, and keep up to date,
     // the HTML & assets that are part of the Webpack build.
     /*new WorkboxWebpackPlugin.GenerateSW({

package.json

@@ -1,8 +1,9 @@
 {
   "name": "simple-keyboard",
-  "version": "2.11.5",
+  "version": "2.13.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
+  "types": "build/index.d.ts",
   "scripts": {
     "start": "node scripts/start.js",
     "build": "node scripts/build.js",
@@ -38,59 +39,60 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.1.6",
-    "@babel/plugin-proposal-class-properties": "^7.1.0",
-    "@babel/preset-env": "^7.1.6",
+    "@babel/core": "7.2.2",
+    "@babel/plugin-proposal-class-properties": "^7.2.3",
+    "@babel/preset-env": "^7.2.0",
     "@babel/preset-react": "^7.0.0",
     "@svgr/webpack": "4.1.0",
     "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "9.0.0",
+    "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "babel-loader": "8.0.4",
-    "babel-plugin-named-asset-import": "^0.2.3",
-    "babel-preset-react-app": "^6.1.0",
+    "babel-plugin-named-asset-import": "^0.3.0",
+    "babel-preset-react-app": "^7.0.0",
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
-    "css-loader": "1.0.1",
-    "dotenv": "6.1.0",
+    "copy-webpack-plugin": "^4.6.0",
+    "css-loader": "2.0.2",
+    "dotenv": "6.2.0",
     "dotenv-expand": "4.2.0",
     "esdoc": "^1.1.0",
     "esdoc-ecmascript-proposal-plugin": "^1.0.0",
     "esdoc-standard-plugin": "^1.0.0",
-    "eslint": "5.9.0",
+    "eslint": "5.11.0",
     "eslint-config-react-app": "^3.0.5",
     "eslint-loader": "2.1.1",
-    "eslint-plugin-flowtype": "2.50.3",
+    "eslint-plugin-flowtype": "3.2.0",
     "eslint-plugin-import": "2.14.0",
     "eslint-plugin-jsx-a11y": "6.1.2",
     "eslint-plugin-react": "7.11.1",
-    "file-loader": "2.0.0",
+    "file-loader": "3.0.1",
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.1",
-    "html-webpack-plugin": "4.0.0-beta.4",
+    "html-webpack-plugin": "4.0.0-beta.5",
     "identity-obj-proxy": "3.0.0",
     "jest": "23.6.0",
     "jest-pnp-resolver": "1.0.2",
     "jest-resolve": "23.6.0",
-    "mini-css-extract-plugin": "0.4.4",
+    "mini-css-extract-plugin": "0.5.0",
     "optimize-css-assets-webpack-plugin": "5.0.1",
-    "pnp-webpack-plugin": "1.2.0",
+    "pnp-webpack-plugin": "1.2.1",
     "postcss-flexbugs-fixes": "4.1.0",
     "postcss-loader": "3.0.0",
-    "postcss-preset-env": "6.4.0",
+    "postcss-preset-env": "6.5.0",
     "postcss-safe-parser": "4.0.1",
-    "react": "^16.6.3",
-    "react-app-polyfill": "^0.1.3",
-    "react-dev-utils": "^6.1.1",
-    "react-dom": "^16.6.1",
-    "resolve": "1.8.1",
+    "react": "^16.7.0",
+    "react-app-polyfill": "^0.2.0",
+    "react-dev-utils": "^7.0.0",
+    "react-dom": "^16.7.0",
+    "resolve": "1.9.0",
     "sass-loader": "7.1.0",
     "style-loader": "0.23.1",
-    "terser-webpack-plugin": "1.1.0",
+    "terser-webpack-plugin": "1.2.0",
     "url-loader": "1.1.2",
-    "webpack": "4.26.1",
-    "webpack-dev-server": "3.1.10",
+    "webpack": "4.28.2",
+    "webpack-dev-server": "3.1.13",
     "webpack-manifest-plugin": "2.0.4",
     "workbox-webpack-plugin": "3.6.3"
   },
@@ -99,7 +101,6 @@
   },
   "browserslist": [
     ">0.2%",
-    "not dead",
     "not ie <= 11",
     "not op_mini all"
   ],

src/demo/App.js

@@ -31,7 +31,7 @@ class App {
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       newLineOnEnter: true,
-      physicalKeyboardHighlight: true,
+      physicalKeyboardHighlight: true
     });
   
     /**

src/demo/css/App.css

@@ -8,7 +8,7 @@
 #root .simple-keyboard-preview {
   background: rgba(0,0,0,0.8);
   border: 20px solid rgba(0,0,0,0.1);
-  height: 260px;
+  height: 200px;
   border-top-right-radius: 5px;
   border-top-left-radius: 5px;
   padding: 10px;

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

@@ -0,0 +1,189 @@
+declare module 'simple-keyboard' {
+  interface KeyboardLayoutObject {
+    default: string[];
+    shift?: string[];
+  }
+
+  interface KeyboardButtonTheme {
+    class: string;
+    buttons: string;
+  }
+
+  interface KeyboardOptions {
+    /**
+     * Modify the keyboard layout.
+     */
+    layout?: KeyboardLayoutObject;
+
+    /**
+     * Specifies which layout should be used.
+     */
+    layoutName?: string;
+
+    /**
+     * Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: `backspace`).
+     */
+    display?: { [button: string]: string };
+
+    /**
+     * By default, when you set the display property, you replace the default one. This setting merges them instead.
+     */
+    mergeDisplay?: boolean;
+
+    /**
+     * A prop to add your own css classes to the keyboard wrapper. You can add multiple classes separated by a space.
+     */
+    theme?: string;
+
+    /**
+     * A prop to add your own css classes to one or several buttons.
+     */
+    buttonTheme?: KeyboardButtonTheme[];
+
+    /**
+     * Runs a `console.log` every time a key is pressed. Displays the buttons pressed and the current input.
+     */
+    debug?: boolean;
+
+    /**
+     * Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
+     */
+    newLineOnEnter?: boolean;
+
+    /**
+     * Specifies whether clicking the "TAB" button will input a tab character (`\t`) or not.
+     */
+    tabCharOnTab?: boolean;
+
+    /**
+     * Allows you to use a single simple-keyboard instance for several inputs.
+     */
+    inputName?: string;
+
+    /**
+     * `number`: Restrains all of simple-keyboard inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     *
+     * `{ [inputName: string]: number }`: Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
+     */
+    maxLength?:
+      | number
+      | {
+          [inputName: string]: number;
+        };
+
+    /**
+     * When set to true, this option synchronizes the internal input of every simple-keyboard instance.
+     */
+    syncInstanceInputs?: boolean;
+
+    /**
+     * Enable highlighting of keys pressed on physical keyboard.
+     */
+    physicalKeyboardHighlight?: boolean;
+
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Define the text color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightTextColor?: string;
+
+    /**
+     * Define the background color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightBgColor?: string;
+
+    /**
+     * Render buttons as a button element instead of a div element.
+     */
+    useButtonTag?: boolean;
+
+    /**
+     * Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
+     */
+    onKeyPress?: (button: string) => any;
+
+    /**
+     * Executes the callback function on input change. Returns the current input's string.
+     */
+    onChange?: (input: string) => any;
+
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+    onRender?: () => void;
+
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+    onInit?: () => void;
+
+    /**
+     * Executes the callback function on input change. Returns the input object with all defined inputs.
+     */
+    onChangeAll?: (inputs: any) => any;
+  }
+
+  class Keyboard {
+    constructor(selector: string, options: KeyboardOptions);
+    constructor(options: KeyboardOptions);
+    options: KeyboardOptions;
+
+    /**
+     * Adds/Modifies an entry to the `buttonTheme`. Basically a way to add a class to a button.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    addButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Removes/Amends an entry to the `buttonTheme`. Basically a way to remove a class previously added to a button through buttonTheme or addButtonTheme.
+     * @param  {string} buttons List of buttons to select (separated by a space).
+     * @param  {string} className Classes to give to the selected buttons (separated by space).
+     */
+    removeButtonTheme(buttons: string, className: string): void;
+
+    /**
+     * Clear the keyboard's input.
+     *
+     * @param {string} [inputName] optional - the internal input to select
+     */
+    clearInput(inputName?: string): void;
+
+    /**
+     * Get the keyboard’s input (You can also get it from the onChange prop).
+     * @param  {string} [inputName] optional - the internal input to select
+     */
+    getInput(inputName?: string): string;
+
+    /**
+     * Set the keyboard’s input.
+     * @param  {string} input the input value
+     * @param  {string} inputName optional - the internal input to select
+     */
+    setInput(input: string, inputName?: string): void;
+
+    /**
+     * Set new option or modify existing ones after initialization.
+     * @param  {KeyboardOptions} option The option to set
+     */
+    setOptions(options: KeyboardOptions): void;
+
+    /**
+     * Send a command to all simple-keyboard instances at once (if you have multiple instances).
+     * @param  {function(instance: object, key: string)} callback Function to run on every instance
+     */
+    dispatch(callback: (instance: any, key: string) => void): void;
+
+    /**
+     * Get the DOM Element of a button. If there are several buttons with the same name, an array of the DOM Elements is returned.
+     * @param  {string} button The button layout name to select
+     */
+    getButtonElement(button: string): HTMLElement | HTMLElement[];
+  }
+
+  export default Keyboard;
+}

src/lib/components/Keyboard.css

@@ -57,6 +57,13 @@ body, html {
   justify-content: center;
  }
 
+ /* When using option "useButtonTag" */
+ .simple-keyboard button.hg-button {
+  border-width: 0;
+  outline: 0;
+  font-size: inherit;
+}
+
  .simple-keyboard.hg-theme-default .hg-button:active {
   background: #e4e4e4;
  }

src/lib/components/Keyboard.js

@@ -18,7 +18,7 @@ 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 keyboardDOMQuery = typeof params[0] === "string" ? params[0] : ".simple-keyboard";
     let options = typeof params[0] === "object" ? params[0] : params[1];
 
     if(!options)
@@ -58,6 +58,7 @@ class SimpleKeyboard {
      * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
+     * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
      */
     this.options = options;
     this.options.layoutName = this.options.layoutName || "default";
@@ -555,7 +556,7 @@ class SimpleKeyboard {
         instance.caretPosition = event.target.selectionStart;
 
         if(instance.options.debug){
-          console.log('Caret at: ', event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
+          console.log("Caret at: ", event.target.selectionStart, event.target.tagName.toLowerCase(), `(${instance.keyboardDOMClass})`);
       }     
     }
     });
@@ -621,7 +622,7 @@ class SimpleKeyboard {
         module.init(this);
       });
 
-      this.keyboardPluginClasses = this.keyboardPluginClasses + ' modules-loaded';
+      this.keyboardPluginClasses = this.keyboardPluginClasses + " modules-loaded";
 
       this.render();
       this.onModulesLoaded();
@@ -654,7 +655,7 @@ class SimpleKeyboard {
      */
     this.clear();
 
-    let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
+    let layoutClass = `hg-layout-${this.options.layoutName}`;
     let layout = this.options.layout || KeyboardLayout.getDefaultLayout();
     let useTouchEvents = this.options.useTouchEvents || false
 
@@ -668,7 +669,7 @@ class SimpleKeyboard {
           let themeButtons;
 
           if(typeof themeObj.buttons === "string"){
-            themeButtons = themeObj.buttons.split(' ');
+            themeButtons = themeObj.buttons.split(" ");
           }
 
           if(themeButtons){
@@ -701,12 +702,12 @@ class SimpleKeyboard {
      * Iterating through each row
      */
     layout[this.options.layoutName].forEach((row, rIndex) => {
-      let rowArray = row.split(' ');
+      let rowArray = row.split(" ");
 
       /**
        * Creating empty row
        */
-      var rowDOM = document.createElement('div');
+      let rowDOM = document.createElement("div");
       rowDOM.className += "hg-row";
 
       /**
@@ -720,7 +721,8 @@ class SimpleKeyboard {
         /**
          * Creating button
          */
-        var buttonDOM = document.createElement('div');
+        let buttonType = this.options.useButtonTag ? "button" : "div";
+        let buttonDOM = document.createElement(buttonType);
         buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
         
         if (useTouchEvents) {
@@ -761,7 +763,7 @@ class SimpleKeyboard {
         /**
          * Adding button label to button
          */
-        var buttonSpanDOM = document.createElement('span');
+        let buttonSpanDOM = document.createElement('span');
         buttonSpanDOM.innerHTML = buttonDisplayName;
         buttonDOM.appendChild(buttonSpanDOM);
 

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

@@ -137,7 +137,9 @@ it('Keyboard onKeyPress will work', () => {
 it('Keyboard standard function buttons will not change input', () => {
   testUtil.setDOM();
 
-  let keyboard = new Keyboard();
+  let keyboard = new Keyboard({
+    useButtonTag: true
+  });
 
   testUtil.iterateButtons((button) => {
     if(button.getAttribute("data-skbtn") === "{shift}"){