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/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,17 +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
-# 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

@@ -12,7 +12,7 @@ jobs:
     if: contains(github.ref, 'master')
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
@@ -22,6 +22,7 @@ jobs:
           node-version: ${{ matrix.node_version }}
       - name: npm install, build, and test
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           npm install
           npm run coverage
 

.github/workflows/mirroring.yml

@@ -1,19 +0,0 @@
-name: Mirroring
-
-on:
-  push:
-    branches:
-      - master
-  delete:
-    branches:
-      - master
-
-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

@@ -9,12 +9,16 @@ on:
       - .gitignore
       - .github/**
 
+permissions:
+  contents: write
+  id-token: write
+
 jobs:
   publish:
     runs-on: ${{ matrix.os }}
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
@@ -25,6 +29,7 @@ jobs:
           
       - name: npm install, build, and test
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           npm install
           npm run test -- --coverage --watchAll=false
 
@@ -40,6 +45,7 @@ jobs:
 
       - name: Bump version
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           git reset --hard
           npm version patch
           npm run build
@@ -51,7 +57,8 @@ jobs:
 
       - 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}}

.github/workflows/pull_request.yml

@@ -8,7 +8,7 @@ jobs:
     if: ${{ github.actor != 'dependabot[bot]' }}
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
@@ -18,6 +18,7 @@ jobs:
           node-version: ${{ matrix.node_version }}
       - name: npm install, build, and test
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           npm install
           npm run coverage
         env:

.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

@@ -8,7 +8,7 @@ jobs:
     if: ${{ github.actor == 'dependabot[bot]' }}
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v2
@@ -20,6 +20,7 @@ jobs:
           node-version: ${{ matrix.node_version }}
       - name: npm install, build, and test
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           npm install
           npm run coverage
         env:

.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,9 +30,10 @@ config
 .travis.yml
 CHANGELOG.md
 README.md
+CODE_OF_CONDUCT.md
+CONTRIBUTING.md
+tsconfig.json
 .eslintignore
 .eslintrc.json
-webpack.config.js
-webpack.config.demo.js
-webpack.config.modern.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

@@ -2,26 +2,7 @@
   <a href="https://simple-keyboard.com/demo">
 	<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" />
-  </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>
-	
-  <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>
+<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>
@@ -82,6 +63,10 @@ Want to create your own module? Check out the [Modules page](https://hodgef.com/
 
 > 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:

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,5 +1,6 @@
 import "./css/Keyboard.css";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
+import Utilities from "../services/Utilities";
 import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement } from "../interfaces";
 import CandidateBox from "./CandidateBox";
 /**
@@ -12,7 +13,7 @@ import CandidateBox from "./CandidateBox";
 declare class SimpleKeyboard {
     input: KeyboardInput;
     options: KeyboardOptions;
-    utilities: any;
+    utilities: Utilities;
     caretPosition: number | null;
     caretPositionEnd: number | null;
     keyboardDOM: KeyboardElement;
@@ -40,7 +41,7 @@ declare class SimpleKeyboard {
     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(selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions);
     /**

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.4.210
+ *   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{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;background:#d0d0d0;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}
+ */.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

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

build/interfaces.d.ts

@@ -1,5 +1,8 @@
 import SimpleKeyboard from "./components/Keyboard";
 import Utilities from "./services/Utilities";
+export interface SKWindow extends Window {
+    SimpleKeyboardInstances?: any;
+}
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
@@ -17,6 +20,7 @@ export interface KeyboardInput {
 }
 export type CandidateBoxParams = {
     utilities: Utilities;
+    options: KeyboardOptions;
 };
 export type CandidateBoxShowParams = {
     candidateValue: string;
@@ -128,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.
      */
@@ -204,14 +212,26 @@ export interface KeyboardOptions {
      * 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
      */
@@ -220,6 +240,18 @@ export interface KeyboardOptions {
      * 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

@@ -1,4 +1,2 @@
-export declare const getDefaultLayout: () => {
-    default: string[];
-    shift: string[];
-};
+import { KeyboardLayoutObject } from "../interfaces";
+export declare const getDefaultLayout: () => KeyboardLayoutObject;

build/services/PhysicalKeyboard.d.ts

@@ -9,16 +9,17 @@ declare class PhysicalKeyboard {
      * Creates an instance of the PhysicalKeyboard service
      */
     constructor({ dispatch, getOptions }: PhysicalKeyboardParams);
-    handleHighlightKeyDown(event: KeyboardEvent): void;
-    handleHighlightKeyUp(event: KeyboardEvent): void;
+    handleHighlightKeyDown(e: KeyboardEvent): void;
+    handleHighlightKeyUp(e: KeyboardEvent): void;
     /**
      * 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): string;
+    getSimpleKeyboardLayoutKey(e: KeyboardEvent): string;
     /**
      * Retrieve key from keyCode
      */
-    keyCodeToKey(keyCode: number): string | undefined;
+    keyCodeToKey(keyCode: number): string;
+    isModifierKey: (e: KeyboardEvent) => boolean;
 }
 export default PhysicalKeyboard;

build/services/Utilities.d.ts

@@ -99,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
      *
@@ -109,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
      *
@@ -197,5 +197,9 @@ declare class Utilities {
      * Reusable empty function
      */
     static noop: () => void;
+    /**
+     * Check if a function is a constructor
+     */
+    isConstructor(f: any): boolean;
 }
 export default Utilities;

package.json

@@ -1,16 +1,16 @@
 {
   "name": "simple-keyboard",
-  "version": "3.4.210",
+  "version": "3.8.45",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && npm run build-modern && 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,38 +39,40 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.20.7",
-    "@babel/core": "^7.20.5",
+    "@babel/cli": "^7.27.0",
+    "@babel/core": "^7.26.10",
     "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-transform-typescript": "^7.20.7",
+    "@babel/plugin-transform-typescript": "^7.27.0",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.20.2",
-    "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.1",
-    "@typescript-eslint/parser": "^5.48.0",
-    "autoprefixer": "^10.4.13",
+    "@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": "^9.1.0",
+    "babel-loader": "^9.2.1",
     "babel-preset-minify": "^0.5.2",
-    "core-js": "^3.27.1",
-    "css-loader": "^6.7.3",
-    "css-minimizer-webpack-plugin": "^4.2.2",
-    "eslint": "^8.31.0",
+    "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.5.0",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^2.7.2",
-    "postcss": "^8.4.20",
-    "postcss-loader": "^7.0.2",
-    "style-loader": "^3.3.1",
-    "terser-webpack-plugin": "^5.3.6",
-    "typescript": "^4.9.4",
+    "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.40.0",
-    "webpack-cli": "^5.0.1",
-    "webpack-dev-server": "4.11.1"
+    "webpack": "^5.98.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "4.15.0"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "roots": [
       "<rootDir>/src"
     ],

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

@@ -19,8 +19,9 @@ class Demo {
       onChange: input => this.onChange(input),
       onKeyPress: button => this.onKeyPress(button),
       preventMouseDownDefault: true,
+      layoutCandidatesPageSize: 15,
       layoutCandidates: {
-        ni: "你 尼",
+        ni: "你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼",
         hao: "好 号"
       }
     });

src/lib/components/CandidateBox.ts

@@ -5,16 +5,19 @@ import {
   CandidateBoxParams,
   CandidateBoxRenderParams,
   CandidateBoxShowParams,
+  KeyboardOptions,
 } from "./../interfaces";
 
 class CandidateBox {
   utilities: Utilities;
+  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;
   }
@@ -74,7 +77,7 @@ class CandidateBox {
     candidateListPages[pageIndex].forEach((candidateListItem) => {
       const candidateListLIElement = document.createElement("li");
       const getMouseEvent = () => {
-        const mouseEvent = new MouseEvent("click");
+        const mouseEvent = new (this.options.useTouchEvents ? TouchEvent : MouseEvent)("click");
         Object.defineProperty(mouseEvent, "target", {
           value: candidateListLIElement,
         });
@@ -82,9 +85,15 @@ class CandidateBox {
       };
 
       candidateListLIElement.className = "hg-candidate-box-list-item";
-      candidateListLIElement.textContent = candidateListItem;
-      candidateListLIElement.onclick = (e = getMouseEvent()) =>
-        onItemSelected(candidateListItem, e);
+      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);
@@ -96,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,
@@ -106,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
@@ -118,7 +135,7 @@ class CandidateBox {
     isNextBtnElementActive &&
       nextBtnElement.classList.add("hg-candidate-box-btn-active");
 
-    nextBtnElement.onclick = () => {
+    const nextBtnElementClickAction = () => {
       if (!isNextBtnElementActive) return;
       this.renderPage({
         candidateListPages,
@@ -128,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/Keyboard.ts

@@ -1,6 +1,5 @@
 import "./css/Keyboard.css";
 
-// Services
 import { getDefaultLayout } from "../services/KeyboardLayout";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
 import Utilities from "../services/Utilities";
@@ -10,6 +9,7 @@ import {
   KeyboardButtonElements,
   KeyboardHandlerEvent,
   KeyboardElement,
+  SKWindow,
 } from "../interfaces";
 import CandidateBox from "./CandidateBox";
 
@@ -23,7 +23,7 @@ import CandidateBox from "./CandidateBox";
 class SimpleKeyboard {
   input!: KeyboardInput;
   options!: KeyboardOptions;
-  utilities: any;
+  utilities!: Utilities;
   caretPosition!: number | null;
   caretPositionEnd!: number | null;
   keyboardDOM!: KeyboardElement;
@@ -48,7 +48,7 @@ class SimpleKeyboard {
 
   /**
    * 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(
     selectorOrOptions?: string | HTMLDivElement | KeyboardOptions,
@@ -109,6 +109,7 @@ class SimpleKeyboard {
      * @property {string} physicalKeyboardHighlightBgColor Define the background color that the physical keyboard highlighted key should have.
      * @property {boolean} physicalKeyboardHighlightPressUseClick Whether physicalKeyboardHighlightPress should use clicks to trigger buttons.
      * @property {boolean} physicalKeyboardHighlightPressUsePointerEvents Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     * @property {boolean} physicalKeyboardHighlightPreventDefault Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
      * @property {boolean} preventMouseDownDefault Calling preventDefault for the mousedown events keeps the focus on the input.
      * @property {boolean} preventMouseUpDefault Calling preventDefault for the mouseup events.
      * @property {boolean} stopMouseDownPropagation Stops pointer down events on simple-keyboard buttons from bubbling to parent elements.
@@ -117,6 +118,7 @@ class SimpleKeyboard {
      * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
      * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     * @property {function(keyboard: Keyboard):void} beforeInputUpdate Perform an action before any input change
      * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
      * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
      * @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.
@@ -134,6 +136,9 @@ class SimpleKeyboard {
      * @property {number} layoutCandidatesPageSize Determines size of layout candidate list
      * @property {boolean} layoutCandidatesCaseSensitiveMatch Determines whether layout candidate match should be case sensitive.
      * @property {boolean} disableCandidateNormalization Disables the automatic normalization for selected layout candidates
+     * @property {boolean} enableLayoutCandidatesKeyPress Enables onKeyPress triggering for layoutCandidate items
+     * @property {boolean} updateCaretOnSelectionChange Updates caret when selectionchange event is fired
+     * @property {boolean} clickOnMouseDown When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
      */
     this.options = {
       layoutName: "default",
@@ -187,17 +192,17 @@ class SimpleKeyboard {
      * Simple-keyboard Instances
      * This enables multiple simple-keyboard support with easier management
      */
-    if (!window["SimpleKeyboardInstances"])
-      window["SimpleKeyboardInstances"] = {};
+    if (!(window as SKWindow)["SimpleKeyboardInstances"])
+      (window as SKWindow)["SimpleKeyboardInstances"] = {};
 
     this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
-    window["SimpleKeyboardInstances"][this.currentInstanceName] = this;
+    (window as SKWindow)["SimpleKeyboardInstances"][this.currentInstanceName] = this;
 
     /**
      * Instance vars
      */
-    this.allKeyboardInstances = window["SimpleKeyboardInstances"];
-    this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
+    this.allKeyboardInstances = (window as SKWindow)["SimpleKeyboardInstances"];
+    this.keyboardInstanceNames = Object.keys((window as SKWindow)["SimpleKeyboardInstances"]);
     this.isFirstKeyboardInstance =
       this.keyboardInstanceNames[0] === this.currentInstanceName;
 
@@ -215,6 +220,7 @@ class SimpleKeyboard {
     this.candidateBox = this.options.enableLayoutCandidates
       ? new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         })
       : null;
 
@@ -375,7 +381,11 @@ class SimpleKeyboard {
         candidateValue,
         targetElement,
         onSelect: (selectedCandidate: string, e: MouseEvent) => {
-          const { layoutCandidatesCaseSensitiveMatch, disableCandidateNormalization } = this.options;
+          const {
+            layoutCandidatesCaseSensitiveMatch,
+            disableCandidateNormalization,
+            enableLayoutCandidatesKeyPress
+          } = this.options;
 
           let candidateStr = selectedCandidate;
 
@@ -386,6 +396,13 @@ class SimpleKeyboard {
             candidateStr = selectedCandidate.normalize("NFD");
           }
 
+          /**
+           * Perform an action before any input change
+           */
+          if (typeof this.options.beforeInputUpdate === "function") {
+            this.options.beforeInputUpdate(this);
+          }
+
           const currentInput = this.getInput(this.options.inputName, true);
           const initialCaretPosition = this.getCaretPositionEnd() || 0;
           const inputSubstr =
@@ -411,6 +428,14 @@ class SimpleKeyboard {
           this.setInput(newInput, this.options.inputName, true);
           this.setCaretPosition(newCaretPosition);
 
+          /**
+           * Calling onKeyPress
+           * We pass in the composed candidate instead of the decomposed one
+           * To prevent confusion for users
+           */
+          if (enableLayoutCandidatesKeyPress && typeof this.options.onKeyPress === "function")
+            this.options.onKeyPress(selectedCandidate, e);
+
           if (typeof this.options.onChange === "function")
             this.options.onChange(
               this.getInput(this.options.inputName, true),
@@ -443,6 +468,13 @@ class SimpleKeyboard {
      */
     if (!this.input[inputName]) this.input[inputName] = "";
 
+    /**
+     * Perform an action before any input change
+     */
+    if (typeof this.options.beforeInputUpdate === "function") {
+      this.options.beforeInputUpdate(this);
+    }
+
     /**
      * Calculating new input
      */
@@ -518,7 +550,8 @@ class SimpleKeyboard {
           "Caret at: ",
           this.getCaretPosition(),
           this.getCaretPositionEnd(),
-          `(${this.keyboardDOMClass})`
+          `(${this.keyboardDOMClass})`,
+          e?.type
         );
       }
 
@@ -558,6 +591,22 @@ class SimpleKeyboard {
       }
     }
 
+    /**
+     * After a button is clicked the selection (if any) will disappear
+     * we should reflect this in our state, as applicable
+     */
+    if(this.caretPositionEnd && this.caretPosition !== this.caretPositionEnd){
+      this.setCaretPosition(this.caretPositionEnd, this.caretPositionEnd);
+
+      if(this.activeInputElement){
+        this.activeInputElement.setSelectionRange(this.caretPositionEnd, this.caretPositionEnd);
+      }
+      
+      if(this.options.debug){
+        console.log("Caret position aligned", this.caretPosition);
+      }
+    }
+
     if (debug) {
       console.log("Key pressed:", button);
     }
@@ -682,7 +731,7 @@ class SimpleKeyboard {
      * Calling onKeyReleased
      */
     if (button && typeof this.options.onKeyReleased === "function")
-      this.options.onKeyReleased(button);
+      this.options.onKeyReleased(button, e);
   }
 
   /**
@@ -774,7 +823,7 @@ class SimpleKeyboard {
    * Get all simple-keyboard inputs
    */
   getAllInputs(): KeyboardInput {
-    const output = {};
+    const output = {} as KeyboardInput;
     const inputNames = Object.keys(this.input);
 
     inputNames.forEach((inputName) => {
@@ -878,6 +927,7 @@ class SimpleKeyboard {
         this.candidateBox.destroy();
         this.candidateBox = new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         });
       }
     }
@@ -903,15 +953,15 @@ class SimpleKeyboard {
    */
   // eslint-disable-next-line no-unused-vars
   dispatch(callback: (instance: SimpleKeyboard, key?: string) => void): void {
-    if (!window["SimpleKeyboardInstances"]) {
+    if (!(window as SKWindow)["SimpleKeyboardInstances"]) {
       console.warn(
         `SimpleKeyboardInstances is not defined. Dispatch cannot be called.`
       );
       throw new Error("INSTANCES_VAR_ERROR");
     }
 
-    return Object.keys(window["SimpleKeyboardInstances"]).forEach((key) => {
-      callback(window["SimpleKeyboardInstances"][key], key);
+    return Object.keys((window as SKWindow)["SimpleKeyboardInstances"]).forEach((key) => {
+      callback((window as SKWindow)["SimpleKeyboardInstances"][key], key);
     });
   }
 
@@ -1091,15 +1141,21 @@ class SimpleKeyboard {
         console.log(`Caret handling started (${this.keyboardDOMClass})`);
       }
 
+      const { physicalKeyboardHighlightPreventDefault = false } = this.options;
+
       /**
        * Event Listeners
        */
-      document.addEventListener("keyup", this.handleKeyUp);
-      document.addEventListener("keydown", this.handleKeyDown);
+      document.addEventListener("keyup", this.handleKeyUp, physicalKeyboardHighlightPreventDefault);
+      document.addEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
       document.addEventListener("mouseup", this.handleMouseUp);
       document.addEventListener("touchend", this.handleTouchEnd);
+
+      if (this.options.updateCaretOnSelectionChange) {
+        document.addEventListener("selectionchange", this.handleSelectionChange);
+      }
+
       document.addEventListener("select", this.handleSelect);
-      document.addEventListener("selectionchange", this.handleSelectionChange);
     }
   }
 
@@ -1151,6 +1207,13 @@ class SimpleKeyboard {
    */
   /* istanbul ignore next */
   handleSelectionChange(event: KeyboardHandlerEvent): void {
+    /**
+     * Firefox is not reporting the correct caret position through this event
+     * https://github.com/hodgef/simple-keyboard/issues/1839
+     */
+    if(navigator.userAgent.includes('Firefox')){
+      return;
+    }
     this.caretEventHandler(event);
   }
 
@@ -1203,7 +1266,7 @@ class SimpleKeyboard {
         /**
          * Tracking current input in order to handle caret positioning edge cases
          */
-        this.activeInputElement = event.target;
+        instance.activeInputElement = event.target;
 
         if (instance.options.debug) {
           console.log(
@@ -1211,7 +1274,8 @@ class SimpleKeyboard {
             instance.getCaretPosition(),
             instance.getCaretPositionEnd(),
             event && event.target.tagName.toLowerCase(),
-            `(${instance.keyboardDOMClass})`
+            `(${instance.keyboardDOMClass})`,
+            event?.type
           );
         }
       } else if (
@@ -1226,7 +1290,7 @@ class SimpleKeyboard {
         /**
          * Resetting activeInputElement
          */
-        this.activeInputElement = null;
+        instance.activeInputElement = null;
 
         if (instance.options.debug) {
           console.log(
@@ -1258,15 +1322,23 @@ class SimpleKeyboard {
         `Destroying simple-keyboard instance: ${this.currentInstanceName}`
       );
 
+    const { physicalKeyboardHighlightPreventDefault = false } = this.options;
+
     /**
      * Remove document listeners
      */
-    document.removeEventListener("keyup", this.handleKeyUp);
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp, physicalKeyboardHighlightPreventDefault);
+    document.removeEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
     document.removeEventListener("mouseup", this.handleMouseUp);
     document.removeEventListener("touchend", this.handleTouchEnd);
     document.removeEventListener("select", this.handleSelect);
-    document.removeEventListener("selectionchange", this.handleSelectionChange);
+
+    // selectionchange is causing caret update issues on Chrome
+    // https://github.com/hodgef/simple-keyboard/issues/2346
+    if (this.options.updateCaretOnSelectionChange) {
+      document.removeEventListener("selectionchange", this.handleSelectionChange);
+    }
+
     document.onpointerup = null;
     document.ontouchend = null;
     document.ontouchcancel = null;
@@ -1332,8 +1404,8 @@ class SimpleKeyboard {
     /**
      * Remove instance
      */
-    window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
-    delete window["SimpleKeyboardInstances"][this.currentInstanceName];
+    (window as SKWindow)["SimpleKeyboardInstances"][this.currentInstanceName] = null;
+    delete (window as SKWindow)["SimpleKeyboardInstances"][this.currentInstanceName];
 
     /**
      * Reset initialized flag
@@ -1542,7 +1614,9 @@ class SimpleKeyboard {
   loadModules() {
     if (Array.isArray(this.options.modules)) {
       this.options.modules.forEach((KeyboardModule) => {
-        const keyboardModule = new KeyboardModule(this);
+        const keyboardModule = this.utilities.isConstructor(KeyboardModule) ?
+          new KeyboardModule(this) : KeyboardModule(this);
+
         keyboardModule.init && keyboardModule.init(this);
       });
 
@@ -1616,7 +1690,7 @@ class SimpleKeyboard {
           updated_startIndex,
           updated_endIndex - updated_startIndex + 1
         );
-        removedElements = updated_endIndex - updated_startIndex;
+        removedElements += updated_endIndex - updated_startIndex;
 
         /**
          * Inserting elements to container
@@ -1719,7 +1793,7 @@ class SimpleKeyboard {
      * Iterating through each row
      */
     layout[this.options.layoutName || this.defaultName].forEach(
-      (row, rIndex) => {
+      (row: string, rIndex: number) => {
         let rowArray = row.split(" ");
 
         /**
@@ -1877,7 +1951,10 @@ class SimpleKeyboard {
                  * This fires handler before onKeyReleased, therefore when that option is set we will fire the handler
                  * in onmousedown instead
                  */
-                if (typeof this.options.onKeyReleased !== "function") {
+                if (
+                  typeof this.options.onKeyReleased !== "function" &&
+                  !(this.options.useMouseEvents && this.options.clickOnMouseDown)
+                ) {
                   this.handleButtonClicked(button, e);
                 }
               };
@@ -1886,7 +1963,10 @@ class SimpleKeyboard {
                  * Fire button handler for onKeyReleased use-case
                  */
                 if (
-                  typeof this.options.onKeyReleased === "function" &&
+                  (
+                    typeof this.options.onKeyReleased === "function" ||
+                    (this.options.useMouseEvents && this.options.clickOnMouseDown)
+                  ) &&
                   !this.isMouseHold
                 ) {
                   this.handleButtonClicked(button, e);

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.anything());
+  expect(onSelect).toHaveBeenCalledWith("1", expect.anything());
   keyboard.destroy();
 });
 
@@ -332,98 +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.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();
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    onChange: jest.fn(),
+    onChangeAll: jest.fn()
   });
 
-  it('CandidateBox normalization will work', () => {
-    const keyboard = new Keyboard({
-      layout: {
-        default: [
-          "a b {bksp}"
-        ]
-      },
-      layoutCandidates: {
-        a: "신"
-      },
-      onChange: jest.fn(),
-      onChangeAll: jest.fn()
-    });
+  let candidateBoxOnItemSelected;
   
-    let candidateBoxOnItemSelected;
-    
-    const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
-      candidateBoxOnItemSelected(selectedCandidate);
-      keyboard.candidateBox.destroy();
-    });
+  const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
+    candidateBoxOnItemSelected(selectedCandidate);
+    keyboard.candidateBox.destroy();
+  });
+
+  const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
   
-    const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
-    
-    jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
-      candidateBoxOnItemSelected = params.onItemSelected;
-      params.onItemSelected = onSelect;
-      candidateBoxRenderFn(params);
-    });
+  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;
   
-    keyboard.getButtonElement("a").click();
-    keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+  const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
+    candidateBoxOnItemSelected(selectedCandidate);
+    keyboard.candidateBox.destroy();
+  });
+
+  const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
   
-    expect(keyboard.options.onChange.mock.calls[0][0]).toBe("a");
-    expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
+  jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
+    candidateBoxOnItemSelected = params.onItemSelected;
+    params.onItemSelected = onSelect;
+    candidateBoxRenderFn(params);
+  });
 
-    // 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": "신"});
+  keyboard.getButtonElement("a").click();
+  keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
 
-    // Selected candidate will not be normalized
-    keyboard.clearInput();
-    keyboard.setOptions({ disableCandidateNormalization: true });
+  expect(keyboard.options.onChange.mock.calls[0][0]).toBe("a");
+  expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
 
-    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"});
+  // 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": "신"});
 
-    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": "신"});
+  // Selected candidate will not be normalized
+  keyboard.clearInput();
+  keyboard.setOptions({ disableCandidateNormalization: true });
 
-    keyboard.destroy();
-  });
+  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;
 
@@ -1353,6 +1366,43 @@ it('Keyboard will handle selected input with unchanged updatedInput edge case',
   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,

src/lib/index.ts

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

src/lib/interfaces.ts

@@ -2,6 +2,10 @@
 import SimpleKeyboard from "./components/Keyboard";
 import Utilities from "./services/Utilities";
 
+export interface SKWindow extends Window {
+    SimpleKeyboardInstances?: any;
+};
+
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
@@ -22,7 +26,8 @@ export interface KeyboardInput {
 }
 
 export type CandidateBoxParams = {
-    utilities: Utilities
+    utilities: Utilities,
+    options: KeyboardOptions
 }
 
 export type CandidateBoxShowParams = {
@@ -160,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.
      */
@@ -250,15 +260,30 @@ export interface KeyboardOptions {
      */
     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
@@ -270,8 +295,23 @@ export interface KeyboardOptions {
      */
     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

@@ -24,9 +24,15 @@ 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 standardButtonPressed = instance.getButtonElement(buttonPressed);
@@ -34,7 +40,7 @@ class PhysicalKeyboard {
         `{${buttonPressed}}`
       );
       let buttonDOM;
-      let buttonName;
+      let buttonName: string;
 
       if (standardButtonPressed) {
         buttonDOM = standardButtonPressed;
@@ -46,38 +52,79 @@ class PhysicalKeyboard {
         return;
       }
 
-      if (buttonDOM) {
-        buttonDOM.style.background =
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        buttonElement.style.background =
           options.physicalKeyboardHighlightBgColor || "#dadce4";
-        buttonDOM.style.color =
+          buttonElement.style.color =
           options.physicalKeyboardHighlightTextColor || "black";
+      }
 
-        if (options.physicalKeyboardHighlightPress) {
-          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
-            buttonDOM.onpointerdown();
-          } else if (options.physicalKeyboardHighlightPressUseClick) {
-            buttonDOM.click();
-          } else {
-            instance.handleButtonClicked(buttonName, event);
+      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.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");
-        if (options.physicalKeyboardHighlightPressUsePointerEvents) {
-          buttonDOM.onpointerup();
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        if(buttonElement.removeAttribute){
+          buttonElement.removeAttribute("style");
+        }
+      };
+
+      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);
+          }
         }
       }
     });
@@ -85,11 +132,11 @@ 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) {
+  getSimpleKeyboardLayoutKey(e: KeyboardEvent) {
     let output = "";
-    const keyId = event.code || event.key || this.keyCodeToKey(event?.keyCode);
+    const keyId = e.code || e.key || this.keyCodeToKey(e?.keyCode);
 
     if (
       keyId?.includes("Numpad") ||
@@ -100,9 +147,9 @@ class PhysicalKeyboard {
       keyId?.includes("Alt") ||
       keyId?.includes("Meta")
     ) {
-      output = event.code || "";
+      output = e.code || "";
     } else {
-      output = event.key || this.keyCodeToKey(event?.keyCode) || "";
+      output = e.key || this.keyCodeToKey(e?.keyCode) || "";
     }
 
     return output.length > 1 ? output?.toLowerCase() : output;
@@ -111,7 +158,7 @@ class PhysicalKeyboard {
   /**
    * Retrieve key from keyCode
    */
-  keyCodeToKey(keyCode: number) {
+  keyCodeToKey(keyCode: number): string {
     return {
       8: "Backspace",
       9: "Tab",
@@ -210,7 +257,18 @@ class PhysicalKeyboard {
       220: "\\",
       221: "]",
       222: "'",
-    }[keyCode];
+    }[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

@@ -137,7 +137,7 @@ class Utilities {
   getButtonDisplayName(
     button: string,
     display: KeyboardOptions["display"],
-    mergeDisplay: boolean
+    mergeDisplay = false
   ) {
     if (mergeDisplay) {
       display = Object.assign({}, this.getDefaultDiplay(), display);
@@ -160,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,
@@ -222,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;
   }
 
@@ -557,6 +561,18 @@ class Utilities {
    * 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

@@ -212,7 +212,7 @@ it('PhysicalKeyboard keyCodeToKey will work', () => {
 
   expect(keyboard.physicalKeyboard.keyCodeToKey(186)).toBe(";");
 
-  const methodTest = spyOn(keyboard.physicalKeyboard, "keyCodeToKey");
+  const methodTest = jest.spyOn(keyboard.physicalKeyboard, "keyCodeToKey");
 
   document.dispatchEvent(new KeyboardEvent('keyup', {
     keyCode: 186,
@@ -221,5 +221,5 @@ it('PhysicalKeyboard keyCodeToKey will work', () => {
     }
   }));
 
-  expect(methodTest).toBeCalledWith(186);
+  expect(methodTest).toHaveBeenCalledWith(186);
 });

tsconfig.json

@@ -8,7 +8,6 @@
       "sourceMap": true,
       "declaration": true,
       "emitDeclarationOnly": true,
-      "suppressImplicitAnyIndexErrors": true,
       "lib": ["es2020", "dom"],
       "moduleResolution": "node",
       "downlevelIteration": true,

webpack.config.js

@@ -1,3 +1,4 @@
+// Configuration
 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -34,6 +35,8 @@ module.exports = {
     libraryTarget: 'umd',
     clean: true,
     globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
     environment: {
       arrowFunction: false
     }

webpack.config.modern.js

@@ -38,7 +38,9 @@ module.exports = {
     path: path.resolve(__dirname, 'build'),
     library: "SimpleKeyboard",
     libraryTarget: 'umd',
-    globalObject: 'this'
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
   },
   optimization: {
     minimize: true,

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']
+  }
+};