Build update

Bumps [@testing-library/user-event](https://github.com/testing-library/user-event) from 13.0.1 to 13.0.2.
- [Release notes](https://github.com/testing-library/user-event/releases)
- [Changelog](https://github.com/testing-library/user-event/blob/master/CHANGELOG.md)
- [Commits](https://github.com/testing-library/user-event/compare/v13.0.1...v13.0.2)

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

.eslintignore

@@ -0,0 +1,2 @@
+build/*
+/**/*.d.ts

.eslintrc.json

@@ -0,0 +1,31 @@
+{
+    "parser": "@typescript-eslint/parser",
+    "parserOptions": {
+        "ecmaVersion": 6,
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "modules": true,
+            "experimentalObjectRestSpread": true
+        }
+    },
+    "plugins": ["@typescript-eslint"],
+    "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended"],
+    "rules": {
+        "comma-dangle": 0,
+        "no-unused-vars": "warn",
+        "no-unexpected-multiline": "warn",
+        "prefer-const": "warn",
+        "@typescript-eslint/no-empty-function": "off",
+        "@typescript-eslint/explicit-module-boundary-types": "off",
+        "@typescript-eslint/no-explicit-any": "off",
+        "@typescript-eslint/no-var-requires": "off"
+    },
+    "settings": {},
+    "env": {
+        "browser": true,
+        "node": true,
+        "jasmine": true,
+        "jest": true,
+        "es6": true
+    }
+}

.github/FUNDING.yml

@@ -0,0 +1 @@
+custom: https://hge.to/thanks

.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,17 @@
+---
+name: Bug report
+about: Create a report to help improve simple-keyboard
+title: ''
+labels: ''
+assignees: hodgef
+
+---
+
+**Simple-keyboard version**
+As some bugs have been addressed in later versions, please ensure you are running the latest.
+
+**Describe the bug**
+A clear and concise description of what the bug is. Providing a [sandbox example](https://codesandbox.io/s/vanilla) or code depicting the issue is important, as this will help us reproduce the issue.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,20 @@
+---
+name: Feature request
+about: Suggest an idea you'd like to see in simple-keyboard
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/github.md

@@ -0,0 +1,4 @@
+# About .github
+
+This directory handles special features to be used on simple-keyboard's Github repository.
+It is not needed for simple-keyboard to run and can be safely removed.

.github/pull_request_template.md

@@ -0,0 +1,7 @@
+## Description
+
+A few sentences describing the overall goals of the pull request's commits.
+
+## Checks
+
+- [ ] Tests ( `npm run test -- --coverage` ) Coverage at `./coverage/lcov-report/index.html` should be 100%

.github/stale.yml

@@ -0,0 +1,19 @@
+# Number of days of inactivity before an issue becomes stale
+daysUntilStale: 5
+# Number of days of inactivity before a stale issue is closed
+daysUntilClose: 2
+# Issues with these labels will never be considered stale
+exemptLabels:
+  - pinned
+  - security
+  - "💥 Bug"
+  - "⚡️ Enhancement"
+# Label to use when marking an issue as stale
+staleLabel: Stale
+# Comment to post when marking an issue as stale. Set to `false` to disable
+markComment: >
+  This issue has been automatically marked as stale because it has not had
+  recent activity. It will be closed if no further activity occurs. Thank you
+  for your contributions.
+# Comment to post when closing a stale issue. Set to `false` to disable
+closeComment: false

.github/workflows/main.yml

@@ -0,0 +1,41 @@
+name: Build
+on: [push]
+
+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 coverage
+      - uses: codecov/codecov-action@v1.0.2
+        with:
+          token: ${{secrets.CODECOV_TOKEN}}
+        env:
+          CI: true
+
+      - name: Discord notification
+        if: success()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: "simple-keyboard - CI Build Passed"
+
+      - name: Discord notification
+        if: failure()
+        env:
+          DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
+        uses: Ilshidur/action-discord@master
+        with:
+          args: "simple-keyboard - CI Build Failed"

.github/workflows/mirroring.yml

@@ -0,0 +1,15 @@
+name: Mirroring
+
+on: [push, delete]
+
+jobs:
+  mirroring:
+    runs-on: ubuntu-18.04
+    steps:
+    - uses: actions/checkout@v1
+    - uses: pixta-dev/repository-mirroring-action@v1
+      with:
+        target_repo_url:
+          git@gitlab.com:hodgef/simple-keyboard.git
+        ssh_private_key:
+          ${{ secrets.GL_KEY }}

.github/workflows/publish.yml

@@ -0,0 +1,45 @@
+name: Publish
+
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  publish:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v1
+      - uses: actions/setup-node@v1
+        with:
+          node-version: 12
+      - run: npm install
+      - run: npm run test -- --coverage --watchAll=false
+        
+      - name: Setup GIT
+        run: |
+          git reset --hard
+          git config --local --list
+          git checkout master
+          git config user.email "$GH_EMAIL"
+          git config user.name "Francisco Hodge"
+        env:
+            GH_EMAIL: ${{secrets.GH_EMAIL}}
+          
+      - name: Bump version
+        run: |
+          git reset --hard
+          npm version patch
+          npm run build
+          git add . || true
+          git commit -m "Build update" || true
+          git push "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY"
+        env:
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+          
+      - name: npm publish
+        run: |
+          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
+          npm run trypublish
+        env:
+            NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.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

.gitignore

@@ -1,10 +1,9 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 
 # dependencies
 /node_modules
-
-# production
-/demo
+/.pnp
+.pnp.js
 
 # testing
 /coverage
@@ -15,6 +14,7 @@
 .env.development.local
 .env.test.local
 .env.production.local
+.vscode
 
 npm-debug.log*
 yarn-debug.log*

.npmignore

@@ -2,14 +2,21 @@
 /node_modules
 
 # testing
+/tests
 /coverage
 
+# docs
+/docs
+
 # misc
 .DS_Store
 .env.local
 .env.development.local
 .env.test.local
 .env.production.local
+/.github
+/demo
+.esdoc.json
 
 npm-debug.log*
 yarn-debug.log*
@@ -23,3 +30,7 @@ config
 .travis.yml
 CHANGELOG.md
 README.md
+.eslintignore
+.eslintrc.json
+webpack.config.js
+babel.config.js

.travis.yml

@@ -1,5 +0,0 @@
-language: node_js
-node_js:
- - "node"
-script:
- - npm run test

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at opensource@hodgef.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1,15 @@
+# Contributing
+
+When contributing to this repository, please first discuss the change you wish to make via issue,
+email, or any other method with the owners of this repository before working on a change. 
+
+Please note we have a code of conduct, please follow it in all your interactions with the project.
+
+## Pull Request Guidelines
+
+1. Please ensure your proposal will not radically change current functionality or bring along breaking changes.
+2. PRs only consisting of typo fixes (or other automated contributions), will not be accepted.
+3. Do not add any dependencies to the project.
+4. Document your changes thoroughly.
+5. Ensure coverage is complete (`npm run coverage` should show 100% coverage) and that none of the tests fail.
+6. Be reactive to any comments, reviews or change requests entered in your pull request.

LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2018 Francisco Hodge
+Copyright (c) 2019 Francisco Hodge and project contributors.
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.md

@@ -1,373 +1,90 @@
-# simple-keyboard
+<p>
+  <a href="https://simple-keyboard.com/demo">
+	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
+  </a>
+	
+  <a href="https://www.npmjs.com/package/simple-keyboard">
+    <img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version">
+  </a>
 
-[![npm](https://img.shields.io/npm/v/simple-keyboard.svg)](https://www.npmjs.com/package/simple-keyboard)
+  <a href="https://github.com/hodgef/simple-keyboard/actions">
+     <img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg?color=green" />
+  </a>
+  
+  <a href="https://github.com/hodgef/simple-keyboard/actions">
+     <img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg?color=green" />
+  </a>
 
-<a href="https://franciscohodge.com/projects/simple-keyboard/"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/simple-keyboard.png" align="center"></a>
-> The easily customisable and responsive on-screen virtual keyboard for Javascript projects.
+  <a href="https://bundlephobia.com/result?p=simple-keyboard">
+    <img src="https://badgen.net/bundlephobia/minzip/simple-keyboard/?color=green" alt="install size">
+  </a>
+  
+  <a href="https://david-dm.org/hodgef/simple-keyboard">
+    <img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
+  </a>
 
-<a href="https://franciscohodge.com/simple-keyboard/demo" title="View Demo"><img src="https://franciscohodge.com/project-pages/simple-keyboard/images/k2.png" align="center" width="100%"></a>
+  <a href="https://codecov.io/gh/hodgef/simple-keyboard">
+    <img src="https://badgen.net/codecov/c/github/hodgef/simple-keyboard" alt="coverage">
+  </a>
+</p>
 
+<blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
 
-## Installation
+## Demo 🚀
 
-### npm
+[Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)
 
-`npm install simple-keyboard --save`
+## Installation & Usage 📦
 
-### zip file (self-hosted)
+You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm.
 
-[Click here to download the latest release (zip format).](https://github.com/hodgef/simple-keyboard/zipball/master)
+Check out the [Getting Started](https://simple-keyboard.com/getting-started) docs to begin.
 
-> Want to use a CDN instead of self-host? Scroll down to the "Usage with CDN" instructions below.
+## Documentation 📖
 
-## Usage with npm
+Check out the [simple-keyboard documentation](https://simple-keyboard.com/documentation) site.
 
-### js
-
-````js
-import Keyboard from 'simple-keyboard';
-import 'simple-keyboard/build/css/index.css';
-
-let keyboard = new Keyboard({
-  onChange: input => this.onChange(input),
-  onKeyPress: button => this.onKeyPress(button)
-});
-
-function onChange(input){
-  document.querySelector(".input").value = input;
-  console.log("Input changed", input);
-}
-
-function onKeyPress(button){
-  console.log("Button pressed", button);
-}
-````
-
-### html
-
-````html
-<input class="input" />
-<div class="simple-keyboard"></div>
-````
-
-[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
-
-> Need a more extensive example? [Click here](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/App.js).
-
-## Usage with CDN
-
-### html
-
-````html
-<html>
-<head>
-  <link rel="stylesheet" href="https://cdn.rawgit.com/hodgef/simple-keyboard/0581247fbeda4b2fb670ceaf3facebd3258fa04f/build/css/index.css">
-</head>
-
-<body>
-  <input class="input" placeholder="Tap on the virtual keyboard to start" />
-  <div class="simple-keyboard"></div>
-
-  <script src="https://cdn.rawgit.com/hodgef/simple-keyboard/d88912cd23d224a22a38da34cac7b645c6a8560c/build/index.js"></script>
-  <script src="src/index.js"></script>
-</body>
-
-</html>
-````
-
-### js (index.js)
-
-````js
-let Keyboard = window.SimpleKeyboard.default;
-
-let myKeyboard = new Keyboard({
-  onChange: input => onChange(input),
-  onKeyPress: button => onKeyPress(button)
-});
-
-function onChange(input) {
-  document.querySelector(".input").value = input;
-  console.log("Input changed", input);
-}
-
-function onKeyPress(button) {
-  console.log("Button pressed", button);
-}
-````
-
-[![Edit 6n0wzxjmjk](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/6n0wzxjmjk)
-
-## Options
-
-You can customize the Keyboard by passing options to it.
-Here are the available options (the code examples are the defaults):
-
-### layout
-
-> Modify the keyboard layout
-
-```js
-layout: {
-  '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}'
-  ]
-}
-```
-
-### layoutName
-
-> Specifies which layout should be used.
-
-```js
-layoutName: "default"
-```
-
-### display
-
-> Replaces variable buttons (such as `{bksp}`) with a human-friendly name (e.g.: "delete").
-
-```js
-display: {
-  '{bksp}': 'delete',
-  '{enter}': '< enter',
-  '{shift}': 'shift',
-  '{s}': 'shift',
-  '{tab}': 'tab',
-  '{lock}': 'caps',
-  '{accept}': 'Submit',
-  '{space}': ' ',
-  '{//}': ' '
-}
-```
-
-### theme
-
-> A prop to add your own css classes _to the keyboard wrapper_. You can add multiple classes separated by a space.
-
-```js
-theme: "hg-theme-default"
-```
-
-### buttonTheme
-
-> A prop to add your own css classes _to one or several buttons_. You can add multiple classes separated by a space.
-
-```js
-buttonTheme: [
-  {
-    class: "myCustomClass",
-    buttons: "Q W E R T Y q w e r t y"
-  },
-  {
-    class: "anotherCustomClass",
-    buttons: "Q q"
-  },
-  ...
-]
-```
-
-[![Edit simple-keyboard customization demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/vj8jvz2q4l?module=%2Fsrc%2Findex.js)
-
-
-### debug
-
-> Runs a console.log every time a key is pressed. Displays the buttons pressed and the current input.
-
-```js
-debug: false
-```
-
-### newLineOnEnter
-
-> Specifies whether clicking the "ENTER" button will input a newline (`\n`) or not.
-
-```js
-newLineOnEnter: false
-```
-
-### inputName
-
-> Allows you to use a single simple-keyboard instance for several inputs. 
-
-```js
-inputName: "default"
-```
-
-### onKeyPress
-
-> Executes the callback function on key press. Returns button layout name (i.e.: "{shift}").
-
-```js
-onKeyPress: (button) => console.log(button)
-```
-
-### onChange
-
-> Executes the callback function on input change. Returns the current input's string.
-
-```js
-onChange: (input) => console.log(input)
-```
-
-### onChangeAll
-
-> Executes the callback function on input change. Returns the input object with all defined inputs. This is useful if you're handling several inputs with simple-keyboard, as specified in the "*[Using several inputs](#using-several-inputs)*" guide.
-
-```js
-onChangeAll: (inputs) => console.log(inputs)
-```
-
-## Methods
-
-simple-keyboard has a few methods you can use to further control it's behavior.
-To access these functions, you need the instance the simple-keyboard component, like so:
-
-```js
-var keyboard = new Keyboard({
-  ...
-});
-/>
-
-// Then, use as follows...
-keyboard.methodName(params);
-```
-
-### clearInput
-
-> Clear the keyboard's input.
-
-```js
-// For default input (i.e. if you have only one)
-keyboard.clearInput();
-
-// For specific input
-// Must have been previously set using the "inputName" prop.
-keyboard.clearInput("inputName");
-```
-
-### getInput
-
-> Get the keyboard's input (You can also get it from the _onChange_ prop).
-
-```js
-// For default input (i.e. if you have only one)
-let input = keyboard.getInput();
-
-// For specific input
-// Must have been previously set using the "inputName" prop.
-let input = keyboard.getInput("inputName");
-```
-
-### setInput
-
-> Set the keyboard's input. Useful if you want to track input changes made outside simple-keyboard.
-
-```js
-// For default input (i.e. if you have only one)
-keyboard.setInput("Hello World!");
-
-// For specific input
-// Must have been previously set using the "inputName" prop.
-keyboard.setInput("Hello World!", "inputName");
-```
-
-### setOptions
-
-> Set new option or modify existing ones after initialization. The changes are applied immediately.
-
-```js
-keyboard.setOptions({
-  theme: "my-custom-theme"
-});
-```
-
-## Use-cases
-
-### Using several inputs
-
-Set the *[inputName](#inputname)* option for each input you want to handle with simple-keyboard.
-
-For example:
-
-```html
-  <input class="input" id="input1" value=""/>
-  <input class="input" id="input2" value=""/>
-```
-
-```js
-  // Here we'll store the input id that simple-keyboard will be using.
-  var selectedInput;
-
-  // Initialize simple-keyboard as usual
-  var keyboard = new Keyboard({
-    onChange: input => onChange(input)
-  });
-
-  // Add an event listener for the inputs to be tracked
-  document.querySelectorAll('.input')
-    .forEach(input => input.addEventListener('focus', onInputFocus));
-
-  /**
-   * When an input is focused, it will be marked as selected (selectedInput)
-   * This is so we can replace it's value on the onChange function
-   *
-   * Also, we will set the inputName option to a unique string identifying the input (id)
-   * simple-keyboard save the input in this key and report changes through onChange
-   */
-  onInputFocus = event => {
-    // Setting input as selected
-    selectedInput = `#${event.target.id}`;
-
-    // Set the inputName option on the fly !
-    keyboard.setOptions({
-      inputName: event.target.id
-    });
-  }
-
-  // When the current input is changed, this is called
-  onChange = input => {
-    // If the input is not defined, grabbing the first ".input".
-    let currentInput = selectedInput || '.input';
-
-    // Updating the selected input's value
-    document.querySelector(currentInput).value = input;
-  }
-
-```
-
-> [See full example](https://github.com/hodgef/simple-keyboard/blob/master/src/demo/MultipleInputsDemo.js).
-
-[![Edit simple-keyboard multiple inputs demo - npm](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/43nm6v4xyx?module=%2Fsrc%2Findex.js)
-
-## Demo
-
-[https://franciscohodge.com/simple-keyboard/demo](https://franciscohodge.com/simple-keyboard/demo)
-
-[![Edit krzkx19rr](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/krzkx19rr)
+Feel free to browse the [Questions & Answers (FAQ)](https://simple-keyboard.com/qa-use-cases/) page for common use-cases.
 
 ### To run demo on your own computer
 
-* Clone this repository
-* `npm install`
-* `npm start`
-* Visit [http://localhost:3000/](http://localhost:3000/)
+- Clone this repository
+- `npm install`
+- `npm start`
+- Visit [http://localhost:3000/](http://localhost:3000/)
 
 ### Other versions
 
-* ReactJS - [react-simple-keyboard](https://github.com/hodgef/react-simple-keyboard)
+- [React.js](https://github.com/hodgef/react-simple-keyboard)
+- [Angular](https://simple-keyboard.com/demo)
+- [Vue.js](https://simple-keyboard.com/demo)
 
-## Contributing
+### Questions? Join the chat
 
-PR's and issues are welcome. Feel free to submit any issues you have at:
+<a href="https://discordapp.com/invite/SJexsCG" title="Join our Discord chat" target="_blank"><img src="https://discordapp.com/api/guilds/498978399801573396/widget.png?style=banner2" align="center"></a>
+
+## Modules ✳️
+
+You can extend simple-keyboard's functionality with [modules](https://hodgef.com/simple-keyboard/modules/). Such as:
+
+- [Autocorrect](https://hodgef.com/simple-keyboard/modules/autocorrect/)
+- [Input Mask](https://hodgef.com/simple-keyboard/modules/input-mask/)
+- [Key Navigation](https://hodgef.com/simple-keyboard/modules/key-navigation/)
+- [Swipe Keyboard](https://hodgef.com/simple-keyboard/modules/swipe-keyboard/)
+
+Want to create your own module? Check out the [Modules page](https://hodgef.com/simple-keyboard/modules/) for instructions.
+
+## Compatibility 🎯
+
+- Internet Explorer 11
+- Edge (Spartan) 16+
+- Edge (Anaheim/Edge Chromium) 79+
+- Chrome 49+
+- Safari 9+
+- Firefox 57+
+- iOS 9+
+
+## Contributing ✅
+
+PRs and issues are always welcome. Feel free to submit any issues you have at:
 [https://github.com/hodgef/simple-keyboard/issues](https://github.com/hodgef/simple-keyboard/issues)

babel.config.js

@@ -0,0 +1,22 @@
+module.exports = {
+  presets: [
+    ["@babel/env", {
+      corejs:"3",
+      useBuiltIns: 'usage',
+      "targets": {
+        "browsers": [
+          "edge >= 16",
+          "safari >= 9",
+          "firefox >= 57",
+          "ie >= 11",
+          "ios >= 9",
+          "chrome >= 49"
+        ]
+      },
+    }]
+  ],
+  plugins: [
+    ["@babel/plugin-proposal-class-properties"],
+    ["@babel/plugin-transform-typescript"]
+  ]
+};

build/css/index.css

@@ -1,2 +1,11 @@
-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;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden;-ms-touch-action:manipulation;touch-action:manipulation}.simple-keyboard .hg-row{display:-ms-flexbox;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;-ms-flex-positive:1;flex-grow:1;cursor:pointer}.simple-keyboard.hg-layout-default .hg-button.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{-webkit-box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-shadow:0 0 3px -1px rgba(0,0,0,.3);height:40px;border-radius:5px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:5px;background:#fff;border-bottom:1px solid #b5b5b5}.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;-ms-flex-align:center;align-items:center;display:-ms-flexbox;display:flex;-ms-flex-pack:center;justify-content:center}
-/*# sourceMappingURL=index.css.map*/
+/*!
+ * 
+ *   simple-keyboard v3.0.0
+ *   https://github.com/hodgef/simple-keyboard
+ *
+ *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
+ *
+ *   This source code is licensed under the MIT license found in the
+ *   LICENSE file in the root directory of this source tree.
+ *
+ */.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;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 span{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;outline:0;font-size:inherit}.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-standardBtn{width:20px}.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}.hg-candidate-box{display:inline-flex;border-radius:5px;position:absolute;background:#ececec;border-bottom:2px solid #b5b5b5;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;max-width:272px;transform:translateY(-100%);margin-top:-10px}ul.hg-candidate-box-list{display:flex;list-style:none;padding:0;margin:0;flex:1}li.hg-candidate-box-list-item{height:40px;width:40px;display:flex;align-items:center;justify-content:center}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{display:flex;align-items:center;padding:0 10px;background:#d0d0d0;color:#969696;cursor:pointer}.hg-candidate-box-next{border-top-right-radius:5px;border-bottom-right-radius:5px}.hg-candidate-box-prev{border-top-left-radius:5px;border-bottom-left-radius:5px}.hg-candidate-box-btn-active{color:#444}

build/css/index.css.map

@@ -1 +0,0 @@
-{"version":3,"sources":["webpack:///./src/lib/components/Keyboard.css"],"names":[],"mappings":"AAAA,UACE,SACA,SAAW,CAGb,iBACE,6GACA,WACA,yBACG,sBACC,qBACI,iBACR,8BACQ,sBACR,gBACA,8BACI,yBAA2B,CAGjC,yBACE,oBACA,YAAc,CAGhB,0CACE,iBAAmB,CAGrB,qDACE,gBAAkB,CAGpB,4BACE,qBACA,oBACI,YACJ,cAAgB,CAGlB,6DACE,eAAiB,CAMnB,kCACE,gCACA,YACA,iBAAmB,CAGrB,6CACE,+CACQ,uCACR,YACA,kBACA,8BACQ,sBACR,YACA,gBACA,+BAAiC,CAGlC,oDACC,kBAAoB,CAGtB,+DACE,YACA,YACA,sBACI,mBACJ,oBACA,aACA,qBACI,sBAAwB","file":"css/index.css","sourcesContent":["body, html {\r\n  margin: 0;\r\n  padding: 0;\r\n}\r\n\r\n.simple-keyboard {\r\n  font-family: \"HelveticaNeue-Light\", \"Helvetica Neue Light\", \"Helvetica Neue\", Helvetica, Arial, \"Lucida Grande\", sans-serif;\r\n  width: 100%;\r\n  -webkit-user-select: none;\r\n     -moz-user-select: none;\r\n      -ms-user-select: none;\r\n          user-select: none;\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  overflow: hidden;\r\n  -ms-touch-action: manipulation;\r\n      touch-action: manipulation;\r\n}\r\n\r\n.simple-keyboard .hg-row {\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n}\r\n\r\n.simple-keyboard .hg-row:not(:last-child) {\r\n  margin-bottom: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-row .hg-button:not(:last-child) {\r\n  margin-right: 5px;\r\n}\r\n\r\n.simple-keyboard .hg-button {\r\n  display: inline-block;\r\n  -ms-flex-positive: 1;\r\n      flex-grow: 1;\r\n  cursor: pointer;\r\n}\r\n\r\n.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {\r\n  max-width: 100px;\r\n}\r\n\r\n/**\r\n * hg-theme-default theme\r\n */\r\n.simple-keyboard.hg-theme-default {\r\n  background-color: rgba(0,0,0,0.1);\r\n  padding: 5px;\r\n  border-radius: 5px;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default .hg-button {\r\n  -webkit-box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n          box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);\r\n  height: 40px;\r\n  border-radius: 5px;\r\n  -webkit-box-sizing: border-box;\r\n          box-sizing: border-box;\r\n  padding: 5px;\r\n  background: white;\r\n  border-bottom: 1px solid #b5b5b5;\r\n }\r\n\r\n .simple-keyboard.hg-theme-default .hg-button:active {\r\n  background: #e4e4e4;\r\n }\r\n\r\n.simple-keyboard.hg-theme-default.hg-layout-numeric .hg-button {\r\n  width: 33.3%;\r\n  height: 60px;\r\n  -ms-flex-align: center;\r\n      align-items: center;\r\n  display: -ms-flexbox;\r\n  display: flex;\r\n  -ms-flex-pack: center;\r\n      justify-content: center;\r\n}\n\n\n// WEBPACK FOOTER //\n// ./src/lib/components/Keyboard.css"],"sourceRoot":""}

build/types/components/CandidateBox.d.ts

@@ -0,0 +1,14 @@
+import "./css/CandidateBox.css";
+import Utilities from "../services/Utilities";
+import { CandidateBoxParams, CandidateBoxRenderParams, CandidateBoxShowParams } from "./../interfaces";
+declare class CandidateBox {
+    utilities: Utilities;
+    candidateBoxElement: HTMLDivElement;
+    pageIndex: number;
+    pageSize: number;
+    constructor({ utilities }: CandidateBoxParams);
+    destroy(): void;
+    show({ candidateValue, targetElement, onSelect, }: CandidateBoxShowParams): void;
+    renderPage({ candidateListPages, targetElement, pageIndex, nbPages, onItemSelected, }: CandidateBoxRenderParams): void;
+}
+export default CandidateBox;

build/types/components/Keyboard.d.ts

@@ -0,0 +1,277 @@
+import "./css/Keyboard.css";
+import PhysicalKeyboard from "../services/PhysicalKeyboard";
+import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement, KeyboardParams } from "../interfaces";
+import CandidateBox from "./CandidateBox";
+/**
+ * Root class for simple-keyboard.
+ * This class:
+ * - Parses the options
+ * - Renders the rows and buttons
+ * - Handles button functionality
+ */
+declare class SimpleKeyboard {
+    input: KeyboardInput;
+    options: KeyboardOptions;
+    utilities: any;
+    caretPosition: number;
+    caretPositionEnd: number;
+    keyboardDOM: KeyboardElement;
+    keyboardPluginClasses: string;
+    keyboardDOMClass: string;
+    buttonElements: KeyboardButtonElements;
+    currentInstanceName: string;
+    allKeyboardInstances: {
+        [key: string]: SimpleKeyboard;
+    };
+    keyboardInstanceNames: string[];
+    isFirstKeyboardInstance: boolean;
+    physicalKeyboard: PhysicalKeyboard;
+    modules: {
+        [key: string]: any;
+    };
+    activeButtonClass: string;
+    holdInteractionTimeout: number;
+    holdTimeout: number;
+    isMouseHold: boolean;
+    initialized: boolean;
+    candidateBox: CandidateBox;
+    keyboardRowsDOM: KeyboardElement;
+    /**
+     * Creates an instance of 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: KeyboardParams);
+    /**
+     * parseParams
+     */
+    handleParams: (params: KeyboardParams) => {
+        keyboardDOMClass: string;
+        keyboardDOM: KeyboardElement;
+        options: Partial<KeyboardOptions>;
+    };
+    /**
+     * Getters
+     */
+    getOptions: () => KeyboardOptions;
+    getCaretPosition: () => number;
+    getCaretPositionEnd: () => number;
+    /**
+     * Changes the internal caret position
+     * @param {number} position The caret's start position
+     * @param {number} positionEnd The caret's end position
+     */
+    setCaretPosition(position: number, endPosition?: number): void;
+    /**
+     * Retrieve the candidates for a given input
+     * @param input The input string to check
+     */
+    getInputCandidates(input: string): {
+        candidateKey: string;
+        candidateValue: string;
+    } | Record<string, never>;
+    /**
+     * Shows a suggestion box with a list of candidate words
+     * @param candidates The chosen candidates string as defined in the layoutCandidates option
+     * @param targetElement The element next to which the candidates box will be shown
+     */
+    showCandidatesBox(candidateKey: string, candidateValue: string, targetElement: KeyboardElement): void;
+    /**
+     * Handles clicks made to keyboard buttons
+     * @param  {string} button The button's layout name.
+     */
+    handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void;
+    /**
+     * Handles button mousedown
+     */
+    handleButtonMouseDown(button: string, e: KeyboardHandlerEvent): void;
+    /**
+     * Handles button mouseup
+     */
+    handleButtonMouseUp(button?: string, e?: KeyboardHandlerEvent): void;
+    /**
+     * Handles container mousedown
+     */
+    handleKeyboardContainerMouseDown(e: KeyboardHandlerEvent): void;
+    /**
+     * Handles button hold
+     */
+    handleButtonHold(button: string): void;
+    /**
+     * Send a command to all simple-keyboard instances (if you have several instances).
+     */
+    syncInstanceInputs(): 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, skipSync?: boolean): string;
+    /**
+     * Get all simple-keyboard inputs
+     */
+    getAllInputs(): KeyboardInput;
+    /**
+     * 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, skipSync?: boolean): void;
+    /**
+     * Replace the input object (`keyboard.input`)
+     * @param  {object} inputObj The input object
+     */
+    replaceInput(inputObj: KeyboardInput): void;
+    /**
+     * Set new option or modify existing ones after initialization.
+     * @param  {object} options The options to set
+     */
+    setOptions(options?: {}): void;
+    /**
+     * Detecting changes to non-function options
+     * This allows us to ascertain whether a button re-render is needed
+     */
+    changedOptions(newOptions: Partial<KeyboardOptions>): string[];
+    /**
+     * Executing actions depending on changed options
+     * @param  {object} options The options to set
+     */
+    onSetOptions(changedOptions?: string[]): void;
+    /**
+     * Remove all keyboard rows and reset keyboard values.
+     * Used internally between re-renders.
+     */
+    resetRows(): 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: SimpleKeyboard, key?: string) => void): void;
+    /**
+     * 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;
+    /**
+     * 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): KeyboardElement | KeyboardElement[];
+    /**
+     * This handles the "inputPattern" option
+     * by checking if the provided inputPattern passes
+     */
+    inputPatternIsValid(inputVal: string): boolean;
+    /**
+     * Handles simple-keyboard event listeners
+     */
+    setEventListeners(): void;
+    /**
+     * Event Handler: KeyUp
+     */
+    handleKeyUp(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: KeyDown
+     */
+    handleKeyDown(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: MouseUp
+     */
+    handleMouseUp(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: TouchEnd
+     */
+    handleTouchEnd(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: Select
+     */
+    handleSelect(event: KeyboardHandlerEvent): void;
+    /**
+     * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
+     */
+    caretEventHandler(event: KeyboardHandlerEvent): void;
+    /**
+     * Execute an operation on each button
+     */
+    recurseButtons(fn: any): void;
+    /**
+     * Destroy keyboard listeners and DOM elements
+     */
+    destroy(): void;
+    /**
+     * Process buttonTheme option
+     */
+    getButtonThemeClasses(button: string): string[];
+    /**
+     * Process buttonAttributes option
+     */
+    setDOMButtonAttributes(button: string, callback: any): void;
+    onTouchDeviceDetected(): void;
+    /**
+     * Disabling contextual window for hg-button
+     */
+    disableContextualWindow(): void;
+    /**
+     * Process autoTouchEvents option
+     */
+    processAutoTouchEvents(): void;
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+    onInit(): void;
+    /**
+     * Executes the callback function before a simple-keyboard render.
+     */
+    beforeFirstRender(): void;
+    /**
+     * Executes the callback function before a simple-keyboard render.
+     */
+    beforeRender(): void;
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+    onRender(): void;
+    /**
+     * Executes the callback function once all modules have been loaded
+     */
+    onModulesLoaded(): void;
+    /**
+     * Register module
+     */
+    registerModule: (name: string, initCallback: any) => void;
+    /**
+     * Load modules
+     */
+    loadModules(): void;
+    /**
+     * Get module prop
+     */
+    getModuleProp(name: string, prop: string): any;
+    /**
+     * getModulesList
+     */
+    getModulesList(): string[];
+    /**
+     * Parse Row DOM containers
+     */
+    parseRowDOMContainers(rowDOM: HTMLDivElement, rowIndex: number, containerStartIndexes: number[], containerEndIndexes: number[]): HTMLDivElement;
+    /**
+     * getKeyboardClassString
+     */
+    getKeyboardClassString: (...baseDOMClasses: any[]) => string;
+    /**
+     * Renders rows and buttons as per options
+     */
+    render(): void;
+}
+export default SimpleKeyboard;

build/types/index.d.ts

@@ -0,0 +1,3 @@
+import "./polyfills";
+import SimpleKeyboard from "./components/Keyboard";
+export default SimpleKeyboard;

build/types/interfaces.d.ts

@@ -0,0 +1,200 @@
+import SimpleKeyboard from "./components/Keyboard";
+import Utilities from "./services/Utilities";
+export interface KeyboardLayoutObject {
+    [key: string]: string[];
+}
+export interface KeyboardButtonTheme {
+    class: string;
+    buttons: string;
+}
+export interface KeyboardButtonAttributes {
+    attribute: string;
+    value: string;
+    buttons: string;
+}
+export interface KeyboardInput {
+    [key: string]: string;
+}
+export declare type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
+export declare type CandidateBoxParams = {
+    utilities: Utilities;
+};
+export declare type CandidateBoxShowParams = {
+    candidateValue: string;
+    targetElement: KeyboardElement;
+    onSelect: (selectedCandidate: string) => void;
+};
+export declare type CandidateBoxRenderParams = {
+    candidateListPages: string[][];
+    targetElement: KeyboardElement;
+    pageIndex: number;
+    nbPages: number;
+    onItemSelected: (selectedCandidate: string) => void;
+};
+export declare type KeyboardElement = HTMLDivElement | HTMLButtonElement;
+export declare type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & {
+    target: HTMLDivElement & HTMLInputElement;
+};
+export interface KeyboardButtonElements {
+    [key: string]: KeyboardElement[];
+}
+export interface UtilitiesParams {
+    getOptions: () => KeyboardOptions;
+    getCaretPosition: () => number;
+    getCaretPositionEnd: () => number;
+    dispatch: any;
+}
+export 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[];
+    /**
+     * A prop to add your own attributes to one or several buttons.
+     */
+    buttonAttributes?: KeyboardButtonAttributes[];
+    /**
+     * 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?: any;
+    /**
+     * 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;
+    /**
+     * Presses keys highlighted by physicalKeyboardHighlight
+     */
+    physicalKeyboardHighlightPress?: 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;
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+    /**
+     * Calling preventDefault for the mouseup events.
+     */
+    preventMouseUpDefault?: boolean;
+    /**
+     * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseDownPropagation?: boolean;
+    /**
+     * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseUpPropagation?: boolean;
+    /**
+     * Render buttons as a button element instead of a div element.
+     */
+    useButtonTag?: boolean;
+    /**
+     * A prop to ensure characters are always be added/removed at the end of the string.
+     */
+    disableCaretPositioning?: boolean;
+    /**
+     * Restrains input(s) change to the defined regular expression pattern.
+     */
+    inputPattern?: any;
+    /**
+     * Instructs simple-keyboard to use touch events instead of click events.
+     */
+    useTouchEvents?: boolean;
+    /**
+     * Enable useTouchEvents automatically when touch device is detected.
+     */
+    autoUseTouchEvents?: boolean;
+    /**
+     * Opt out of PointerEvents handling, falling back to the prior mouse event logic.
+     */
+    useMouseEvents?: boolean;
+    /**
+     * Disable button hold action.
+     */
+    disableButtonHold?: boolean;
+    /**
+     * Adds unicode right-to-left control characters to input return values.
+     */
+    rtl?: boolean;
+    /**
+     * Enable input method editor candidate list support.
+     */
+    enableLayoutCandidates?: boolean;
+    /**
+     * Character suggestions to be shown on certain key presses
+     */
+    layoutCandidates?: {
+        [key: string]: string;
+    };
+    /**
+     * Exclude buttons from layout
+     */
+    excludeFromLayout?: {
+        [key: string]: string[];
+    };
+    /**
+     * Determine size of layout candidate list
+     */
+    layoutCandidatesPageSize?: number;
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+    onRender?: (instance?: SimpleKeyboard) => void;
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+    onInit?: (instance?: SimpleKeyboard) => void;
+    /**
+     * Module options can have any format
+     */
+    [name: string]: any;
+}

build/types/services/KeyboardLayout.d.ts

@@ -0,0 +1,4 @@
+export declare const getDefaultLayout: () => {
+    default: string[];
+    shift: string[];
+};

build/types/services/PhysicalKeyboard.d.ts

@@ -0,0 +1,20 @@
+import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+/**
+ * Physical Keyboard Service
+ */
+declare class PhysicalKeyboard {
+    getOptions: () => KeyboardOptions;
+    dispatch: any;
+    /**
+     * Creates an instance of the PhysicalKeyboard service
+     */
+    constructor({ dispatch, getOptions }: Partial<UtilitiesParams>);
+    handleHighlightKeyDown(event: KeyboardEvent): void;
+    handleHighlightKeyUp(event: KeyboardEvent): void;
+    /**
+     * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
+     * @param  {object} event The KeyboardEvent
+     */
+    getSimpleKeyboardLayoutKey(event: KeyboardEvent): string;
+}
+export default PhysicalKeyboard;

build/types/services/Utilities.d.ts

@@ -0,0 +1,181 @@
+import { KeyboardInput } from "./../interfaces";
+import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+/**
+ * Utility Service
+ */
+declare class Utilities {
+    getOptions: () => KeyboardOptions;
+    getCaretPosition: () => number;
+    getCaretPositionEnd: () => number;
+    dispatch: any;
+    maxLengthReached: boolean;
+    /**
+     * Creates an instance of the Utility service
+     */
+    constructor({ getOptions, getCaretPosition, getCaretPositionEnd, dispatch, }: UtilitiesParams);
+    /**
+     * Retrieve button type
+     *
+     * @param  {string} button The button's layout name
+     * @return {string} The button type
+     */
+    getButtonType(button: string): string;
+    /**
+     * Adds default classes to a given button
+     *
+     * @param  {string} button The button's layout name
+     * @return {string} The classes to be added to the button
+     */
+    getButtonClass(button: string): string;
+    /**
+     * Default button display labels
+     */
+    getDefaultDiplay(): {
+        "{bksp}": string;
+        "{backspace}": string;
+        "{enter}": string;
+        "{shift}": string;
+        "{shiftleft}": string;
+        "{shiftright}": string;
+        "{alt}": string;
+        "{s}": string;
+        "{tab}": string;
+        "{lock}": string;
+        "{capslock}": string;
+        "{accept}": string;
+        "{space}": string;
+        "{//}": string;
+        "{esc}": string;
+        "{escape}": string;
+        "{f1}": string;
+        "{f2}": string;
+        "{f3}": string;
+        "{f4}": string;
+        "{f5}": string;
+        "{f6}": string;
+        "{f7}": string;
+        "{f8}": string;
+        "{f9}": string;
+        "{f10}": string;
+        "{f11}": string;
+        "{f12}": string;
+        "{numpaddivide}": string;
+        "{numlock}": string;
+        "{arrowup}": string;
+        "{arrowleft}": string;
+        "{arrowdown}": string;
+        "{arrowright}": string;
+        "{prtscr}": string;
+        "{scrolllock}": string;
+        "{pause}": string;
+        "{insert}": string;
+        "{home}": string;
+        "{pageup}": string;
+        "{delete}": string;
+        "{end}": string;
+        "{pagedown}": string;
+        "{numpadmultiply}": string;
+        "{numpadsubtract}": string;
+        "{numpadadd}": string;
+        "{numpadenter}": string;
+        "{period}": string;
+        "{numpaddecimal}": string;
+        "{numpad0}": string;
+        "{numpad1}": string;
+        "{numpad2}": string;
+        "{numpad3}": string;
+        "{numpad4}": string;
+        "{numpad5}": string;
+        "{numpad6}": string;
+        "{numpad7}": string;
+        "{numpad8}": string;
+        "{numpad9}": string;
+    };
+    /**
+     * Returns the display (label) name for a given button
+     *
+     * @param  {string} button The button's layout name
+     * @param  {object} display The provided display option
+     * @param  {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
+     */
+    getButtonDisplayName(button: string, display: KeyboardOptions["display"], mergeDisplay: boolean): string;
+    /**
+     * Returns the updated input resulting from clicking a given button
+     *
+     * @param  {string} button The button's layout name
+     * @param  {string} input The input string
+     * @param  {number} caretPos The cursor's current position
+     * @param  {number} caretPosEnd The cursor's current end position
+     * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
+     */
+    getUpdatedInput(button: string, input: string, caretPos: number, caretPosEnd?: number, moveCaret?: boolean): string;
+    /**
+     * Moves the cursor position by a given amount
+     *
+     * @param  {number} length Represents by how many characters the input should be moved
+     * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+     */
+    updateCaretPos(length: number, minus?: boolean): void;
+    /**
+     * Action method of updateCaretPos
+     *
+     * @param  {number} length Represents by how many characters the input should be moved
+     * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+     */
+    updateCaretPosAction(length: number, minus?: boolean): number;
+    /**
+     * Adds a string to the input at a given position
+     *
+     * @param  {string} source The source input
+     * @param  {string} str The string to add
+     * @param  {number} position The (cursor) position where the string should be added
+     * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
+     */
+    addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
+    /**
+     * Removes an amount of characters at a given position
+     *
+     * @param  {string} source The source input
+     * @param  {number} position The (cursor) position from where the characters should be removed
+     * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
+     */
+    removeAt(source: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
+    /**
+     * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
+     *
+     * @param  {object} inputObj
+     * @param  {string} updatedInput
+     */
+    handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean;
+    /**
+     * Gets the current value of maxLengthReached
+     */
+    isMaxLengthReached(): boolean;
+    /**
+     * Determines whether a touch device is being used
+     */
+    isTouchDevice(): number | true;
+    /**
+     * Determines whether pointer events are supported
+     */
+    pointerEventsSupported(): boolean;
+    /**
+     * Bind all methods in a given class
+     */
+    static bindMethods(myClass: any, instance: any): void;
+    /**
+     * Transforms an arbitrary string to camelCase
+     *
+     * @param  {string} str The string to transform.
+     */
+    camelCase(str: string): string;
+    /**
+     * Split array into chunks
+     */
+    chunkArray<T>(arr: T[], size: number): T[][];
+    /**
+     * Reusable empty function
+     */
+    static noop: () => void;
+}
+export default Utilities;

config/env.js

@@ -1,90 +0,0 @@
-'use strict';
-
-const fs = require('fs');
-const path = require('path');
-const paths = require('./paths');
-
-// Make sure that including paths.js after env.js will read .env variables.
-delete require.cache[require.resolve('./paths')];
-
-const NODE_ENV = process.env.NODE_ENV;
-if (!NODE_ENV) {
-  throw new Error(
-    'The NODE_ENV environment variable is required but was not specified.'
-  );
-}
-
-// https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use
-var dotenvFiles = [
-  `${paths.dotenv}.${NODE_ENV}.local`,
-  `${paths.dotenv}.${NODE_ENV}`,
-  // Don't include `.env.local` for `test` environment
-  // since normally you expect tests to produce the same
-  // results for everyone
-  NODE_ENV !== 'test' && `${paths.dotenv}.local`,
-  paths.dotenv,
-].filter(Boolean);
-
-// Load environment variables from .env* files. Suppress warnings using silent
-// if this file is missing. dotenv will never modify any environment variables
-// that have already been set.
-// https://github.com/motdotla/dotenv
-dotenvFiles.forEach(dotenvFile => {
-  if (fs.existsSync(dotenvFile)) {
-    require('dotenv').config({
-      path: dotenvFile,
-    });
-  }
-});
-
-// We support resolving modules according to `NODE_PATH`.
-// This lets you use absolute paths in imports inside large monorepos:
-// https://github.com/facebookincubator/create-react-app/issues/253.
-// It works similar to `NODE_PATH` in Node itself:
-// https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders
-// Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored.
-// Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims.
-// https://github.com/facebookincubator/create-react-app/issues/1023#issuecomment-265344421
-// We also resolve them to make sure all tools using them work consistently.
-const appDirectory = fs.realpathSync(process.cwd());
-process.env.NODE_PATH = (process.env.NODE_PATH || '')
-  .split(path.delimiter)
-  .filter(folder => folder && !path.isAbsolute(folder))
-  .map(folder => path.resolve(appDirectory, folder))
-  .join(path.delimiter);
-
-// Grab NODE_ENV and REACT_APP_* environment variables and prepare them to be
-// injected into the application via DefinePlugin in Webpack configuration.
-const REACT_APP = /^REACT_APP_/i;
-
-function getClientEnvironment(publicUrl) {
-  const raw = Object.keys(process.env)
-    .filter(key => REACT_APP.test(key))
-    .reduce(
-      (env, key) => {
-        env[key] = process.env[key];
-        return env;
-      },
-      {
-        // Useful for determining whether we’re running in production mode.
-        // Most importantly, it switches React into the correct mode.
-        NODE_ENV: process.env.NODE_ENV || 'development',
-        // Useful for resolving the correct path to static assets in `public`.
-        // For example, <img src={process.env.PUBLIC_URL + '/img/logo.png'} />.
-        // This should only be used as an escape hatch. Normally you would put
-        // images into the `src` and `import` them in code to get their paths.
-        PUBLIC_URL: publicUrl,
-      }
-    );
-  // Stringify all values so we can feed into Webpack DefinePlugin
-  const stringified = {
-    'process.env': Object.keys(raw).reduce((env, key) => {
-      env[key] = JSON.stringify(raw[key]);
-      return env;
-    }, {}),
-  };
-
-  return { raw, stringified };
-}
-
-module.exports = getClientEnvironment;

config/jest/cssTransform.js

@@ -1,14 +0,0 @@
-'use strict';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCacheKey() {
-    // The output is always the same.
-    return 'cssTransform';
-  },
-};

config/jest/fileTransform.js

@@ -1,12 +0,0 @@
-'use strict';
-
-const path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-
-module.exports = {
-  process(src, filename) {
-    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
-  },
-};

config/paths.js

@@ -1,64 +0,0 @@
-'use strict';
-
-const path = require('path');
-const fs = require('fs');
-const url = require('url');
-
-// Make sure any symlinks in the project folder are resolved:
-// https://github.com/facebookincubator/create-react-app/issues/637
-const appDirectory = fs.realpathSync(process.cwd());
-const resolveApp = relativePath => path.resolve(appDirectory, relativePath);
-
-const envPublicUrl = process.env.PUBLIC_URL;
-
-function ensureSlash(path, needsSlash) {
-  const hasSlash = path.endsWith('/');
-  if (hasSlash && !needsSlash) {
-    return path.substr(path, path.length - 1);
-  } else if (!hasSlash && needsSlash) {
-    return `${path}/`;
-  } else {
-    return path;
-  }
-}
-
-const getPublicUrl = appPackageJson =>
-  envPublicUrl || require(appPackageJson).homepage;
-
-// We use `PUBLIC_URL` environment variable or "homepage" field to infer
-// "public path" at which the app is served.
-// Webpack needs to know it to put the right <script> hrefs into HTML even in
-// single-page apps that may serve index.html for nested URLs like /todos/42.
-// We can't use a relative path in HTML because we don't want to load something
-// like /todos/42/static/js/bundle.7289d.js. We have to know the root.
-function getServedPath(appPackageJson) {
-  const publicUrl = getPublicUrl(appPackageJson);
-  const servedUrl =
-    envPublicUrl || (publicUrl ? url.parse(publicUrl).pathname : '/');
-  return ensureSlash(servedUrl, true);
-}
-
-// config after eject: we're in ./config/
-module.exports = {
-  dotenv: resolveApp('.env'),
-  appBuild: resolveApp('build'),
-  appDemoBuild: resolveApp('demo'),
-  appPublic: resolveApp('public'),
-  appHtml: resolveApp('public/index.html'),
-  appIndexJs: resolveApp('src/demo/index.js'), // CRL: Updated for demo purposes
-  appPackageJson: resolveApp('package.json'),
-  appSrc: resolveApp('src'),
-  yarnLockFile: resolveApp('yarn.lock'),
-  testsSetup: resolveApp('src/setupTests.js'),
-  appNodeModules: resolveApp('node_modules'),
-  publicUrl: getPublicUrl(resolveApp('package.json')),
-  servedPath: getServedPath(resolveApp('package.json')),
-
-  // CRL: New paths for demo build
-  appDemoIndexJs: resolveApp('src/demo/index.js'),
-  appDemoSrc: resolveApp('src/demo'),
-
-  // CRL: New paths for library
-  appLibIndexJs: resolveApp('src/lib/index.js'),
-  appLibSrc: resolveApp('src/lib'),
-};

config/polyfills.js

@@ -1,22 +0,0 @@
-'use strict';
-
-if (typeof Promise === 'undefined') {
-  // Rejection tracking prevents a common issue where React gets into an
-  // inconsistent state due to an error, but it gets swallowed by a Promise,
-  // and the user has no idea what causes React's erratic future behavior.
-  require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extensions.js');
-}
-
-// fetch() polyfill for making API calls.
-require('whatwg-fetch');
-
-// Object.assign() is commonly used with React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
-
-// In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
-// We don't polyfill it in the browser--this is user's responsibility.
-if (process.env.NODE_ENV === 'test') {
-  require('raf').polyfill(global);
-}

config/webpack.config.demo.js

@@ -1,280 +0,0 @@
-
-
-const autoprefixer = require('autoprefixer');
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CopyWebpackPlugin = require('copy-webpack-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const eslintFormatter = require('react-dev-utils/eslintFormatter');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = '.';
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// Assert this just to be safe.
-// Development builds of React are slow and not intended for production.
-if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
-}
-
-// Note: defined here because it will be used more than once.
-const cssFilename = 'css/index.css';
-
-// ExtractTextPlugin expects the build output to be flat.
-// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
-// However, our output is structured with css, js and media folders.
-// To have this structure working with relative paths, we have to use custom options.
-const extractTextPluginOptions = shouldUseRelativeAssetPaths
-  ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
-  : {};
-
-// This is the production configuration.
-// It compiles slowly and is focused on producing a fast and minimal bundle.
-// The development configuration is different and lives in a separate file.
-module.exports = {
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: shouldUseSourceMap ? 'source-map' : false,
-  // In production, we only want to load the app code.
-  entry: [paths.appDemoIndexJs], // CRL: library index file instead of app index
-  output: {
-    // CRL: Updated whole block with library specific info
-    path: paths.appDemoBuild,
-    filename: 'index.js',
-    libraryTarget: 'umd',
-    library: 'SimpleKeyboard'
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web'
-    },
-    plugins: [
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson])
-    ]
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-      // { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint')
-            },
-            loader: require.resolve('eslint-loader')
-          }
-        ],
-        include: paths.appDemoSrc // CRL: updated with library src folder
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'media/[name].[ext]'
-            }
-          },
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: [paths.appLibSrc, paths.appDemoSrc], // CRL: updated with library src folder
-            loader: require.resolve('babel-loader'),
-            options: {
-              compact: true
-            }
-          },
-          // The notation here is somewhat confusing.
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader normally turns CSS into JS modules injecting <style>,
-          // but unlike in development configuration, we do something different.
-          // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
-          // (second argument), then grabs the result CSS and puts it into a
-          // separate file in our build process. This way we actually ship
-          // a single CSS file in production instead of JS code injecting <style>
-          // tags. If you use code splitting, however, any async bundles will still
-          // use the "style" loader inside the async code so CSS from them won't be
-          // in the main CSS file.
-          {
-            test: /\.css$/,
-            loader: ExtractTextPlugin.extract(
-              Object.assign(
-                {
-                  fallback: {
-                    loader: require.resolve('style-loader'),
-                    options: {
-                      hmr: false
-                    }
-                  },
-                  use: [
-                    {
-                      loader: require.resolve('css-loader'),
-                      options: {
-                        importLoaders: 1,
-                        minimize: true,
-                        sourceMap: shouldUseSourceMap
-                      }
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9' // React doesn't support IE8 anyway
-                            ],
-                            flexbox: 'no-2009'
-                          })
-                        ]
-                      }
-                    }
-                  ]
-                },
-                extractTextPluginOptions
-              )
-            )
-            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
-          },
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.js$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'media/[name].[ext]'
-            }
-          }
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ]
-      }
-    ]
-  },
-  plugins: [
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
-    // Otherwise React will be compiled in the very slow development mode.
-    new InterpolateHtmlPlugin(env.raw),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml
-    }),
-    // Add module names to factory functions so they appear in browser profiler.
-    new webpack.NamedModulesPlugin(),
-    new webpack.DefinePlugin(env.stringified),
-    // Minify the code.
-    new webpack.optimize.UglifyJsPlugin({
-      compress: false,
-      mangle: {
-        safari10: true
-      },
-      output: {
-        comments: false,
-        // Turned on because emoji and regex is not minified properly using default
-        // https://github.com/facebookincubator/create-react-app/issues/2488
-        ascii_only: true
-      },
-      sourceMap: shouldUseSourceMap
-    }),
-    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-    new ExtractTextPlugin({
-      filename: cssFilename
-    }),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // 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.appPublic}/favicon.ico`, to: paths.appDemoBuild },
-      { from: `${paths.appPublic}/manifest.json`, to: paths.appDemoBuild }
-    ])
-  ],
-  // CRL: added externals block for library
-  // externals: {
-  //  'react': 'react',
-  //  'react-dom': 'react-dom'
-  // },
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty'
-  }
-};

config/webpack.config.dev.js

@@ -1,259 +0,0 @@
-'use strict';
-
-const autoprefixer = require('autoprefixer');
-const path = require('path');
-const webpack = require('webpack');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const CaseSensitivePathsPlugin = require('case-sensitive-paths-webpack-plugin');
-const InterpolateHtmlPlugin = require('react-dev-utils/InterpolateHtmlPlugin');
-const WatchMissingNodeModulesPlugin = require('react-dev-utils/WatchMissingNodeModulesPlugin');
-const eslintFormatter = require('react-dev-utils/eslintFormatter');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const getClientEnvironment = require('./env');
-const paths = require('./paths');
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// In development, we always serve from the root. This makes config easier.
-const publicPath = '/';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_PATH%/xyz looks better than %PUBLIC_PATH%xyz.
-const publicUrl = '';
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// This is the development configuration.
-// It is focused on developer experience and fast rebuilds.
-// The production configuration is different and lives in a separate file.
-module.exports = {
-  // You may want 'eval' instead if you prefer to see the compiled output in DevTools.
-  // See the discussion in https://github.com/facebookincubator/create-react-app/issues/343.
-  devtool: 'cheap-module-source-map',
-  // These are the "entry points" to our application.
-  // This means they will be the "root" imports that are included in JS bundle.
-  // The first two entry points enable "hot" CSS and auto-refreshes for JS.
-  entry: [
-    // Include an alternative client for WebpackDevServer. A client's job is to
-    // connect to WebpackDevServer by a socket and get notified about changes.
-    // When you save a file, the client will either apply hot updates (in case
-    // of CSS changes), or refresh the page (in case of JS changes). When you
-    // make a syntax error, this client will display a syntax error overlay.
-    // Note: instead of the default WebpackDevServer client, we use a custom one
-    // to bring better experience for Create React App users. You can replace
-    // the line below with these two lines if you prefer the stock client:
-    // require.resolve('webpack-dev-server/client') + '?/',
-    // require.resolve('webpack/hot/dev-server'),
-    require.resolve('react-dev-utils/webpackHotDevClient'),
-    // Finally, this is your app's code:
-    paths.appIndexJs,
-    // We include the app code last so that if there is a runtime error during
-    // initialization, it doesn't blow up the WebpackDevServer client, and
-    // changing JS code would still trigger a refresh.
-  ],
-  output: {
-    // Add /* filename */ comments to generated require()s in the output.
-    pathinfo: true,
-    // This does not produce a real file. It's just the virtual path that is
-    // served by WebpackDevServer in development. This is the JS bundle
-    // containing code from all our entry points, and the Webpack runtime.
-    filename: 'static/js/bundle.js',
-    // There are also additional JS chunk files if you use code splitting.
-    chunkFilename: 'static/js/[name].chunk.js',
-    // This is the URL that app is served from. We use "/" in development.
-    publicPath: publicPath,
-    // Point sourcemap entries to original disk location (format as URL on Windows)
-    devtoolModuleFilenameTemplate: info =>
-      path.resolve(info.absoluteResourcePath).replace(/\\/g, '/'),
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-      // { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
-
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appSrc,
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works like "file" loader except that it embeds assets
-          // smaller than specified limit in bytes as data URLs to avoid requests.
-          // A missing `test` is equivalent to a match.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: paths.appSrc,
-            loader: require.resolve('babel-loader'),
-            options: {
-              // This is a feature of `babel-loader` for webpack (not Babel itself).
-              // It enables caching results in ./node_modules/.cache/babel-loader/
-              // directory for faster rebuilds.
-              cacheDirectory: true,
-            },
-          },
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader turns CSS into JS modules that inject <style> tags.
-          // In production, we use a plugin to extract that CSS to a file, but
-          // in development "style" loader enables hot editing of CSS.
-          {
-            test: /\.css$/,
-            use: [
-              require.resolve('style-loader'),
-              {
-                loader: require.resolve('css-loader'),
-                options: {
-                  importLoaders: 1,
-                },
-              },
-              {
-                loader: require.resolve('postcss-loader'),
-                options: {
-                  // Necessary for external CSS imports to work
-                  // https://github.com/facebookincubator/create-react-app/issues/2677
-                  ident: 'postcss',
-                  plugins: () => [
-                    require('postcss-flexbugs-fixes'),
-                    autoprefixer({
-                      browsers: [
-                        '>1%',
-                        'last 4 versions',
-                        'Firefox ESR',
-                        'not ie < 9', // React doesn't support IE8 anyway
-                      ],
-                      flexbox: 'no-2009',
-                    }),
-                  ],
-                },
-              },
-            ],
-          },
-          // "file" loader makes sure those assets get served by WebpackDevServer.
-          // When you `import` an asset, you get its (virtual) filename.
-          // In production, they would get copied to the `build` folder.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.js$/, /\.html$/, /\.json$/],
-            loader: require.resolve('file-loader'),
-            options: {
-              name: 'static/media/[name].[hash:8].[ext]',
-            },
-          },
-        ],
-      },
-      // ** STOP ** Are you adding a new loader?
-      // Make sure to add the new loader(s) before the "file" loader.
-    ],
-  },
-  plugins: [
-    // Makes some environment variables available in index.html.
-    // The public URL is available as %PUBLIC_URL% in index.html, e.g.:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In development, this will be an empty string.
-    new InterpolateHtmlPlugin(env.raw),
-    // Generates an `index.html` file with the <script> injected.
-    new HtmlWebpackPlugin({
-      inject: true,
-      template: paths.appHtml,
-    }),
-    // Add module names to factory functions so they appear in browser profiler.
-    new webpack.NamedModulesPlugin(),
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'development') { ... }. See `./env.js`.
-    new webpack.DefinePlugin(env.stringified),
-    // This is necessary to emit hot updates (currently CSS only):
-    new webpack.HotModuleReplacementPlugin(),
-    // Watcher doesn't work well if you mistype casing in a path so we use
-    // a plugin that prints an error when you attempt to do this.
-    // See https://github.com/facebookincubator/create-react-app/issues/240
-    new CaseSensitivePathsPlugin(),
-    // If you require a missing module and then `npm install` it, you still have
-    // to restart the development server for Webpack to discover it. This plugin
-    // makes the discovery automatic so you don't have to restart.
-    // See https://github.com/facebookincubator/create-react-app/issues/186
-    new WatchMissingNodeModulesPlugin(paths.appNodeModules),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // 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$/),
-  ],
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-  // Turn off performance hints during development because we don't do any
-  // splitting or minification in interest of speed. These warnings become
-  // cumbersome.
-  performance: {
-    hints: false,
-  },
-};

config/webpack.config.prod.js

@@ -1,275 +0,0 @@
-'use strict';
-
-const autoprefixer = require('autoprefixer');
-const path = require('path');
-const webpack = require('webpack');
-const ExtractTextPlugin = require('extract-text-webpack-plugin');
-const eslintFormatter = require('react-dev-utils/eslintFormatter');
-const ModuleScopePlugin = require('react-dev-utils/ModuleScopePlugin');
-const paths = require('./paths');
-const getClientEnvironment = require('./env');
-
-// Webpack uses `publicPath` to determine where the app is being served from.
-// It requires a trailing slash, or the file assets will get an incorrect path.
-const publicPath = paths.servedPath;
-// Some apps do not use client-side routing with pushState.
-// For these, "homepage" can be set to "." to enable relative asset paths.
-const shouldUseRelativeAssetPaths = publicPath === './';
-// Source maps are resource heavy and can cause out of memory issue for large source files.
-const shouldUseSourceMap = process.env.GENERATE_SOURCEMAP !== 'false';
-// `publicUrl` is just like `publicPath`, but we will provide it to our app
-// as %PUBLIC_URL% in `index.html` and `process.env.PUBLIC_URL` in JavaScript.
-// Omit trailing slash as %PUBLIC_URL%/xyz looks better than %PUBLIC_URL%xyz.
-const publicUrl = publicPath.slice(0, -1);
-// Get environment variables to inject into our app.
-const env = getClientEnvironment(publicUrl);
-
-// Assert this just to be safe.
-// Development builds of React are slow and not intended for production.
-if (env.stringified['process.env'].NODE_ENV !== '"production"') {
-  throw new Error('Production builds must have NODE_ENV=production.');
-}
-
-// Note: defined here because it will be used more than once.
-const cssFilename = 'css/index.css';
-
-// ExtractTextPlugin expects the build output to be flat.
-// (See https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/27)
-// However, our output is structured with css, js and media folders.
-// To have this structure working with relative paths, we have to use custom options.
-const extractTextPluginOptions = shouldUseRelativeAssetPaths
-  ? // Making sure that the publicPath goes back to to build folder.
-    { publicPath: Array(cssFilename.split('/').length).join('../') }
-  : {};
-
-// This is the production configuration.
-// It compiles slowly and is focused on producing a fast and minimal bundle.
-// The development configuration is different and lives in a separate file.
-module.exports = {
-  // Don't attempt to continue if there are any errors.
-  bail: true,
-  // We generate sourcemaps in production. This is slow but gives good results.
-  // You can exclude the *.map files from the build during deployment.
-  devtool: shouldUseSourceMap ? 'source-map' : false,
-  // In production, we only want to load the app code.
-  entry: [paths.appLibIndexJs], // CRL: library index file instead of app index
-  output: {
-    // CRL: Updated whole block with library specific info
-    path: paths.appBuild,
-    filename: 'index.js',
-    libraryTarget: 'umd',
-    library: 'SimpleKeyboard'
-  },
-  resolve: {
-    // This allows you to set a fallback for where Webpack should look for modules.
-    // We placed these paths second because we want `node_modules` to "win"
-    // if there are any conflicts. This matches Node resolution mechanism.
-    // https://github.com/facebookincubator/create-react-app/issues/253
-    modules: ['node_modules', paths.appNodeModules].concat(
-      // It is guaranteed to exist because we tweak it in `env.js`
-      process.env.NODE_PATH.split(path.delimiter).filter(Boolean)
-    ),
-    // These are the reasonable defaults supported by the Node ecosystem.
-    // We also include JSX as a common component filename extension to support
-    // some tools, although we do not recommend using it, see:
-    // https://github.com/facebookincubator/create-react-app/issues/290
-    // `web` extension prefixes have been added for better support
-    // for React Native Web.
-    extensions: ['.web.js', '.mjs', '.js', '.json', '.web.jsx', '.jsx'],
-    alias: {
-
-      // Support React Native Web
-      // https://www.smashingmagazine.com/2016/08/a-glimpse-into-the-future-with-react-native-for-web/
-      'react-native': 'react-native-web',
-    },
-    plugins: [
-      // Prevents users from importing files from outside of src/ (or node_modules/).
-      // This often causes confusion because we only process files within src/ with babel.
-      // To fix this, we prevent you from importing files out of src/ -- if you'd like to,
-      // please link the files into your node_modules/ and let module-resolution kick in.
-      // Make sure your source files are compiled, as they will not be processed in any way.
-      new ModuleScopePlugin(paths.appSrc, [paths.appPackageJson]),
-    ],
-  },
-  module: {
-    strictExportPresence: true,
-    rules: [
-      // TODO: Disable require.ensure as it's not a standard language feature.
-      // We are waiting for https://github.com/facebookincubator/create-react-app/issues/2176.
-      // { parser: { requireEnsure: false } },
-
-      // First, run the linter.
-      // It's important to do this before Babel processes the JS.
-      {
-        test: /\.(js|jsx|mjs)$/,
-        enforce: 'pre',
-        use: [
-          {
-            options: {
-              formatter: eslintFormatter,
-              eslintPath: require.resolve('eslint'),
-
-            },
-            loader: require.resolve('eslint-loader'),
-          },
-        ],
-        include: paths.appLibSrc, // CRL: updated with library src folder
-      },
-      {
-        // "oneOf" will traverse all following loaders until one will
-        // match the requirements. When no loader matches it will fall
-        // back to the "file" loader at the end of the loader list.
-        oneOf: [
-          // "url" loader works just like "file" loader but it also embeds
-          // assets smaller than specified size as data URLs to avoid requests.
-          {
-            test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
-            loader: require.resolve('url-loader'),
-            options: {
-              limit: 10000,
-              name: 'media/[name].[ext]',
-            },
-          },
-          // Process JS with Babel.
-          {
-            test: /\.(js|jsx|mjs)$/,
-            include: paths.appLibSrc, // CRL: updated with library src folder
-            loader: require.resolve('babel-loader'),
-            options: {
-
-              compact: true,
-            },
-          },
-          // The notation here is somewhat confusing.
-          // "postcss" loader applies autoprefixer to our CSS.
-          // "css" loader resolves paths in CSS and adds assets as dependencies.
-          // "style" loader normally turns CSS into JS modules injecting <style>,
-          // but unlike in development configuration, we do something different.
-          // `ExtractTextPlugin` first applies the "postcss" and "css" loaders
-          // (second argument), then grabs the result CSS and puts it into a
-          // separate file in our build process. This way we actually ship
-          // a single CSS file in production instead of JS code injecting <style>
-          // tags. If you use code splitting, however, any async bundles will still
-          // use the "style" loader inside the async code so CSS from them won't be
-          // in the main CSS file.
-          {
-            test: /\.css$/,
-            loader: ExtractTextPlugin.extract(
-              Object.assign(
-                {
-                  fallback: {
-                    loader: require.resolve('style-loader'),
-                    options: {
-                      hmr: false,
-                    },
-                  },
-                  use: [
-                    {
-                      loader: require.resolve('css-loader'),
-                      options: {
-                        importLoaders: 1,
-                        minimize: true,
-                        sourceMap: shouldUseSourceMap,
-                      },
-                    },
-                    {
-                      loader: require.resolve('postcss-loader'),
-                      options: {
-                        // Necessary for external CSS imports to work
-                        // https://github.com/facebookincubator/create-react-app/issues/2677
-                        ident: 'postcss',
-                        plugins: () => [
-                          require('postcss-flexbugs-fixes'),
-                          autoprefixer({
-                            browsers: [
-                              '>1%',
-                              'last 4 versions',
-                              'Firefox ESR',
-                              'not ie < 9', // React doesn't support IE8 anyway
-                            ],
-                            flexbox: 'no-2009',
-                          }),
-                        ],
-                      },
-                    },
-                  ],
-                },
-                extractTextPluginOptions
-              )
-            ),
-            // Note: this won't work without `new ExtractTextPlugin()` in `plugins`.
-          },
-          // "file" loader makes sure assets end up in the `build` folder.
-          // When you `import` an asset, you get its filename.
-          // This loader doesn't use a "test" so it will catch all modules
-          // that fall through the other loaders.
-          {
-            loader: require.resolve('file-loader'),
-            // Exclude `js` files to keep "css" loader working as it injects
-            // it's runtime that would otherwise processed through "file" loader.
-            // Also exclude `html` and `json` extensions so they get processed
-            // by webpacks internal loaders.
-            exclude: [/\.js$/, /\.html$/, /\.json$/],
-            options: {
-              name: 'media/[name].[ext]',
-            },
-          },
-          // ** STOP ** Are you adding a new loader?
-          // Make sure to add the new loader(s) before the "file" loader.
-        ],
-      },
-    ],
-  },
-  plugins: [
-    // Makes some environment variables available to the JS code, for example:
-    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
-    // It is absolutely essential that NODE_ENV was set to production here.
-    // Otherwise React will be compiled in the very slow development mode.
-    new webpack.DefinePlugin(env.stringified),
-    // Minify the code.
-    new webpack.optimize.UglifyJsPlugin({
-      compress: {
-        warnings: false,
-        // Disabled because of an issue with Uglify breaking seemingly valid code:
-        // https://github.com/facebookincubator/create-react-app/issues/2376
-        // Pending further investigation:
-        // https://github.com/mishoo/UglifyJS2/issues/2011
-        comparisons: false,
-      },
-      mangle: {
-        safari10: true,
-      },
-      output: {
-        comments: false,
-        // Turned on because emoji and regex is not minified properly using default
-        // https://github.com/facebookincubator/create-react-app/issues/2488
-        ascii_only: true,
-      },
-      sourceMap: shouldUseSourceMap,
-    }),
-    // Note: this won't work without ExtractTextPlugin.extract(..) in `loaders`.
-    new ExtractTextPlugin({
-      filename: cssFilename,
-    }),
-    // Moment.js is an extremely popular library that bundles large locale files
-    // by default due to how Webpack interprets its code. This is a practical
-    // solution that requires the user to opt into importing specific locales.
-    // 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$/),
-  ],
-  // CRL: added externals block for library
-  externals: {
-   'react': 'react',
-   'react-dom': 'react-dom'
-  },
-  // Some libraries import Node modules but don't use them in the browser.
-  // Tell Webpack to provide empty mocks for them so importing them works.
-  node: {
-    dgram: 'empty',
-    fs: 'empty',
-    net: 'empty',
-    tls: 'empty',
-    child_process: 'empty',
-  },
-};

config/webpackDevServer.config.js

@@ -1,100 +0,0 @@
-'use strict';
-
-const errorOverlayMiddleware = require('react-dev-utils/errorOverlayMiddleware');
-const noopServiceWorkerMiddleware = require('react-dev-utils/noopServiceWorkerMiddleware');
-const path = require('path');
-const config = require('./webpack.config.dev');
-const paths = require('./paths');
-
-const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-const host = process.env.HOST || '0.0.0.0';
-
-module.exports = function(proxy, allowedHost) {
-  return {
-    // WebpackDevServer 2.4.3 introduced a security fix that prevents remote
-    // websites from potentially accessing local content through DNS rebinding:
-    // https://github.com/webpack/webpack-dev-server/issues/887
-    // https://medium.com/webpack/webpack-dev-server-middleware-security-issues-1489d950874a
-    // However, it made several existing use cases such as development in cloud
-    // environment or subdomains in development significantly more complicated:
-    // https://github.com/facebookincubator/create-react-app/issues/2271
-    // https://github.com/facebookincubator/create-react-app/issues/2233
-    // While we're investigating better solutions, for now we will take a
-    // compromise. Since our WDS configuration only serves files in the `public`
-    // folder we won't consider accessing them a vulnerability. However, if you
-    // use the `proxy` feature, it gets more dangerous because it can expose
-    // remote code execution vulnerabilities in backends like Django and Rails.
-    // So we will disable the host check normally, but enable it if you have
-    // specified the `proxy` setting. Finally, we let you override it if you
-    // really know what you're doing with a special environment variable.
-    disableHostCheck:
-      !proxy || process.env.DANGEROUSLY_DISABLE_HOST_CHECK === 'true',
-    // Enable gzip compression of generated files.
-    compress: true,
-    // Silence WebpackDevServer's own logs since they're generally not useful.
-    // It will still show compile warnings and errors with this setting.
-    clientLogLevel: 'none',
-    // By default WebpackDevServer serves physical files from current directory
-    // in addition to all the virtual build products that it serves from memory.
-    // This is confusing because those files won’t automatically be available in
-    // production build folder unless we copy them. However, copying the whole
-    // project directory is dangerous because we may expose sensitive files.
-    // Instead, we establish a convention that only files in `public` directory
-    // get served. Our build script will copy `public` into the `build` folder.
-    // In `index.html`, you can get URL of `public` folder with %PUBLIC_URL%:
-    // <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    // In JavaScript code, you can access it with `process.env.PUBLIC_URL`.
-    // Note that we only recommend to use `public` folder as an escape hatch
-    // for files like `favicon.ico`, `manifest.json`, and libraries that are
-    // for some reason broken when imported through Webpack. If you just want to
-    // use an image, put it in `src` and `import` it from JavaScript instead.
-    contentBase: paths.appPublic,
-    // By default files from `contentBase` will not trigger a page reload.
-    watchContentBase: true,
-    // Enable hot reloading server. It will provide /sockjs-node/ endpoint
-    // for the WebpackDevServer client so it can learn when the files were
-    // updated. The WebpackDevServer client is included as an entry point
-    // in the Webpack development configuration. Note that only changes
-    // to CSS are currently hot reloaded. JS changes will refresh the browser.
-    hot: true,
-    // It is important to tell WebpackDevServer to use the same "root" path
-    // as we specified in the config. In development, we always serve from /.
-    publicPath: config.output.publicPath,
-    // WebpackDevServer is noisy by default so we emit custom message instead
-    // by listening to the compiler events with `compiler.plugin` calls above.
-    quiet: true,
-    // Reportedly, this avoids CPU overload on some systems.
-    // https://github.com/facebookincubator/create-react-app/issues/293
-    // src/node_modules is not ignored to support absolute imports
-    // https://github.com/facebookincubator/create-react-app/issues/1065
-    watchOptions: {
-      ignored: new RegExp(
-        `^(?!${path
-          .normalize(paths.appSrc + '/')
-          .replace(/[\\]+/g, '\\\\')}).+[\\\\/]node_modules[\\\\/]`,
-        'g'
-      ),
-    },
-    // Enable HTTPS if the HTTPS environment variable is set to 'true'
-    https: protocol === 'https',
-    host: host,
-    overlay: false,
-    historyApiFallback: {
-      // Paths with dots should still use the history fallback.
-      // See https://github.com/facebookincubator/create-react-app/issues/387.
-      disableDotRule: true,
-    },
-    public: allowedHost,
-    proxy,
-    before(app) {
-      // This lets us open files from the runtime error overlay.
-      app.use(errorOverlayMiddleware());
-      // This service worker file is effectively a 'no-op' that will reset any
-      // previous service worker registered for the same host:port combination.
-      // We do this in development to avoid hitting the production cache if
-      // it used the same host and port.
-      // https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
-      app.use(noopServiceWorkerMiddleware());
-    },
-  };
-};

package.json

@@ -1,14 +1,16 @@
 {
   "name": "simple-keyboard",
-  "version": "2.3.7",
-  "description": "On-screen Virtual Keyboard",
+  "version": "3.0.0",
+  "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
+  "types": "build/types/index.d.ts",
   "scripts": {
-    "start": "node scripts/start.js",
-    "build": "node scripts/build.js",
-    "demo": "node scripts/demo.js",
-    "test": "node scripts/test.js --env=jsdom",
-    "prepublish": "npm run build"
+    "start": "webpack serve --config webpack.config.demo.js",
+    "build": "webpack && tsc",
+    "test": "jest --silent",
+    "coverage": "npm run test -- --coverage",
+    "prepare": "npm run build",
+    "trypublish": "npm publish || true"
   },
   "repository": {
     "type": "git",
@@ -18,7 +20,7 @@
   "bugs": {
     "url": "https://github.com/hodgef/simple-keyboard/issues"
   },
-  "homepage": "https://franciscohodge.com/simple-keyboard",
+  "homepage": "https://virtual-keyboard.js.org/",
   "keywords": [
     "javascript",
     "es6",
@@ -26,99 +28,88 @@
     "keyboard",
     "onscreen",
     "virtual",
+    "screen-keyboard",
     "component",
     "virtual-keyboard",
     "touchscreen",
-    "touch-screen"
+    "touch-screen",
+    "kiosk",
+    "osk",
+    "js"
   ],
   "license": "MIT",
-  "dependencies": {},
   "devDependencies": {
-    "autoprefixer": "7.1.6",
-    "babel-core": "^6.26.3",
-    "babel-eslint": "7.2.3",
-    "babel-jest": "20.0.3",
-    "babel-loader": "7.1.2",
-    "babel-preset-react-app": "^3.1.2",
-    "babel-runtime": "6.26.0",
-    "case-sensitive-paths-webpack-plugin": "2.1.1",
-    "chalk": "1.1.3",
-    "copy-webpack-plugin": "^4.3.1",
-    "css-loader": "0.28.7",
-    "dotenv": "4.0.0",
-    "eslint": "4.10.0",
-    "eslint-config-react-app": "^2.0.1",
-    "eslint-loader": "1.9.0",
-    "eslint-plugin-flowtype": "2.39.1",
-    "eslint-plugin-import": "2.8.0",
-    "eslint-plugin-jsx-a11y": "5.1.1",
-    "eslint-plugin-react": "7.4.0",
-    "extract-text-webpack-plugin": "3.0.2",
-    "file-loader": "1.1.5",
-    "fs-extra": "3.0.1",
-    "html-webpack-plugin": "2.29.0",
-    "jest": "20.0.4",
-    "object-assign": "4.1.1",
-    "postcss-flexbugs-fixes": "3.2.0",
-    "postcss-loader": "2.0.8",
-    "promise": "8.0.1",
-    "prop-types": "^15.6.1",
-    "raf": "3.4.0",
-    "react": "^16.2.0",
-    "react-dev-utils": "^4.2.1",
-    "react-dom": "^16.2.0",
-    "style-loader": "0.19.0",
-    "sw-precache-webpack-plugin": "0.11.4",
-    "url-loader": "0.6.2",
-    "webpack": "3.8.1",
-    "webpack-dev-server": "2.9.4",
-    "webpack-manifest-plugin": "1.3.2",
-    "whatwg-fetch": "2.0.3"
-  },
-  "peerDependencies": {
-    "react": ">=0.14",
-    "react-dom": ">=0.14"
+    "@babel/cli": "^7.13.0",
+    "@babel/core": "^7.13.8",
+    "@babel/plugin-proposal-class-properties": "^7.13.0",
+    "@babel/plugin-transform-typescript": "^7.13.0",
+    "@babel/polyfill": "^7.12.1",
+    "@babel/preset-env": "^7.13.9",
+    "@types/jest": "^26.0.20",
+    "@typescript-eslint/eslint-plugin": "^4.16.1",
+    "@typescript-eslint/parser": "^4.16.1",
+    "autoprefixer": "^10.2.5",
+    "babel-eslint": "^10.1.0",
+    "babel-loader": "^8.2.2",
+    "babel-preset-minify": "^0.5.0",
+    "core-js": "^3.9.1",
+    "css-loader": "^5.1.1",
+    "eslint": "^7.21.0",
+    "file-loader": "^6.2.0",
+    "html-webpack-plugin": "^5.3.0",
+    "jest": "^26.6.3",
+    "mini-css-extract-plugin": "^1.3.9",
+    "optimize-css-assets-webpack-plugin": "^5.0.4",
+    "postcss": "^8.2.8",
+    "postcss-loader": "^5.2.0",
+    "prettier": "^2.2.1",
+    "prettier-webpack-plugin": "^1.2.0",
+    "style-loader": "^2.0.0",
+    "terser-webpack-plugin": "^5.1.1",
+    "typescript": "^4.2.3",
+    "url-loader": "^4.1.1",
+    "webpack": "^5.24.3",
+    "webpack-cli": "^4.5.0",
+    "webpack-dev-server": "4.0.0-beta.0"
   },
   "jest": {
-    "collectCoverageFrom": [
-      "src/**/*.{js,jsx,mjs}"
+    "roots": [
+      "<rootDir>/src"
     ],
-    "setupFiles": [
-      "<rootDir>/config/polyfills.js"
+    "collectCoverageFrom": [
+      "src/**/*.{js,jsx,ts,tsx}",
+      "!src/**/*.d.ts",
+      "!src/lib/index.js",
+      "!src/lib/polyfills.js",
+      "!src/demo/index.js",
+      "!src/utils/**",
+      "!src/**/*.d.ts",
+      "!**/tests/**"
     ],
     "testMatch": [
-      "<rootDir>/src/**/__tests__/**/*.{js,jsx,mjs}",
-      "<rootDir>/src/**/?(*.)(spec|test).{js,jsx,mjs}"
+      "<rootDir>/src/**/__tests__/**/*.{js,jsx,ts,tsx}",
+      "<rootDir>/src/**/*.{spec,test}.{js,jsx,ts,tsx}"
     ],
-    "testEnvironment": "node",
-    "testURL": "http://localhost",
-    "transform": {
-      "^.+\\.(js|jsx|mjs)$": "<rootDir>/node_modules/babel-jest",
-      "^.+\\.css$": "<rootDir>/config/jest/cssTransform.js",
-      "^(?!.*\\.(js|jsx|mjs|css|json)$)": "<rootDir>/config/jest/fileTransform.js"
-    },
     "transformIgnorePatterns": [
-      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|mjs)$"
+      "[/\\\\]node_modules[/\\\\].+\\.(js|jsx|ts|tsx)$",
+      "^.+\\.module\\.(css|sass|scss)$"
     ],
+    "modulePaths": [],
     "moduleNameMapper": {
-      "^react-native$": "react-native-web"
+      "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/scripts/testMock.js",
+      "\\.(css|less)$": "<rootDir>/scripts/testMock.js"
     },
     "moduleFileExtensions": [
       "web.js",
-      "mjs",
       "js",
+      "web.ts",
+      "ts",
+      "web.tsx",
+      "tsx",
       "json",
       "web.jsx",
       "jsx",
       "node"
     ]
-  },
-  "babel": {
-    "presets": [
-      "react-app"
-    ]
-  },
-  "eslintConfig": {
-    "extends": "react-app"
   }
 }

public/index.html

@@ -1,54 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
-    <meta name="theme-color" content="#000000">
-    <!--
-      manifest.json provides metadata used when your web app is added to the
-      homescreen on Android. See https://developers.google.com/web/fundamentals/engage-and-retain/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>simple-keyboard</title>
-    <style>
-      /**
-       * Disabling double-tap to zoom in iOS 10+
-       * as it interferes with simple-keyboard
-       */
-      body,
-      html {
-        touch-action: manipulation;
-      }
-    </style>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root">
-      <div class="simple-keyboard"></div>
-    </div>
-    
-
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

public/manifest.json

@@ -1,15 +0,0 @@
-{
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    }
-  ],
-  "start_url": "./index.html",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}

scripts/build.js

@@ -1,127 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const chalk = require('chalk');
-const fs = require('fs-extra');
-const webpack = require('webpack');
-const config = require('../config/webpack.config.prod');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appLibIndexJs])) { // CRL: Updated with library index file
-  process.exit(1);
-}
-
-// First, read the current file sizes in build directory.
-// This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appBuild)
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appBuild);
-
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
-        );
-        console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
-
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(
-        stats,
-        previousFileSizes,
-        paths.appBuild,
-        WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
-      );
-      console.log();
-    },
-    err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
-    }
-  );
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-  console.log('Creating an optimized production build...');
-
-  let compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      if (err) {
-        return reject(err);
-      }
-      const messages = formatWebpackMessages(stats.toJson({}, true));
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-      if (
-        process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-      ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
-        );
-        return reject(new Error(messages.warnings.join('\n\n')));
-      }
-      return resolve({
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings,
-      });
-    });
-  });
-}

scripts/demo.js

@@ -1,127 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'production';
-process.env.NODE_ENV = 'production';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const chalk = require('chalk');
-const fs = require('fs-extra');
-const webpack = require('webpack');
-const config = require('../config/webpack.config.demo');
-const paths = require('../config/paths');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages');
-const FileSizeReporter = require('react-dev-utils/FileSizeReporter');
-const printBuildError = require('react-dev-utils/printBuildError');
-
-const measureFileSizesBeforeBuild =
-  FileSizeReporter.measureFileSizesBeforeBuild;
-const printFileSizesAfterBuild = FileSizeReporter.printFileSizesAfterBuild;
-
-// These sizes are pretty large. We'll warn for bundles exceeding them.
-const WARN_AFTER_BUNDLE_GZIP_SIZE = 512 * 1024;
-const WARN_AFTER_CHUNK_GZIP_SIZE = 1024 * 1024;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appDemoIndexJs])) { // CRL: Updated with library index file
-  process.exit(1);
-}
-
-// First, read the current file sizes in build directory.
-// This lets us display how much they changed later.
-measureFileSizesBeforeBuild(paths.appDemoBuild)
-  .then(previousFileSizes => {
-    // Remove all content but keep the directory so that
-    // if you're in it, you don't end up in Trash
-    fs.emptyDirSync(paths.appDemoBuild);
-
-    // Start the webpack build
-    return build(previousFileSizes);
-  })
-  .then(
-    ({ stats, previousFileSizes, warnings }) => {
-      if (warnings.length) {
-        console.log(chalk.yellow('Compiled with warnings.\n'));
-        console.log(warnings.join('\n\n'));
-        console.log(
-          '\nSearch for the ' +
-            chalk.underline(chalk.yellow('keywords')) +
-            ' to learn more about each warning.'
-        );
-        console.log(
-          'To ignore, add ' +
-            chalk.cyan('// eslint-disable-next-line') +
-            ' to the line before.\n'
-        );
-      } else {
-        console.log(chalk.green('Compiled successfully.\n'));
-      }
-
-      console.log('File sizes after gzip:\n');
-      printFileSizesAfterBuild(
-        stats,
-        previousFileSizes,
-        paths.appDemoBuild,
-        WARN_AFTER_BUNDLE_GZIP_SIZE,
-        WARN_AFTER_CHUNK_GZIP_SIZE
-      );
-      console.log();
-    },
-    err => {
-      console.log(chalk.red('Failed to compile.\n'));
-      printBuildError(err);
-      process.exit(1);
-    }
-  );
-
-// Create the production build and print the deployment instructions.
-function build(previousFileSizes) {
-  console.log('Creating a build of the demo app...');
-
-  let compiler = webpack(config);
-  return new Promise((resolve, reject) => {
-    compiler.run((err, stats) => {
-      if (err) {
-        return reject(err);
-      }
-      const messages = formatWebpackMessages(stats.toJson({}, true));
-      if (messages.errors.length) {
-        // Only keep the first error. Others are often indicative
-        // of the same problem, but confuse the reader with noise.
-        if (messages.errors.length > 1) {
-          messages.errors.length = 1;
-        }
-        return reject(new Error(messages.errors.join('\n\n')));
-      }
-      if (
-        process.env.CI &&
-        (typeof process.env.CI !== 'string' ||
-          process.env.CI.toLowerCase() !== 'false') &&
-        messages.warnings.length
-      ) {
-        console.log(
-          chalk.yellow(
-            '\nTreating warnings as errors because process.env.CI = true.\n' +
-              'Most CI servers set it automatically.\n'
-          )
-        );
-        return reject(new Error(messages.warnings.join('\n\n')));
-      }
-      return resolve({
-        stats,
-        previousFileSizes,
-        warnings: messages.warnings,
-      });
-    });
-  });
-}

scripts/getPackageJson.js

@@ -0,0 +1,25 @@
+const fs = require('fs');
+const path = require('path');
+
+/**
+ * A module to get package informations from package.json
+ * @module getPackageJson
+ * @param {...string} keys from package.json if no arguments passed it returns package.json content as object
+ * @returns {object} with given keys or content of package.json as object
+ */
+
+/**
+ * Returns package info
+ */
+const getPackageJson = function(...args) {
+  const packageJSON = JSON.parse(fs.readFileSync(path.join(__dirname, '../package.json')));
+  if (!args.length) {
+    return packageJSON;
+  }
+  return args.reduce((out, key) => {
+    out[key] = packageJSON[key];
+    return out;
+  }, {});
+};
+
+module.exports = getPackageJson;

scripts/start.js

@@ -1,92 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'development';
-process.env.NODE_ENV = 'development';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const fs = require('fs');
-const chalk = require('chalk');
-const webpack = require('webpack');
-const WebpackDevServer = require('webpack-dev-server');
-const clearConsole = require('react-dev-utils/clearConsole');
-const checkRequiredFiles = require('react-dev-utils/checkRequiredFiles');
-const {
-  choosePort,
-  createCompiler,
-  prepareProxy,
-  prepareUrls,
-} = require('react-dev-utils/WebpackDevServerUtils');
-const openBrowser = require('react-dev-utils/openBrowser');
-const paths = require('../config/paths');
-const config = require('../config/webpack.config.dev');
-const createDevServerConfig = require('../config/webpackDevServer.config');
-
-const useYarn = fs.existsSync(paths.yarnLockFile);
-const isInteractive = process.stdout.isTTY;
-
-// Warn and crash if required files are missing
-if (!checkRequiredFiles([paths.appHtml, paths.appIndexJs])) {
-  process.exit(1);
-}
-
-// Tools like Cloud9 rely on this.
-const DEFAULT_PORT = parseInt(process.env.PORT, 10) || 3000;
-const HOST = process.env.HOST || '0.0.0.0';
-
-// We attempt to use the default port but if it is busy, we offer the user to
-// run on a different port. `detect()` Promise resolves to the next free port.
-choosePort(HOST, DEFAULT_PORT)
-  .then(port => {
-    if (port == null) {
-      // We have not found a port.
-      return;
-    }
-    const protocol = process.env.HTTPS === 'true' ? 'https' : 'http';
-    const appName = require(paths.appPackageJson).name;
-    const urls = prepareUrls(protocol, HOST, port);
-    // Create a webpack compiler that is configured with custom messages.
-    const compiler = createCompiler(webpack, config, appName, urls, useYarn);
-    // Load proxy config
-    const proxySetting = require(paths.appPackageJson).proxy;
-    const proxyConfig = prepareProxy(proxySetting, paths.appPublic);
-    // Serve webpack assets generated by the compiler over a web sever.
-    const serverConfig = createDevServerConfig(
-      proxyConfig,
-      urls.lanUrlForConfig
-    );
-    const devServer = new WebpackDevServer(compiler, serverConfig);
-    // Launch WebpackDevServer.
-    devServer.listen(port, HOST, err => {
-      if (err) {
-        return console.log(err);
-      }
-      if (isInteractive) {
-        clearConsole();
-      }
-      console.log(chalk.cyan('Starting the development server...\n'));
-      openBrowser(urls.localUrlForBrowser);
-    });
-
-    ['SIGINT', 'SIGTERM'].forEach(function(sig) {
-      process.on(sig, function() {
-        devServer.close();
-        process.exit();
-      });
-    });
-  })
-  .catch(err => {
-    if (err && err.message) {
-      console.log(err.message);
-    }
-    process.exit(1);
-  });

scripts/test.js

@@ -1,27 +0,0 @@
-'use strict';
-
-// Do this as the first thing so that any code reading it knows the right env.
-process.env.BABEL_ENV = 'test';
-process.env.NODE_ENV = 'test';
-process.env.PUBLIC_URL = '';
-
-// Makes the script crash on unhandled rejections instead of silently
-// ignoring them. In the future, promise rejections that are not handled will
-// terminate the Node.js process with a non-zero exit code.
-process.on('unhandledRejection', err => {
-  throw err;
-});
-
-// Ensure environment variables are read.
-require('../config/env');
-
-const jest = require('jest');
-const argv = process.argv.slice(2);
-
-// Watch unless on CI or in coverage mode
-if (!process.env.CI && argv.indexOf('--coverage') < 0) {
-  argv.push('--watch');
-}
-
-
-jest.run(argv);

scripts/testMock.js

@@ -0,0 +1 @@
+module.exports = {};

src/demo/App.js

@@ -1,59 +0,0 @@
-import Keyboard from '../lib';
-import './css/App.css';
-
-class App {
-  constructor(){
-    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
-
-    this.layoutName = "default";
-  }
-
-  onDOMLoaded = () => {
-    this.keyboard = new Keyboard({
-      debug: true,
-      layoutName: this.layoutName,
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button),
-      newLineOnEnter: true
-    });
-  
-    this.keyboard.setInput("Hello World!");
-
-    /**
-     * Adding preview (demo only)
-     */
-    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
-    <div class="simple-keyboard-preview">
-      <textarea class="input" readonly>Hello World!</textarea>
-    </div>
-    `);
-  
-    console.log(this.keyboard);
-  }
-
-  handleShiftButton = () => {
-    let layoutName = this.layoutName;
-    let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
-  
-    this.keyboard.setOptions({
-      layoutName: shiftToggle
-    });
-  }
-
-  onChange = input => {
-    document.querySelector('.input').value = input;
-  }
-
-  onKeyPress = button => {
-    console.log("Button pressed", button);
-  
-      /**
-       * Shift functionality
-       */
-      if(button === "{lock}" || button === "{shift}")
-        this.handleShiftButton();
-  }
-
-}
-
-export default App;

src/demo/BasicDemo.js

@@ -0,0 +1,55 @@
+import Keyboard from "../lib";
+import "./css/BasicDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button)
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/ButtonThemeDemo.js

@@ -0,0 +1,73 @@
+import Keyboard from "../lib";
+import "./css/ButtonThemeDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      theme: "hg-theme-default my-theme",
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      buttonTheme: [
+        {
+          class: "my-button",
+          buttons: "{enter} {bksp} q Q"
+        },
+        {
+          class: "my-button-outline",
+          buttons: "q Q b B"
+        }
+      ],
+      buttonAttributes: [
+        {
+          attribute: "aria-label",
+          value: "bee",
+          buttons: "b B"
+        }
+      ]
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/DOMElementDemo.js

@@ -0,0 +1,31 @@
+import Keyboard from "../lib";
+import "./css/DOMElementDemo.css";
+
+class Demo {
+  constructor() {
+    const rootDOM =
+      document.querySelector("body") || 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

@@ -0,0 +1,157 @@
+import Keyboard from "../lib";
+import "./css/FullKeyboardDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="keyboardContainer">
+      <div class="simple-keyboard-main"></div>
+
+      <div class="controlArrows">
+        <div class="simple-keyboard-control"></div>
+        <div class="simple-keyboard-arrows"></div>
+      </div>
+
+      <div class="numPad">
+        <div class="simple-keyboard-numpad"></div>
+        <div class="simple-keyboard-numpadEnd"></div>
+      </div>
+    </div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    const commonKeyboardOptions = {
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      theme: "simple-keyboard hg-theme-default hg-layout-default",
+      physicalKeyboardHighlight: true,
+      syncInstanceInputs: true,
+      mergeDisplay: true,
+      debug: true
+    };
+
+    this.keyboard = new Keyboard(".simple-keyboard-main", {
+      ...commonKeyboardOptions,
+      /**
+       * Layout by:
+       * Sterling Butters (https://github.com/SterlingButters)
+       */
+      layout: {
+        default: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "` 1 2 3 4 5 6 7 8 9 0 - = {backspace}",
+          "{tab} q w e r t y u i o p [ ] \\",
+          "{capslock} a s d f g h j k l ; ' {enter}",
+          "{shiftleft} z x c v b n m , . / {shiftright}",
+          "{controlleft} {altleft} {metaleft} {space} {metaright} {altright}"
+        ],
+        shift: [
+          "{escape} {f1} {f2} {f3} {f4} {f5} {f6} {f7} {f8} {f9} {f10} {f11} {f12}",
+          "~ ! @ # $ % ^ & * ( ) _ + {backspace}",
+          "{tab} Q W E R T Y U I O P { } |",
+          '{capslock} A S D F G H J K L : " {enter}',
+          "{shiftleft} Z X C V B N M < > ? {shiftright}",
+          "{controlleft} {altleft} {metaleft} {space} {metaright} {altright}"
+        ]
+      },
+      display: {
+        "{escape}": "esc ⎋",
+        "{tab}": "tab ⇥",
+        "{backspace}": "backspace ⌫",
+        "{enter}": "enter ↵",
+        "{capslock}": "caps lock ⇪",
+        "{shiftleft}": "shift ⇧",
+        "{shiftright}": "shift ⇧",
+        "{controlleft}": "ctrl ⌃",
+        "{controlright}": "ctrl ⌃",
+        "{altleft}": "alt ⌥",
+        "{altright}": "alt ⌥",
+        "{metaleft}": "cmd ⌘",
+        "{metaright}": "cmd ⌘"
+      }
+    });
+
+    this.keyboardControlPad = new Keyboard(".simple-keyboard-control", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: [
+          "{prtscr} {scrolllock} {pause}",
+          "{insert} {home} {pageup}",
+          "{delete} {end} {pagedown}"
+        ]
+      }
+    });
+
+    this.keyboardArrows = new Keyboard(".simple-keyboard-arrows", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: ["{arrowup}", "{arrowleft} {arrowdown} {arrowright}"]
+      }
+    });
+
+    this.keyboardNumPad = new Keyboard(".simple-keyboard-numpad", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: [
+          "{numlock} {numpaddivide} {numpadmultiply}",
+          "{numpad7} {numpad8} {numpad9}",
+          "{numpad4} {numpad5} {numpad6}",
+          "{numpad1} {numpad2} {numpad3}",
+          "{numpad0} {numpaddecimal}"
+        ]
+      }
+    });
+
+    this.keyboardNumPadEnd = new Keyboard(".simple-keyboard-numpadEnd", {
+      ...commonKeyboardOptions,
+      layout: {
+        default: ["{numpadsubtract}", "{numpadadd}", "{numpadenter}"]
+      }
+    });
+
+    document.querySelector(".input").addEventListener("input", () => {
+      const input = document.querySelector(".input").value;
+      this.keyboard.setInput(input);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    this.keyboard.setInput(input);
+
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (
+      button === "{shift}" ||
+      button === "{shiftleft}" ||
+      button === "{shiftright}" ||
+      button === "{capslock}"
+    )
+      this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/MultipleInputsDemo.js

@@ -1,77 +0,0 @@
-import Keyboard from '../lib';
-import './css/MultipleInputsDemo.css';
-
-class App {
-  constructor(){
-    document.addEventListener('DOMContentLoaded', this.onDOMLoaded);
-
-    this.layoutName = "default";
-  }
-
-  onDOMLoaded = () => {
-    this.keyboard = new Keyboard({
-      debug: true,
-      layoutName: this.layoutName,
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
-    });
-
-    /**
-     * Adding preview (demo only)
-     * In production, this would be part of your HTML file
-     */
-    document.querySelector('.simple-keyboard').insertAdjacentHTML('beforebegin', `
-      <div>
-        <label>Input 1</label>
-        <input class="input" id="input1" value=""/>
-      </div>
-      <div>
-        <label>Input 2</label>
-        <input class="input" id="input2" value=""/>
-      </div>
-    `);
-
-    /**
-     * Changing active input onFocus
-     */
-    document.querySelectorAll('.input')
-      .forEach(input => input.addEventListener('focus', this.onInputFocus));
-  
-    console.log(this.keyboard);
-  }
-
-  onInputFocus = event => {
-    this.selectedInput = `#${event.target.id}`;
-    
-    this.keyboard.setOptions({
-      inputName: event.target.id
-    });
-  }
-
-  onChange = input => {
-    let currentInput = this.selectedInput || '.input';
-    document.querySelector(currentInput).value = input;
-  }
-
-  onKeyPress = button => {
-    console.log("Button pressed", button);
-  
-      /**
-       * Shift functionality
-       */
-      if(button === "{lock}" || button === "{shift}")
-        this.handleShiftButton();
-  }
-
-  handleShiftButton = () => {
-    let layoutName = this.layoutName;
-    let shiftToggle = this.layoutName = layoutName === "default" ? "shift" : "default";
-  
-    this.keyboard.setOptions({
-      layoutName: shiftToggle
-    });
-  }
-
-}
-
-export default App;

src/demo/MultipleKeyboardsDestroyDemo.js

@@ -0,0 +1,92 @@
+import Keyboard from "../lib";
+import "./css/MultipleKeyboardsDestroyDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+
+    <input class="input2" placeholder="Tap on the virtual keyboard to start" />
+    <div class="keyboard2"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      debug: true
+    });
+
+    this.keyboard2 = new Keyboard(".keyboard2", {
+      theme: "simple-keyboard hg-theme-default",
+      onChange: input => this.onChange(input, "input2"),
+      onKeyPress: button => this.onKeyPress(button, "keyboard2"),
+      debug: true
+    });
+
+    console.log(this.keyboard);
+    setTimeout(() => {
+      this.keyboard.destroy();
+      document.querySelector(".input").value = "";
+    }, 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
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+
+    document.querySelector(".input2").addEventListener("input", event => {
+      this.keyboard2.setInput(event.target.value);
+    });
+  }
+
+  onChange(input, inputClass) {
+    document.querySelector(`.${inputClass || "input"}`).value = input;
+    console.log("Input changed", input);
+  }
+
+  onKeyPress(button, keyboardInstanceKey) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}")
+      this.handleShift(keyboardInstanceKey);
+  }
+
+  handleShift(keyboardInstanceKey) {
+    const keyboard = this[keyboardInstanceKey || "keyboard"];
+    const currentLayout = keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/RTLDemo.js

@@ -0,0 +1,72 @@
+import Keyboard from "../lib";
+import "./css/RTLDemo.css";
+
+const setDOM = () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+  `;
+};
+
+class Demo {
+  constructor() {
+    setDOM();
+
+    /**
+     * Demo Start
+     */
+    this.keyboard = new Keyboard({
+      onChange: input => this.onChange(input),
+      onKeyPress: button => this.onKeyPress(button),
+      rtl: true,
+      layout: {
+        default: [
+          "\u05e5 1 2 3 4 5 6 7 8 9 0 - = {bksp}",
+          "{tab} \u05e3 \u05df \u05e7 \u05e8 \u05d0 \u05d8 \u05d5 \u05ea \u05dd \u05e4 ] [ \\",
+          "{lock} \u05e9 \u05d3 \u05d2 \u05db \u05e2 \u05d9 \u05d7 \u05dc \u05da : ' {enter}",
+          "{shift} \u05d6 \u05e1 \u05d1 \u05d4 \u05e0 \u05de \u05e6 , . / {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}"
+        ]
+      }
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    document.querySelector(".input").value = input;
+    console.log("Input changed", input, input.split(""));
+  }
+
+  onKeyPress(button) {
+    console.log("Button pressed", button);
+
+    /**
+     * If you want to handle the shift and caps lock buttons
+     */
+    if (button === "{shift}" || button === "{lock}") this.handleShift();
+  }
+
+  handleShift() {
+    const currentLayout = this.keyboard.options.layoutName;
+    const shiftToggle = currentLayout === "default" ? "shift" : "default";
+
+    this.keyboard.setOptions({
+      layoutName: shiftToggle
+    });
+  }
+}
+
+export default Demo;

src/demo/css/App.css

@@ -1,32 +0,0 @@
-#root {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  max-width: 1000px;
-  margin: 0 auto;
-  padding-top: 20px;
-}
-
-#root .simple-keyboard-preview {
-  background: rgba(0,0,0,0.8);
-  border: 20px solid rgba(0,0,0,0.1);
-  height: 300px;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-#root .input {
-  color: rgba(255,255,255,0.9);
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: monospace;
-  width: 100%;
-  height: 100%;
-  font-size: 18px;
-}
-
-.simple-keyboard.hg-layout-custom {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}

src/demo/css/BasicDemo.css

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

src/demo/css/ButtonThemeDemo.css

@@ -0,0 +1,26 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
+
+.simple-keyboard.my-theme .hg-button.my-button {
+  background: blue;
+  color: white;
+}
+
+.simple-keyboard.my-theme .hg-button[aria-label] {
+  background: black;
+  color: white;
+}
+
+.simple-keyboard.my-theme .hg-button.my-button-outline {
+  border: 2px solid red;
+}

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/FullKeyboardDemo.css

@@ -0,0 +1,132 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.keyboardContainer {
+  display: flex;
+  background-color: rgba(0, 0, 0, 0.1);
+  justify-content: center;
+  width: 1024px;
+  border-radius: 5px;
+}
+
+.simple-keyboard.hg-theme-default {
+  display: inline-block;
+}
+
+.simple-keyboard-main.simple-keyboard {
+  width: 640px;
+  min-width: 640px;
+  background: none;
+}
+
+.simple-keyboard-main.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-arrows.simple-keyboard {
+  align-self: flex-end;
+  background: none;
+}
+
+.simple-keyboard .hg-button.selectedButton {
+  background: rgba(5, 25, 70, 0.53);
+  color: white;
+}
+
+.simple-keyboard .hg-button.emptySpace {
+  pointer-events: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.simple-keyboard-arrows .hg-row {
+  justify-content: center;
+}
+
+.simple-keyboard-arrows .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.controlArrows {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  flex-flow: column;
+}
+
+.simple-keyboard-control.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-control.simple-keyboard .hg-row:first-child {
+  margin-bottom: 10px;
+}
+
+.simple-keyboard-control .hg-button {
+  width: 50px;
+  flex-grow: 0;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.numPad {
+  display: flex;
+  align-items: flex-end;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  background: none;
+}
+
+.simple-keyboard-numpad.simple-keyboard {
+  width: 160px;
+}
+
+.simple-keyboard-numpad.simple-keyboard .hg-button {
+  width: 50px;
+  justify-content: center;
+  display: flex;
+  align-items: center;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard {
+  width: 50px;
+  background: none;
+  margin: 0;
+  padding: 5px 5px 5px 0;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard .hg-button {
+  align-items: center;
+  justify-content: center;
+  display: flex;
+}
+
+.simple-keyboard-numpadEnd .hg-button.hg-standardBtn.hg-button-plus {
+  height: 85px;
+}
+
+.simple-keyboard-numpadEnd.simple-keyboard .hg-button.hg-button-enter {
+  height: 85px;
+}
+
+.simple-keyboard.hg-theme-default .hg-button.hg-selectedButton {
+  background: rgba(5, 25, 70, 0.53);
+  color: white;
+}
+
+.hg-button.hg-functionBtn.hg-button-space {
+  width: 350px;
+}

src/demo/css/MultipleInputsDemo.css

@@ -1,40 +0,0 @@
-#root {
-  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
-  max-width: 1000px;
-  margin: 0 auto;
-  padding-top: 20px;
-}
-
-#root .screenContainer {
-  background: rgba(0,0,0,0.8);
-  border: 20px solid;
-  height: 300px;
-  border-top-right-radius: 5px;
-  border-top-left-radius: 5px;
-  padding: 10px;
-  box-sizing: border-box;
-}
-
-#root .inputContainer {
-  color: white;
-  background: transparent;
-  border: none;
-  outline: none;
-  font-family: monospace;
-  width: 100%;
-  height: 100%;
-}
-
-.simple-keyboard.hg-layout-custom {
-  border-top-left-radius: 0px;
-  border-top-right-radius: 0px;
-}
-
-input {
-  padding: 10px;
-  margin: 10px 0;
-}
-
-label {
-  display: block;
-}

src/demo/css/MultipleKeyboardsDestroyDemo.css

@@ -0,0 +1,16 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}
+
+.simple-keyboard.hg-theme-default.myTheme {
+  background-color: #bde6c6;
+}

src/demo/css/RTLDemo.css

@@ -0,0 +1,13 @@
+input {
+  width: 100%;
+  height: 100px;
+  padding: 20px;
+  font-size: 20px;
+  border: none;
+  box-sizing: border-box;
+  direction: rtl;
+}
+
+.simple-keyboard {
+  max-width: 850px;
+}

src/demo/css/index.css

@@ -0,0 +1,3 @@
+#root {
+  padding: 0px 40px;
+}

src/demo/index.js

@@ -1,6 +1,21 @@
-import App from './App';
+import "./css/index.css";
 
 /**
- * Initializing demo
+ * Demos
  */
-new App();
+import BasicDemo from "./BasicDemo";
+//import RTLDemo from "./RTLDemo";
+//import ButtonThemeDemo from "./ButtonThemeDemo";
+//import DOMElementDemo from "./DOMElementDemo";
+//import FullKeyboardDemo from "./FullKeyboardDemo";
+//import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
+
+/**
+ * Selected demo
+ */
+const SELECTED_DEMO = BasicDemo;
+
+/**
+ * Bootstrap
+ */
+new SELECTED_DEMO();

src/demo/tests/BasicDemo.test.js

@@ -0,0 +1,59 @@
+import { setDOM } from '../../utils/TestUtility';
+import BasicDemo from '../BasicDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new BasicDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new BasicDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new BasicDemo();
+
+  demo.onChange("test");
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new BasicDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new BasicDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new BasicDemo();
+
+  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");
+});

src/demo/tests/ButtonThemeDemo.test.js

@@ -0,0 +1,75 @@
+import { setDOM } from '../../utils/TestUtility';
+import ButtonThemeDemo from '../ButtonThemeDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new ButtonThemeDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new ButtonThemeDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new ButtonThemeDemo();
+
+  demo.onChange("test");
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new ButtonThemeDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new ButtonThemeDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new ButtonThemeDemo();
+
+  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('Demo buttons will have proper attributes and classes', () => {
+  setDOM();
+
+  const demo = new ButtonThemeDemo();
+
+  const buttonDOM = demo.keyboard.getButtonElement("b");
+
+  console.log("buttonDOM", buttonDOM.outerHTML);
+
+  const hasAttribute = buttonDOM.hasAttribute("aria-label");
+  expect(hasAttribute).toBeTruthy();
+
+  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

@@ -0,0 +1,59 @@
+import { setDOM } from '../../utils/TestUtility';
+import FullKeyboardDemo from '../FullKeyboardDemo';
+
+it('Demo will load', () => {
+  setDOM();
+  new FullKeyboardDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new FullKeyboardDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new FullKeyboardDemo();
+
+  demo.onChange("test");
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new FullKeyboardDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new FullKeyboardDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+  expect(demo.keyboardNumPad.getInput()).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new FullKeyboardDemo();
+
+  demo.keyboard.getButtonElement("{shiftleft}").onclick();
+  expect(demo.keyboard.options.layoutName).toBe("shift");
+
+  demo.keyboard.getButtonElement("{shiftright}").onclick();
+  expect(demo.keyboard.options.layoutName).toBe("default");
+});

src/demo/tests/MultipleKeyboardsDestroyDemo.test.js

@@ -0,0 +1,82 @@
+import { setDOM } from '../../utils/TestUtility';
+import MultipleKeyboardsDestroyDemo from '../MultipleKeyboardsDestroyDemo';
+
+jest.useFakeTimers();
+
+it('Demo will load', () => {
+  setDOM();
+
+  new MultipleKeyboardsDestroyDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  demo.onChange("test");
+  demo.keyboard2.getButtonElement("q").click();
+  
+  expect(document.body.querySelector('.input').value).toBe("test");
+  expect(document.body.querySelector('.input2').value).toBe("q");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  demo.keyboard.getButtonElement("q").onclick();
+  
+  expect(document.body.querySelector('.input').value).toBe("q");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new MultipleKeyboardsDestroyDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+
+  document.body.querySelector('.input2').value = "test2";
+  document.body.querySelector('.input2').dispatchEvent(new Event('input'));
+  
+  expect(demo.keyboard.getInput()).toBe("test");
+  expect(demo.keyboard2.getInput()).toBe("test2");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  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', () => {
+  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/demo/tests/RTLDemo.test.js

@@ -0,0 +1,72 @@
+import { setDOM, removeRTLControls } from '../../utils/TestUtility';
+import RTLDemo from '../RTLDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new RTLDemo();
+});
+
+it('Demo onDOMLoaded will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  expect(demo.keyboard).toBeTruthy();
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.onChange("test");
+  
+  expect(removeRTLControls(document.body.querySelector('.input').value)).toBe("test");
+});
+
+it('Demo onChange will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement(".").onclick();
+  
+  expect(removeRTLControls(document.body.querySelector('.input').value)).toBe(".");
+});
+
+it('Demo input change will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  document.body.querySelector('.input').value = "test";
+  document.body.querySelector('.input').dispatchEvent(new Event('input'));
+  
+  expect(removeRTLControls(demo.keyboard.getInput())).toBe("test");
+});
+
+it('Demo handleShiftButton will work', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  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('RTL control caracters will be added to ', () => {
+  setDOM();
+
+  const demo = new RTLDemo();
+
+  demo.keyboard.getButtonElement("פ").onclick();
+  demo.keyboard.getButtonElement("ם").onclick();
+  demo.keyboard.getButtonElement("[").onclick();
+
+  expect(demo.keyboard.getInput()).toBe("‫פם[‬");
+  expect(demo.keyboard.input[demo.keyboard.options.inputName]).toBe("פם[");
+});

src/lib/components/CandidateBox.ts

@@ -0,0 +1,129 @@
+import "./css/CandidateBox.css";
+
+import Utilities from "../services/Utilities";
+import {
+  CandidateBoxParams,
+  CandidateBoxRenderParams,
+  CandidateBoxShowParams,
+} from "./../interfaces";
+
+class CandidateBox {
+  utilities: Utilities;
+  candidateBoxElement: HTMLDivElement;
+  pageIndex = 0;
+  pageSize;
+
+  constructor({ utilities }: CandidateBoxParams) {
+    this.utilities = utilities;
+    Utilities.bindMethods(CandidateBox, this);
+    this.pageSize = this.utilities.getOptions().layoutCandidatesPageSize || 5;
+  }
+
+  destroy() {
+    if (this.candidateBoxElement) {
+      this.candidateBoxElement.remove();
+      this.pageIndex = 0;
+    }
+  }
+
+  show({
+    candidateValue,
+    targetElement,
+    onSelect,
+  }: CandidateBoxShowParams): void {
+    if (!candidateValue || !candidateValue.length) {
+      return;
+    }
+
+    const candidateListPages = this.utilities.chunkArray(
+      candidateValue.split(" "),
+      this.pageSize
+    );
+
+    this.renderPage({
+      candidateListPages,
+      targetElement,
+      pageIndex: this.pageIndex,
+      nbPages: candidateListPages.length,
+      onItemSelected: (selectedCandidate: string) => {
+        onSelect(selectedCandidate);
+        this.destroy();
+      },
+    });
+  }
+
+  renderPage({
+    candidateListPages,
+    targetElement,
+    pageIndex,
+    nbPages,
+    onItemSelected,
+  }: CandidateBoxRenderParams) {
+    // Remove current candidate box, if any
+    this.candidateBoxElement?.remove();
+
+    // Create candidate box element
+    this.candidateBoxElement = document.createElement("div");
+    this.candidateBoxElement.className = "hg-candidate-box";
+
+    // Candidate box list
+    const candidateListULElement = document.createElement("ul");
+    candidateListULElement.className = "hg-candidate-box-list";
+
+    // Create Candidate box list items
+    candidateListPages[pageIndex].forEach((candidateListItem) => {
+      const candidateListLIElement = document.createElement("li");
+      candidateListLIElement.className = "hg-candidate-box-list-item";
+      candidateListLIElement.textContent = candidateListItem;
+      candidateListLIElement.onclick = () => onItemSelected(candidateListItem);
+
+      // Append list item to ul
+      candidateListULElement.appendChild(candidateListLIElement);
+    });
+
+    // Add previous button
+    const isPrevBtnElementActive = pageIndex > 0;
+    const prevBtnElement = document.createElement("div");
+    prevBtnElement.classList.add("hg-candidate-box-prev");
+    isPrevBtnElementActive &&
+      prevBtnElement.classList.add("hg-candidate-box-btn-active");
+    prevBtnElement.onclick = () => {
+      if (!isPrevBtnElementActive) return;
+      this.renderPage({
+        candidateListPages,
+        targetElement,
+        pageIndex: pageIndex - 1,
+        nbPages,
+        onItemSelected,
+      });
+    };
+    this.candidateBoxElement.appendChild(prevBtnElement);
+
+    // Add elements to container
+    this.candidateBoxElement.appendChild(candidateListULElement);
+
+    // Add next button
+    const isNextBtnElementActive = pageIndex < nbPages - 1;
+    const nextBtnElement = document.createElement("div");
+    nextBtnElement.classList.add("hg-candidate-box-next");
+    isNextBtnElementActive &&
+      nextBtnElement.classList.add("hg-candidate-box-btn-active");
+
+    nextBtnElement.onclick = () => {
+      if (!isNextBtnElementActive) return;
+      this.renderPage({
+        candidateListPages,
+        targetElement,
+        pageIndex: pageIndex + 1,
+        nbPages,
+        onItemSelected,
+      });
+    };
+    this.candidateBoxElement.appendChild(nextBtnElement);
+
+    // Append candidate box to target element
+    targetElement.prepend(this.candidateBoxElement);
+  }
+}
+
+export default CandidateBox;

src/lib/components/Keyboard.css

@@ -1,66 +0,0 @@
-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%;
-  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;
-}
-
-.simple-keyboard.hg-layout-default .hg-button.hg-standardBtn {
-  max-width: 100px;
-}
-
-/**
- * hg-theme-default theme
- */
-.simple-keyboard.hg-theme-default {
-  background-color: rgba(0,0,0,0.1);
-  padding: 5px;
-  border-radius: 5px;
- }
-
-.simple-keyboard.hg-theme-default .hg-button {
-  box-shadow: 0px 0px 3px -1px rgba(0,0,0,0.3);
-  height: 40px;
-  border-radius: 5px;
-  box-sizing: border-box;
-  padding: 5px;
-  background: white;
-  border-bottom: 1px solid #b5b5b5;
- }
-
- .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;
-}

src/lib/components/Keyboard.js

@@ -1,201 +0,0 @@
-import './Keyboard.css';
-
-// Services
-import KeyboardLayout from '../services/KeyboardLayout';
-import Utilities from '../services/Utilities';
-
-class SimpleKeyboard {
-  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 = {};
-
-    /**
-     * Processing options
-     */
-    this.keyboardDOM = document.querySelector(keyboardDOMQuery);
-    this.options = options;
-    this.options.layoutName = this.options.layoutName || "default";
-    this.options.theme = this.options.theme || "hg-theme-default";
-    this.options.inputName = this.options.inputName || "default";
-    this.input = {};
-    this.input[this.options.inputName] = '';
-
-
-    /**
-     * Rendering keyboard
-     */
-    if(this.keyboardDOM)
-      this.render();
-    else
-      console.error(`"${keyboardDOMQuery}" was not found in the DOM.`);
-  }
-
-  handleButtonClicked = (button) => {
-    let debug = this.options.debug;
-    
-    /**
-     * Ignoring placeholder buttons
-     */
-    if(button === '{//}')
-      return false;
-
-    /**
-     * Calling onKeyPress
-     */
-    if(typeof this.options.onKeyPress === "function")
-      this.options.onKeyPress(button);
-
-    /**
-     * Updating input
-     */
-    let options = {
-      newLineOnEnter: (this.options.newLineOnEnter === true)
-    }
-    
-    if(!this.input[this.options.inputName])
-      this.input[this.options.inputName] = '';
-
-    let updatedInput = Utilities.getUpdatedInput(button, this.input[this.options.inputName], options);
-
-    if(this.input[this.options.inputName] !== updatedInput){
-      this.input[this.options.inputName] = updatedInput;
-
-      if(debug)
-        console.log('Input changed:', this.input);
-
-      /**
-       * Calling onChange
-       */
-      if(typeof this.options.onChange === "function")
-        this.options.onChange(this.input[this.options.inputName]);
-    }
-    
-    if(debug){
-      console.log("Key pressed:", button);
-    }
-  }
-
-  clearInput = (inputName) => {
-    inputName = inputName || this.options.inputName;
-    this.input[this.options.inputName] = '';
-  }
-
-  getInput = (inputName) => {
-    inputName = inputName || this.options.inputName;
-    return this.input[this.options.inputName];
-  }
-
-  setInput = (input, inputName) => {
-    inputName = inputName || this.options.inputName;
-    this.input[inputName] = input;
-  }
-
-  setOptions = option => {
-    option = option || {};
-    this.options = Object.assign(this.options, option);
-    this.render();
-  }
-
-  clear = () => {
-    this.keyboardDOM.innerHTML = '';
-  }
-
-  render = () => {
-    /**
-     * Clear keyboard
-     */
-    this.clear();
-
-    let layoutClass = this.options.layout ? "hg-layout-custom" : `hg-layout-${this.options.layoutName}`;
-    let layout = this.options.layout || KeyboardLayout.getLayout(this.options.layoutName);
-
-    /**
-     * Account for buttonTheme, if set
-     */
-    let buttonThemesParsed = {};
-    if(Array.isArray(this.options.buttonTheme)){
-      this.options.buttonTheme.forEach(themeObj => {
-        if(themeObj.buttons && themeObj.class){
-          let themeButtons = themeObj.buttons.split(' ');
-
-          if(Array.isArray(themeButtons)){
-            themeButtons.forEach(themeButton => {
-              let themeParsed = buttonThemesParsed[themeButton];
-
-              // If the button has already been added
-              if(themeParsed)
-                buttonThemesParsed[themeButton] = `${themeParsed} ${themeObj.class}`;
-              else
-                buttonThemesParsed[themeButton] = themeObj.class;
-            });
-          }
-        } else {
-          console.warn(`buttonTheme row is missing the "buttons" or the "class". Please check the documentation.`)
-        }
-      });
-    }
-
-    /**
-     * Adding themeClass, layoutClass to keyboardDOM
-     */
-    this.keyboardDOM.className += ` ${this.options.theme} ${layoutClass}`;
-
-    /**
-     * Iterating through each row
-     */
-    layout[this.options.layoutName].forEach((row) => {
-      let rowArray = row.split(' ');
-
-      /**
-       * Creating empty row
-       */
-      var rowDOM = document.createElement('div');
-      rowDOM.className += "hg-row";
-
-      /**
-       * Iterating through each button in row
-       */
-      rowArray.forEach((button) => {
-        let fctBtnClass = Utilities.getButtonClass(button);
-        let buttonThemeClass = buttonThemesParsed[button];
-        let buttonDisplayName = Utilities.getButtonDisplayName(button, this.options.display);
-
-        /**
-         * Creating button
-         */
-        var buttonDOM = document.createElement('div');
-        buttonDOM.className += `hg-button ${fctBtnClass}${buttonThemeClass ? " "+buttonThemeClass : ""}`;
-        buttonDOM.onclick = () => this.handleButtonClicked(button);
-
-        /**
-         * Adding button label to button
-         */
-        var buttonSpanDOM = document.createElement('span');
-        buttonSpanDOM.innerHTML = buttonDisplayName;
-        buttonDOM.appendChild(buttonSpanDOM);
-
-        /**
-         * Appending button to row
-         */
-        rowDOM.appendChild(buttonDOM);
-
-        /**
-         * Calling onInit
-         */
-        if(typeof this.options.onInit === "function")
-        this.options.onInit();
-
-      });
-
-      /**
-       * Appending row to keyboard
-       */
-      this.keyboardDOM.appendChild(rowDOM);
-    });
-  }
-}
-
-export default SimpleKeyboard;

src/lib/components/Keyboard.test.js

@@ -1,8 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom';
-import Keyboard from './Keyboard';
-
-it('Keyboard renders without crashing', () => {
-  const div = document.createElement('div');
-  ReactDOM.render(<Keyboard />, div);
-});

src/lib/components/css/CandidateBox.css

@@ -0,0 +1,68 @@
+.hg-candidate-box {
+  display: inline-flex;
+  border-radius: 5px;
+  position: absolute;
+  background: #ececec;
+  border-bottom: 2px solid #b5b5b5;
+  user-select: none;
+  max-width: 272px;
+  transform: translateY(-100%);
+  margin-top: -10px;
+}
+
+ul.hg-candidate-box-list {
+  display: flex;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  flex: 1;
+}
+
+li.hg-candidate-box-list-item {
+  height: 40px;
+  width: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+li.hg-candidate-box-list-item:hover {
+  background: rgba(0, 0, 0, 0.03);
+  cursor: pointer;
+}
+
+li.hg-candidate-box-list-item:active {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.hg-candidate-box-prev::before {
+  content: "◄";
+}
+
+.hg-candidate-box-next::before {
+  content: "►";
+}
+
+.hg-candidate-box-next,
+.hg-candidate-box-prev {
+  display: flex;
+  align-items: center;
+  padding: 0 10px;
+  background: #d0d0d0;
+  color: #969696;
+  cursor: pointer;
+}
+
+.hg-candidate-box-next {
+  border-top-right-radius: 5px;
+  border-bottom-right-radius: 5px;
+}
+
+.hg-candidate-box-prev {
+  border-top-left-radius: 5px;
+  border-bottom-left-radius: 5px;
+}
+
+.hg-candidate-box-btn-active {
+  color: #444;
+}

src/lib/components/css/Keyboard.css

@@ -0,0 +1,121 @@
+/**
+ * simple-keyboard
+ * Theme: hg-theme-default
+ */
+.hg-theme-default {
+  width: 100%;
+  user-select: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  touch-action: manipulation;
+  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 span {
+  pointer-events: none;
+}
+
+/* When using option "useButtonTag" */
+.hg-theme-default button.hg-button {
+  border-width: 0;
+  outline: 0;
+  font-size: inherit;
+}
+
+.hg-theme-default .hg-button {
+  display: inline-block;
+  flex-grow: 1;
+  cursor: pointer;
+}
+
+.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: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;
+  box-sizing: border-box;
+  padding: 5px;
+  background: white;
+  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-standardBtn {
+  width: 20px;
+}
+
+.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 {
+  height: 85px;
+}
+
+.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, 0.53);
+  color: white;
+}
+
+.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;
+}

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

@@ -0,0 +1,371 @@
+import Keyboard from '../Keyboard';
+import { setDOM, clearDOM } from '../../../utils/TestUtility';
+import CandidateBox from '../CandidateBox';
+
+beforeEach(() => {
+  setDOM();
+});
+
+afterEach(() => {
+  clearDOM();
+});
+
+it('CandidateBox class will be instantiated by default', () => {
+  document.querySelector("body").innerHTML = `
+    <input class="input" placeholder="Tap on the virtual keyboard to start" />
+    <div class="simple-keyboard"></div>
+
+    <input class="input2" placeholder="Tap on the virtual keyboard to start" />
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard1 = new Keyboard({
+    layout: {
+      default: [
+        "a b"
+      ]
+    }
+  });
+
+  const keyboard2 = new Keyboard(".keyboard2", {
+    layout: {
+      default: [
+        "a b"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2"
+    }
+  });
+
+  expect(keyboard1.candidateBox).toBeInstanceOf(CandidateBox);
+  expect(keyboard2.candidateBox).toBeInstanceOf(CandidateBox);
+
+  keyboard1.destroy();
+  keyboard2.destroy();
+});
+
+it('CandidateBox class will not be instantiated on enableLayoutCandidates: false', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2"
+    },
+    enableLayoutCandidates: false
+  });
+
+  expect(keyboard.candidateBox).toBeNull();
+  keyboard.destroy();
+});
+
+it('CandidateBox will respect layoutCandidatesPageSize', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    layoutCandidatesPageSize: 3
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelectorAll("li").length).toBe(3);
+
+  keyboard.getButtonElement("{bksp}").click();
+  keyboard.setOptions({
+    layoutCandidatesPageSize: 6
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelectorAll("li").length).toBe(6);
+  keyboard.destroy();
+});
+
+it('CandidateBox will respect layoutCandidatesPageSize', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    layoutCandidatesPageSize: 3
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelectorAll("li").length).toBe(3);
+
+  keyboard.getButtonElement("{bksp}").click();
+  keyboard.setOptions({
+    layoutCandidatesPageSize: 6
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelectorAll("li").length).toBe(6);
+  keyboard.destroy();
+});
+
+it('CandidateBox will reset on layoutCandidates change', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    layoutCandidatesPageSize: 3
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("li").textContent).toBe("1");
+
+  keyboard.getButtonElement("{bksp}").click();
+  keyboard.setOptions({
+    layoutCandidates: {
+      a: "s1 s2 s3 s4 s5 s6"
+    }
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("li").textContent).toBe("s1");
+  keyboard.destroy();
+});
+
+it('CandidateBox show will return early if candidateValue is not provided', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    }
+  });
+
+  keyboard.candidateBox.renderPage = jest.fn();
+  keyboard.candidateBox.show({
+    candidateValue: null,
+    targetElement: document.createElement("div"),
+    onSelect: () => {}
+  });
+
+  expect(keyboard.candidateBox.renderPage).not.toBeCalled();
+  keyboard.destroy();
+});
+
+it('CandidateBox show will call renderPage if candidateValue is provided', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    }
+  });
+
+  keyboard.candidateBox.renderPage = jest.fn();
+  keyboard.candidateBox.show({
+    candidateValue: "a b",
+    targetElement: document.createElement("div"),
+    onSelect: () => {}
+  });
+
+  expect(keyboard.candidateBox.renderPage).toBeCalled();
+  keyboard.destroy();
+});
+
+it('CandidateBox select candidate will work', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    }
+  });
+
+  let candidateBoxOnItemSelected;
+  const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
+    candidateBoxOnItemSelected(selectedCandidate);
+    keyboard.candidateBox.destroy();
+  });
+
+  const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
+  jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
+    candidateBoxOnItemSelected = params.onItemSelected;
+    params.onItemSelected = onSelect;
+    candidateBoxRenderFn(params);
+  });
+
+  keyboard.getButtonElement("a").click();
+  keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(onSelect).toBeCalledWith("1");
+  keyboard.destroy();
+});
+
+it('CandidateBox select next and previous page will work', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    layoutCandidatesPageSize: 3
+  });
+
+  keyboard.getButtonElement("a").click();
+  keyboard.candidateBox.candidateBoxElement.querySelector(".hg-candidate-box-next").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("456");
+
+  keyboard.candidateBox.candidateBoxElement.querySelector(".hg-candidate-box-prev").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("123");
+  keyboard.destroy();
+});
+
+it('CandidateBox selecting next and previous page when not available will do nothing', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    layoutCandidatesPageSize: 3
+  });
+
+  keyboard.getButtonElement("a").click();
+
+  keyboard.candidateBox.candidateBoxElement.querySelector(".hg-candidate-box-prev").click();
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("123");
+
+  keyboard.candidateBox.candidateBoxElement.querySelector(".hg-candidate-box-next").click();
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("456");
+
+  keyboard.candidateBox.candidateBoxElement.querySelector(".hg-candidate-box-next").click();
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("456");
+
+  keyboard.destroy();
+});
+
+it('CandidateBox will not show anything when there is no candidates', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    }
+  });
+
+  keyboard.getButtonElement("b").click();
+
+  expect(keyboard.candidateBox.candidateBoxElement).toBeUndefined();
+  keyboard.destroy();
+});
+
+it('CandidateBox will propose the better matching result, regardless of layoutCandidates order', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3",
+      aa: "6 7 8"
+    }
+  });
+
+  keyboard.getButtonElement("a").click();
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("123");
+
+  keyboard.getButtonElement("a").click(); // This will get you the 'aa' layoutCandidates instead of the 'a' ones.
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("678");
+
+  keyboard.getButtonElement("{bksp}").click();
+  expect(keyboard.candidateBox.candidateBoxElement.querySelector("ul").textContent).toBe("123");
+
+  keyboard.destroy();
+});
+
+it('CandidateBox show not be called if keyboard.candidateBox is undefined upon showCandidatesBox call', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3",
+      aa: "6 7 8"
+    }
+  });
+
+  keyboard.candidateBox = null;
+  keyboard.showCandidatesBox();
+});
+
+it('CandidateBox selection should trigger onChange', () => {
+    const keyboard = new Keyboard({
+      layout: {
+        default: [
+          "a b {bksp}"
+        ]
+      },
+      layoutCandidates: {
+        a: "1 2 3 4 5 6"
+      },
+      onChange: jest.fn(),
+      onChangeAll: jest.fn()
+    });
+  
+    let candidateBoxOnItemSelected;
+    
+    const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
+      candidateBoxOnItemSelected(selectedCandidate);
+      keyboard.candidateBox.destroy();
+    });
+  
+    const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
+    jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
+      candidateBoxOnItemSelected = params.onItemSelected;
+      params.onItemSelected = onSelect;
+      candidateBoxRenderFn(params);
+    });
+  
+    keyboard.getButtonElement("a").click();
+    keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+  
+    expect(keyboard.options.onChange).toBeCalledWith("a");
+    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "a"});
+
+    expect(keyboard.options.onChange).toBeCalledWith("1");
+    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "1"});
+    keyboard.destroy();
+  });

src/lib/index.js

@@ -1,2 +0,0 @@
-import SimpleKeyboard from './components/Keyboard';
-export default SimpleKeyboard;

src/lib/index.ts

@@ -0,0 +1,3 @@
+import "./polyfills";
+import SimpleKeyboard from "./components/Keyboard";
+export default SimpleKeyboard;

src/lib/interfaces.ts

@@ -0,0 +1,242 @@
+/* eslint-disable no-unused-vars */
+import SimpleKeyboard from "./components/Keyboard";
+import Utilities from "./services/Utilities";
+
+export interface KeyboardLayoutObject {
+    [key: string]: string[];
+}
+
+export interface KeyboardButtonTheme {
+    class: string;
+    buttons: string;
+}
+
+export interface KeyboardButtonAttributes {
+    attribute: string;
+    value: string;
+    buttons: string;
+}
+
+export interface KeyboardInput {
+    [key: string]: string
+}
+
+export type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
+
+export type CandidateBoxParams = {
+    utilities: Utilities
+}
+
+export type CandidateBoxShowParams = {
+    candidateValue: string,
+    targetElement: KeyboardElement,
+    // eslint-disable-next-line no-unused-vars
+    onSelect: (selectedCandidate: string) => void
+}
+
+export type CandidateBoxRenderParams = {
+    candidateListPages: string[][],
+    targetElement: KeyboardElement,
+    pageIndex: number;
+    nbPages: number;
+    // eslint-disable-next-line no-unused-vars
+    onItemSelected: (selectedCandidate: string) => void
+}
+
+export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
+export type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & { target: HTMLDivElement & HTMLInputElement };
+
+export interface KeyboardButtonElements {
+    [key: string]: KeyboardElement[]
+}
+
+export interface UtilitiesParams {
+    getOptions: () => KeyboardOptions;
+    getCaretPosition: () => number;
+    getCaretPositionEnd: () => number;
+    dispatch: any;
+}
+
+export 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[];
+
+    /**
+     * A prop to add your own attributes to one or several buttons.
+     */
+    buttonAttributes?: KeyboardButtonAttributes[];
+
+    /**
+     * 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?: any;
+
+    /**
+     * 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;
+
+    /**
+     * Presses keys highlighted by physicalKeyboardHighlight
+     */
+    physicalKeyboardHighlightPress?: 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;
+
+    /**
+     * Calling preventDefault for the mousedown events keeps the focus on the input.
+     */
+    preventMouseDownDefault?: boolean;
+
+    /**
+     * Calling preventDefault for the mouseup events.
+     */
+    preventMouseUpDefault?: boolean;
+    
+    /**
+     * Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseDownPropagation?: boolean;
+
+    /**
+     * Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
+     */
+    stopMouseUpPropagation?: boolean;
+
+    /**
+     * Render buttons as a button element instead of a div element.
+     */
+    useButtonTag?: boolean;
+
+    /**
+     * A prop to ensure characters are always be added/removed at the end of the string.
+     */
+    disableCaretPositioning?: boolean;
+
+    /**
+     * Restrains input(s) change to the defined regular expression pattern.
+     */
+    inputPattern?: any;
+
+    /**
+     * Instructs simple-keyboard to use touch events instead of click events.
+     */
+    useTouchEvents?: boolean;
+
+    /**
+     * Enable useTouchEvents automatically when touch device is detected.
+     */
+    autoUseTouchEvents?: boolean;
+
+    /**
+     * Opt out of PointerEvents handling, falling back to the prior mouse event logic.
+     */
+    useMouseEvents?: boolean;
+
+    /**
+     * Disable button hold action.
+     */
+    disableButtonHold?: boolean;
+
+    /**
+     * Adds unicode right-to-left control characters to input return values.
+     */
+    rtl?: boolean;
+
+    /**
+     * Enable input method editor candidate list support.
+     */
+    enableLayoutCandidates?: boolean;
+
+    /**
+     * Character suggestions to be shown on certain key presses
+     */
+    layoutCandidates?: { [key: string]: string };
+
+    /**
+     * Exclude buttons from layout
+     */
+    excludeFromLayout?: { [key: string]: string[] };
+
+    /**
+     * Determine size of layout candidate list
+     */
+    layoutCandidatesPageSize?: number;
+
+    /**
+     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
+     */
+     onRender?: (instance?: SimpleKeyboard) => void;
+
+    /**
+     * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     */
+     onInit?: (instance?: SimpleKeyboard) => void;
+
+    /**
+     * Module options can have any format
+     */
+    [name: string]: any;
+}

src/lib/polyfills.js

@@ -0,0 +1,252 @@
+// element.remove() polyfill
+if (typeof Element !== "undefined" && !("remove" in Element.prototype)) {
+  Element.prototype["remove"] = function () {
+    if (this.parentNode) {
+      this.parentNode.removeChild(this);
+    }
+  };
+}
+
+/*
+ * classList.js: Cross-browser full element.classList implementation.
+ * 1.2.20171210
+ *
+ * By Eli Grey, http://eligrey.com
+ * License: Dedicated to the public domain.
+ *   See https://github.com/eligrey/classList.js/blob/master/LICENSE.md
+ */
+if (typeof self !== "undefined" && "document" in self) {
+  // Full polyfill for browsers with no classList support
+  // Including IE < Edge missing SVGElement.classList
+  if (
+    !("classList" in document.createElement("_")) ||
+    (document.createElementNS &&
+      !(
+        "classList" in
+        document.createElementNS("http://www.w3.org/2000/svg", "g")
+      ))
+  ) {
+    (function (view) {
+      "use strict";
+
+      if (!("Element" in view)) return;
+
+      var classListProp = "classList",
+        protoProp = "prototype",
+        elemCtrProto = view.Element[protoProp],
+        objCtr = Object,
+        strTrim =
+          String[protoProp].trim ||
+          function () {
+            return this.replace(/^\s+|\s+$/g, "");
+          },
+        arrIndexOf =
+          Array[protoProp].indexOf ||
+          function (item) {
+            var i = 0,
+              len = this.length;
+            for (; i < len; i++) {
+              if (i in this && this[i] === item) {
+                return i;
+              }
+            }
+            return -1;
+          },
+        // Vendors: please allow content code to instantiate DOMExceptions
+        DOMEx = function (type, message) {
+          this.name = type;
+          this.code = DOMException[type];
+          this.message = message;
+        },
+        checkTokenAndGetIndex = function (classList, token) {
+          if (token === "") {
+            throw new DOMEx("SYNTAX_ERR", "The token must not be empty.");
+          }
+          if (/\s/.test(token)) {
+            throw new DOMEx(
+              "INVALID_CHARACTER_ERR",
+              "The token must not contain space characters."
+            );
+          }
+          return arrIndexOf.call(classList, token);
+        },
+        ClassList = function (elem) {
+          var trimmedClasses = strTrim.call(elem.getAttribute("class") || ""),
+            classes = trimmedClasses ? trimmedClasses.split(/\s+/) : [],
+            i = 0,
+            len = classes.length;
+          for (; i < len; i++) {
+            this.push(classes[i]);
+          }
+          this._updateClassName = function () {
+            elem.setAttribute("class", this.toString());
+          };
+        },
+        classListProto = (ClassList[protoProp] = []),
+        classListGetter = function () {
+          return new ClassList(this);
+        };
+      // Most DOMException implementations don't allow calling DOMException's toString()
+      // on non-DOMExceptions. Error's toString() is sufficient here.
+      DOMEx[protoProp] = Error[protoProp];
+      classListProto.item = function (i) {
+        return this[i] || null;
+      };
+      classListProto.contains = function (token) {
+        return ~checkTokenAndGetIndex(this, token + "");
+      };
+      classListProto.add = function () {
+        var tokens = arguments,
+          i = 0,
+          l = tokens.length,
+          token,
+          updated = false;
+        do {
+          token = tokens[i] + "";
+          if (!~checkTokenAndGetIndex(this, token)) {
+            this.push(token);
+            updated = true;
+          }
+        } while (++i < l);
+
+        if (updated) {
+          this._updateClassName();
+        }
+      };
+      classListProto.remove = function () {
+        var tokens = arguments,
+          i = 0,
+          l = tokens.length,
+          token,
+          updated = false,
+          index;
+        do {
+          token = tokens[i] + "";
+          index = checkTokenAndGetIndex(this, token);
+          while (~index) {
+            this.splice(index, 1);
+            updated = true;
+            index = checkTokenAndGetIndex(this, token);
+          }
+        } while (++i < l);
+
+        if (updated) {
+          this._updateClassName();
+        }
+      };
+      classListProto.toggle = function (token, force) {
+        var result = this.contains(token),
+          method = result
+            ? force !== true && "remove"
+            : force !== false && "add";
+        if (method) {
+          this[method](token);
+        }
+
+        if (force === true || force === false) {
+          return force;
+        } else {
+          return !result;
+        }
+      };
+      classListProto.replace = function (token, replacement_token) {
+        var index = checkTokenAndGetIndex(token + "");
+        if (~index) {
+          this.splice(index, 1, replacement_token);
+          this._updateClassName();
+        }
+      };
+      classListProto.toString = function () {
+        return this.join(" ");
+      };
+
+      if (objCtr.defineProperty) {
+        var classListPropDesc = {
+          get: classListGetter,
+          enumerable: true,
+          configurable: true,
+        };
+        try {
+          objCtr.defineProperty(elemCtrProto, classListProp, classListPropDesc);
+        } catch (ex) {
+          // IE 8 doesn't support enumerable:true
+          // adding undefined to fight this issue https://github.com/eligrey/classList.js/issues/36
+          // modernie IE8-MSW7 machine has IE8 8.0.6001.18702 and is affected
+          if (ex.number === undefined || ex.number === -0x7ff5ec54) {
+            classListPropDesc.enumerable = false;
+            objCtr.defineProperty(
+              elemCtrProto,
+              classListProp,
+              classListPropDesc
+            );
+          }
+        }
+      } else if (objCtr[protoProp].__defineGetter__) {
+        elemCtrProto.__defineGetter__(classListProp, classListGetter);
+      }
+    })(self);
+  }
+
+  // There is full or partial native classList support, so just check if we need
+  // to normalize the add/remove and toggle APIs.
+
+  (function () {
+    "use strict";
+
+    var testElement = document.createElement("_");
+
+    testElement.classList.add("c1", "c2");
+
+    // Polyfill for IE 10/11 and Firefox <26, where classList.add and
+    // classList.remove exist but support only one argument at a time.
+    if (!testElement.classList.contains("c2")) {
+      var createMethod = function (method) {
+        var original = DOMTokenList.prototype[method];
+
+        DOMTokenList.prototype[method] = function (token) {
+          var i,
+            len = arguments.length;
+
+          for (i = 0; i < len; i++) {
+            token = arguments[i];
+            original.call(this, token);
+          }
+        };
+      };
+      createMethod("add");
+      createMethod("remove");
+    }
+
+    testElement.classList.toggle("c3", false);
+
+    // Polyfill for IE 10 and Firefox <24, where classList.toggle does not
+    // support the second argument.
+    if (testElement.classList.contains("c3")) {
+      var _toggle = DOMTokenList.prototype.toggle;
+
+      DOMTokenList.prototype.toggle = function (token, force) {
+        if (1 in arguments && !this.contains(token) === !force) {
+          return force;
+        } else {
+          return _toggle.call(this, token);
+        }
+      };
+    }
+
+    // replace() polyfill
+    if (!("replace" in document.createElement("_").classList)) {
+      DOMTokenList.prototype.replace = function (token, replacement_token) {
+        var tokens = this.toString().split(" "),
+          index = tokens.indexOf(token + "");
+        if (~index) {
+          tokens = tokens.slice(index);
+          this.remove.apply(this, tokens);
+          this.add(replacement_token);
+          this.add.apply(this, tokens.slice(1));
+        }
+      };
+    }
+
+    testElement = null;
+  })();
+}

src/lib/services/KeyboardLayout.js

@@ -1,37 +0,0 @@
-class KeyboardLayout {
-
-  static getLayout = layout => {
-    if(layout === "qwerty"){
-      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}'
-        ]
-      };
-    } else if(layout === "numeric"){
-      return {
-        'default': [
-          '1 2 3',
-          '4 5 6',
-          '7 8 9',
-          '{//} 0 {bksp}'
-        ]
-      };
-    } else {
-      return KeyboardLayout.getLayout("qwerty");
-    }
-  }
-
-}
-
-export default KeyboardLayout;

src/lib/services/KeyboardLayout.ts

@@ -0,0 +1,18 @@
+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.ts

@@ -0,0 +1,121 @@
+import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+import Utilities from "../services/Utilities";
+
+/**
+ * Physical Keyboard Service
+ */
+class PhysicalKeyboard {
+  getOptions: () => KeyboardOptions;
+  dispatch: any;
+
+  /**
+   * Creates an instance of the PhysicalKeyboard service
+   */
+  constructor({ dispatch, getOptions }: Partial<UtilitiesParams>) {
+    /**
+     * @type {object} A simple-keyboard instance
+     */
+    this.dispatch = dispatch;
+    this.getOptions = getOptions;
+
+    /**
+     * Bindings
+     */
+    Utilities.bindMethods(PhysicalKeyboard, this);
+  }
+
+  handleHighlightKeyDown(event: KeyboardEvent) {
+    const options = this.getOptions();
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+    this.dispatch((instance: any) => {
+      const buttonDOM =
+        instance.getButtonElement(buttonPressed) ||
+        instance.getButtonElement(`{${buttonPressed}}`);
+
+      if (buttonDOM) {
+        buttonDOM.style.backgroundColor =
+          options.physicalKeyboardHighlightBgColor || "#dadce4";
+        buttonDOM.style.color =
+          options.physicalKeyboardHighlightTextColor || "black";
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger pointerdown
+           */
+          (
+            buttonDOM.onpointerdown ||
+            buttonDOM.onmousedown ||
+            buttonDOM.ontouchstart ||
+            Utilities.noop
+          )();
+        }
+      }
+    });
+  }
+
+  handleHighlightKeyUp(event: KeyboardEvent) {
+    const options = this.getOptions();
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+    this.dispatch((instance: any) => {
+      const buttonDOM =
+        instance.getButtonElement(buttonPressed) ||
+        instance.getButtonElement(`{${buttonPressed}}`);
+
+      if (buttonDOM && buttonDOM.removeAttribute) {
+        buttonDOM.removeAttribute("style");
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger pointerup
+           */
+          (
+            buttonDOM.onpointerup ||
+            buttonDOM.onmouseup ||
+            buttonDOM.ontouchend ||
+            Utilities.noop
+          )();
+        }
+      }
+    });
+  }
+
+  /**
+   * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
+   * @param  {object} event The KeyboardEvent
+   */
+  getSimpleKeyboardLayoutKey(event: KeyboardEvent) {
+    let output;
+
+    if (
+      event.code.includes("Numpad") ||
+      event.code.includes("Shift") ||
+      event.code.includes("Space") ||
+      event.code.includes("Backspace") ||
+      event.code.includes("Control") ||
+      event.code.includes("Alt") ||
+      event.code.includes("Meta")
+    ) {
+      output = event.code;
+    } else {
+      output = event.key;
+    }
+
+    /**
+     * Casting key to lowercase
+     */
+    if (
+      (output && output !== output.toUpperCase()) ||
+      (event.code[0] === "F" &&
+        Number.isInteger(Number(event.code[1])) &&
+        event.code.length <= 3)
+    ) {
+      output = output ? output.toLowerCase() : output;
+    }
+
+    return output;
+  }
+}
+
+export default PhysicalKeyboard;

src/lib/services/Utilities.js

@@ -1,92 +0,0 @@
-class Utilities {
-  static normalizeString(string){
-    let output;
-
-    if(string === "@")
-      output = 'at';
-    else if(string === ",")
-      output = 'comma';
-    else if(string === ".")
-      output = 'dot';
-    else if(string === "\\")
-      output = 'backslash';
-    else if(string === "/")
-      output = 'fordardslash';
-    else if(string === "*")
-      output = 'asterisk';
-    else if(string === "&")
-      output = 'ampersand';
-    else if(string === "$")
-      output = 'dollarsign';
-    else if(string === "=")
-      output = 'equals';
-    else if(string === "+")
-      output = 'plus';
-    else if(string === "-")
-      output = 'minus';
-    else if(string === "'")
-      output = 'apostrophe';
-    else if(string === ";")
-      output = 'colon';
-    else if(string === "[")
-      output = 'openbracket';
-    else if(string === "]")
-      output = 'closebracket';
-    else if(string === "//")
-      output = 'emptybutton';
-    else
-      output = '';
-
-    return output ? ` hg-button-${output}` : '';
-  }
-
-  static getButtonClass = button => {
-    let buttonTypeClass = (button.includes("{") && button !== '{//}') ? "functionBtn" : "standardBtn";
-    let buttonWithoutBraces = button.replace("{", "").replace("}", "");
-
-    let buttonNormalized =
-      buttonTypeClass === "standardBtn" ?
-        Utilities.normalizeString(buttonWithoutBraces) : ` hg-button-${buttonWithoutBraces}`;
-
-    return `hg-${buttonTypeClass}${buttonNormalized}`;
-  }
-
-  static getDefaultDiplay(){
-    return {
-      '{bksp}': 'delete',
-      '{enter}': '< enter',
-      '{shift}': 'shift',
-      '{s}': 'shift',
-      '{tab}': 'tab',
-      '{lock}': 'caps',
-      '{accept}': 'Submit',
-      '{space}': ' ',
-      '{//}': ' '
-    };
-  }
-
-  static getButtonDisplayName = (button, display) => {
-    display = display || Utilities.getDefaultDiplay();
-    return display[button] || button;
-  }
-
-  static getUpdatedInput = (button, input, options) => {
-    let output = input;
-    let newLineOnEnter = options.newLineOnEnter;
-
-    if(button === "{bksp}" && output.length > 0)
-      output = output.slice(0, -1);
-    else if(button === "{space}")
-      output = output + ' ';
-    else if(button === "{tab}")
-      output = output + "\t";
-    else if(button === "{enter}" && newLineOnEnter)
-      output = output + "\n";
-    else if(!button.includes("{") && !button.includes("}"))
-      output = output + button;
-
-    return output;
-  }
-}
-
-export default Utilities;

src/lib/services/Utilities.ts

@@ -0,0 +1,480 @@
+import { KeyboardInput } from "./../interfaces";
+import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+
+/**
+ * Utility Service
+ */
+class Utilities {
+  getOptions: () => KeyboardOptions;
+  getCaretPosition: () => number;
+  getCaretPositionEnd: () => number;
+  dispatch: any;
+  maxLengthReached: boolean;
+
+  /**
+   * Creates an instance of the Utility service
+   */
+  constructor({
+    getOptions,
+    getCaretPosition,
+    getCaretPositionEnd,
+    dispatch,
+  }: UtilitiesParams) {
+    this.getOptions = getOptions;
+    this.getCaretPosition = getCaretPosition;
+    this.getCaretPositionEnd = getCaretPositionEnd;
+    this.dispatch = dispatch;
+
+    /**
+     * Bindings
+     */
+    Utilities.bindMethods(Utilities, this);
+  }
+
+  /**
+   * Retrieve button type
+   *
+   * @param  {string} button The button's layout name
+   * @return {string} The button type
+   */
+  getButtonType(button: string): string {
+    return button.includes("{") && button.includes("}") && button !== "{//}"
+      ? "functionBtn"
+      : "standardBtn";
+  }
+
+  /**
+   * Adds default classes to a given button
+   *
+   * @param  {string} button The button's layout name
+   * @return {string} The classes to be added to the button
+   */
+  getButtonClass(button: string): string {
+    const buttonTypeClass = this.getButtonType(button);
+    const buttonWithoutBraces = button.replace("{", "").replace("}", "");
+    let buttonNormalized = "";
+
+    if (buttonTypeClass !== "standardBtn")
+      buttonNormalized = ` hg-button-${buttonWithoutBraces}`;
+
+    return `hg-${buttonTypeClass}${buttonNormalized}`;
+  }
+
+  /**
+   * Default button display labels
+   */
+  getDefaultDiplay() {
+    return {
+      "{bksp}": "backspace",
+      "{backspace}": "backspace",
+      "{enter}": "< enter",
+      "{shift}": "shift",
+      "{shiftleft}": "shift",
+      "{shiftright}": "shift",
+      "{alt}": "alt",
+      "{s}": "shift",
+      "{tab}": "tab",
+      "{lock}": "caps",
+      "{capslock}": "caps",
+      "{accept}": "Submit",
+      "{space}": " ",
+      "{//}": " ",
+      "{esc}": "esc",
+      "{escape}": "esc",
+      "{f1}": "f1",
+      "{f2}": "f2",
+      "{f3}": "f3",
+      "{f4}": "f4",
+      "{f5}": "f5",
+      "{f6}": "f6",
+      "{f7}": "f7",
+      "{f8}": "f8",
+      "{f9}": "f9",
+      "{f10}": "f10",
+      "{f11}": "f11",
+      "{f12}": "f12",
+      "{numpaddivide}": "/",
+      "{numlock}": "lock",
+      "{arrowup}": "↑",
+      "{arrowleft}": "←",
+      "{arrowdown}": "↓",
+      "{arrowright}": "→",
+      "{prtscr}": "print",
+      "{scrolllock}": "scroll",
+      "{pause}": "pause",
+      "{insert}": "ins",
+      "{home}": "home",
+      "{pageup}": "up",
+      "{delete}": "del",
+      "{end}": "end",
+      "{pagedown}": "down",
+      "{numpadmultiply}": "*",
+      "{numpadsubtract}": "-",
+      "{numpadadd}": "+",
+      "{numpadenter}": "enter",
+      "{period}": ".",
+      "{numpaddecimal}": ".",
+      "{numpad0}": "0",
+      "{numpad1}": "1",
+      "{numpad2}": "2",
+      "{numpad3}": "3",
+      "{numpad4}": "4",
+      "{numpad5}": "5",
+      "{numpad6}": "6",
+      "{numpad7}": "7",
+      "{numpad8}": "8",
+      "{numpad9}": "9",
+    };
+  }
+  /**
+   * Returns the display (label) name for a given button
+   *
+   * @param  {string} button The button's layout name
+   * @param  {object} display The provided display option
+   * @param  {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
+   */
+  getButtonDisplayName(
+    button: string,
+    display: KeyboardOptions["display"],
+    mergeDisplay: boolean
+  ) {
+    if (mergeDisplay) {
+      display = Object.assign({}, this.getDefaultDiplay(), display);
+    } else {
+      display = display || this.getDefaultDiplay();
+    }
+
+    return display[button] || button;
+  }
+
+  /**
+   * Returns the updated input resulting from clicking a given button
+   *
+   * @param  {string} button The button's layout name
+   * @param  {string} input The input string
+   * @param  {number} caretPos The cursor's current position
+   * @param  {number} caretPosEnd The cursor's current end position
+   * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
+   */
+  getUpdatedInput(
+    button: string,
+    input: string,
+    caretPos: number,
+    caretPosEnd = caretPos,
+    moveCaret = false
+  ) {
+    const options = this.getOptions();
+    const commonParams: [number, number, boolean] = [
+      caretPos,
+      caretPosEnd,
+      moveCaret,
+    ];
+
+    let output = input;
+
+    if (
+      (button === "{bksp}" || button === "{backspace}") &&
+      output.length > 0
+    ) {
+      output = this.removeAt(output, ...commonParams);
+    } else if (button === "{space}")
+      output = this.addStringAt(output, " ", ...commonParams);
+    else if (
+      button === "{tab}" &&
+      !(
+        typeof options.tabCharOnTab === "boolean" &&
+        options.tabCharOnTab === false
+      )
+    ) {
+      output = this.addStringAt(output, "\t", ...commonParams);
+    } else if (
+      (button === "{enter}" || button === "{numpadenter}") &&
+      options.newLineOnEnter
+    )
+      output = this.addStringAt(output, "\n", ...commonParams);
+    else if (
+      button.includes("numpad") &&
+      Number.isInteger(Number(button[button.length - 2]))
+    ) {
+      output = this.addStringAt(
+        output,
+        button[button.length - 2],
+        ...commonParams
+      );
+    } else if (button === "{numpaddivide}")
+      output = this.addStringAt(output, "/", ...commonParams);
+    else if (button === "{numpadmultiply}")
+      output = this.addStringAt(output, "*", ...commonParams);
+    else if (button === "{numpadsubtract}")
+      output = this.addStringAt(output, "-", ...commonParams);
+    else if (button === "{numpadadd}")
+      output = this.addStringAt(output, "+", ...commonParams);
+    else if (button === "{numpaddecimal}")
+      output = this.addStringAt(output, ".", ...commonParams);
+    else if (button === "{" || button === "}")
+      output = this.addStringAt(output, button, ...commonParams);
+    else if (!button.includes("{") && !button.includes("}"))
+      output = this.addStringAt(output, button, ...commonParams);
+
+    return output;
+  }
+
+  /**
+   * Moves the cursor position by a given amount
+   *
+   * @param  {number} length Represents by how many characters the input should be moved
+   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+   */
+  updateCaretPos(length: number, minus = false) {
+    const newCaretPos = this.updateCaretPosAction(length, minus);
+
+    this.dispatch((instance: any) => {
+      instance.setCaretPosition(newCaretPos);
+    });
+  }
+
+  /**
+   * Action method of updateCaretPos
+   *
+   * @param  {number} length Represents by how many characters the input should be moved
+   * @param  {boolean} minus Whether the cursor should be moved to the left or not.
+   */
+  updateCaretPosAction(length: number, minus = false) {
+    const options = this.getOptions();
+    let caretPosition = this.getCaretPosition();
+
+    if (minus) {
+      if (caretPosition > 0) caretPosition = caretPosition - length;
+    } else {
+      caretPosition = caretPosition + length;
+    }
+
+    if (options.debug) {
+      console.log("Caret at:", caretPosition);
+    }
+
+    return caretPosition;
+  }
+
+  /**
+   * Adds a string to the input at a given position
+   *
+   * @param  {string} source The source input
+   * @param  {string} str The string to add
+   * @param  {number} position The (cursor) position where the string should be added
+   * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
+   */
+  addStringAt(
+    source: string,
+    str: string,
+    position = source.length,
+    positionEnd = source.length,
+    moveCaret = false
+  ) {
+    let output;
+
+    if (!position && position !== 0) {
+      output = source + str;
+    } else {
+      output = [source.slice(0, position), str, source.slice(positionEnd)].join(
+        ""
+      );
+
+      /**
+       * Avoid caret position change when maxLength is set
+       */
+      if (!this.isMaxLengthReached()) {
+        if (moveCaret) this.updateCaretPos(str.length);
+      }
+    }
+
+    return output;
+  }
+
+  /**
+   * Removes an amount of characters at a given position
+   *
+   * @param  {string} source The source input
+   * @param  {number} position The (cursor) position from where the characters should be removed
+   * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
+   */
+  removeAt(
+    source: string,
+    position = source.length,
+    positionEnd = source.length,
+    moveCaret = false
+  ) {
+    if (position === 0 && positionEnd === 0) {
+      return source;
+    }
+
+    let output;
+
+    if (position === positionEnd) {
+      let prevTwoChars;
+      let emojiMatched;
+      const emojiMatchedReg = /([\uD800-\uDBFF][\uDC00-\uDFFF])/g;
+
+      /**
+       * Emojis are made out of two characters, so we must take a custom approach to trim them.
+       * For more info: https://mathiasbynens.be/notes/javascript-unicode
+       */
+      if (position && position >= 0) {
+        prevTwoChars = source.substring(position - 2, position);
+        emojiMatched = prevTwoChars.match(emojiMatchedReg);
+
+        if (emojiMatched) {
+          output = source.substr(0, position - 2) + source.substr(position);
+          if (moveCaret) this.updateCaretPos(2, true);
+        } else {
+          output = source.substr(0, position - 1) + source.substr(position);
+          if (moveCaret) this.updateCaretPos(1, true);
+        }
+      } else {
+        prevTwoChars = source.slice(-2);
+        emojiMatched = prevTwoChars.match(emojiMatchedReg);
+
+        if (emojiMatched) {
+          output = source.slice(0, -2);
+          if (moveCaret) this.updateCaretPos(2, true);
+        } else {
+          output = source.slice(0, -1);
+          if (moveCaret) this.updateCaretPos(1, true);
+        }
+      }
+    } else {
+      output = source.slice(0, position) + source.slice(positionEnd);
+      if (moveCaret) {
+        this.dispatch((instance: any) => {
+          instance.setCaretPosition(position);
+        });
+      }
+    }
+
+    return output;
+  }
+  /**
+   * Determines whether the maxLength has been reached. This function is called when the maxLength option it set.
+   *
+   * @param  {object} inputObj
+   * @param  {string} updatedInput
+   */
+  handleMaxLength(inputObj: KeyboardInput, updatedInput: string) {
+    const options = this.getOptions();
+    const maxLength = options.maxLength;
+    const currentInput = inputObj[options.inputName];
+    const condition = updatedInput.length - 1 >= maxLength;
+
+    if (
+      /**
+       * If pressing this button won't add more characters
+       * We exit out of this limiter function
+       */
+      updatedInput.length <= currentInput.length
+    ) {
+      return false;
+    }
+
+    if (Number.isInteger(maxLength)) {
+      if (options.debug) {
+        console.log("maxLength (num) reached:", condition);
+      }
+
+      if (condition) {
+        /**
+         * @type {boolean} Boolean value that shows whether maxLength has been reached
+         */
+        this.maxLengthReached = true;
+        return true;
+      } else {
+        this.maxLengthReached = false;
+        return false;
+      }
+    }
+
+    if (typeof maxLength === "object") {
+      const condition = updatedInput.length - 1 >= maxLength[options.inputName];
+
+      if (options.debug) {
+        console.log("maxLength (obj) reached:", condition);
+      }
+
+      if (condition) {
+        this.maxLengthReached = true;
+        return true;
+      } else {
+        this.maxLengthReached = false;
+        return false;
+      }
+    }
+  }
+
+  /**
+   * Gets the current value of maxLengthReached
+   */
+  isMaxLengthReached() {
+    return Boolean(this.maxLengthReached);
+  }
+
+  /**
+   * Determines whether a touch device is being used
+   */
+  isTouchDevice() {
+    return "ontouchstart" in window || navigator.maxTouchPoints;
+  }
+
+  /**
+   * Determines whether pointer events are supported
+   */
+  pointerEventsSupported() {
+    return !!window.PointerEvent;
+  }
+
+  /**
+   * Bind all methods in a given class
+   */
+
+  static bindMethods(myClass: any, instance: any) {
+    // eslint-disable-next-line no-unused-vars
+    for (const myMethod of Object.getOwnPropertyNames(myClass.prototype)) {
+      const excludeMethod =
+        myMethod === "constructor" || myMethod === "bindMethods";
+      if (!excludeMethod) {
+        instance[myMethod] = instance[myMethod].bind(instance);
+      }
+    }
+  }
+
+  /**
+   * Transforms an arbitrary string to camelCase
+   *
+   * @param  {string} str The string to transform.
+   */
+  camelCase(str: string): string {
+    if (!str) return;
+
+    return str
+      .toLowerCase()
+      .trim()
+      .split(/[.\-_\s]/g)
+      .reduce((str, word) =>
+        word.length ? str + word[0].toUpperCase() + word.slice(1) : str
+      );
+  }
+
+  /**
+   * Split array into chunks
+   */
+  chunkArray<T>(arr: T[], size: number): T[][] {
+    return [...Array(Math.ceil(arr.length / size))].map((_, i) =>
+      arr.slice(size * i, size + size * i)
+    );
+  }
+
+  /**
+   * Reusable empty function
+   */
+  static noop = () => {};
+}
+
+export default Utilities;

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

@@ -0,0 +1,204 @@
+import Keyboard from '../../components/Keyboard';
+import { setDOM } from '../../../utils/TestUtility';
+
+it('PhysicalKeyboard keydown will be handled with physicalKeyboardHighlight', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard keydown will be handled without physicalKeyboardHighlight', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: false
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard keydown will not style non-existent buttons', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "WRONG",
+    key: "WRONG",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard keyup will be handled with physicalKeyboardHighlight', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard keyup will be handle special buttons', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "Shift",
+    key: "Shift",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard keyup will not style non-existent buttons', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "WRONG",
+    key: "WRONG",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard will work with F1-F12 keys', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "F12",
+    key: "F12",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress (touch)', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    useTouchEvents: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard with physicalKeyboardHighlightPress can trigger noop', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    useTouchEvents: true,
+    debug: true
+  });
+
+  keyboard.getButtonElement('f').onmousedown = null;
+  keyboard.getButtonElement('f').onpointerdown = null;
+  keyboard.getButtonElement('f').ontouchstart = null;
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  keyboard.getButtonElement('f').onmouseup = null;
+  keyboard.getButtonElement('f').onpointerup = null;
+  keyboard.getButtonElement('f').ontouchend = null;
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});

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

@@ -0,0 +1,587 @@
+import Keyboard from '../../components/Keyboard';
+import { setDOM, clearDOM, testLayoutFctButtons } from '../../../utils/TestUtility';
+
+it('Keyboard mergeDisplay will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    mergeDisplay: true,
+    display: {
+      "q": "qreplaced"
+    }
+  });
+  
+  expect(keyboard.getButtonElement("q").querySelector("span").innerHTML).toBe("qreplaced");
+});
+
+it('Keyboard function buttons will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+  
+  testLayoutFctButtons(keyboard, (fctBtnCount, fctBtnHasOnclickCount) => {
+    expect(fctBtnCount).toBe(fctBtnHasOnclickCount);
+  }, keyboard);
+});
+
+it('Keyboard {bksp} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{bksp}", "test");
+  
+  expect(output).toBe("tes");
+});
+
+it('Keyboard {space} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{space}", "test");
+  
+  expect(output).toBe("test ");
+});
+
+it('Keyboard {tab} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{tab}", "test");
+  
+  expect(output).toBe("test\t");
+});
+
+it('Keyboard {tab} button will work with tabCharOnTab:false', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    tabCharOnTab: false
+  });
+
+  const output = keyboard.utilities.getUpdatedInput("{tab}", "test");
+  
+  expect(output).toBe("test");
+});
+
+it('Keyboard {enter} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{enter}", "test");
+  
+  expect(output).toBe("test");
+});
+
+it('Keyboard {enter} button will work with newLineOnEnter:true', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    newLineOnEnter: true
+  });
+
+  const output = keyboard.utilities.getUpdatedInput("{enter}", "test");
+  
+  expect(output).toBe("test\n");
+});
+
+it('Keyboard {numpadX} buttons will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  for(let i = 0;i<=9;i++){
+    const output = keyboard.utilities.getUpdatedInput(`{numpad${i}}`, "test");
+    expect(output).toBe(`test${i}`);
+  }
+});
+
+it('Keyboard {numpaddivide} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{numpaddivide}", "test");
+  
+  expect(output).toBe("test/");
+});
+
+it('Keyboard {numpadmultiply} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{numpadmultiply}", "test");
+  
+  expect(output).toBe("test*");
+});
+
+it('Keyboard {numpadsubtract} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{numpadsubtract}", "test");
+  
+  expect(output).toBe("test-");
+});
+
+it('Keyboard {numpadadd} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
+  
+  expect(output).toBe("test+");
+});
+
+it('Keyboard {numpadadd} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{numpadadd}", "test");
+  
+  expect(output).toBe("test+");
+});
+
+it('Keyboard {numpaddecimal} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{numpaddecimal}", "test");
+  
+  expect(output).toBe("test.");
+});
+
+it('Keyboard custom function buttons will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "{randombuttontest}"
+      ]
+    }
+  });
+
+  const output = keyboard.utilities.getUpdatedInput("{randombuttontest}", "test");
+  
+  expect(output).toBe("test");
+  expect(keyboard.getButtonElement("{randombuttontest}").onclick).toBeTruthy();
+});
+
+it('Keyboard "{" button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{", "test");
+  
+  expect(output).toBe("test{");
+});
+
+it('Keyboard "}" button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("}", "test");
+  
+  expect(output).toBe("test}");
+});
+
+it('Keyboard standard button will affect input', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  for (let i = 65; i <= 90; i++) {
+    const char = String.fromCharCode(i);
+    const output = keyboard.utilities.getUpdatedInput(char, "test");
+    expect(output).toBe(`test${char}`);
+  }
+});
+
+it('Keyboard updateCaretPos will work with minus', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    syncInstanceInputs: true
+  });
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.updateCaretPos(2, true);
+
+  expect(keyboard.caretPosition).toBe(3);
+});
+
+it('Keyboard updateCaretPos will work with minus', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.updateCaretPos(2, true);
+
+  expect(keyboard.caretPosition).toBe(3);
+});
+
+it('Keyboard updateCaretPos will work with plus', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.updateCaretPos(2);
+
+  expect(keyboard.caretPosition).toBe(7);
+});
+
+it('Keyboard addStringAt will work with debug', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  keyboard.getButtonElement("q").onclick();
+
+  expect(keyboard.getInput()).toBe("q");
+});
+
+it('Keyboard addStringAt will work with position', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  keyboard.setInput("test");
+  keyboard.setCaretPosition(5);
+
+  keyboard.getButtonElement("q").onclick();
+
+  expect(keyboard.getInput()).toBe("testq");
+});
+
+it('Keyboard addStringAt will respect maxLength', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true,
+    maxLength: 4
+  });
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(4);
+
+  keyboard.utilities.handleMaxLength(keyboard.input, "testq")
+  keyboard.utilities.addStringAt("test", "q", 4, 4);
+
+  expect(keyboard.caretPosition).toBe(4);
+});
+
+it('Keyboard handleMaxLength will exit out on same updatedInput', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  keyboard.setInput("test");
+
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "test")
+
+  expect(output).toBeFalsy();
+});
+
+it('Keyboard handleMaxLength will work with object maxLength', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: {
+      default: 4
+    }
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBeTruthy();
+});
+
+it('Keyboard handleMaxLength will work with object maxLength and debug', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: {
+      default: 4
+    },
+    debug: true
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBeTruthy();
+});
+
+it('Keyboard handleMaxLength will return false if obj maxLength not reached', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: {
+      default: 7
+    }
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBeFalsy();
+});
+
+
+it('Keyboard handleMaxLength will work without debug', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: 4
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBeTruthy();
+});
+
+
+it('Keyboard handleMaxLength will work with numeric maxLength', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: 3
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBe(true);
+});
+
+it('Keyboard handleMaxLength wont work with non numeric or object maxLength', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: "wrong"
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBeFalsy();
+});
+
+it('Keyboard handleMaxLength wont work with non numeric or object maxLength (with debug)', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: "wrong",
+    debug: true
+  });
+
+  keyboard.setInput("test");
+  
+  const output = keyboard.utilities.handleMaxLength(keyboard.input, "testq");
+
+  expect(output).toBeFalsy();
+});
+
+it('Keyboard isMaxLengthReached will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    maxLength: 5
+  });
+
+  const output = keyboard.utilities.isMaxLengthReached();
+
+  expect(output).toBeFalsy();
+});
+
+it('Keyboard removeAt will exit out on caretPosition:0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(0);
+  keyboard.utilities.removeAt(keyboard.getInput(), 0);
+  expect(keyboard.getInput()).toBe("test");
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.removeAt(keyboard.getInput(), 0, 0, true);
+  expect(keyboard.caretPosition).toBe(5);
+});
+
+it('Keyboard removeAt will remove multi-byte unicodes with caretPos>0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setCaretPosition(6);
+  let output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, 6);
+  expect(output).toBe("test");
+
+  keyboard.setCaretPosition(6);
+  output = keyboard.utilities.removeAt("test\uD83D\uDE00", 6, 6, true);
+  expect(keyboard.caretPosition).toBe(4);
+});
+
+it('Keyboard removeAt will not remove multi-byte unicodes with caretPos:0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+  let output = keyboard.utilities.removeAt("\uD83D\uDE00");
+  expect(output).toBeFalsy();
+
+  output = keyboard.utilities.removeAt("\uD83D\uDE00", 0, 0, true);
+  expect(output).toBe("\uD83D\uDE00");
+});
+
+it('Keyboard removeAt will propagate caretPosition', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({ useMouseEvents: true });
+  const keyboard2 = new Keyboard('.keyboard2');
+
+  keyboard.input.default = "hello";
+  keyboard2.input.default = "world"
+  
+  keyboard.setCaretPosition(1);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  
+  keyboard.setCaretPosition(1, 3);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(3);
+
+  keyboard.getButtonElement('{bksp}').onclick();
+  
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard2.getCaretPosition()).toBe(1);
+
+  expect(keyboard.getInput()).toBe('hlo');
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  expect(keyboard2.getCaretPositionEnd()).toBe(1);
+});
+
+it('Keyboard removeAt will propagate caretPosition in a syncInstanceInputs setting', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({ useMouseEvents: true, syncInstanceInputs: true });
+  const keyboard2 = new Keyboard('.keyboard2');
+
+  keyboard.input.default = "hello"
+  
+  keyboard.setCaretPosition(1);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  
+  keyboard.setCaretPosition(1, 3);
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard.getCaretPositionEnd()).toBe(3);
+
+  keyboard.getButtonElement('{bksp}').onclick();
+  
+  expect(keyboard.getCaretPosition()).toBe(1);
+  expect(keyboard2.getCaretPosition()).toBe(1);
+
+  expect(keyboard.getInput()).toBe('hlo');
+  expect(keyboard.getCaretPositionEnd()).toBe(1);
+  expect(keyboard2.getCaretPositionEnd()).toBe(1);
+});
+
+it('Keyboard removeAt will remove regular strings', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  keyboard.setCaretPosition(6);
+  let output = keyboard.utilities.removeAt("testie", 6, 6);
+  expect(output).toBe("testi");
+
+  keyboard.setCaretPosition(6);
+  output = keyboard.utilities.removeAt("testie", 6, 6, true);
+  expect(keyboard.caretPosition).toBe(5);
+});
+
+it('Keyboard removeAt will work with unset or start caretPosition', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  let output = keyboard.utilities.removeAt("test");
+  expect(output).toBe("tes");
+
+  output = keyboard.utilities.removeAt("test", null, null);
+  expect(output).toBe("tes");
+
+  output = keyboard.utilities.removeAt("😀", null, null);
+  expect(output).toBe("");
+
+  /**
+   * Will also work with moveCaret
+   */
+  keyboard.setCaretPosition(3);
+  output = keyboard.utilities.removeAt("test", null, null, true);
+  expect(output).toBe("tes");
+  expect(keyboard.getCaretPosition()).toBe(2);
+
+  keyboard.setCaretPosition(2);
+  output = keyboard.utilities.removeAt("😀", null, null, true);
+  expect(output).toBe("");
+  expect(keyboard.getCaretPosition()).toBe(0);
+});
+
+it('Keyboard will work with custom (and weird) class', () => {
+  setDOM("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', () => {
+  setDOM();
+  const keyboard = new Keyboard();
+  expect(keyboard.utilities.camelCase()).toBeFalsy();
+});

src/utils/TestUtility.js

@@ -0,0 +1,118 @@
+/**
+ * Test Utility Functions
+ */
+  /**
+   * Sets a basic DOM structure to test in
+   */
+  export const setDOM = (divClass) => {
+    clearDOM();
+    const wrapperDOM = document.createElement('div');
+    wrapperDOM.setAttribute("id", "root");
+
+    const keyboardDOM = document.createElement('div');
+    keyboardDOM.className = divClass || "simple-keyboard";
+
+    wrapperDOM.appendChild(keyboardDOM);
+    document.body.appendChild(wrapperDOM);
+  }
+
+  /**
+   * Clears DOM structure
+   */
+  export const clearDOM = () => {
+    document.body.innerHTML = "";
+  }
+
+  /**
+   * Trigger pointerup
+   */
+  export const triggerDocumentPointerUp = (e = {}) => {
+    document.dispatchEvent(new MouseEvent('mouseup', e));
+  };
+
+  /**
+   * Trigger pointerdown
+   */
+  export const triggerDocumentPointerDown = (e = {}) => {
+    document.dispatchEvent(new MouseEvent('mousedown', e));
+  };
+ 
+  /**
+   * Test if standard buttons respect maxLength and do input a value
+   */
+  export const testLayoutStdButtons = (keyboard) => {
+    let stdBtnCount = 0;
+    let fullInput = '';
+
+    keyboard.recurseButtons((button) => {
+      const label = button.getAttribute("data-skbtn");
+
+      if(label.includes("{"))
+        return false;
+
+      // Click all standard buttons, respects maxLength
+      button.onclick();
+
+      // Recording fullInput, bypasses maxLength
+      fullInput = keyboard.utilities.getUpdatedInput(label, fullInput);
+
+      stdBtnCount += label.length;
+    });
+
+    /**
+     * Check if maxLength is respected
+     */
+    if(
+      (
+        typeof keyboard.options.maxLength === "object" &&
+        keyboard.getInput().length !== keyboard.options.maxLength[keyboard.options.layoutName]
+      ) ||
+      (
+        typeof keyboard.options.maxLength !== "object" &&
+        keyboard.getInput().length !== keyboard.options.maxLength
+      )
+    )
+      throw new Error("MAX_LENGTH_ISSUE");
+    else
+      console.log("MAX_LENGTH PASSED:", keyboard.options.layoutName, keyboard.getInput().length, keyboard.options.maxLength);
+
+    /**
+     * Check if all standard buttons are inputting something
+     * (Regardless of maxLength)
+     */
+    if(stdBtnCount !== fullInput.length)
+      throw new Error("STANDARD_BUTTONS_ISSUE");
+    else
+      console.log("STANDARD_BUTTONS PASSED:", keyboard.options.layoutName, stdBtnCount, fullInput.length);
+  }
+
+  /**
+   * Test if function buttons are interactive (have an onclick)
+   */
+  export const testLayoutFctButtons = (keyboard, callback) => {
+    let fctBtnCount = 0;
+    let fctBtnHasOnclickCount = 0;
+
+    keyboard.recurseButtons((button) => {
+      const label = button.getAttribute("data-skbtn");
+
+      if(!label.includes("{") && !label.includes("}"))
+        return false;
+
+      fctBtnCount++;
+
+      if(button.onclick){
+        button.onclick();
+        fctBtnHasOnclickCount++;
+      }
+
+      callback(fctBtnCount, fctBtnHasOnclickCount);
+    });
+  }
+
+  /**
+   * Remove RTL control chars
+   */
+  export const removeRTLControls = (input) => {
+    return input.replace("\u202B", "").replace("\u202C", "");
+  }

tsconfig.json

@@ -0,0 +1,18 @@
+{
+    "compilerOptions": {
+      "noImplicitAny": true,
+      "outDir": "build/types",
+      "module": "esnext",
+      "target": "es5",
+      "allowJs": true,
+      "sourceMap": true,
+      "declaration": true,
+      "emitDeclarationOnly": true,
+      "suppressImplicitAnyIndexErrors": true,
+      "lib": ["es2020", "dom"],
+      "moduleResolution": "node",
+      "downlevelIteration": true
+    },
+    "include": ["src/lib"],
+    "exclude": ["src/lib/**/tests"],
+}

webpack.config.demo.js

@@ -0,0 +1,51 @@
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const HtmlWebpackPlugin = require('html-webpack-plugin');
+
+module.exports = {
+  mode: "development",
+  devtool: 'cheap-module-source-map',
+  entry: './src/demo/index.js',
+  output: {
+    filename: 'index.js'
+  },
+  optimization: {
+    minimize: false,
+  },
+  devServer: {
+    open: true,
+    hot: true,
+    host: "localhost",
+    port: 9000
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(m|j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: "css-loader", options: { sourceMap: true } },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
+        use: ['url-loader'],
+      }
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: 'css/index.css'
+    }),
+    new HtmlWebpackPlugin(),
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};

webpack.config.js

@@ -0,0 +1,99 @@
+const path = require('path');
+const webpack = require('webpack');
+const PrettierPlugin = require("prettier-webpack-plugin");
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author,
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version}
+  ${repository.url}
+
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")} and project contributors.
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+`;
+
+module.exports = {
+  mode: "production",
+  entry: './src/lib/index.ts',
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'build'),
+    library: "SimpleKeyboard",
+    libraryTarget: 'umd',
+    clean: true,
+    globalObject: 'this',
+    environment: {
+      arrowFunction: false
+    }
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+      new OptimizeCSSAssetsPlugin()
+    ],
+  },
+  devServer: {
+    open: true,
+    hot: true,
+    host: "localhost",
+    static: path.join(__dirname, 'demo'),
+    port: 9000
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader'
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          { loader: "css-loader" },
+          {
+            loader: "postcss-loader",
+            options: {
+              postcssOptions: {
+                plugins: [
+                  [
+                    "autoprefixer"
+                  ],
+                ],
+              },
+            },
+          },
+        ],
+      },
+      {
+        test: /\.(png|jpe?g|gif|svg|eot|ttf|woff|woff2)$/,
+        use: ['url-loader'],
+      }
+    ]
+  },
+  plugins: [
+    new PrettierPlugin(),
+    new MiniCssExtractPlugin({
+        filename: 'css/index.css'
+    }),
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};