Add modern.esm bundle. Fixes #2070

Update bug_report.md
Build update
2026-07-14 00:00:06 +08:00 · 2023-08-20 22:19:40 -04:00 · 2023-08-16 11:57:34 -07:00 · 2023-08-16 08:46:28 +00:00 · 2023-08-16 08:46:10 +00:00 · 2023-08-16 04:44:53 -04:00
30 changed files with 4285 additions and 3140 deletions
@@ -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.
@@ -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
@@ -10,7 +10,7 @@ on:
 jobs:
  mirroring:
-    runs-on: ubuntu-18.04
+    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v1
      - uses: pixta-dev/repository-mirroring-action@v1
@@ -14,7 +14,7 @@ jobs:
    runs-on: ${{ matrix.os }}
    strategy:
      matrix:
-        node-version: [16.x]
+        node-version: [20.x]
        os: [ubuntu-latest]
    steps:
      - uses: actions/checkout@v1
@@ -25,6 +25,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 +41,7 @@ jobs:
      - name: Bump version
        run: |
          export NODE_OPTIONS=--openssl-legacy-provider
          git reset --hard
          npm version patch
          npm run build
@@ -51,6 +53,7 @@ jobs:
      - name: npm publish
        run: |
          export NODE_OPTIONS=--openssl-legacy-provider
          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
          npm run trypublish
        env:
@@ -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:
@@ -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:
@@ -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.*
 webpack.config.demo.js
 webpack.config.modern.js
 babel.config.js
@@ -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;
@@ -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;
@@ -1,6 +1,6 @@
 /*!
 * 
- *   simple-keyboard v3.4.210
+ *   simple-keyboard v3.6.42
 *   https://github.com/hodgef/simple-keyboard
 *
 *   Copyright (c) Francisco Hodge (https://github.com/hodgef) and project contributors.
@@ -8,4 +8,4 @@
 *   This source code is licensed under the MIT license found in the
 *   LICENSE file in the root directory of this source tree.
 *
- */.hg-theme-default{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{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}
@@ -1,4 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
 export * from "./interfaces";
 export { SimpleKeyboard };
 export default SimpleKeyboard;
@@ -17,6 +17,7 @@ export interface KeyboardInput {
 }
 export type CandidateBoxParams = {
    utilities: Utilities;
    options: KeyboardOptions;
 };
 export type CandidateBoxShowParams = {
    candidateValue: string;
@@ -128,6 +129,10 @@ export interface KeyboardOptions {
     * Define the background color that the physical keyboard highlighted key should have.
     */
    physicalKeyboardHighlightBgColor?: string;
    /**
     * Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
     */
    physicalKeyboardHighlightPreventDefault?: boolean;
    /**
     * Calling preventDefault for the mousedown events keeps the focus on the input.
     */
@@ -204,6 +209,10 @@ export interface KeyboardOptions {
     * Disables the automatic normalization for selected layout candidates
     */
    disableCandidateNormalization?: boolean;
    /**
     * Enables onKeyPress triggering for layoutCandidate items
     */
    enableLayoutCandidatesKeyPress?: boolean;
    /**
     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
     */
@@ -220,6 +229,14 @@ 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;
    /**
     * Module options can have any format
     */
@@ -9,16 +9,17 @@ declare class PhysicalKeyboard {
     * Creates an instance of the PhysicalKeyboard service
     */
    constructor({ dispatch, getOptions }: PhysicalKeyboardParams);
-    handleHighlightKeyDown(event: KeyboardEvent): void;
+    handleHighlightKeyDown(e: KeyboardEvent): void;
-    handleHighlightKeyUp(event: 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;
    isMofifierKey: (e: KeyboardEvent) => boolean;
 }
 export default PhysicalKeyboard;
@@ -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
     *
@@ -1,12 +1,13 @@
 {
  "name": "simple-keyboard",
-  "version": "3.4.210",
+  "version": "3.7.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",
@@ -39,36 +40,36 @@
  ],
  "license": "MIT",
  "devDependencies": {
-    "@babel/cli": "^7.20.7",
+    "@babel/cli": "^7.22.10",
-    "@babel/core": "^7.20.5",
+    "@babel/core": "^7.22.10",
    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-transform-typescript": "^7.20.7",
+    "@babel/plugin-transform-typescript": "^7.22.10",
    "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.20.2",
+    "@babel/preset-env": "^7.22.10",
    "@types/jest": "^27.5.0",
-    "@typescript-eslint/eslint-plugin": "^5.45.1",
+    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.48.0",
+    "@typescript-eslint/parser": "^5.62.0",
-    "autoprefixer": "^10.4.13",
+    "autoprefixer": "^10.4.15",
    "babel-eslint": "^10.1.0",
-    "babel-loader": "^9.1.0",
+    "babel-loader": "^9.1.3",
    "babel-preset-minify": "^0.5.2",
-    "core-js": "^3.27.1",
+    "core-js": "^3.32.0",
-    "css-loader": "^6.7.3",
+    "css-loader": "^6.8.1",
-    "css-minimizer-webpack-plugin": "^4.2.2",
+    "css-minimizer-webpack-plugin": "^5.0.1",
-    "eslint": "^8.31.0",
+    "eslint": "^8.47.0",
    "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.5.0",
+    "html-webpack-plugin": "^5.5.3",
    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^2.7.2",
+    "mini-css-extract-plugin": "^2.7.6",
-    "postcss": "^8.4.20",
+    "postcss": "^8.4.28",
-    "postcss-loader": "^7.0.2",
+    "postcss-loader": "^7.3.3",
-    "style-loader": "^3.3.1",
+    "style-loader": "^3.3.3",
-    "terser-webpack-plugin": "^5.3.6",
+    "terser-webpack-plugin": "^5.3.9",
-    "typescript": "^4.9.4",
+    "typescript": "^4.9.5",
    "url-loader": "^4.1.1",
-    "webpack": "^5.40.0",
+    "webpack": "^5.88.2",
-    "webpack-cli": "^5.0.1",
+    "webpack-cli": "^5.1.3",
-    "webpack-dev-server": "4.11.1"
+    "webpack-dev-server": "4.15.0"
  },
  "jest": {
    "roots": [
@@ -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.innerHTML = this.options.display?.[candidateListItem] || candidateListItem;
-      candidateListLIElement.onclick = (e = getMouseEvent()) =>
+
-        onItemSelected(candidateListItem, e);
+      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
@@ -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;
@@ -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.
@@ -134,6 +135,7 @@ 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
     */
    this.options = {
      layoutName: "default",
@@ -215,6 +217,7 @@ class SimpleKeyboard {
    this.candidateBox = this.options.enableLayoutCandidates
      ? new CandidateBox({
          utilities: this.utilities,
          options: this.options,
        })
      : null;
@@ -375,7 +378,11 @@ class SimpleKeyboard {
        candidateValue,
        targetElement,
        onSelect: (selectedCandidate: string, e: MouseEvent) => {
-          const { layoutCandidatesCaseSensitiveMatch, disableCandidateNormalization } = this.options;
+          const {
            layoutCandidatesCaseSensitiveMatch,
            disableCandidateNormalization,
            enableLayoutCandidatesKeyPress
          } = this.options;
          let candidateStr = selectedCandidate;
@@ -411,6 +418,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),
@@ -518,7 +533,8 @@ class SimpleKeyboard {
          "Caret at: ",
          this.getCaretPosition(),
          this.getCaretPositionEnd(),
-          `(${this.keyboardDOMClass})`
+          `(${this.keyboardDOMClass})`,
          e?.type
        );
      }
@@ -558,6 +574,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 +714,7 @@ class SimpleKeyboard {
     * Calling onKeyReleased
     */
    if (button && typeof this.options.onKeyReleased === "function")
-      this.options.onKeyReleased(button);
+      this.options.onKeyReleased(button, e);
  }
  /**
@@ -878,6 +910,7 @@ class SimpleKeyboard {
        this.candidateBox.destroy();
        this.candidateBox = new CandidateBox({
          utilities: this.utilities,
          options: this.options,
        });
      }
    }
@@ -1091,15 +1124,17 @@ class SimpleKeyboard {
        console.log(`Caret handling started (${this.keyboardDOMClass})`);
      }
      const { physicalKeyboardHighlightPreventDefault = false } = this.options;
      /**
       * Event Listeners
       */
-      document.addEventListener("keyup", this.handleKeyUp);
+      document.addEventListener("keyup", this.handleKeyUp, physicalKeyboardHighlightPreventDefault);
-      document.addEventListener("keydown", this.handleKeyDown);
+      document.addEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
      document.addEventListener("mouseup", this.handleMouseUp);
      document.addEventListener("touchend", this.handleTouchEnd);
      document.addEventListener("select", this.handleSelect);
      document.addEventListener("selectionchange", this.handleSelectionChange);
      document.addEventListener("select", this.handleSelect);
    }
  }
@@ -1151,6 +1186,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);
  }
@@ -1211,7 +1253,8 @@ class SimpleKeyboard {
            instance.getCaretPosition(),
            instance.getCaretPositionEnd(),
            event && event.target.tagName.toLowerCase(),
-            `(${instance.keyboardDOMClass})`
+            `(${instance.keyboardDOMClass})`,
            event?.type
          );
        }
      } else if (
@@ -1258,11 +1301,13 @@ class SimpleKeyboard {
        `Destroying simple-keyboard instance: ${this.currentInstanceName}`
      );
    const { physicalKeyboardHighlightPreventDefault = false } = this.options;
    /**
     * Remove document listeners
     */
-    document.removeEventListener("keyup", this.handleKeyUp);
+    document.removeEventListener("keyup", this.handleKeyUp, physicalKeyboardHighlightPreventDefault);
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
    document.removeEventListener("mouseup", this.handleMouseUp);
    document.removeEventListener("touchend", this.handleTouchEnd);
    document.removeEventListener("select", this.handleSelect);
@@ -1719,7 +1764,7 @@ class SimpleKeyboard {
     * Iterating through each row
     */
    layout[this.options.layoutName || this.defaultName].forEach(
-      (row, rIndex) => {
+      (row: string, rIndex: number) => {
        let rowArray = row.split(" ");
        /**
@@ -48,7 +48,6 @@ li.hg-candidate-box-list-item:active {
  display: flex;
  align-items: center;
  padding: 0 10px;
  background: #d0d0d0;
  color: #969696;
  cursor: pointer;
 }
@@ -1353,6 +1353,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,
@@ -1,4 +1,5 @@
 import "./polyfills";
 import SimpleKeyboard from "./components/Keyboard";
 export * from "./interfaces";
 export { SimpleKeyboard };
 export default SimpleKeyboard;
@@ -22,7 +22,8 @@ export interface KeyboardInput {
 }
 export type CandidateBoxParams = {
-    utilities: Utilities
+    utilities: Utilities,
    options: KeyboardOptions
 }
 export type CandidateBoxShowParams = {
@@ -160,6 +161,11 @@ export interface KeyboardOptions {
     */
    physicalKeyboardHighlightBgColor?: string;
    /**
     * Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
     */
    physicalKeyboardHighlightPreventDefault?: boolean;
    /**
     * Calling preventDefault for the mousedown events keeps the focus on the input.
     */
@@ -250,6 +256,11 @@ export interface KeyboardOptions {
     */
    disableCandidateNormalization?: boolean;
    /**
     * Enables onKeyPress triggering for layoutCandidate items
     */
    enableLayoutCandidatesKeyPress?: boolean;
    /**
     * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
     */
@@ -270,6 +281,16 @@ 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;
    /**
     * Module options can have any format
     */
@@ -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.isMofifierKey(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) {
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
-        buttonDOM.style.background =
+        buttonElement.style.background =
          options.physicalKeyboardHighlightBgColor || "#dadce4";
-        buttonDOM.style.color =
+          buttonElement.style.color =
          options.physicalKeyboardHighlightTextColor || "black";
      }
-        if (options.physicalKeyboardHighlightPress) {
+      if (buttonDOM) {
-          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+        if(Array.isArray(buttonDOM)){
-            buttonDOM.onpointerdown();
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
-          } else if (options.physicalKeyboardHighlightPressUseClick) {
+
-            buttonDOM.click();
+          // Even though we have an array of buttons, we just want to press one of them
-          } else {
+          if (options.physicalKeyboardHighlightPress) {
-            instance.handleButtonClicked(buttonName, event);
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
              buttonDOM[0]?.onpointerdown();
            } else if (options.physicalKeyboardHighlightPressUseClick) {
              buttonDOM[0]?.click();
            } else {
              instance.handleButtonClicked(buttonName, e);
            }
          }
        } else {
          applyButtonStyle(buttonDOM);
          if (options.physicalKeyboardHighlightPress) {
            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
              buttonDOM.onpointerdown();
            } else if (options.physicalKeyboardHighlightPressUseClick) {
              buttonDOM.click();
            } else {
              instance.handleButtonClicked(buttonName, e);
            }
          }
        }
      }
    });
  }
-  handleHighlightKeyUp(event: KeyboardEvent) {
+  handleHighlightKeyUp(e: KeyboardEvent) {
    const options = this.getOptions();
-    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
    if(options.physicalKeyboardHighlightPreventDefault && this.isMofifierKey(e)){
      e.preventDefault();
      e.stopImmediatePropagation();
    }
    const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
    this.dispatch((instance: any) => {
      const buttonDOM =
        instance.getButtonElement(buttonPressed) ||
        instance.getButtonElement(`{${buttonPressed}}`);
-      if (buttonDOM && buttonDOM.removeAttribute) {
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
-        buttonDOM.removeAttribute("style");
+        if(buttonElement.removeAttribute){
-        if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+          buttonElement.removeAttribute("style");
-          buttonDOM.onpointerup();
+        }
      };
      if (buttonDOM) {
        if(Array.isArray(buttonDOM)){
          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
          // Even though we have an array of buttons, we just want to press one of them
          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
            buttonDOM[0]?.onpointerup();
          }
        } else {
          applyButtonStyle(buttonDOM);
          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
            buttonDOM.onpointerup();
          }
        }
      }
    });
@@ -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] || "";
  }
  isMofifierKey = (e: KeyboardEvent): boolean => {
    return (
      e.altKey
      || e.ctrlKey
      || e.shiftKey
      || ["Tab", "CapsLock", "Esc", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(
        e.code || e.key || this.keyCodeToKey(e?.keyCode)
      )
    )
  }
 }
@@ -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;
  }
@@ -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
    }
@@ -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,
@@ -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']
  }
 };