Bump Jest version

Add updateCaretOnSelectionChange. Fixes #2346
Build update
2026-08-02 00:00:07 +08:00 · 2024-09-12 17:35:31 -04:00 · 2024-09-12 17:34:47 -04:00 · 2024-09-10 08:03:07 +00:00 · 2024-09-10 08:02:53 +00:00 · 2024-09-10 04:01:56 -04:00
38 changed files with 6597 additions and 10969 deletions
@@ -1 +1 @@
-custom: https://hge.to/thanks
+buy_me_a_coffee: hodgef
@@ -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.
@@ -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).
@@ -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
@@ -9,6 +9,10 @@ on:
      - .gitignore
      - .github/**

+permissions:
+  contents: write
+  id-token: write
+
 jobs:
  publish:
    runs-on: ${{ matrix.os }}
@@ -55,6 +59,6 @@ jobs:
        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}}
@@ -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
@@ -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
@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+_git*
@@ -35,7 +35,5 @@ CONTRIBUTING.md
 tsconfig.json
 .eslintignore
 .eslintrc.json
-webpack.config.js
-webpack.config.demo.js
-webpack.config.modern.js
+webpack.config.*
 babel.config.js
@@ -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!
@@ -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://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>
 </p>

 <blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
@@ -41,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);
    /**
@@ -1,6 +1,6 @@
 /*!
 * 
- *   simple-keyboard v3.5.64
+ *   simple-keyboard v3.7.108
 *   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;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{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}
@@ -1,4 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
+export * from "./interfaces";
 export { SimpleKeyboard };
 export default SimpleKeyboard;
@@ -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[];
 }
@@ -216,11 +219,11 @@ export interface KeyboardOptions {
    /**
     * 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
     */
@@ -237,6 +240,10 @@ export interface KeyboardOptions {
     * 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
     */
@@ -1,4 +1,2 @@
-export declare const getDefaultLayout: () => {
-    default: string[];
-    shift: string[];
-};
+import { KeyboardLayoutObject } from "../interfaces";
+export declare const getDefaultLayout: () => KeyboardLayoutObject;
@@ -20,6 +20,6 @@ declare class PhysicalKeyboard {
     * Retrieve key from keyCode
     */
    keyCodeToKey(keyCode: number): string;
-    isMofifierKey: (e: KeyboardEvent) => boolean;
+    isModifierKey: (e: KeyboardEvent) => boolean;
 }
 export default PhysicalKeyboard;
@@ -1,16 +1,16 @@
 {
  "name": "simple-keyboard",
-  "version": "3.6.0",
+  "version": "3.8.0",
  "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.21.8",
+    "@babel/cli": "^7.25.6",
+    "@babel/core": "^7.25.2",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-transform-typescript": "^7.21.3",
+    "@babel/plugin-transform-typescript": "^7.25.2",
    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.21.5",
-    "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.59.6",
-    "@typescript-eslint/parser": "^5.59.7",
-    "autoprefixer": "^10.4.14",
+    "@babel/preset-env": "^7.25.4",
+    "@types/jest": "^29.5.13",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.4.20",
    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.2",
+    "babel-loader": "^9.1.3",
    "babel-preset-minify": "^0.5.2",
-    "core-js": "^3.30.2",
-    "css-loader": "^6.7.4",
-    "css-minimizer-webpack-plugin": "^5.0.0",
-    "eslint": "^8.41.0",
+    "core-js": "^3.38.1",
+    "css-loader": "^7.1.2",
+    "css-minimizer-webpack-plugin": "^7.0.0",
+    "eslint": "^8.57.0",
    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.1",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.23",
-    "postcss-loader": "^7.3.0",
-    "style-loader": "^3.3.3",
-    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^4.9.5",
+    "html-webpack-plugin": "^5.6.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mini-css-extract-plugin": "^2.9.1",
+    "postcss": "^8.4.45",
+    "postcss-loader": "^8.1.1",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.3.10",
+    "typescript": "^5.6.2",
    "url-loader": "^4.1.1",
-    "webpack": "^5.84.0",
-    "webpack-cli": "^5.1.1",
+    "webpack": "^5.94.0",
+    "webpack-cli": "^5.1.3",
    "webpack-dev-server": "4.15.0"
  },
  "jest": {
+    "testEnvironment": "jsdom",
    "roots": [
      "<rootDir>/src"
    ],
@@ -19,8 +19,9 @@ class Demo {
      onChange: input => this.onChange(input),
      onKeyPress: button => this.onKeyPress(button),
      preventMouseDownDefault: true,
+      layoutCandidatesPageSize: 15,
      layoutCandidates: {
-        ni: "你 尼",
+        ni: "你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼 你 尼",
        hao: "好 号"
      }
    });
@@ -3,18 +3,18 @@ import "./css/index.css";
 /**
 * Demos
 */
-import BasicDemo from "./BasicDemo";
+//import BasicDemo from "./BasicDemo";
 //import RTLDemo from "./RTLDemo";
 //import ButtonThemeDemo from "./ButtonThemeDemo";
 //import DOMElementDemo from "./DOMElementDemo";
 //import FullKeyboardDemo from "./FullKeyboardDemo";
 //import MultipleKeyboardsDemo from "./MultipleKeyboardsDestroyDemo";
-//import CandidateBoxDemo from "./CandidateBoxDemo";
+import CandidateBoxDemo from "./CandidateBoxDemo";

 /**
 * Selected demo
 */
-const SELECTED_DEMO = BasicDemo;
+const SELECTED_DEMO = CandidateBoxDemo;

 /**
 * Bootstrap
@@ -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";

@@ -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,
@@ -118,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.
@@ -136,6 +137,7 @@ class SimpleKeyboard {
     * @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
     */
    this.options = {
      layoutName: "default",
@@ -189,17 +191,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;

@@ -393,6 +395,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 =
@@ -458,6 +467,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
     */
@@ -806,7 +822,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) => {
@@ -936,15 +952,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);
    });
  }

@@ -1133,7 +1149,11 @@ class SimpleKeyboard {
      document.addEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
      document.addEventListener("mouseup", this.handleMouseUp);
      document.addEventListener("touchend", this.handleTouchEnd);
-      document.addEventListener("selectionchange", this.handleSelectionChange);
+
+      if (this.options.updateCaretOnSelectionChange) {
+        document.addEventListener("selectionchange", this.handleSelectionChange);
+      }
+
      document.addEventListener("select", this.handleSelect);
    }
  }
@@ -1245,7 +1265,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(
@@ -1269,7 +1289,7 @@ class SimpleKeyboard {
        /**
         * Resetting activeInputElement
         */
-        this.activeInputElement = null;
+        instance.activeInputElement = null;

        if (instance.options.debug) {
          console.log(
@@ -1311,7 +1331,13 @@ class SimpleKeyboard {
    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;
@@ -1377,8 +1403,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
@@ -5,7 +5,6 @@
  background: #ececec;
  border-bottom: 2px solid #b5b5b5;
  user-select: none;
-  max-width: 272px;
  transform: translateY(-100%);
  margin-top: -10px;
 }
@@ -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();
+});
@@ -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;

@@ -1,4 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
+export * from "./interfaces";
 export { SimpleKeyboard };
 export default SimpleKeyboard;
@@ -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[];
 }
@@ -261,15 +265,20 @@ export interface KeyboardOptions {
     */
    enableLayoutCandidatesKeyPress?: boolean;

+    /**
+     * Updates caret when selectionchange event is fired
+     */
+    updateCaretOnSelectionChange?: 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
@@ -291,8 +300,13 @@ export interface KeyboardOptions {
     */
    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;
-}
+}
@@ -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}",
@@ -27,7 +27,7 @@ class PhysicalKeyboard {
  handleHighlightKeyDown(e: KeyboardEvent) {
    const options = this.getOptions();

-    if(options.physicalKeyboardHighlightPreventDefault && this.isMofifierKey(e)){
+    if(options.physicalKeyboardHighlightPreventDefault && this.isModifierKey(e)){
      e.preventDefault();
      e.stopImmediatePropagation();
    }
@@ -66,7 +66,7 @@ class PhysicalKeyboard {
          // 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();
+              buttonDOM[0]?.onpointerdown?.(e);
            } else if (options.physicalKeyboardHighlightPressUseClick) {
              buttonDOM[0]?.click();
            } else {
@@ -78,7 +78,7 @@ class PhysicalKeyboard {

          if (options.physicalKeyboardHighlightPress) {
            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
-              buttonDOM.onpointerdown();
+              buttonDOM?.onpointerdown?.(e);
            } else if (options.physicalKeyboardHighlightPressUseClick) {
              buttonDOM.click();
            } else {
@@ -93,7 +93,7 @@ class PhysicalKeyboard {
  handleHighlightKeyUp(e: KeyboardEvent) {
    const options = this.getOptions();

-    if(options.physicalKeyboardHighlightPreventDefault && this.isMofifierKey(e)){
+    if(options.physicalKeyboardHighlightPreventDefault && this.isModifierKey(e)){
      e.preventDefault();
      e.stopImmediatePropagation();
    }
@@ -117,13 +117,13 @@ class PhysicalKeyboard {

          // Even though we have an array of buttons, we just want to press one of them
          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
-            buttonDOM[0]?.onpointerup();
+            buttonDOM[0]?.onpointerup?.(e);
          }
        } else {
          applyButtonStyle(buttonDOM);

          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
-            buttonDOM.onpointerup();
+            buttonDOM?.onpointerup?.(e);
          }
        }
      }
@@ -260,7 +260,7 @@ class PhysicalKeyboard {
    }[keyCode] || "";
  }

-  isMofifierKey = (e: KeyboardEvent): boolean => {
+  isModifierKey = (e: KeyboardEvent): boolean => {
    return (
      e.altKey
      || e.ctrlKey
@@ -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);
 });
@@ -8,7 +8,6 @@
      "sourceMap": true,
      "declaration": true,
      "emitDeclarationOnly": true,
-      "suppressImplicitAnyIndexErrors": true,
      "lib": ["es2020", "dom"],
      "moduleResolution": "node",
      "downlevelIteration": true,
@@ -1,3 +1,4 @@
+// Configuration
 const path = require('path');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
@@ -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']
+  }
+};