Build update

Bump @babel/cli from 7.26.4 to 7.27.0

.github/FUNDING.yml

@@ -1 +1 @@
-custom: https://hge.to/thanks
+buy_me_a_coffee: hodgef

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,10 +8,13 @@ assignees: hodgef
 ---
 
 **Simple-keyboard version**
-As some bugs have been addressed in later versions, please ensure you are running the latest.
+Some bugs are addressed in newer versions, therefore 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.
+A short and clear description of what the bug is.
+
+**Provide a repro**
+Providing a [sandbox example](https://codesandbox.io/s/vanilla) is important, as this will help us reproduce the issue. You can also provide a sample git repository. Without a full repro of your issue, we will not be able to debug and the ticket will be closed early.
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+    timezone: America/Montreal
+  open-pull-requests-limit: 10
+  versioning-strategy: increase

.github/pull_request_template.md

@@ -4,4 +4,4 @@ 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%
+- [ ] I have read and followed the [Contributing Guidelines](https://github.com/hodgef/simple-keyboard/blob/master/CONTRIBUTING.md).

.github/stale.yml

@@ -1,19 +0,0 @@
-# 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

@@ -1,12 +1,18 @@
 name: Build
-on: [push]
+on:
+  push:
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
+    if: contains(github.ref, 'master')
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
@@ -16,15 +22,12 @@ jobs:
           node-version: ${{ matrix.node_version }}
       - name: npm install, build, and test
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           npm install
           npm run coverage
-      - uses: codecov/codecov-action@v1.0.2
-        with:
-          token: ${{secrets.CODECOV_TOKEN}}
-        env:
-          CI: true
 
       - name: Discord notification
+        continue-on-error: true
         if: success()
         env:
           DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}
@@ -33,6 +36,7 @@ jobs:
           args: "simple-keyboard - CI Build Passed"
 
       - name: Discord notification
+        continue-on-error: true
         if: failure()
         env:
           DISCORD_WEBHOOK: ${{ secrets.DISCORD_WEBHOOK }}

.github/workflows/mirroring.yml

@@ -1,15 +0,0 @@
-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

@@ -4,18 +4,35 @@ on:
   push:
     branches:
       - master
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**
+
+permissions:
+  contents: write
+  id-token: write
 
 jobs:
   publish:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
         with:
-          node-version: 12
-      - run: npm install
-      - run: npm run test -- --coverage --watchAll=false
-        
+          node-version: ${{ matrix.node_version }}
+          
+      - name: npm install, build, and test
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run test -- --coverage --watchAll=false
+
       - name: Setup GIT
         run: |
           git reset --hard
@@ -24,10 +41,11 @@ jobs:
           git config user.email "$GH_EMAIL"
           git config user.name "Francisco Hodge"
         env:
-            GH_EMAIL: ${{secrets.GH_EMAIL}}
-          
+          GH_EMAIL: ${{secrets.GH_EMAIL}}
+
       - name: Bump version
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           git reset --hard
           npm version patch
           npm run build
@@ -36,10 +54,11 @@ jobs:
           git push "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY"
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          
+
       - name: npm publish
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
-          npm run trypublish
+          npm publish --provenance --access public
         env:
-            NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
+          NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}

.github/workflows/pull_request.yml

@@ -1,24 +1,25 @@
-name: Build PR
-on: [pull_request]
+name: Build PR (Standard)
+
+on: pull_request
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
+    if: ${{ github.actor != 'dependabot[bot]' }}
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [20.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
+      - 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: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run coverage
+        env:
+          CI: true

.github/workflows/pull_request_compl.yml

@@ -0,0 +1,24 @@
+name: PR Compliance
+
+on: 
+  pull_request_target:
+    types: [opened]
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        os: [ubuntu-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            :wave: Hello @${{ github.actor }}! Please make sure to review the [Contributing Guidelines](https://github.com/hodgef/simple-keyboard/blob/master/CONTRIBUTING.md) to ensure your PR is compliant. Thank you!
+          reactions: eyes

.github/workflows/pull_request_dependabot.yml

@@ -0,0 +1,49 @@
+name: Build PR (Dependabot)
+
+on: pull_request_target
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        os: [ubuntu-latest]
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - 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: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run coverage
+        env:
+          CI: true
+      - name: Merge PR
+        if: success()
+        uses: "actions/github-script@v2"
+        with:
+          github-token: "${{ secrets.GH_KEY }}"
+          script: |
+            const pullRequest = context.payload.pull_request
+            const repository = context.repo
+
+            await github.pulls.merge({
+              merge_method: "merge",
+              owner: repository.owner,
+              pull_number: pullRequest.number,
+              repo: repository.repo,
+            })
+      - name: Reject PR
+        if: failure()
+        uses: peter-evans/close-pull@v1
+        with:
+          pull-request-number: ${{github.event.number}}
+          comment: "Closing PR due to failing tests."
+          delete-branch: true

.github/workflows/stale.yml

@@ -0,0 +1,15 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: 'This ticket is stale because it has been open 5 days with no activity. If pertaining to an Enhancement, the ticket will be tracked even after closing.'
+          stale-pr-message: 'This PR is stale because it has been open 5 days with no activity. It will be closed soon if no further activity occurs. Thank you!'
+          days-before-stale: 5
+          days-before-close: 5

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+_git*

.npmignore

@@ -30,7 +30,10 @@ config
 .travis.yml
 CHANGELOG.md
 README.md
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+tsconfig.json
 .eslintignore
 .eslintrc.json
-webpack.config.js
-babel.config.js
+webpack.config.*
+babel.config.js

CONTRIBUTING.md

@@ -7,9 +7,15 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 ## 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.
+1. Use PRs to fix issues. New features are discouraged as they bring more maintenance burden over time.
+2. Discuss the change you wish to make with the owners of this repository **before** raising a PR. If you do not discuss it beforehand, your PR might end up being rejected and your work will be lost.
+3. Please ensure your proposal will not significantly change current functionality or bring along breaking changes.
+4. PRs only consisting of typo fixes (or other automated contributions), will not be accepted.
+5. Do not add any dependencies, libraries or external codes to the project. All the code submitted should be authored by you.
+6. Avoid refactors. The changes should be succint and fix a specific issue with the least code possible.
+7. Document your changes thoroughly.
+8. Ensure that none of the tests fail.
+9. Be reactive to any comments, reviews or change requests entered in your pull request.
+10. It's up to the maintainers discretion whether the PR is accepted or rejected. Remember, the maintainer will have to maintain the code you've added (and fix any issues filed about it) for the years to come! In case of a rejection, the maintainer will explain the reasons guiding the decision.
+
+Thank you for your contributions!

README.md

@@ -1,46 +1,23 @@
 <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>
-
-  <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://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://codecov.io/gh/hodgef/simple-keyboard">
-    <img src="https://badgen.net/codecov/c/github/hodgef/simple-keyboard" alt="coverage">
+	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://user-images.githubusercontent.com/25509135/187999993-fb5422fd-a56f-4a9a-84a9-55c94478f61c.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> <a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE"><img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT license"></a> <a href="https://gitlab.com/hodgef/simple-keyboard" target="_blank"><img alt="Mirroring" src="https://img.shields.io/badge/Mirror-GitLab-blue" /></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg" /></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" /></a>
 </p>
 
 <blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
 
-## Demo 🚀
+## 🚀 Demo
 
 [Demo Showcase (Vanilla, Angular, React, Vue)](https://simple-keyboard.com/demo)
 
-## Installation & Usage 📦
+## 📦 Installation & Usage
 
 You can use simple-keyboard as a `<script>` tag from a CDN, or install it from npm.
 
 Check out the [Getting Started](https://simple-keyboard.com/getting-started) docs to begin.
 
-## Documentation 📖
+## 📖 Documentation
 
 Check out the [simple-keyboard documentation](https://simple-keyboard.com/documentation) site.
 
@@ -63,7 +40,7 @@ Feel free to browse the [Questions & Answers (FAQ)](https://simple-keyboard.com/
 
 <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 ✳️
+## ✳️ Modules
 
 You can extend simple-keyboard's functionality with [modules](https://hodgef.com/simple-keyboard/modules/). Such as:
 
@@ -74,7 +51,7 @@ You can extend simple-keyboard's functionality with [modules](https://hodgef.com
 
 Want to create your own module? Check out the [Modules page](https://hodgef.com/simple-keyboard/modules/) for instructions.
 
-## Compatibility 🎯
+## 🎯 Compatibility
 
 - Internet Explorer 11
 - Edge (Spartan) 16+
@@ -84,7 +61,13 @@ Want to create your own module? Check out the [Modules page](https://hodgef.com/
 - Firefox 57+
 - iOS 9+
 
-## Contributing ✅
+> Note: If you don't want to support old browsers, you can use the Modern Browsers bundle ([index.modern.js](https://github.com/hodgef/simple-keyboard/blob/master/build)).
+
+## 🔶 Community Libraries & Integrations
+Check out useful community modules for simple-keyboard:<br />
+https://github.com/hodgef/simple-keyboard/wiki/Community-Libraries-&-Integrations
+
+## ✅ 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

@@ -1,22 +1,25 @@
 module.exports = {
   presets: [
-    ["@babel/env", {
-      corejs:"3",
-      useBuiltIns: 'usage',
-      "targets": {
-        "browsers": [
-          "edge >= 16",
-          "safari >= 9",
-          "firefox >= 57",
-          "ie >= 11",
-          "ios >= 9",
-          "chrome >= 49"
-        ]
+    [
+      "@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"]
-  ]
-};
+    ["@babel/plugin-transform-typescript"],
+  ],
+};

build/components/CandidateBox.d.ts

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

build/components/Keyboard.d.ts

@@ -1,6 +1,7 @@
 import "./css/Keyboard.css";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
-import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement, KeyboardParams } from "../interfaces";
+import Utilities from "../services/Utilities";
+import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement } from "../interfaces";
 import CandidateBox from "./CandidateBox";
 /**
  * Root class for simple-keyboard.
@@ -12,9 +13,9 @@ import CandidateBox from "./CandidateBox";
 declare class SimpleKeyboard {
     input: KeyboardInput;
     options: KeyboardOptions;
-    utilities: any;
-    caretPosition: number;
-    caretPositionEnd: number;
+    utilities: Utilities;
+    caretPosition: number | null;
+    caretPositionEnd: number | null;
     keyboardDOM: KeyboardElement;
     keyboardPluginClasses: string;
     keyboardDOMClass: string;
@@ -34,33 +35,35 @@ declare class SimpleKeyboard {
     holdTimeout: number;
     isMouseHold: boolean;
     initialized: boolean;
-    candidateBox: CandidateBox;
+    candidateBox: CandidateBox | null;
     keyboardRowsDOM: KeyboardElement;
+    defaultName: string;
+    activeInputElement: HTMLInputElement | HTMLTextAreaElement | null;
     /**
      * 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.
+     * @param {Array} selectorOrOptions 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);
+    constructor(selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions);
     /**
      * parseParams
      */
-    handleParams: (params: KeyboardParams) => {
+    handleParams: (selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions) => {
         keyboardDOMClass: string;
         keyboardDOM: KeyboardElement;
-        options: Partial<KeyboardOptions>;
+        options: Partial<KeyboardOptions | undefined>;
     };
     /**
      * Getters
      */
     getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
     /**
      * 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;
+    setCaretPosition(position: number | null, endPosition?: number | null): void;
     /**
      * Retrieve the candidates for a given input
      * @param input The input string to check
@@ -80,6 +83,14 @@ declare class SimpleKeyboard {
      * @param  {string} button The button's layout name.
      */
     handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void;
+    /**
+     * Get mouse hold state
+     */
+    getMouseHold(): boolean;
+    /**
+     * Mark mouse hold state as set
+     */
+    setMouseHold(value: boolean): void;
     /**
      * Handles button mousedown
      */
@@ -104,7 +115,7 @@ declare class SimpleKeyboard {
      * Clear the keyboard’s input.
      * @param {string} [inputName] optional - the internal input to select
      */
-    clearInput(inputName: string): void;
+    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
@@ -166,7 +177,7 @@ declare class SimpleKeyboard {
      * 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[];
+    getButtonElement(button: string): KeyboardElement | KeyboardElement[] | undefined;
     /**
      * This handles the "inputPattern" option
      * by checking if the provided inputPattern passes
@@ -196,6 +207,10 @@ declare class SimpleKeyboard {
      * Event Handler: Select
      */
     handleSelect(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: SelectionChange
+     */
+    handleSelectionChange(event: KeyboardHandlerEvent): void;
     /**
      * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
      */

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.0.0
+ *   simple-keyboard v3.8.45
  *   https://github.com/hodgef/simple-keyboard
  *
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
@@ -8,4 +8,4 @@
  *   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}
+ */.hg-theme-default{background-color:#ececec;border-radius:5px;box-sizing:border-box;font-family:HelveticaNeue-Light,Helvetica Neue Light,Helvetica Neue,Helvetica,Arial,Lucida Grande,sans-serif;overflow:hidden;padding:5px;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.hg-theme-default .hg-button span,.hg-theme-default .hg-button span svg{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit;outline:0}.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{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-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{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.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{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}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{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}

build/index.d.ts

@@ -0,0 +1,5 @@
+import "./polyfills";
+import SimpleKeyboard from "./components/Keyboard";
+export * from "./interfaces";
+export { SimpleKeyboard };
+export default SimpleKeyboard;

build/index.modern.d.ts

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

build/interfaces.d.ts

@@ -1,12 +1,15 @@
 import SimpleKeyboard from "./components/Keyboard";
 import Utilities from "./services/Utilities";
+export interface SKWindow extends Window {
+    SimpleKeyboardInstances?: any;
+}
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
-export interface KeyboardButtonTheme {
+export type KeyboardButtonTheme = {
     class: string;
     buttons: string;
-}
+} | null;
 export interface KeyboardButtonAttributes {
     attribute: string;
     value: string;
@@ -15,33 +18,35 @@ export interface KeyboardButtonAttributes {
 export interface KeyboardInput {
     [key: string]: string;
 }
-export declare type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
-export declare type CandidateBoxParams = {
+export type CandidateBoxParams = {
     utilities: Utilities;
+    options: KeyboardOptions;
 };
-export declare type CandidateBoxShowParams = {
+export type CandidateBoxShowParams = {
     candidateValue: string;
     targetElement: KeyboardElement;
-    onSelect: (selectedCandidate: string) => void;
+    onSelect: (selectedCandidate: string, e: MouseEvent) => void;
 };
-export declare type CandidateBoxRenderParams = {
+export 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;
+    onItemSelected: (selectedCandidate: string, e: MouseEvent) => void;
 };
+export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
+export type KeyboardHandlerEvent = any;
 export interface KeyboardButtonElements {
     [key: string]: KeyboardElement[];
 }
 export interface UtilitiesParams {
     getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
+    dispatch: any;
+}
+export interface PhysicalKeyboardParams {
+    getOptions: () => KeyboardOptions;
     dispatch: any;
 }
 export interface KeyboardOptions {
@@ -106,9 +111,19 @@ export interface KeyboardOptions {
      */
     physicalKeyboardHighlight?: boolean;
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+    /**
+     * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     */
+    physicalKeyboardHighlightPressUsePointerEvents?: boolean;
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
@@ -117,6 +132,10 @@ export interface KeyboardOptions {
      * Define the background color that the physical keyboard highlighted key should have.
      */
     physicalKeyboardHighlightBgColor?: string;
+    /**
+     * Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
+     */
+    physicalKeyboardHighlightPreventDefault?: boolean;
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -182,17 +201,57 @@ export interface KeyboardOptions {
         [key: string]: string[];
     };
     /**
-     * Determine size of layout candidate list
+     * Determines size of layout candidate list
      */
     layoutCandidatesPageSize?: number;
+    /**
+     * Determines whether layout candidate match should be case sensitive.
+     */
+    layoutCandidatesCaseSensitiveMatch?: boolean;
+    /**
+     * Disables the automatic normalization for selected layout candidates
+     */
+    disableCandidateNormalization?: boolean;
+    /**
+     * Enables onKeyPress triggering for layoutCandidate items
+     */
+    enableLayoutCandidatesKeyPress?: boolean;
+    /**
+     * Updates caret when selectionchange event is fired
+     */
+    updateCaretOnSelectionChange?: boolean;
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
-    onRender?: (instance?: SimpleKeyboard) => void;
+    onRender?: (instance: SimpleKeyboard) => void;
     /**
      * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      */
-    onInit?: (instance?: SimpleKeyboard) => void;
+    onInit?: (instance: SimpleKeyboard) => void;
+    /**
+     * Retrieves the current input
+     */
+    onChange?: (input: string, e?: MouseEvent) => any;
+    /**
+     * Retrieves all inputs
+     */
+    onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
+    /**
+     * Retrieves the pressed key
+     */
+    onKeyPress?: (button: string, e?: MouseEvent) => any;
+    /**
+     * Retrieves the released key
+     */
+    onKeyReleased?: (button: string, e?: MouseEvent) => any;
+    /**
+     * Executes the callback function before an input is about to be updated
+     */
+    beforeInputUpdate?: (instance: SimpleKeyboard) => void;
     /**
      * Module options can have any format
      */

build/services/KeyboardLayout.d.ts

@@ -0,0 +1,2 @@
+import { KeyboardLayoutObject } from "../interfaces";
+export declare const getDefaultLayout: () => KeyboardLayoutObject;

build/services/PhysicalKeyboard.d.ts

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

build/services/Utilities.d.ts

@@ -5,8 +5,8 @@ import { KeyboardOptions, UtilitiesParams } from "../interfaces";
  */
 declare class Utilities {
     getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
     dispatch: any;
     maxLengthReached: boolean;
     /**
@@ -72,6 +72,7 @@ declare class Utilities {
         "{home}": string;
         "{pageup}": string;
         "{delete}": string;
+        "{forwarddelete}": string;
         "{end}": string;
         "{pagedown}": string;
         "{numpadmultiply}": string;
@@ -98,7 +99,7 @@ declare class Utilities {
      * @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;
+    getButtonDisplayName(button: string, display: KeyboardOptions["display"], mergeDisplay?: boolean): string;
     /**
      * Returns the updated input resulting from clicking a given button
      *
@@ -108,7 +109,7 @@ declare class Utilities {
      * @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;
+    getUpdatedInput(button: string, input: string, caretPos: any, caretPosEnd?: any, moveCaret?: boolean): string;
     /**
      * Moves the cursor position by a given amount
      *
@@ -122,7 +123,7 @@ declare class Utilities {
      * @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;
+    updateCaretPosAction(length: number, minus?: boolean): number | null;
     /**
      * Adds a string to the input at a given position
      *
@@ -133,20 +134,31 @@ declare class Utilities {
      */
     addStringAt(source: string, str: string, position?: number, positionEnd?: number, moveCaret?: boolean): string;
     /**
-     * Removes an amount of characters at a given position
+     * Check whether the button is a standard button
+     */
+    isStandardButton: (button: string) => boolean | "";
+    /**
+     * Removes an amount of characters before 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;
+    /**
+     * Removes an amount of characters after a given position
+     *
+     * @param  {string} source The source input
+     * @param  {number} position The (cursor) position from where the characters should be removed
+     */
+    removeForwardsAt(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;
+    handleMaxLength(inputObj: KeyboardInput, updatedInput: string): boolean | undefined;
     /**
      * Gets the current value of maxLengthReached
      */
@@ -173,9 +185,21 @@ declare class Utilities {
      * Split array into chunks
      */
     chunkArray<T>(arr: T[], size: number): T[][];
+    /**
+     * Escape regex input
+     */
+    escapeRegex(str: string): string;
+    /**
+     * Calculate caret position offset when using rtl option
+     */
+    getRtlOffset(index: number, input: string): number;
     /**
      * Reusable empty function
      */
     static noop: () => void;
+    /**
+     * Check if a function is a constructor
+     */
+    isConstructor(f: any): boolean;
 }
 export default Utilities;

build/types/services/KeyboardLayout.d.ts

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

build/types/services/PhysicalKeyboard.d.ts

@@ -1,20 +0,0 @@
-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;

package.json

@@ -1,16 +1,16 @@
 {
   "name": "simple-keyboard",
-  "version": "3.0.0",
+  "version": "3.8.45",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
-  "types": "build/types/index.d.ts",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && tsc",
+    "build": "webpack && npm run build-modern && npm run build-modern-esm && tsc",
+    "build-modern": "webpack --config webpack.config.modern.js",
+    "build-modern-esm": "webpack --config webpack.config.modern_esm.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
-    "prepare": "npm run build",
-    "trypublish": "npm publish || true"
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -39,40 +39,40 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@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/cli": "^7.27.0",
+    "@babel/core": "^7.26.10",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-transform-typescript": "^7.27.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/preset-env": "^7.26.9",
+    "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.21",
     "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",
+    "babel-loader": "^9.2.1",
+    "babel-preset-minify": "^0.5.2",
+    "core-js": "^3.41.0",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.2",
+    "eslint": "^8.57.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",
+    "html-webpack-plugin": "^5.6.3",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mini-css-extract-plugin": "^2.9.2",
+    "postcss": "^8.5.3",
+    "postcss-loader": "^8.1.1",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.14",
+    "typescript": "^5.8.2",
     "url-loader": "^4.1.1",
-    "webpack": "^5.24.3",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "4.0.0-beta.0"
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "4.15.0"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "roots": [
       "<rootDir>/src"
     ],
@@ -81,7 +81,7 @@
       "!src/**/*.d.ts",
       "!src/lib/index.js",
       "!src/lib/polyfills.js",
-      "!src/demo/index.js",
+      "!src/demo/**",
       "!src/utils/**",
       "!src/**/*.d.ts",
       "!**/tests/**"

scripts/loaderMock.js

@@ -0,0 +1 @@
+module.exports = () => "";

src/demo/BasicDemo.js

@@ -16,8 +16,9 @@ class Demo {
      * Demo Start
      */
     this.keyboard = new Keyboard({
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      useMouseEvents: true
     });
 
     /**
@@ -28,13 +29,13 @@ class Demo {
     });
   }
 
-  onChange(input) {
+  onChange = (input) => {
     document.querySelector(".input").value = input;
     console.log("Input changed", input);
   }
 
-  onKeyPress(button) {
-    console.log("Button pressed", button);
+  onKeyPress = (button, e) => {
+    console.log("Button pressed", button, e);
 
     /**
      * If you want to handle the shift and caps lock buttons
@@ -42,7 +43,11 @@ class Demo {
     if (button === "{shift}" || button === "{lock}") this.handleShift();
   }
 
-  handleShift() {
+  onKeyReleased = (button, e) => {
+    console.log("Button released", button, e);
+  }
+
+  handleShift = () => {
     const currentLayout = this.keyboard.options.layoutName;
     const shiftToggle = currentLayout === "default" ? "shift" : "default";
 

src/demo/CandidateBoxDemo.js

@@ -0,0 +1,82 @@
+import Keyboard from "../lib";
+import "./css/CandidateBoxDemo.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),
+      preventMouseDownDefault: true,
+      layoutCandidatesPageSize: 15,
+      layoutCandidates: {
+        ni: "你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼",
+        hao: "好 号"
+      }
+    });
+
+    /**
+     * Update simple-keyboard when input is changed directly
+     */
+    document.querySelector(".input").addEventListener("input", event => {
+      this.keyboard.setInput(event.target.value);
+    });
+  }
+
+  onChange(input) {
+    const inputElement = document.querySelector(".input");
+
+    /**
+     * Updating input's value
+     */
+    inputElement.value = input;
+    console.log("Input changed", input);
+
+    /**
+     * Synchronizing input caret position
+     */
+    const caretPosition = this.keyboard.caretPosition;
+    if (caretPosition !== null)
+      this.setInputCaretPosition(inputElement, caretPosition);
+
+    console.log("caretPosition", caretPosition);
+  }
+
+  setInputCaretPosition(elem, pos) {
+    if (elem.setSelectionRange) {
+      elem.focus();
+      elem.setSelectionRange(pos, pos);
+    }
+  }
+
+  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/CandidateBoxDemo.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/index.js

@@ -9,6 +9,7 @@ import BasicDemo from "./BasicDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
+//import CandidateBoxDemo from "./CandidateBoxDemo";
 
 /**
  * Selected demo

src/demo/tests/CandidateBoxDemo.test.js

@@ -0,0 +1,36 @@
+import { setDOM } from '../../utils/TestUtility';
+import CandidateBoxDemo from '../CandidateBoxDemo';
+
+it('Demo will load', () => {
+  setDOM();
+
+  new CandidateBoxDemo();
+});
+
+it('Demo caret positioning will adjust accordingly', () => {
+  setDOM();
+
+  const demo = new CandidateBoxDemo();
+
+  demo.keyboard.setCaretPosition(0);
+
+  demo.keyboard.getButtonElement("n").click();
+  demo.keyboard.getButtonElement("h").click();
+  demo.keyboard.getButtonElement("a").click();
+  demo.keyboard.getButtonElement("o").click();
+  expect(demo.keyboard.getCaretPosition()).toBe(4);
+
+  demo.keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(2);
+
+  demo.keyboard.setCaretPosition(1);
+  demo.keyboard.getButtonElement("i").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(2);
+
+  demo.keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(demo.keyboard.getCaretPosition()).toBe(1);
+  expect(demo.keyboard.getInput()).toBe("你好");
+});

src/lib/components/CandidateBox.ts

@@ -5,16 +5,19 @@ import {
   CandidateBoxParams,
   CandidateBoxRenderParams,
   CandidateBoxShowParams,
+  KeyboardOptions,
 } from "./../interfaces";
 
 class CandidateBox {
   utilities: Utilities;
-  candidateBoxElement: HTMLDivElement;
+  options: KeyboardOptions;
+  candidateBoxElement!: HTMLDivElement;
   pageIndex = 0;
-  pageSize;
+  pageSize: number;
 
-  constructor({ utilities }: CandidateBoxParams) {
+  constructor({ utilities, options }: CandidateBoxParams) {
     this.utilities = utilities;
+    this.options = options;
     Utilities.bindMethods(CandidateBox, this);
     this.pageSize = this.utilities.getOptions().layoutCandidatesPageSize || 5;
   }
@@ -45,8 +48,8 @@ class CandidateBox {
       targetElement,
       pageIndex: this.pageIndex,
       nbPages: candidateListPages.length,
-      onItemSelected: (selectedCandidate: string) => {
-        onSelect(selectedCandidate);
+      onItemSelected: (selectedCandidate: string, e: MouseEvent) => {
+        onSelect(selectedCandidate, e);
         this.destroy();
       },
     });
@@ -73,9 +76,24 @@ class CandidateBox {
     // Create Candidate box list items
     candidateListPages[pageIndex].forEach((candidateListItem) => {
       const candidateListLIElement = document.createElement("li");
+      const getMouseEvent = () => {
+        const mouseEvent = new (this.options.useTouchEvents ? TouchEvent : MouseEvent)("click");
+        Object.defineProperty(mouseEvent, "target", {
+          value: candidateListLIElement,
+        });
+        return mouseEvent;
+      };
+
       candidateListLIElement.className = "hg-candidate-box-list-item";
-      candidateListLIElement.textContent = candidateListItem;
-      candidateListLIElement.onclick = () => onItemSelected(candidateListItem);
+      candidateListLIElement.innerHTML = this.options.display?.[candidateListItem] || candidateListItem;
+
+      if(this.options.useTouchEvents) {
+        candidateListLIElement.ontouchstart = (e: any) =>
+          onItemSelected(candidateListItem, e || getMouseEvent());
+      } else {
+        candidateListLIElement.onclick = (e = getMouseEvent() as MouseEvent) =>
+          onItemSelected(candidateListItem, e);
+      }
 
       // Append list item to ul
       candidateListULElement.appendChild(candidateListLIElement);
@@ -87,7 +105,8 @@ class CandidateBox {
     prevBtnElement.classList.add("hg-candidate-box-prev");
     isPrevBtnElementActive &&
       prevBtnElement.classList.add("hg-candidate-box-btn-active");
-    prevBtnElement.onclick = () => {
+
+    const prevBtnElementClickAction = () => {
       if (!isPrevBtnElementActive) return;
       this.renderPage({
         candidateListPages,
@@ -97,6 +116,13 @@ class CandidateBox {
         onItemSelected,
       });
     };
+
+    if(this.options.useTouchEvents) {
+      prevBtnElement.ontouchstart = prevBtnElementClickAction;
+    } else {
+      prevBtnElement.onclick = prevBtnElementClickAction;
+    }
+    
     this.candidateBoxElement.appendChild(prevBtnElement);
 
     // Add elements to container
@@ -109,7 +135,7 @@ class CandidateBox {
     isNextBtnElementActive &&
       nextBtnElement.classList.add("hg-candidate-box-btn-active");
 
-    nextBtnElement.onclick = () => {
+    const nextBtnElementClickAction = () => {
       if (!isNextBtnElementActive) return;
       this.renderPage({
         candidateListPages,
@@ -119,6 +145,13 @@ class CandidateBox {
         onItemSelected,
       });
     };
+
+    if(this.options.useTouchEvents) {
+      nextBtnElement.ontouchstart = nextBtnElementClickAction;
+    } else {
+      nextBtnElement.onclick = nextBtnElementClickAction;
+    }
+
     this.candidateBoxElement.appendChild(nextBtnElement);
 
     // Append candidate box to target element

src/lib/components/css/CandidateBox.css

@@ -5,7 +5,6 @@
   background: #ececec;
   border-bottom: 2px solid #b5b5b5;
   user-select: none;
-  max-width: 272px;
   transform: translateY(-100%);
   margin-top: -10px;
 }
@@ -48,7 +47,6 @@ li.hg-candidate-box-list-item:active {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  background: #d0d0d0;
   color: #969696;
   cursor: pointer;
 }

src/lib/components/css/Keyboard.css

@@ -15,7 +15,9 @@
   border-radius: 5px;
 }
 
-.hg-theme-default .hg-button span {
+.hg-theme-default .hg-button span,
+.hg-theme-default .hg-button span svg
+ {
   pointer-events: none;
 }
 

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

@@ -216,7 +216,7 @@ it('CandidateBox select candidate will work', () => {
   keyboard.getButtonElement("a").click();
   keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
 
-  expect(onSelect).toBeCalledWith("1");
+  expect(onSelect).toHaveBeenCalledWith("1", expect.anything());
   keyboard.destroy();
 });
 
@@ -332,40 +332,98 @@ it('CandidateBox show not be called if keyboard.candidateBox is undefined upon s
 });
 
 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"});
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    onChange: jest.fn(),
+    onChangeAll: jest.fn()
+  });
 
-    expect(keyboard.options.onChange).toBeCalledWith("1");
-    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "1"});
-    keyboard.destroy();
-  });
+  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.mock.calls[0][0]).toBe("a");
+  expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
+
+  expect(keyboard.options.onChange.mock.calls[1][0]).toBe("1");
+  expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "1"});
+  keyboard.destroy();
+});
+
+it('CandidateBox normalization will work', () => {
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "신"
+    },
+    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.mock.calls[0][0]).toBe("a");
+  expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
+
+  // Selected candidate will be normalized
+  expect(keyboard.options.onChange.mock.calls[1][0]).toBe("신");
+  expect(keyboard.options.onChange.mock.calls[1][0].length).toBe(3);
+  expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "신"});
+
+  // Selected candidate will not be normalized
+  keyboard.clearInput();
+  keyboard.setOptions({ disableCandidateNormalization: true });
+
+  keyboard.getButtonElement("a").click();
+  keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(keyboard.options.onChange.mock.calls[2][0]).toBe("a");
+  expect(keyboard.options.onChangeAll.mock.calls[2][0]).toMatchObject({"default": "a"});
+
+  expect(keyboard.options.onChange.mock.calls[3][0]).toBe("신");
+  expect(keyboard.options.onChange.mock.calls[3][0].length).toBe(1);
+  expect(keyboard.options.onChangeAll.mock.calls[3][0]).toMatchObject({"default": "신"});
+
+  keyboard.destroy();
+});

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

@@ -218,6 +218,19 @@ it('Keyboard onChange will work', () => {
   expect(output).toBe("q");
 });
 
+it('Keyboard beforeInputChange will work', () => {
+  const mockBeforeInputUpdate = jest.fn();
+  
+  const keyboard = new Keyboard({
+    beforeInputUpdate: mockBeforeInputUpdate,
+    useMouseEvents: true
+  });
+
+  keyboard.getButtonElement("q").onclick();
+
+  expect(mockBeforeInputUpdate).toHaveBeenCalledWith(keyboard);
+});
+
 it('Keyboard onChangeAll will work', () => {
     let output;
 
@@ -1138,27 +1151,6 @@ it('Keyboard disableRowButtonContainers will bypass parseRowDOMContainers', () =
   expect(containers.length).toBe(0);
 });
 
-it('Keyboard inputName change will trigget caretPosition reset', () => {
-    const keyboard = new Keyboard();
-
-  keyboard.setCaretPosition(0);
-
-  keyboard.getButtonElement("q").onpointerdown();
-  keyboard.getButtonElement("1").onpointerdown();
-
-  expect(keyboard.getCaretPosition()).toBe(2);
-
-  keyboard.setOptions({
-    inputName: "myInput"
-  });
-
-  keyboard.getButtonElement("q").onpointerdown();
-  keyboard.getButtonElement("1").onpointerdown();
-  keyboard.getButtonElement("b").onpointerdown();
-
-  expect(keyboard.getCaretPosition()).toBe(null);
-});
-
 it('Keyboard destroy will work', () => {
     const keyboard = new Keyboard();
   keyboard.destroy();
@@ -1351,4 +1343,112 @@ it('Keyboard excludeFromLayout will work', () => {
 it('Keyboard onSetOptions can be called without changedOptions param', () => {
   const keyboard = new Keyboard();
   expect(keyboard.onSetOptions()).toBeUndefined();
+});
+
+it('Keyboard will handle selected input with unchanged updatedInput edge case', () => {
+  const inputElem = document.createElement("input");
+  const onChange = jest.fn();
+  const keyboard = new Keyboard({ onChange });
+  
+  const initialValue = "3";
+  inputElem.value = initialValue;
+  inputElem.select();
+  keyboard.setInput(initialValue);
+  keyboard.activeInputElement = inputElem;
+  keyboard.setCaretPosition(0, 1);
+
+  keyboard.getButtonElement("3").onpointerdown();
+  keyboard.getButtonElement("3").onpointerdown();
+
+  expect(onChange).toBeCalledTimes(2);
+  expect(keyboard.getInput()).toBe("33");
+  expect(keyboard.getCaretPosition()).toBe(2);
+  expect(keyboard.getCaretPositionEnd()).toBe(2);
+});
+
+// https://github.com/hodgef/simple-keyboard/issues/1868
+it('Keyboard will handle caret pos sync after partially selected input resolution', () => {
+  const inputElem = document.createElement("input");
+  const onChange = jest.fn();
+  const keyboard = new Keyboard({ onChange });
+  
+  keyboard.getButtonElement("q").onpointerdown();
+  keyboard.getButtonElement("w").onpointerdown();
+  keyboard.getButtonElement("e").onpointerdown();
+  keyboard.getButtonElement("r").onpointerdown();
+  keyboard.getButtonElement("t").onpointerdown();
+  keyboard.getButtonElement("y").onpointerdown();
+
+  inputElem.setSelectionRange(1, 2);
+  keyboard.setCaretPosition(1, 2);
+
+  keyboard.getButtonElement("d").onpointerdown();
+  keyboard.getButtonElement("d").onpointerdown();
+  keyboard.getButtonElement("d").onpointerdown();
+
+  expect(keyboard.getInput()).toBe("qddderty");
+
+  inputElem.setSelectionRange(1, 2);
+  keyboard.setCaretPosition(1, 2);
+
+  keyboard.getButtonElement("d").onpointerdown();
+  expect(keyboard.getInput()).toBe("qddderty");
+
+  // caret position should now be synced
+  expect(keyboard.getCaretPosition()).toBe(keyboard.getCaretPositionEnd());
+
+  keyboard.getButtonElement("d").onpointerdown();
+
+  expect(keyboard.getInput()).toBe("qdddderty");
+  expect(keyboard.getCaretPosition()).toBe(3);
+});
+
+it('Ensure caret position is offset when rtl option is enabled', () => {
+  const keyboard = new Keyboard({
+    useMouseEvents: true,
+    rtl: true,
+    layout: {
+      default: ["{bksp} ש ל ו ם"]
+    }
+  });
+
+  const caretEventHandler = jest.spyOn(keyboard, 'caretEventHandler');
+
+  keyboard.getButtonElement("ש").onclick();
+  keyboard.getButtonElement("ו").onclick();
+  keyboard.getButtonElement("ם").onclick();
+
+  expect(keyboard.getInput()).toBe("‫שום‬");
+
+  const input = document.createElement("input");
+  input.value = keyboard.getInput();
+  input.type = "text";
+  input.selectionStart = 2;
+  input.selectionEnd = 2;
+
+  keyboard.caretEventHandler({
+    type: "selectionchange",
+    target: input
+  });
+
+  expect(caretEventHandler).toHaveBeenCalled();
+  expect(keyboard.getCaretPosition()).toBe(1);
+
+  keyboard.getButtonElement("ל").onclick();
+
+  expect(keyboard.getInput()).toBe('‫שלום‬');
+
+  input.value = keyboard.getInput();
+  input.type = "text";
+  input.selectionStart = 4;
+  input.selectionEnd = 4;
+
+  keyboard.caretEventHandler({
+    type: "selectionchange",
+    target: input
+  });
+
+  keyboard.getButtonElement("{bksp}").onclick();
+  
+  expect(keyboard.getInput()).toBe('‫שלם‬');
 });

src/lib/index.modern.ts

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

src/lib/index.ts

@@ -1,3 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
+export * from "./interfaces";
+export { SimpleKeyboard };
 export default SimpleKeyboard;

src/lib/interfaces.ts

@@ -2,14 +2,18 @@
 import SimpleKeyboard from "./components/Keyboard";
 import Utilities from "./services/Utilities";
 
+export interface SKWindow extends Window {
+    SimpleKeyboardInstances?: any;
+};
+
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
 
-export interface KeyboardButtonTheme {
+export type KeyboardButtonTheme = {
     class: string;
     buttons: string;
-}
+} | null;
 
 export interface KeyboardButtonAttributes {
     attribute: string;
@@ -21,17 +25,16 @@ export interface KeyboardInput {
     [key: string]: string
 }
 
-export type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
-
 export type CandidateBoxParams = {
-    utilities: Utilities
+    utilities: Utilities,
+    options: KeyboardOptions
 }
 
 export type CandidateBoxShowParams = {
     candidateValue: string,
     targetElement: KeyboardElement,
     // eslint-disable-next-line no-unused-vars
-    onSelect: (selectedCandidate: string) => void
+    onSelect: (selectedCandidate: string, e: MouseEvent) => void
 }
 
 export type CandidateBoxRenderParams = {
@@ -40,11 +43,11 @@ export type CandidateBoxRenderParams = {
     pageIndex: number;
     nbPages: number;
     // eslint-disable-next-line no-unused-vars
-    onItemSelected: (selectedCandidate: string) => void
+    onItemSelected: (selectedCandidate: string, e: MouseEvent) => void
 }
 
 export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
-export type KeyboardHandlerEvent = PointerEvent & TouchEvent & KeyboardEvent & { target: HTMLDivElement & HTMLInputElement };
+export type KeyboardHandlerEvent = any;
 
 export interface KeyboardButtonElements {
     [key: string]: KeyboardElement[]
@@ -52,8 +55,13 @@ export interface KeyboardButtonElements {
 
 export interface UtilitiesParams {
     getOptions: () => KeyboardOptions;
-    getCaretPosition: () => number;
-    getCaretPositionEnd: () => number;
+    getCaretPosition: () => number | null;
+    getCaretPositionEnd: () => number | null;
+    dispatch: any;
+}
+
+export interface PhysicalKeyboardParams {
+    getOptions: () => KeyboardOptions;
     dispatch: any;
 }
 
@@ -131,10 +139,22 @@ export interface KeyboardOptions {
     physicalKeyboardHighlight?: boolean;
 
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
 
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+
+    /**
+     * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     */
+    physicalKeyboardHighlightPressUsePointerEvents?: boolean;
+
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
@@ -145,6 +165,11 @@ export interface KeyboardOptions {
      */
     physicalKeyboardHighlightBgColor?: string;
 
+    /**
+     * Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
+     */
+    physicalKeyboardHighlightPreventDefault?: boolean;
+
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -221,22 +246,72 @@ export interface KeyboardOptions {
     excludeFromLayout?: { [key: string]: string[] };
 
     /**
-     * Determine size of layout candidate list
+     * Determines size of layout candidate list
      */
     layoutCandidatesPageSize?: number;
 
+    /**
+     * Determines whether layout candidate match should be case sensitive.
+     */
+    layoutCandidatesCaseSensitiveMatch?: boolean;
+
+    /**
+     * Disables the automatic normalization for selected layout candidates
+     */
+    disableCandidateNormalization?: boolean;
+
+    /**
+     * Enables onKeyPress triggering for layoutCandidate items
+     */
+    enableLayoutCandidatesKeyPress?: boolean;
+
+    /**
+     * Updates caret when selectionchange event is fired
+     */
+    updateCaretOnSelectionChange?: boolean;
+
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
-     onRender?: (instance?: SimpleKeyboard) => void;
+     onRender?: (instance: SimpleKeyboard) => void;
 
     /**
      * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      */
-     onInit?: (instance?: SimpleKeyboard) => void;
+     onInit?: (instance: SimpleKeyboard) => void;
+
+    /**
+     * Retrieves the current input
+     */
+    onChange?: (input: string, e?: MouseEvent) => any;
+
+    /**
+     * Retrieves all inputs
+     */
+    onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
+
+    /**
+     * Retrieves the pressed key
+     */
+    onKeyPress?: (button: string, e?: MouseEvent) => any;
+
+    /**
+     * Retrieves the released key
+     */
+    onKeyReleased?: (button: string, e?: MouseEvent) => any;
+
+    /**
+     * Executes the callback function before an input is about to be updated
+     */
+    beforeInputUpdate?: (instance: SimpleKeyboard) => void;
 
     /**
      * Module options can have any format
      */
     [name: string]: any;
-}
+}

src/lib/services/KeyboardLayout.ts

@@ -1,4 +1,6 @@
-export const getDefaultLayout = () => {
+import { KeyboardLayoutObject } from "../interfaces";
+
+export const getDefaultLayout = (): KeyboardLayoutObject => {
   return {
     default: [
       "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",

src/lib/services/PhysicalKeyboard.ts

@@ -1,4 +1,4 @@
-import { KeyboardOptions, UtilitiesParams } from "../interfaces";
+import { KeyboardOptions, PhysicalKeyboardParams } from "../interfaces";
 import Utilities from "../services/Utilities";
 
 /**
@@ -11,7 +11,7 @@ class PhysicalKeyboard {
   /**
    * Creates an instance of the PhysicalKeyboard service
    */
-  constructor({ dispatch, getOptions }: Partial<UtilitiesParams>) {
+  constructor({ dispatch, getOptions }: PhysicalKeyboardParams) {
     /**
      * @type {object} A simple-keyboard instance
      */
@@ -24,58 +24,107 @@ class PhysicalKeyboard {
     Utilities.bindMethods(PhysicalKeyboard, this);
   }
 
-  handleHighlightKeyDown(event: KeyboardEvent) {
+  handleHighlightKeyDown(e: KeyboardEvent) {
     const options = this.getOptions();
-    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+    if(options.physicalKeyboardHighlightPreventDefault && this.isModifierKey(e)){
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
 
     this.dispatch((instance: any) => {
-      const buttonDOM =
-        instance.getButtonElement(buttonPressed) ||
-        instance.getButtonElement(`{${buttonPressed}}`);
+      const standardButtonPressed = instance.getButtonElement(buttonPressed);
+      const functionButtonPressed = instance.getButtonElement(
+        `{${buttonPressed}}`
+      );
+      let buttonDOM;
+      let buttonName: string;
+
+      if (standardButtonPressed) {
+        buttonDOM = standardButtonPressed;
+        buttonName = buttonPressed;
+      } else if (functionButtonPressed) {
+        buttonDOM = functionButtonPressed;
+        buttonName = `{${buttonPressed}}`;
+      } else {
+        return;
+      }
+
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        buttonElement.style.background =
+          options.physicalKeyboardHighlightBgColor || "#dadce4";
+          buttonElement.style.color =
+          options.physicalKeyboardHighlightTextColor || "black";
+      }
 
       if (buttonDOM) {
-        buttonDOM.style.backgroundColor =
-          options.physicalKeyboardHighlightBgColor || "#dadce4";
-        buttonDOM.style.color =
-          options.physicalKeyboardHighlightTextColor || "black";
+        if(Array.isArray(buttonDOM)){
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
 
-        if (options.physicalKeyboardHighlightPress) {
-          /**
-           * Trigger pointerdown
-           */
-          (
-            buttonDOM.onpointerdown ||
-            buttonDOM.onmousedown ||
-            buttonDOM.ontouchstart ||
-            Utilities.noop
-          )();
+          // Even though we have an array of buttons, we just want to press one of them
+          if (options.physicalKeyboardHighlightPress) {
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM[0]?.onpointerdown?.(e);
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM[0]?.click();
+            } else {
+              instance.handleButtonClicked(buttonName, e);
+            }
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPress) {
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM?.onpointerdown?.(e);
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM.click();
+            } else {
+              instance.handleButtonClicked(buttonName, e);
+            }
+          }
         }
       }
     });
   }
 
-  handleHighlightKeyUp(event: KeyboardEvent) {
+  handleHighlightKeyUp(e: KeyboardEvent) {
     const options = this.getOptions();
-    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+    if(options.physicalKeyboardHighlightPreventDefault && this.isModifierKey(e)){
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+    
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
 
     this.dispatch((instance: any) => {
       const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
-      if (buttonDOM && buttonDOM.removeAttribute) {
-        buttonDOM.removeAttribute("style");
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        if(buttonElement.removeAttribute){
+          buttonElement.removeAttribute("style");
+        }
+      };
 
-        if (options.physicalKeyboardHighlightPress) {
-          /**
-           * Trigger pointerup
-           */
-          (
-            buttonDOM.onpointerup ||
-            buttonDOM.onmouseup ||
-            buttonDOM.ontouchend ||
-            Utilities.noop
-          )();
+      if (buttonDOM) {
+        if(Array.isArray(buttonDOM)){
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
+
+          // Even though we have an array of buttons, we just want to press one of them
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM[0]?.onpointerup?.(e);
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM?.onpointerup?.(e);
+          }
         }
       }
     });
@@ -83,38 +132,143 @@ class PhysicalKeyboard {
 
   /**
    * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
-   * @param  {object} event The KeyboardEvent
+   * @param  {object} e The KeyboardEvent
    */
-  getSimpleKeyboardLayoutKey(event: KeyboardEvent) {
-    let output;
+  getSimpleKeyboardLayoutKey(e: KeyboardEvent) {
+    let output = "";
+    const keyId = e.code || e.key || this.keyCodeToKey(e?.keyCode);
 
     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")
+      keyId?.includes("Numpad") ||
+      keyId?.includes("Shift") ||
+      keyId?.includes("Space") ||
+      keyId?.includes("Backspace") ||
+      keyId?.includes("Control") ||
+      keyId?.includes("Alt") ||
+      keyId?.includes("Meta")
     ) {
-      output = event.code;
+      output = e.code || "";
     } else {
-      output = event.key;
+      output = e.key || this.keyCodeToKey(e?.keyCode) || "";
     }
 
-    /**
-     * 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.length > 1 ? output?.toLowerCase() : output;
+  }
 
-    return output;
+  /**
+   * Retrieve key from keyCode
+   */
+  keyCodeToKey(keyCode: number): string {
+    return {
+      8: "Backspace",
+      9: "Tab",
+      13: "Enter",
+      16: "Shift",
+      17: "Ctrl",
+      18: "Alt",
+      19: "Pause",
+      20: "CapsLock",
+      27: "Esc",
+      32: "Space",
+      33: "PageUp",
+      34: "PageDown",
+      35: "End",
+      36: "Home",
+      37: "ArrowLeft",
+      38: "ArrowUp",
+      39: "ArrowRight",
+      40: "ArrowDown",
+      45: "Insert",
+      46: "Delete",
+      48: "0",
+      49: "1",
+      50: "2",
+      51: "3",
+      52: "4",
+      53: "5",
+      54: "6",
+      55: "7",
+      56: "8",
+      57: "9",
+      65: "A",
+      66: "B",
+      67: "C",
+      68: "D",
+      69: "E",
+      70: "F",
+      71: "G",
+      72: "H",
+      73: "I",
+      74: "J",
+      75: "K",
+      76: "L",
+      77: "M",
+      78: "N",
+      79: "O",
+      80: "P",
+      81: "Q",
+      82: "R",
+      83: "S",
+      84: "T",
+      85: "U",
+      86: "V",
+      87: "W",
+      88: "X",
+      89: "Y",
+      90: "Z",
+      91: "Meta",
+      96: "Numpad0",
+      97: "Numpad1",
+      98: "Numpad2",
+      99: "Numpad3",
+      100: "Numpad4",
+      101: "Numpad5",
+      102: "Numpad6",
+      103: "Numpad7",
+      104: "Numpad8",
+      105: "Numpad9",
+      106: "NumpadMultiply",
+      107: "NumpadAdd",
+      109: "NumpadSubtract",
+      110: "NumpadDecimal",
+      111: "NumpadDivide",
+      112: "F1",
+      113: "F2",
+      114: "F3",
+      115: "F4",
+      116: "F5",
+      117: "F6",
+      118: "F7",
+      119: "F8",
+      120: "F9",
+      121: "F10",
+      122: "F11",
+      123: "F12",
+      144: "NumLock",
+      145: "ScrollLock",
+      186: ";",
+      187: "=",
+      188: ",",
+      189: "-",
+      190: ".",
+      191: "/",
+      192: "`",
+      219: "[",
+      220: "\\",
+      221: "]",
+      222: "'",
+    }[keyCode] || "";
+  }
+
+  isModifierKey = (e: KeyboardEvent): boolean => {
+    return (
+      e.altKey
+      || e.ctrlKey
+      || e.shiftKey
+      || ["Tab", "CapsLock", "Esc", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(
+        e.code || e.key || this.keyCodeToKey(e?.keyCode)
+      )
+    )
   }
 }
 

src/lib/services/Utilities.ts

@@ -6,10 +6,10 @@ import { KeyboardOptions, UtilitiesParams } from "../interfaces";
  */
 class Utilities {
   getOptions: () => KeyboardOptions;
-  getCaretPosition: () => number;
-  getCaretPositionEnd: () => number;
+  getCaretPosition: () => number | null;
+  getCaretPositionEnd: () => number | null;
   dispatch: any;
-  maxLengthReached: boolean;
+  maxLengthReached!: boolean;
 
   /**
    * Creates an instance of the Utility service
@@ -106,6 +106,7 @@ class Utilities {
       "{home}": "home",
       "{pageup}": "up",
       "{delete}": "del",
+      "{forwarddelete}": "del",
       "{end}": "end",
       "{pagedown}": "down",
       "{numpadmultiply}": "*",
@@ -136,7 +137,7 @@ class Utilities {
   getButtonDisplayName(
     button: string,
     display: KeyboardOptions["display"],
-    mergeDisplay: boolean
+    mergeDisplay = false
   ) {
     if (mergeDisplay) {
       display = Object.assign({}, this.getDefaultDiplay(), display);
@@ -159,12 +160,12 @@ class Utilities {
   getUpdatedInput(
     button: string,
     input: string,
-    caretPos: number,
+    caretPos: any,
     caretPosEnd = caretPos,
     moveCaret = false
   ) {
     const options = this.getOptions();
-    const commonParams: [number, number, boolean] = [
+    const commonParams: [number | undefined, number | undefined, boolean] = [
       caretPos,
       caretPosEnd,
       moveCaret,
@@ -177,6 +178,11 @@ class Utilities {
       output.length > 0
     ) {
       output = this.removeAt(output, ...commonParams);
+    } else if (
+      (button === "{delete}" || button === "{forwarddelete}") &&
+      output.length > 0
+    ) {
+      output = this.removeForwardsAt(output, ...commonParams);
     } else if (button === "{space}")
       output = this.addStringAt(output, " ", ...commonParams);
     else if (
@@ -216,6 +222,10 @@ class Utilities {
     else if (!button.includes("{") && !button.includes("}"))
       output = this.addStringAt(output, button, ...commonParams);
 
+    if(options.debug){
+      console.log("Input will be: "+ output);
+    }
+
     return output;
   }
 
@@ -243,10 +253,12 @@ class Utilities {
     const options = this.getOptions();
     let caretPosition = this.getCaretPosition();
 
-    if (minus) {
-      if (caretPosition > 0) caretPosition = caretPosition - length;
-    } else {
-      caretPosition = caretPosition + length;
+    if (caretPosition != null) {
+      if (minus) {
+        if (caretPosition > 0) caretPosition = caretPosition - length;
+      } else {
+        caretPosition = caretPosition + length;
+      }
     }
 
     if (options.debug) {
@@ -292,7 +304,13 @@ class Utilities {
   }
 
   /**
-   * Removes an amount of characters at a given position
+   * Check whether the button is a standard button
+   */
+  isStandardButton = (button: string) =>
+    button && !(button[0] === "{" && button[button.length - 1] === "}");
+
+  /**
+   * Removes an amount of characters before a given position
    *
    * @param  {string} source The source input
    * @param  {number} position The (cursor) position from where the characters should be removed
@@ -353,6 +371,52 @@ class Utilities {
 
     return output;
   }
+
+  /**
+   * Removes an amount of characters after a given position
+   *
+   * @param  {string} source The source input
+   * @param  {number} position The (cursor) position from where the characters should be removed
+   */
+  removeForwardsAt(
+    source: string,
+    position: number = source.length,
+    positionEnd: number = source.length,
+    moveCaret = false
+  ) {
+    if (!source?.length || position === null) {
+      return source;
+    }
+
+    let output;
+
+    if (position === positionEnd) {
+      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
+       */
+      const nextTwoChars = source.substring(position, position + 2);
+      const emojiMatched = nextTwoChars.match(emojiMatchedReg);
+
+      if (emojiMatched) {
+        output = source.substr(0, position) + source.substr(position + 2);
+      } else {
+        output = source.substr(0, position) + source.substr(position + 1);
+      }
+    } 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.
    *
@@ -362,7 +426,7 @@ class Utilities {
   handleMaxLength(inputObj: KeyboardInput, updatedInput: string) {
     const options = this.getOptions();
     const maxLength = options.maxLength;
-    const currentInput = inputObj[options.inputName];
+    const currentInput = inputObj[options.inputName || "default"];
     const condition = updatedInput.length - 1 >= maxLength;
 
     if (
@@ -393,7 +457,8 @@ class Utilities {
     }
 
     if (typeof maxLength === "object") {
-      const condition = updatedInput.length - 1 >= maxLength[options.inputName];
+      const condition =
+        updatedInput.length - 1 >= maxLength[options.inputName || "default"];
 
       if (options.debug) {
         console.log("maxLength (obj) reached:", condition);
@@ -451,7 +516,7 @@ class Utilities {
    * @param  {string} str The string to transform.
    */
   camelCase(str: string): string {
-    if (!str) return;
+    if (!str) return "";
 
     return str
       .toLowerCase()
@@ -471,10 +536,43 @@ class Utilities {
     );
   }
 
+  /**
+   * Escape regex input
+   */
+  escapeRegex(str: string) {
+    return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+  }
+
+  /**
+   * Calculate caret position offset when using rtl option
+   */
+  getRtlOffset(index: number, input: string) {
+    let newIndex = index;
+    const startMarkerIndex = input.indexOf("\u202B");
+    const endMarkerIndex = input.indexOf("\u202C");
+
+    if(startMarkerIndex < index && startMarkerIndex != -1){ newIndex--; }
+    if(endMarkerIndex < index && startMarkerIndex != -1){ newIndex--; }
+
+    return newIndex < 0 ? 0 : newIndex;
+  }
+
   /**
    * Reusable empty function
    */
   static noop = () => {};
+
+  /**
+   * Check if a function is a constructor
+   */
+  isConstructor(f: any) {
+    try {
+      Reflect.construct(String, [], f);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  }
 }
 
 export default Utilities;

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

@@ -201,4 +201,25 @@ it('PhysicalKeyboard with physicalKeyboardHighlightPress can trigger noop', () =
       tagName: "input"
     }
   }));
+});
+
+it('PhysicalKeyboard keyCodeToKey will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    physicalKeyboardHighlight: true
+  });
+
+  expect(keyboard.physicalKeyboard.keyCodeToKey(186)).toBe(";");
+
+  const methodTest = jest.spyOn(keyboard.physicalKeyboard, "keyCodeToKey");
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    keyCode: 186,
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  expect(methodTest).toHaveBeenCalledWith(186);
 });

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

@@ -34,6 +34,16 @@ it('Keyboard {bksp} button will work', () => {
   expect(output).toBe("tes");
 });
 
+it('Keyboard {delete} button will work', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  const output = keyboard.utilities.getUpdatedInput("{delete}", "test", 1);
+  
+  expect(output).toBe("tst");
+});
+
 it('Keyboard {space} button will work', () => {
   setDOM();
 
@@ -585,3 +595,167 @@ it('Keyboard camelCase will work with empty strings', () => {
   const keyboard = new Keyboard();
   expect(keyboard.utilities.camelCase()).toBeFalsy();
 });
+
+it('Keyboard removeForwardsAt will exit out on caretPosition:0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(0);
+  keyboard.utilities.removeForwardsAt(keyboard.getInput(), 0);
+  expect(keyboard.getInput()).toBe("test");
+
+  keyboard.setInput("test");
+
+  keyboard.setCaretPosition(5);
+  keyboard.utilities.removeForwardsAt(keyboard.getInput(), 0, 0, true);
+  expect(keyboard.caretPosition).toBe(5);
+});
+
+it('Keyboard removeForwardsAt will remove multi-byte unicodes with caretPos>0', () => {
+  setDOM();
+
+  const keyboard = new Keyboard();
+
+  keyboard.setCaretPosition(4);
+  let output = keyboard.utilities.removeForwardsAt("test\uD83D\uDE00", 4, 4);
+  expect(output).toBe("test");
+
+  keyboard.setCaretPosition(4);
+  output = keyboard.utilities.removeForwardsAt("test\uD83D\uDE00", 4, 4, true);
+  expect(keyboard.caretPosition).toBe(4);
+});
+
+it('Keyboard removeForwardsAt will not remove multi-byte unicodes with caretPos:0', () => {
+  setDOM();
+
+  const str = "\uD83D\uDE00";
+  const keyboard = new Keyboard();
+  let output = keyboard.utilities.removeForwardsAt(str, 0);
+  expect(output).toBe("");
+
+  output = keyboard.utilities.removeForwardsAt(str, 0, 0, true);
+  expect(output).toBe("");
+});
+
+it('Keyboard removeForwardsAt will propagate caretPosition', () => {
+  clearDOM();
+
+  document.body.innerHTML = `
+    <div class="simple-keyboard"></div>
+    <div class="keyboard2"></div>
+  `;
+
+  const keyboard = new Keyboard({
+    useMouseEvents: true,
+    layout: {
+      default: ["{delete}"]
+    }
+  });
+  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('{delete}').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 removeForwardsAt 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,
+    layout: {
+      default: ["{delete}"]
+    }
+  });
+  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('{delete}').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 removeForwardsAt will remove regular strings', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  keyboard.setCaretPosition(6);
+  let output = keyboard.utilities.removeForwardsAt("testie", 5, 5);
+  expect(output).toBe("testi");
+
+  keyboard.setCaretPosition(5);
+  output = keyboard.utilities.removeForwardsAt("testie", 5, 5, true);
+  expect(keyboard.caretPosition).toBe(5);
+});
+
+it('Keyboard removeForwardsAt will work with unset or start caretPosition', () => {
+  setDOM();
+
+  const keyboard = new Keyboard({
+    debug: true
+  });
+
+  let output = keyboard.utilities.removeForwardsAt("test", 3);
+  expect(output).toBe("tes");
+
+  output = keyboard.utilities.removeForwardsAt("test", null, null);
+  expect(output).toBe("test");
+
+  output = keyboard.utilities.removeForwardsAt("😀", 0);
+  expect(output).toBe("");
+
+  /**
+   * Will also work with moveCaret
+   */
+  output = keyboard.utilities.removeForwardsAt("test", null, null, true);
+  expect(output).toBe("test");
+  expect(keyboard.getCaretPosition()).toBe(null);
+
+  keyboard.setCaretPosition(2);
+  const str = "😀";
+  output = keyboard.utilities.removeForwardsAt(str, null, null, true);
+  expect(output).toBe(str);
+  expect(keyboard.getCaretPosition()).toBe(2);
+});

tsconfig.json

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

webpack.config.js

@@ -1,17 +1,17 @@
+// Configuration
 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 CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 const {
   version,
   name,
   license,
   repository,
-  author,
+  author
 } = getPackageJson('version', 'name', 'license', 'repository', 'author');
 
 const banner = `
@@ -27,6 +27,7 @@ const banner = `
 module.exports = {
   mode: "production",
   entry: './src/lib/index.ts',
+  target: 'es5',
   output: {
     filename: 'index.js',
     path: path.resolve(__dirname, 'build'),
@@ -34,6 +35,8 @@ module.exports = {
     libraryTarget: 'umd',
     clean: true,
     globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
     environment: {
       arrowFunction: false
     }
@@ -42,7 +45,7 @@ module.exports = {
     minimize: true,
     minimizer: [
       new TerserPlugin({ extractComments: false }),
-      new OptimizeCSSAssetsPlugin()
+      new CssMinimizerPlugin()
     ],
   },
   devServer: {
@@ -87,7 +90,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new PrettierPlugin(),
     new MiniCssExtractPlugin({
         filename: 'css/index.css'
     }),
@@ -96,4 +98,4 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.js', '.json']
   }
-};
+};

webpack.config.modern.js

@@ -0,0 +1,81 @@
+/**
+ * Config to support modern browsers only (build/index.modern.js)
+ */
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version} (index.modern.js - Modern Browsers bundle)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.js) removes all polyfills
+  included in the standard version. Use this if you are supporting
+  modern browsers only. Otherwise, use the standard version (index.js).
+
+  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.modern.ts',
+  target: 'es5',
+  devtool: 'source-map',
+  output: {
+    filename: 'index.modern.js',
+    path: path.resolve(__dirname, 'build'),
+    library: "SimpleKeyboard",
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ["@babel/env"]
+            ],
+            plugins: [
+              ["@babel/plugin-proposal-class-properties"],
+              ["@babel/plugin-transform-typescript"]
+            ]
+          }
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: path.resolve('scripts/loaderMock.js')
+      }
+    ]
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};

webpack.config.modern_esm.js

@@ -0,0 +1,89 @@
+/**
+ * Config to support modern browsers only (build/index.modern.js)
+ */
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version} (index.modern.esm.js - Modern Browsers bundle, ESM output)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.esm.js) removes all polyfills
+  included in the standard version. Use this if you are supporting
+  modern browsers only. Otherwise, use the standard version (index.js).
+
+  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.modern.ts',
+  target: [
+    'web',
+    'es2020'
+  ],
+  output: {
+    filename: 'index.modern.esm.js',
+    path: path.resolve(__dirname, 'build'),
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
+    library: {
+      type: 'module'
+    }
+  },
+  experiments: {
+    outputModule: true
+  },
+  externalsType: 'module',
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ["@babel/env"]
+            ],
+            plugins: [
+              ["@babel/plugin-proposal-class-properties"],
+              ["@babel/plugin-transform-typescript"]
+            ]
+          }
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: path.resolve('scripts/loaderMock.js')
+      }
+    ]
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};