Update build dependency. Fixes #1977

Bump @typescript-eslint/parser from 5.59.5 to 5.59.7

.github/stale.yml

@@ -6,8 +6,6 @@ daysUntilClose: 2
 exemptLabels:
   - pinned
   - security
-  - "💥 Bug"
-  - "⚡️ Enhancement"
 # Label to use when marking an issue as stale
 staleLabel: Stale
 # Comment to post when marking an issue as stale. Set to `false` to disable

.github/workflows/main.yml

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

.github/workflows/mirroring.yml

@@ -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

.github/workflows/publish.yml

@@ -11,14 +11,23 @@ on:
 
 jobs:
   publish:
-    runs-on: ubuntu-latest
+    runs-on: ${{ matrix.os }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        os: [ubuntu-latest]
     steps:
       - uses: actions/checkout@v1
-      - uses: actions/setup-node@v1
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
         with:
-          node-version: 12
-      - run: npm install
-      - run: npm run test -- --coverage --watchAll=false
+          node-version: ${{ matrix.node_version }}
+          
+      - name: npm install, build, and test
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run test -- --coverage --watchAll=false
 
       - name: Setup GIT
         run: |
@@ -32,6 +41,7 @@ jobs:
 
       - name: Bump version
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           git reset --hard
           npm version patch
           npm run build
@@ -43,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:

.github/workflows/pull_request.yml

@@ -8,7 +8,7 @@ jobs:
     if: ${{ github.actor != 'dependabot[bot]' }}
     strategy:
       matrix:
-        node-version: [12.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_dependabot.yml

@@ -8,7 +8,7 @@ jobs:
     if: ${{ github.actor == 'dependabot[bot]' }}
     strategy:
       matrix:
-        node-version: [12.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:

.npmignore

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

README.md

@@ -1,22 +1,26 @@
 <p>
   <a href="https://simple-keyboard.com/demo">
-	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/PrpbdIu.png">
+	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://user-images.githubusercontent.com/25509135/187999993-fb5422fd-a56f-4a9a-84a9-55c94478f61c.gif">
   </a>
-	
+
   <a href="https://www.npmjs.com/package/simple-keyboard">
     <img src="https://badgen.net/npm/v/simple-keyboard?color=blue" alt="npm version">
   </a>
+	
+  <a href="https://github.com/hodgef/simple-keyboard/blob/master/LICENSE">
+    <img src="https://img.shields.io/badge/License-MIT-blue.svg" alt="MIT license">
+  </a>
 
   <a href="https://github.com/hodgef/simple-keyboard/actions">
-     <img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg?color=green" />
+     <img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg" />
   </a>
   
   <a href="https://github.com/hodgef/simple-keyboard/actions">
-     <img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg?color=green" />
+     <img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg" />
   </a>
-  
-  <a href="https://david-dm.org/hodgef/simple-keyboard">
-    <img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
+	
+  <a href="https://gitlab.com/hodgef/simple-keyboard" target="_blank">
+     <img alt="Mirroring" src="https://github.com/hodgef/simple-keyboard/actions/workflows/mirroring.yml/badge.svg" />
   </a>
 </p>
 
@@ -76,6 +80,8 @@ Want to create your own module? Check out the [Modules page](https://hodgef.com/
 - Firefox 57+
 - iOS 9+
 
+> Note: If you don't want to support old browsers, you can use the Modern Browsers bundle ([index.modern.js](https://github.com/hodgef/simple-keyboard/blob/master/build)).
+
 ## ✅ Contributing
 
 PRs and issues are always welcome. Feel free to submit any issues you have at:

babel.config.js

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

build/components/CandidateBox.d.ts

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

build/components/Keyboard.d.ts

@@ -1,6 +1,7 @@
 import "./css/Keyboard.css";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
-import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement, KeyboardParams } from "../interfaces";
+import Utilities from "../services/Utilities";
+import { KeyboardOptions, KeyboardInput, KeyboardButtonElements, KeyboardHandlerEvent, KeyboardElement } from "../interfaces";
 import CandidateBox from "./CandidateBox";
 /**
  * Root class for simple-keyboard.
@@ -12,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;
@@ -42,11 +43,11 @@ declare 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.
      */
-    constructor(...params: KeyboardParams);
+    constructor(selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions);
     /**
      * parseParams
      */
-    handleParams: (params: KeyboardParams) => {
+    handleParams: (selectorOrOptions?: string | HTMLDivElement | KeyboardOptions, keyboardOptions?: KeyboardOptions) => {
         keyboardDOMClass: string;
         keyboardDOM: KeyboardElement;
         options: Partial<KeyboardOptions | undefined>;
@@ -82,6 +83,14 @@ declare class SimpleKeyboard {
      * @param  {string} button The button's layout name.
      */
     handleButtonClicked(button: string, e?: KeyboardHandlerEvent): void;
+    /**
+     * Get mouse hold state
+     */
+    getMouseHold(): boolean;
+    /**
+     * Mark mouse hold state as set
+     */
+    setMouseHold(value: boolean): void;
     /**
      * Handles button mousedown
      */

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.3.0
+ *   simple-keyboard v3.5.64
  *   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;-ms-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:not(:last-child){margin-right:5px}.hg-theme-default .hg-row .hg-button-container{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;-ms-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}

build/index.d.ts

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

build/index.modern.d.ts

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

build/interfaces.d.ts

@@ -3,7 +3,7 @@ import Utilities from "./services/Utilities";
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
-export declare type KeyboardButtonTheme = {
+export type KeyboardButtonTheme = {
     class: string;
     buttons: string;
 } | null;
@@ -15,24 +15,24 @@ export interface KeyboardButtonAttributes {
 export interface KeyboardInput {
     [key: string]: string;
 }
-export declare type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
-export declare type CandidateBoxParams = {
+export type CandidateBoxParams = {
     utilities: Utilities;
+    options: KeyboardOptions;
 };
-export declare type CandidateBoxShowParams = {
+export type CandidateBoxShowParams = {
     candidateValue: string;
     targetElement: KeyboardElement;
     onSelect: (selectedCandidate: string, e: MouseEvent) => void;
 };
-export declare type CandidateBoxRenderParams = {
+export type CandidateBoxRenderParams = {
     candidateListPages: string[][];
     targetElement: KeyboardElement;
     pageIndex: number;
     nbPages: number;
     onItemSelected: (selectedCandidate: string, e: MouseEvent) => void;
 };
-export declare type KeyboardElement = HTMLDivElement | HTMLButtonElement;
-export declare type KeyboardHandlerEvent = any;
+export type KeyboardElement = HTMLDivElement | HTMLButtonElement;
+export type KeyboardHandlerEvent = any;
 export interface KeyboardButtonElements {
     [key: string]: KeyboardElement[];
 }
@@ -117,6 +117,10 @@ export interface KeyboardOptions {
      * In other words, this calls button.click() on the highlighted button
      */
     physicalKeyboardHighlightPressUseClick?: boolean;
+    /**
+     * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     */
+    physicalKeyboardHighlightPressUsePointerEvents?: boolean;
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
@@ -125,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.
      */
@@ -190,9 +198,21 @@ export interface KeyboardOptions {
         [key: string]: string[];
     };
     /**
-     * Determine size of layout candidate list
+     * Determines size of layout candidate list
      */
     layoutCandidatesPageSize?: number;
+    /**
+     * Determines whether layout candidate match should be case sensitive.
+     */
+    layoutCandidatesCaseSensitiveMatch?: boolean;
+    /**
+     * Disables the automatic normalization for selected layout candidates
+     */
+    disableCandidateNormalization?: boolean;
+    /**
+     * Enables onKeyPress triggering for layoutCandidate items
+     */
+    enableLayoutCandidatesKeyPress?: boolean;
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
@@ -209,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
      */

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;
+    isMofifierKey: (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
      *
@@ -185,6 +185,14 @@ declare class Utilities {
      * Split array into chunks
      */
     chunkArray<T>(arr: T[], size: number): T[][];
+    /**
+     * Escape regex input
+     */
+    escapeRegex(str: string): string;
+    /**
+     * Calculate caret position offset when using rtl option
+     */
+    getRtlOffset(index: number, input: string): number;
     /**
      * Reusable empty function
      */

package.json

@@ -1,12 +1,11 @@
 {
   "name": "simple-keyboard",
-  "version": "3.3.0",
+  "version": "3.6.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
-  "types": "build/types/index.d.ts",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && tsc && npm run build-modern",
+    "build": "webpack && npm run build-modern && tsc",
     "build-modern": "webpack --config webpack.config.modern.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
@@ -40,38 +39,36 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.15.7",
-    "@babel/core": "^7.15.8",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.15.8",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.21.8",
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-transform-typescript": "^7.21.3",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.15.8",
-    "@types/jest": "^27.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.31.2",
-    "@typescript-eslint/parser": "^4.33.0",
-    "autoprefixer": "^10.3.6",
+    "@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-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "babel-preset-minify": "^0.5.0",
-    "core-js": "^3.18.2",
-    "css-loader": "^6.4.0",
-    "eslint": "^7.31.0",
+    "babel-loader": "^9.1.2",
+    "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",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.2",
+    "html-webpack-plugin": "^5.5.1",
     "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^2.4.2",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.9",
-    "postcss-loader": "^6.1.1",
-    "prettier": "^2.4.1",
-    "prettier-webpack-plugin": "^1.2.0",
-    "style-loader": "^3.3.0",
-    "terser-webpack-plugin": "^5.2.4",
-    "typescript": "^4.4.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",
     "url-loader": "^4.1.1",
-    "webpack": "^5.40.0",
-    "webpack-cli": "^4.9.0",
-    "webpack-dev-server": "4.3.1"
+    "webpack": "^5.84.0",
+    "webpack-cli": "^5.1.1",
+    "webpack-dev-server": "4.15.0"
   },
   "jest": {
     "roots": [

scripts/loaderMock.js

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

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

@@ -10,7 +10,6 @@ import {
   KeyboardButtonElements,
   KeyboardHandlerEvent,
   KeyboardElement,
-  KeyboardParams,
 } from "../interfaces";
 import CandidateBox from "./CandidateBox";
 
@@ -24,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;
@@ -51,14 +50,17 @@ 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.
    */
-  constructor(...params: KeyboardParams) {
+  constructor(
+    selectorOrOptions?: string | HTMLDivElement | KeyboardOptions,
+    keyboardOptions?: KeyboardOptions
+  ) {
     if (typeof window === "undefined") return;
 
     const {
       keyboardDOMClass,
       keyboardDOM,
       options = {},
-    } = this.handleParams(params);
+    } = this.handleParams(selectorOrOptions, keyboardOptions);
 
     /**
      * Initializing Utilities
@@ -105,6 +107,9 @@ class SimpleKeyboard {
      * @property {boolean} physicalKeyboardHighlightPress Presses keys highlighted by physicalKeyboardHighlight
      * @property {string} physicalKeyboardHighlightTextColor Define the text color that the physical keyboard highlighted key should have.
      * @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.
@@ -127,7 +132,10 @@ class SimpleKeyboard {
      * @property {array} modules Module classes to be loaded by simple-keyboard.
      * @property {boolean} enableLayoutCandidates Enable input method editor candidate list support.
      * @property {object} excludeFromLayout Buttons to exclude from layout
-     * @property {number} layoutCandidatesPageSize Determine size of layout candidate list
+     * @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",
@@ -209,6 +217,7 @@ class SimpleKeyboard {
     this.candidateBox = this.options.enableLayoutCandidates
       ? new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         })
       : null;
 
@@ -232,7 +241,8 @@ class SimpleKeyboard {
    * parseParams
    */
   handleParams = (
-    params: KeyboardParams
+    selectorOrOptions?: string | HTMLDivElement | KeyboardOptions,
+    keyboardOptions?: KeyboardOptions
   ): {
     keyboardDOMClass: string;
     keyboardDOM: KeyboardElement;
@@ -246,29 +256,29 @@ class SimpleKeyboard {
      * If first parameter is a string:
      * Consider it as an element's class
      */
-    if (typeof params[0] === "string") {
-      keyboardDOMClass = params[0].split(".").join("");
+    if (typeof selectorOrOptions === "string") {
+      keyboardDOMClass = selectorOrOptions.split(".").join("");
       keyboardDOM = document.querySelector(
         `.${keyboardDOMClass}`
       ) as KeyboardElement;
-      options = params[1];
+      options = keyboardOptions;
 
       /**
        * If first parameter is an KeyboardElement
        * Consider it as the keyboard DOM element
        */
-    } else if (params[0] instanceof HTMLDivElement) {
+    } else if (selectorOrOptions instanceof HTMLDivElement) {
       /**
        * This element must have a class, otherwise throw
        */
-      if (!params[0].className) {
+      if (!selectorOrOptions.className) {
         console.warn("Any DOM element passed as parameter must have a class.");
         throw new Error("KEYBOARD_DOM_CLASS_ERROR");
       }
 
-      keyboardDOMClass = params[0].className.split(" ")[0];
-      keyboardDOM = params[0];
-      options = params[1];
+      keyboardDOMClass = selectorOrOptions.className.split(" ")[0];
+      keyboardDOM = selectorOrOptions;
+      options = keyboardOptions;
 
       /**
        * Otherwise, search for .simple-keyboard DOM element
@@ -278,7 +288,7 @@ class SimpleKeyboard {
       keyboardDOM = document.querySelector(
         `.${keyboardDOMClass}`
       ) as KeyboardElement;
-      options = params[0];
+      options = selectorOrOptions;
     }
 
     return {
@@ -312,7 +322,10 @@ class SimpleKeyboard {
   getInputCandidates(
     input: string
   ): { candidateKey: string; candidateValue: string } | Record<string, never> {
-    const { layoutCandidates: layoutCandidatesObj } = this.options;
+    const {
+      layoutCandidates: layoutCandidatesObj,
+      layoutCandidatesCaseSensitiveMatch,
+    } = this.options;
 
     if (!layoutCandidatesObj || typeof layoutCandidatesObj !== "object") {
       return {};
@@ -322,7 +335,10 @@ class SimpleKeyboard {
       (layoutCandidate: string) => {
         const inputSubstr =
           input.substring(0, this.getCaretPositionEnd() || 0) || input;
-        const regexp = new RegExp(`${layoutCandidate}$`, "g");
+        const regexp = new RegExp(
+          `${this.utilities.escapeRegex(layoutCandidate)}$`,
+          layoutCandidatesCaseSensitiveMatch ? "g" : "gi"
+        );
         const matches = [...inputSubstr.matchAll(regexp)];
         return !!matches.length;
       }
@@ -362,14 +378,35 @@ class SimpleKeyboard {
         candidateValue,
         targetElement,
         onSelect: (selectedCandidate: string, e: MouseEvent) => {
+          const {
+            layoutCandidatesCaseSensitiveMatch,
+            disableCandidateNormalization,
+            enableLayoutCandidatesKeyPress
+          } = this.options;
+
+          let candidateStr = selectedCandidate;
+
+          if(!disableCandidateNormalization) {
+            /**
+             * Making sure that our suggestions are not composed characters
+             */
+            candidateStr = selectedCandidate.normalize("NFD");
+          }
+
           const currentInput = this.getInput(this.options.inputName, true);
           const initialCaretPosition = this.getCaretPositionEnd() || 0;
           const inputSubstr =
             currentInput.substring(0, initialCaretPosition || 0) ||
             currentInput;
 
-          const regexp = new RegExp(`${candidateKey}$`, "g");
-          const newInputSubstr = inputSubstr.replace(regexp, selectedCandidate);
+          const regexp = new RegExp(
+            `${this.utilities.escapeRegex(candidateKey)}$`,
+            layoutCandidatesCaseSensitiveMatch ? "g" : "gi"
+          );
+          const newInputSubstr = inputSubstr.replace(
+            regexp,
+            candidateStr
+          );
           const newInput = currentInput.replace(inputSubstr, newInputSubstr);
 
           const caretPositionDiff = newInputSubstr.length - inputSubstr.length;
@@ -381,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),
@@ -488,7 +533,8 @@ class SimpleKeyboard {
           "Caret at: ",
           this.getCaretPosition(),
           this.getCaretPositionEnd(),
-          `(${this.keyboardDOMClass})`
+          `(${this.keyboardDOMClass})`,
+          e?.type
         );
       }
 
@@ -528,11 +574,47 @@ 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);
     }
   }
 
+  /**
+   * Get mouse hold state
+   */
+  getMouseHold() {
+    return this.isMouseHold;
+  }
+
+  /**
+   * Mark mouse hold state as set
+   */
+  setMouseHold(value: boolean) {
+    if (this.options.syncInstanceInputs) {
+      this.dispatch((instance: SimpleKeyboard) => {
+        instance.isMouseHold = value;
+      });
+    } else {
+      this.isMouseHold = value;
+    }
+  }
+
   /**
    * Handles button mousedown
    */
@@ -557,7 +639,7 @@ class SimpleKeyboard {
     /**
      * @type {boolean} Whether the mouse is being held onKeyPress
      */
-    this.isMouseHold = true;
+    this.setMouseHold(true);
 
     /**
      * @type {object} Time to wait until a key hold is detected
@@ -565,7 +647,7 @@ class SimpleKeyboard {
     if (!this.options.disableButtonHold) {
       this.holdTimeout = window.setTimeout(() => {
         if (
-          (this.isMouseHold &&
+          (this.getMouseHold() &&
             // TODO: This needs to be configurable through options
             ((!button.includes("{") && !button.includes("}")) ||
               button === "{delete}" ||
@@ -625,14 +707,14 @@ class SimpleKeyboard {
       buttonElement.classList.remove(this.activeButtonClass);
     });
 
-    this.isMouseHold = false;
+    this.setMouseHold(false);
     if (this.holdInteractionTimeout) clearTimeout(this.holdInteractionTimeout);
 
     /**
      * Calling onKeyReleased
      */
     if (button && typeof this.options.onKeyReleased === "function")
-      this.options.onKeyReleased(button);
+      this.options.onKeyReleased(button, e);
   }
 
   /**
@@ -656,7 +738,7 @@ class SimpleKeyboard {
      * @type {object} Timeout dictating the speed of key hold iterations
      */
     this.holdInteractionTimeout = window.setTimeout(() => {
-      if (this.isMouseHold) {
+      if (this.getMouseHold()) {
         this.handleButtonClicked(button);
         this.handleButtonHold(button);
       } else {
@@ -828,6 +910,7 @@ class SimpleKeyboard {
         this.candidateBox.destroy();
         this.candidateBox = new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         });
       }
     }
@@ -843,6 +926,7 @@ class SimpleKeyboard {
     }
 
     this.keyboardDOM.className = this.keyboardDOMClass;
+    this.keyboardDOM.setAttribute("data-skInstance", this.currentInstanceName);
     this.buttonElements = {};
   }
 
@@ -1040,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("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);
-      document.addEventListener("select", this.handleSelect);
       document.addEventListener("selectionchange", this.handleSelectionChange);
+      document.addEventListener("select", this.handleSelect);
     }
   }
 
@@ -1100,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);
   }
 
@@ -1113,12 +1206,18 @@ class SimpleKeyboard {
     }
 
     this.dispatch((instance) => {
-      const isKeyboard =
+      let isKeyboard =
         event.target === instance.keyboardDOM ||
         (event.target && instance.keyboardDOM.contains(event.target));
 
-      if (instance.isMouseHold) {
-        instance.isMouseHold = false;
+      /**
+       * If syncInstanceInputs option is enabled, make isKeyboard match any instance
+       * not just the current one
+       */
+      if (this.options.syncInstanceInputs && Array.isArray(event.path)) {
+        isKeyboard = event.path.some((item: HTMLElement) =>
+          item?.hasAttribute?.("data-skInstance")
+        );
       }
 
       if (
@@ -1133,10 +1232,15 @@ class SimpleKeyboard {
          * Tracks current cursor position
          * As keys are pressed, text will be added/removed at that position within the input.
          */
-        instance.setCaretPosition(
-          event.target.selectionStart,
-          event.target.selectionEnd
-        );
+        let selectionStart = event.target.selectionStart;
+        let selectionEnd = event.target.selectionEnd;
+
+        if(instance.options.rtl){
+          selectionStart = instance.utilities.getRtlOffset(selectionStart, instance.getInput());
+          selectionEnd = instance.utilities.getRtlOffset(selectionEnd, instance.getInput());
+        }
+
+        instance.setCaretPosition(selectionStart, selectionEnd);
 
         /**
          * Tracking current input in order to handle caret positioning edge cases
@@ -1149,7 +1253,8 @@ class SimpleKeyboard {
             instance.getCaretPosition(),
             instance.getCaretPositionEnd(),
             event && event.target.tagName.toLowerCase(),
-            `(${instance.keyboardDOMClass})`
+            `(${instance.keyboardDOMClass})`,
+            event?.type
           );
         }
       } else if (
@@ -1196,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("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);
@@ -1257,6 +1364,11 @@ class SimpleKeyboard {
      */
     this.activeInputElement = null;
 
+    /**
+     * Removing instance attribute
+     */
+    this.keyboardDOM.removeAttribute("data-skInstance");
+
     /**
      * Clearing keyboardDOM
      */
@@ -1637,6 +1749,11 @@ class SimpleKeyboard {
       useTouchEventsClass
     );
 
+    /**
+     * Adding keyboard identifier
+     */
+    this.keyboardDOM.setAttribute("data-skInstance", this.currentInstanceName);
+
     /**
      * Create row wrapper
      */
@@ -1647,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(" ");
 
         /**
@@ -1799,10 +1916,26 @@ class SimpleKeyboard {
                * Handle mouse events
                */
               buttonDOM.onclick = (e: KeyboardHandlerEvent) => {
-                this.isMouseHold = false;
-                this.handleButtonClicked(button, e);
+                this.setMouseHold(false);
+                /**
+                 * Fire button handler in onclick for compatibility reasons
+                 * 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") {
+                  this.handleButtonClicked(button, e);
+                }
               };
               buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
+                /**
+                 * Fire button handler for onKeyReleased use-case
+                 */
+                if (
+                  typeof this.options.onKeyReleased === "function" &&
+                  !this.isMouseHold
+                ) {
+                  this.handleButtonClicked(button, e);
+                }
                 this.handleButtonMouseDown(button, e);
               };
               buttonDOM.onmouseup = (e: KeyboardHandlerEvent) => {

src/lib/components/css/CandidateBox.css

@@ -48,7 +48,6 @@ li.hg-candidate-box-list-item:active {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  background: #d0d0d0;
   color: #969696;
   cursor: pointer;
 }

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

@@ -368,5 +368,62 @@ it('CandidateBox selection should trigger onChange', () => {
 
     expect(keyboard.options.onChange.mock.calls[1][0]).toBe("1");
     expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "1"});
+    keyboard.destroy();
+  });
+
+  it('CandidateBox normalization will work', () => {
+    const keyboard = new Keyboard({
+      layout: {
+        default: [
+          "a b {bksp}"
+        ]
+      },
+      layoutCandidates: {
+        a: "신"
+      },
+      onChange: jest.fn(),
+      onChangeAll: jest.fn()
+    });
+  
+    let candidateBoxOnItemSelected;
+    
+    const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
+      candidateBoxOnItemSelected(selectedCandidate);
+      keyboard.candidateBox.destroy();
+    });
+  
+    const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
+    
+    jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
+      candidateBoxOnItemSelected = params.onItemSelected;
+      params.onItemSelected = onSelect;
+      candidateBoxRenderFn(params);
+    });
+  
+    keyboard.getButtonElement("a").click();
+    keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+  
+    expect(keyboard.options.onChange.mock.calls[0][0]).toBe("a");
+    expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
+
+    // Selected candidate will be normalized
+    expect(keyboard.options.onChange.mock.calls[1][0]).toBe("신");
+    expect(keyboard.options.onChange.mock.calls[1][0].length).toBe(3);
+    expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "신"});
+
+    // Selected candidate will not be normalized
+    keyboard.clearInput();
+    keyboard.setOptions({ disableCandidateNormalization: true });
+
+    keyboard.getButtonElement("a").click();
+    keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+  
+    expect(keyboard.options.onChange.mock.calls[2][0]).toBe("a");
+    expect(keyboard.options.onChangeAll.mock.calls[2][0]).toMatchObject({"default": "a"});
+
+    expect(keyboard.options.onChange.mock.calls[3][0]).toBe("신");
+    expect(keyboard.options.onChange.mock.calls[3][0].length).toBe(1);
+    expect(keyboard.options.onChangeAll.mock.calls[3][0]).toMatchObject({"default": "신"});
+
     keyboard.destroy();
   });

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

@@ -1351,4 +1351,91 @@ it('Keyboard will handle selected input with unchanged updatedInput edge case',
   expect(keyboard.getInput()).toBe("33");
   expect(keyboard.getCaretPosition()).toBe(2);
   expect(keyboard.getCaretPositionEnd()).toBe(2);
+});
+
+// https://github.com/hodgef/simple-keyboard/issues/1868
+it('Keyboard will handle caret pos sync after partially selected input resolution', () => {
+  const inputElem = document.createElement("input");
+  const onChange = jest.fn();
+  const keyboard = new Keyboard({ onChange });
+  
+  keyboard.getButtonElement("q").onpointerdown();
+  keyboard.getButtonElement("w").onpointerdown();
+  keyboard.getButtonElement("e").onpointerdown();
+  keyboard.getButtonElement("r").onpointerdown();
+  keyboard.getButtonElement("t").onpointerdown();
+  keyboard.getButtonElement("y").onpointerdown();
+
+  inputElem.setSelectionRange(1, 2);
+  keyboard.setCaretPosition(1, 2);
+
+  keyboard.getButtonElement("d").onpointerdown();
+  keyboard.getButtonElement("d").onpointerdown();
+  keyboard.getButtonElement("d").onpointerdown();
+
+  expect(keyboard.getInput()).toBe("qddderty");
+
+  inputElem.setSelectionRange(1, 2);
+  keyboard.setCaretPosition(1, 2);
+
+  keyboard.getButtonElement("d").onpointerdown();
+  expect(keyboard.getInput()).toBe("qddderty");
+
+  // caret position should now be synced
+  expect(keyboard.getCaretPosition()).toBe(keyboard.getCaretPositionEnd());
+
+  keyboard.getButtonElement("d").onpointerdown();
+
+  expect(keyboard.getInput()).toBe("qdddderty");
+  expect(keyboard.getCaretPosition()).toBe(3);
+});
+
+it('Ensure caret position is offset when rtl option is enabled', () => {
+  const keyboard = new Keyboard({
+    useMouseEvents: true,
+    rtl: true,
+    layout: {
+      default: ["{bksp} ש ל ו ם"]
+    }
+  });
+
+  const caretEventHandler = jest.spyOn(keyboard, 'caretEventHandler');
+
+  keyboard.getButtonElement("ש").onclick();
+  keyboard.getButtonElement("ו").onclick();
+  keyboard.getButtonElement("ם").onclick();
+
+  expect(keyboard.getInput()).toBe("‫שום‬");
+
+  const input = document.createElement("input");
+  input.value = keyboard.getInput();
+  input.type = "text";
+  input.selectionStart = 2;
+  input.selectionEnd = 2;
+
+  keyboard.caretEventHandler({
+    type: "selectionchange",
+    target: input
+  });
+
+  expect(caretEventHandler).toHaveBeenCalled();
+  expect(keyboard.getCaretPosition()).toBe(1);
+
+  keyboard.getButtonElement("ל").onclick();
+
+  expect(keyboard.getInput()).toBe('‫שלום‬');
+
+  input.value = keyboard.getInput();
+  input.type = "text";
+  input.selectionStart = 4;
+  input.selectionEnd = 4;
+
+  keyboard.caretEventHandler({
+    type: "selectionchange",
+    target: input
+  });
+
+  keyboard.getButtonElement("{bksp}").onclick();
+  
+  expect(keyboard.getInput()).toBe('‫שלם‬');
 });

src/lib/index.modern.ts

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

src/lib/index.ts

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

src/lib/interfaces.ts

@@ -21,10 +21,9 @@ export interface KeyboardInput {
     [key: string]: string
 }
 
-export type KeyboardParams = [KeyboardOptions] | [string | HTMLDivElement, KeyboardOptions];
-
 export type CandidateBoxParams = {
-    utilities: Utilities
+    utilities: Utilities,
+    options: KeyboardOptions
 }
 
 export type CandidateBoxShowParams = {
@@ -147,6 +146,11 @@ export interface KeyboardOptions {
      */
     physicalKeyboardHighlightPressUseClick?: boolean;
 
+    /**
+     * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     */
+    physicalKeyboardHighlightPressUsePointerEvents?: boolean;
+
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
@@ -157,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.
      */
@@ -233,10 +242,25 @@ export interface KeyboardOptions {
     excludeFromLayout?: { [key: string]: string[] };
 
     /**
-     * Determine size of layout candidate list
+     * Determines size of layout candidate list
      */
     layoutCandidatesPageSize?: number;
 
+    /**
+     * Determines whether layout candidate match should be case sensitive.
+     */
+    layoutCandidatesCaseSensitiveMatch?: boolean;
+
+    /**
+     * Disables the automatic normalization for selected layout candidates
+     */
+    disableCandidateNormalization?: boolean;
+
+    /**
+     * Enables onKeyPress triggering for layoutCandidate items
+     */
+    enableLayoutCandidatesKeyPress?: boolean;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
@@ -257,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
      */

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.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,44 +52,91 @@ class PhysicalKeyboard {
         return;
       }
 
-      if (buttonDOM) {
-        buttonDOM.style.backgroundColor =
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        buttonElement.style.background =
           options.physicalKeyboardHighlightBgColor || "#dadce4";
-        buttonDOM.style.color =
+          buttonElement.style.color =
           options.physicalKeyboardHighlightTextColor || "black";
+      }
 
-        if (options.physicalKeyboardHighlightPress) {
-          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();
+            } 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) {
-    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+  handleHighlightKeyUp(e: KeyboardEvent) {
+    const options = this.getOptions();
+
+    if(options.physicalKeyboardHighlightPreventDefault && this.isMofifierKey(e)){
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+    
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
 
     this.dispatch((instance: any) => {
       const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
-      if (buttonDOM && buttonDOM.removeAttribute) {
-        buttonDOM.removeAttribute("style");
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        if(buttonElement.removeAttribute){
+          buttonElement.removeAttribute("style");
+        }
+      };
+
+      if (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();
+          }
+        }
       }
     });
   }
 
   /**
    * 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") ||
@@ -94,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;
@@ -105,7 +158,7 @@ class PhysicalKeyboard {
   /**
    * Retrieve key from keyCode
    */
-  keyCodeToKey(keyCode: number) {
+  keyCodeToKey(keyCode: number): string {
     return {
       8: "Backspace",
       9: "Tab",
@@ -204,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)
+      )
+    )
   }
 }
 

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;
   }
 
@@ -532,6 +536,27 @@ class Utilities {
     );
   }
 
+  /**
+   * Escape regex input
+   */
+  escapeRegex(str: string) {
+    return str.replace(/[-\/\\^$*+?.()|[\]{}]/g, "\\$&");
+  }
+
+  /**
+   * Calculate caret position offset when using rtl option
+   */
+  getRtlOffset(index: number, input: string) {
+    let newIndex = index;
+    const startMarkerIndex = input.indexOf("\u202B");
+    const endMarkerIndex = input.indexOf("\u202C");
+
+    if(startMarkerIndex < index && startMarkerIndex != -1){ newIndex--; }
+    if(endMarkerIndex < index && startMarkerIndex != -1){ newIndex--; }
+
+    return newIndex < 0 ? 0 : newIndex;
+  }
+
   /**
    * Reusable empty function
    */

tsconfig.json

@@ -1,7 +1,7 @@
 {
     "compilerOptions": {
       "noImplicitAny": true,
-      "outDir": "build/types",
+      "outDir": "build",
       "module": "esnext",
       "target": "es5",
       "allowJs": true,

webpack.config.js

@@ -1,17 +1,16 @@
 const path = require('path');
 const webpack = require('webpack');
-const PrettierPlugin = require("prettier-webpack-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
 const getPackageJson = require('./scripts/getPackageJson');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 const {
   version,
   name,
   license,
   repository,
-  author,
+  author
 } = getPackageJson('version', 'name', 'license', 'repository', 'author');
 
 const banner = `
@@ -35,6 +34,8 @@ module.exports = {
     libraryTarget: 'umd',
     clean: true,
     globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
     environment: {
       arrowFunction: false
     }
@@ -43,7 +44,7 @@ module.exports = {
     minimize: true,
     minimizer: [
       new TerserPlugin({ extractComments: false }),
-      new OptimizeCSSAssetsPlugin()
+      new CssMinimizerPlugin()
     ],
   },
   devServer: {
@@ -88,7 +89,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new PrettierPlugin(),
     new MiniCssExtractPlugin({
         filename: 'css/index.css'
     }),
@@ -97,4 +97,4 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.js', '.json']
   }
-};
+};

webpack.config.modern.js

@@ -11,7 +11,7 @@ const {
   name,
   license,
   repository,
-  author,
+  author
 } = getPackageJson('version', 'name', 'license', 'repository', 'author');
 
 const banner = `
@@ -32,12 +32,15 @@ module.exports = {
   mode: "production",
   entry: './src/lib/index.modern.ts',
   target: 'es5',
+  devtool: 'source-map',
   output: {
     filename: 'index.modern.js',
     path: path.resolve(__dirname, 'build'),
     library: "SimpleKeyboard",
     libraryTarget: 'umd',
-    globalObject: 'this'
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
   },
   optimization: {
     minimize: true,
@@ -62,14 +65,17 @@ module.exports = {
             ]
           }
         }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: path.resolve('scripts/loaderMock.js')
       }
     ]
   },
   plugins: [
-    new webpack.IgnorePlugin({ resourceRegExp: /\.(sa|sc|c)ss$/ }),
     new webpack.BannerPlugin(banner)
   ],
   resolve: {
     extensions: ['.ts', '.js', '.json']
   }
-};
+};