Add modern.esm bundle. Fixes #2070

Bump postcss from 8.4.27 to 8.4.28

.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/stale.yml

@@ -6,8 +6,6 @@ daysUntilClose: 2
 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

.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 +1,19 @@
 name: Mirroring
 
-on: [push, delete]
+on:
+  push:
+    branches:
+      - master
+  delete:
+    branches:
+      - master
 
 jobs:
   mirroring:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
     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 }}
+      - 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,31 @@ on:
   push:
     branches:
       - master
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**
 
 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 +37,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 +50,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
         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_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

.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

README.md

@@ -1,46 +1,42 @@
 <p>
   <a href="https://simple-keyboard.com/demo">
-	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/Po6659n.gif">
+	<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://github.com/hodgef/simple-keyboard/actions">
-     <img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg?color=green" />
+     <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?color=green" />
+     <img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg" />
   </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">
+	
+  <a href="https://gitlab.com/hodgef/simple-keyboard" target="_blank">
+     <img alt="Mirroring" src="https://github.com/hodgef/simple-keyboard/actions/workflows/mirroring.yml/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 +59,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 +70,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 +80,9 @@ 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)).
+
+## ✅ 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.
      */
-    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.6.42
  *   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{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{-webkit-tap-highlight-color:rgba(0,0,0,0);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}.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;max-width:272px;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

@@ -3,10 +3,10 @@ import Utilities from "./services/Utilities";
 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 +15,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 +108,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 +129,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,9 +198,21 @@ 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;
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
@@ -193,6 +221,22 @@ export interface KeyboardOptions {
      * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      */
     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;
     /**
      * Module options can have any format
      */

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;
+    isMofifierKey: (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,6 +185,14 @@ 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
      */

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,12 +1,13 @@
 {
   "name": "simple-keyboard",
-  "version": "3.0.0",
+  "version": "3.7.0",
   "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",
@@ -39,38 +40,36 @@
   ],
   "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.22.10",
+    "@babel/core": "^7.22.10",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-transform-typescript": "^7.22.10",
     "@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.22.10",
+    "@types/jest": "^27.5.0",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.15",
     "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.1.3",
+    "babel-preset-minify": "^0.5.2",
+    "core-js": "^3.32.0",
+    "css-loader": "^6.8.1",
+    "css-minimizer-webpack-plugin": "^5.0.1",
+    "eslint": "^8.47.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.0",
+    "html-webpack-plugin": "^5.5.3",
     "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",
+    "mini-css-extract-plugin": "^2.7.6",
+    "postcss": "^8.4.28",
+    "postcss-loader": "^7.3.3",
+    "style-loader": "^3.3.3",
+    "terser-webpack-plugin": "^5.3.9",
+    "typescript": "^4.9.5",
     "url-loader": "^4.1.1",
-    "webpack": "^5.24.3",
-    "webpack-cli": "^4.5.0",
-    "webpack-dev-server": "4.0.0-beta.0"
+    "webpack": "^5.88.2",
+    "webpack-cli": "^5.1.3",
+    "webpack-dev-server": "4.15.0"
   },
   "jest": {
     "roots": [
@@ -81,7 +80,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/CandidateBoxDemo.js

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

@@ -48,7 +48,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/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).toBeCalledWith("1", expect.anything());
   keyboard.destroy();
 });
 
@@ -353,6 +353,7 @@ it('CandidateBox selection should trigger onChange', () => {
     });
   
     const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
+    
     jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
       candidateBoxOnItemSelected = params.onItemSelected;
       params.onItemSelected = onSelect;
@@ -362,10 +363,67 @@ it('CandidateBox selection should trigger onChange', () => {
     keyboard.getButtonElement("a").click();
     keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
   
-    expect(keyboard.options.onChange).toBeCalledWith("a");
-    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "a"});
+    expect(keyboard.options.onChange.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": "신"});
 
-    expect(keyboard.options.onChange).toBeCalledWith("1");
-    expect(keyboard.options.onChangeAll).toBeCalledWith({"default": "1"});
     keyboard.destroy();
   });

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

@@ -1138,27 +1138,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 +1330,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

@@ -6,10 +6,10 @@ export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
 
-export interface KeyboardButtonTheme {
+export type KeyboardButtonTheme = {
     class: string;
     buttons: string;
-}
+} | null;
 
 export interface KeyboardButtonAttributes {
     attribute: string;
@@ -21,17 +21,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 +39,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 +51,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 +135,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 +161,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,10 +242,25 @@ 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;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
@@ -235,6 +271,26 @@ export interface KeyboardOptions {
      */
      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;
+
     /**
      * Module options can have any format
      */

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.isMofifierKey(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();
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM[0]?.click();
+            } else {
+              instance.handleButtonClicked(buttonName, e);
+            }
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPress) {
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM.onpointerdown();
+            } 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.isMofifierKey(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();
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM.onpointerup();
+          }
         }
       }
     });
@@ -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] || "";
+  }
+
+  isMofifierKey = (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,6 +536,27 @@ 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
    */

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 = spyOn(keyboard.physicalKeyboard, "keyCodeToKey");
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    keyCode: 186,
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  expect(methodTest).toBeCalledWith(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,7 +1,7 @@
 {
     "compilerOptions": {
       "noImplicitAny": true,
-      "outDir": "build/types",
+      "outDir": "build",
       "module": "esnext",
       "target": "es5",
       "allowJs": true,
@@ -11,7 +11,8 @@
       "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']
+  }
+};