Fix webpack.config.demo.js: add CSS files to entry array

Bump postcss from 8.5.22 to 8.5.23

.github/FUNDING.yml

@@ -1 +1 @@
-custom: https://hge.to/thanks
+buy_me_a_coffee: hodgef

.github/ISSUE_TEMPLATE/bug_report.md

@@ -8,10 +8,13 @@ assignees: hodgef
 ---
 
 **Simple-keyboard version**
-As some bugs have been addressed in later versions, please ensure you are running the latest.
+Some bugs are addressed in newer versions, therefore please ensure you are running the latest.
 
 **Describe the bug**
-A clear and concise description of what the bug is. Providing a [sandbox example](https://codesandbox.io/s/vanilla) or code depicting the issue is important, as this will help us reproduce the issue.
+A short and clear description of what the bug is.
+
+**Provide a repro**
+Providing a [sandbox example](https://codesandbox.io/s/vanilla) is important, as this will help us reproduce the issue. You can also provide a sample git repository. Without a full repro of your issue, we will not be able to debug and the ticket will be closed early.
 
 **Screenshots**
 If applicable, add screenshots to help explain your problem.

.github/dependabot.yml

@@ -0,0 +1,10 @@
+version: 2
+updates:
+- package-ecosystem: npm
+  directory: "/"
+  schedule:
+    interval: daily
+    time: "04:00"
+    timezone: America/Montreal
+  open-pull-requests-limit: 10
+  versioning-strategy: increase

.github/pull_request_template.md

@@ -4,4 +4,4 @@ A few sentences describing the overall goals of the pull request's commits.
 
 ## Checks
 
-- [ ] Tests ( `npm run test -- --coverage` ) Coverage at `./coverage/lcov-report/index.html` should be 100%
+- [ ] I have read and followed the [Contributing Guidelines](https://github.com/hodgef/simple-keyboard/blob/master/CONTRIBUTING.md).

.github/stale.yml

@@ -1,19 +0,0 @@
-# Number of days of inactivity before an issue becomes stale
-daysUntilStale: 5
-# Number of days of inactivity before a stale issue is closed
-daysUntilClose: 2
-# Issues with these labels will never be considered stale
-exemptLabels:
-  - pinned
-  - security
-  - "💥 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
-markComment: >
-  This issue has been automatically marked as stale because it has not had
-  recent activity. It will be closed if no further activity occurs. Thank you
-  for your contributions.
-# Comment to post when closing a stale issue. Set to `false` to disable
-closeComment: false

.github/workflows/main.yml

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

.github/workflows/mirroring.yml

@@ -1,15 +0,0 @@
-name: Mirroring
-
-on: [push, delete]
-
-jobs:
-  mirroring:
-    runs-on: ubuntu-18.04
-    steps:
-    - uses: actions/checkout@v1
-    - uses: pixta-dev/repository-mirroring-action@v1
-      with:
-        target_repo_url:
-          git@gitlab.com:hodgef/simple-keyboard.git
-        ssh_private_key:
-          ${{ secrets.GL_KEY }}

.github/workflows/publish.yml

@@ -4,6 +4,14 @@ on:
   push:
     branches:
       - master
+    paths-ignore:
+      - README.md
+      - .gitignore
+      - .github/**
+
+permissions:
+  contents: write
+  id-token: write
 
 jobs:
   publish:
@@ -12,10 +20,15 @@ jobs:
       - uses: actions/checkout@v1
       - uses: actions/setup-node@v1
         with:
-          node-version: 12
-      - run: npm install
-      - run: npm run test -- --coverage --watchAll=false
-        
+          node-version: '24'
+          registry-url: 'https://registry.npmjs.org'
+          
+      - name: npm install, build, and test
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run test -- --coverage --watchAll=false
+
       - name: Setup GIT
         run: |
           git reset --hard
@@ -24,10 +37,11 @@ jobs:
           git config user.email "$GH_EMAIL"
           git config user.name "Francisco Hodge"
         env:
-            GH_EMAIL: ${{secrets.GH_EMAIL}}
-          
+          GH_EMAIL: ${{secrets.GH_EMAIL}}
+
       - name: Bump version
         run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
           git reset --hard
           npm version patch
           npm run build
@@ -36,10 +50,4 @@ jobs:
           git push "https://$GITHUB_ACTOR:$GITHUB_TOKEN@github.com/$GITHUB_REPOSITORY"
         env:
           GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
-          
-      - name: npm publish
-        run: |
-          npm config set //registry.npmjs.org/:_authToken=$NODE_AUTH_TOKEN
-          npm run trypublish
-        env:
-            NODE_AUTH_TOKEN: ${{secrets.NODE_AUTH_TOKEN}}
+      - run: npm publish

.github/workflows/pull_request.yml

@@ -1,22 +1,25 @@
-name: Build PR
-on: [pull_request]
+name: Build PR (Standard)
+
+on: pull_request
 
 jobs:
   build:
     runs-on: ${{ matrix.os }}
+    if: ${{ github.actor != 'dependabot[bot]' }}
     strategy:
       matrix:
-        node-version: [12.x]
+        node-version: [20.x]
         os: [ubuntu-latest]
     steps:
-    - uses: actions/checkout@v1
-    - name: Use Node.js ${{ matrix.node_version }}
-      uses: actions/setup-node@v1
-      with:
-        node-version: ${{ matrix.node_version }}
-    - name: npm install, build, and test
-      run: |
-        npm install
-        npm run coverage
-      env:
-        CI: true
+      - uses: actions/checkout@v1
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node_version }}
+      - name: npm install, build, and test
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run coverage
+        env:
+          CI: true

.github/workflows/pull_request_compl.yml

@@ -0,0 +1,24 @@
+name: PR Compliance
+
+on: 
+  pull_request_target:
+    types: [opened]
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.actor != 'dependabot[bot]' }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        os: [ubuntu-latest]
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+
+      - name: Comment PR
+        uses: thollander/actions-comment-pull-request@v2
+        with:
+          message: |
+            :wave: Hello @${{ github.actor }}! Please make sure to review the [Contributing Guidelines](https://github.com/hodgef/simple-keyboard/blob/master/CONTRIBUTING.md) to ensure your PR is compliant. Thank you!
+          reactions: eyes

.github/workflows/pull_request_dependabot.yml

@@ -0,0 +1,49 @@
+name: Build PR (Dependabot)
+
+on: pull_request_target
+
+jobs:
+  build:
+    runs-on: ${{ matrix.os }}
+    if: ${{ github.actor == 'dependabot[bot]' }}
+    strategy:
+      matrix:
+        node-version: [20.x]
+        os: [ubuntu-latest]
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          ref: ${{ github.event.pull_request.head.sha }}
+      - name: Use Node.js ${{ matrix.node_version }}
+        uses: actions/setup-node@v1
+        with:
+          node-version: ${{ matrix.node_version }}
+      - name: npm install, build, and test
+        run: |
+          export NODE_OPTIONS=--openssl-legacy-provider
+          npm install
+          npm run coverage
+        env:
+          CI: true
+      - name: Merge PR
+        if: success()
+        uses: "actions/github-script@v2"
+        with:
+          github-token: "${{ secrets.GH_KEY }}"
+          script: |
+            const pullRequest = context.payload.pull_request
+            const repository = context.repo
+
+            await github.pulls.merge({
+              merge_method: "merge",
+              owner: repository.owner,
+              pull_number: pullRequest.number,
+              repo: repository.repo,
+            })
+      - name: Reject PR
+        if: failure()
+        uses: peter-evans/close-pull@v1
+        with:
+          pull-request-number: ${{github.event.number}}
+          comment: "Closing PR due to failing tests."
+          delete-branch: true

.github/workflows/stale.yml

@@ -0,0 +1,15 @@
+name: 'Close stale issues and PRs'
+on:
+  schedule:
+    - cron: '30 1 * * *'
+
+jobs:
+  stale:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/stale@v9
+        with:
+          stale-issue-message: 'This ticket is stale because it has been open 5 days with no activity. If pertaining to an Enhancement, the ticket will be tracked even after closing.'
+          stale-pr-message: 'This PR is stale because it has been open 5 days with no activity. It will be closed soon if no further activity occurs. Thank you!'
+          days-before-stale: 5
+          days-before-close: 5

.gitignore

@@ -19,3 +19,4 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+_git*

.npmignore

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

CONTRIBUTING.md

@@ -7,9 +7,15 @@ Please note we have a code of conduct, please follow it in all your interactions
 
 ## Pull Request Guidelines
 
-1. Please ensure your proposal will not radically change current functionality or bring along breaking changes.
-2. PRs only consisting of typo fixes (or other automated contributions), will not be accepted.
-3. Do not add any dependencies to the project.
-4. Document your changes thoroughly.
-5. Ensure coverage is complete (`npm run coverage` should show 100% coverage) and that none of the tests fail.
-6. Be reactive to any comments, reviews or change requests entered in your pull request.
+1. Use PRs to fix issues. New features are discouraged as they bring more maintenance burden over time.
+2. Discuss the change you wish to make with the owners of this repository **before** raising a PR. If you do not discuss it beforehand, your PR might end up being rejected and your work will be lost.
+3. Please ensure your proposal will not significantly change current functionality or bring along breaking changes.
+4. PRs only consisting of typo fixes (or other automated contributions), will not be accepted.
+5. Do not add any dependencies, libraries or external codes to the project. All the code submitted should be authored by you.
+6. Avoid refactors. The changes should be succint and fix a specific issue with the least code possible.
+7. Document your changes thoroughly.
+8. Ensure that none of the tests fail.
+9. Be reactive to any comments, reviews or change requests entered in your pull request.
+10. It's up to the maintainers discretion whether the PR is accepted or rejected. Remember, the maintainer will have to maintain the code you've added (and fix any issues filed about it) for the years to come! In case of a rejection, the maintainer will explain the reasons guiding the decision.
+
+Thank you for your contributions!

README.md

@@ -1,27 +1,8 @@
 <p>
   <a href="https://simple-keyboard.com/demo">
-	<img alt="simple-keyboard: Javascript Virtual Keyboard" src="https://i.imgur.com/PrpbdIu.png">
-  </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/actions">
-     <img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg?color=green" />
-  </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" />
-  </a>
-  
-  <a href="https://david-dm.org/hodgef/simple-keyboard">
-    <img src="https://badgen.net/david/dep/hodgef/simple-keyboard" alt="coverage">
-  </a>
-
-  <a href="https://codecov.io/gh/hodgef/simple-keyboard">
-    <img src="https://badgen.net/codecov/c/github/hodgef/simple-keyboard" alt="coverage">
+	<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://gitlab.com/hodgef/simple-keyboard" target="_blank"><img alt="Mirroring" src="https://img.shields.io/badge/Mirror-GitLab-blue" /></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Build Status" src="https://github.com/hodgef/simple-keyboard/workflows/Build/badge.svg" /></a> <a href="https://github.com/hodgef/simple-keyboard/actions"><img alt="Publish Status" src="https://github.com/hodgef/simple-keyboard/workflows/Publish/badge.svg" /></a>
 </p>
 
 <blockquote>Virtual Keyboard for Javascript. Compatible with your JS, React, Angular or Vue projects.</blockquote>
@@ -80,6 +61,12 @@ 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)).
+
+## 🔶 Community Libraries & Integrations
+Check out useful community modules for simple-keyboard:<br />
+https://github.com/hodgef/simple-keyboard/wiki/Community-Libraries-&-Integrations
+
 ## ✅ Contributing
 
 PRs and issues are always welcome. Feel free to submit any issues you have at:

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,12 @@
-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,6 @@
-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 +12,7 @@ import CandidateBox from "./CandidateBox";
 declare class SimpleKeyboard {
     input: KeyboardInput;
     options: KeyboardOptions;
-    utilities: any;
+    utilities: Utilities;
     caretPosition: number | null;
     caretPositionEnd: number | null;
     keyboardDOM: KeyboardElement;
@@ -40,13 +40,13 @@ declare class SimpleKeyboard {
     activeInputElement: HTMLInputElement | HTMLTextAreaElement | null;
     /**
      * Creates an instance of SimpleKeyboard
-     * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
+     * @param {Array} selectorOrOptions If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
      */
-    constructor(...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 +82,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
      */
@@ -198,6 +206,10 @@ declare class SimpleKeyboard {
      * Event Handler: Select
      */
     handleSelect(event: KeyboardHandlerEvent): void;
+    /**
+     * Event Handler: SelectionChange
+     */
+    handleSelectionChange(event: KeyboardHandlerEvent): void;
     /**
      * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
      */

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v3.2.1
+ *   simple-keyboard v3.8.171
  *   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,.hg-theme-default .hg-button span svg{pointer-events:none}.hg-theme-default button.hg-button{border-width:0;font-size:inherit}.hg-theme-default .hg-button{display:inline-block;flex-grow:1}.hg-theme-default .hg-row{display:flex}.hg-theme-default .hg-row:not(:last-child){margin-bottom:5px}.hg-theme-default .hg-row .hg-button-container,.hg-theme-default .hg-row .hg-button:not(:last-child){margin-right:5px}.hg-theme-default .hg-row>div:last-child{margin-right:0}.hg-theme-default .hg-row .hg-button-container{display:flex}.hg-theme-default .hg-button{align-items:center;background:#fff;border-bottom:1px solid #b5b5b5;border-radius:5px;box-shadow:0 0 3px -1px rgba(0,0,0,.3);box-sizing:border-box;cursor:pointer;display:flex;height:40px;justify-content:center;padding:5px;-webkit-tap-highlight-color:rgba(0,0,0,0)}.hg-theme-default .hg-button.hg-standardBtn{width:20px}.hg-theme-default .hg-button.hg-activeButton{background:#efefef}.hg-theme-default.hg-layout-numeric .hg-button{align-items:center;display:flex;height:60px;justify-content:center;width:33.3%}.hg-theme-default .hg-button.hg-button-numpadadd,.hg-theme-default .hg-button.hg-button-numpadenter{height:85px}.hg-theme-default .hg-button.hg-button-numpad0{width:105px}.hg-theme-default .hg-button.hg-button-com{max-width:85px}.hg-theme-default .hg-button.hg-standardBtn.hg-button-at{max-width:45px}.hg-theme-default .hg-button.hg-selectedButton{background:rgba(5,25,70,.53);color:#fff}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn=".com"]{max-width:82px}.hg-theme-default .hg-button.hg-standardBtn[data-skbtn="@"]{max-width:60px}.hg-candidate-box{background:#ececec;border-bottom:2px solid #b5b5b5;border-radius:5px;display:inline-flex;margin-top:-10px;position:absolute;transform:translateY(-100%);-webkit-user-select:none;-moz-user-select:none;user-select:none}ul.hg-candidate-box-list{display:flex;flex:1;list-style:none;margin:0;padding:0}li.hg-candidate-box-list-item{align-items:center;display:flex;height:40px;justify-content:center;width:40px}li.hg-candidate-box-list-item:hover{background:rgba(0,0,0,.03);cursor:pointer}li.hg-candidate-box-list-item:active{background:rgba(0,0,0,.1)}.hg-candidate-box-prev:before{content:"◄"}.hg-candidate-box-next:before{content:"►"}.hg-candidate-box-next,.hg-candidate-box-prev{align-items:center;color:#969696;cursor:pointer;display:flex;padding:0 10px}.hg-candidate-box-next{border-bottom-right-radius:5px;border-top-right-radius:5px}.hg-candidate-box-prev{border-bottom-left-radius:5px;border-top-left-radius:5px}.hg-candidate-box-btn-active{color:#444}

build/index.d.ts

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

build/index.modern.d.ts

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

build/interfaces.d.ts

@@ -1,38 +1,41 @@
 import SimpleKeyboard from "./components/Keyboard";
 import Utilities from "./services/Utilities";
+export interface SKWindow extends Window {
+    SimpleKeyboardInstances?: any;
+}
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
-export declare type KeyboardButtonTheme = {
+export type KeyboardButtonTheme = {
     class: string;
     buttons: string;
 } | null;
 export interface KeyboardButtonAttributes {
     attribute: string;
     value: string;
-    buttons: string;
+    buttons?: string;
 }
 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[];
 }
@@ -108,9 +111,19 @@ export interface KeyboardOptions {
      */
     physicalKeyboardHighlight?: boolean;
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+    /**
+     * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     */
+    physicalKeyboardHighlightPressUsePointerEvents?: boolean;
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
@@ -119,6 +132,10 @@ export interface KeyboardOptions {
      * Define the background color that the physical keyboard highlighted key should have.
      */
     physicalKeyboardHighlightBgColor?: string;
+    /**
+     * Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
+     */
+    physicalKeyboardHighlightPreventDefault?: boolean;
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -184,17 +201,37 @@ 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;
+    /**
+     * Updates caret when selectionchange event is fired
+     */
+    updateCaretOnSelectionChange?: boolean;
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
-    onRender?: (instance?: SimpleKeyboard) => void;
+    onRender?: (instance: SimpleKeyboard) => void;
     /**
      * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      */
-    onInit?: (instance?: SimpleKeyboard) => void;
+    onInit?: (instance: SimpleKeyboard) => void;
     /**
      * Retrieves the current input
      */
@@ -203,6 +240,18 @@ export interface KeyboardOptions {
      * Retrieves all inputs
      */
     onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
+    /**
+     * Retrieves the pressed key
+     */
+    onKeyPress?: (button: string, e?: MouseEvent) => any;
+    /**
+     * Retrieves the released key
+     */
+    onKeyReleased?: (button: string, e?: MouseEvent) => any;
+    /**
+     * Executes the callback function before an input is about to be updated
+     */
+    beforeInputUpdate?: (instance: SimpleKeyboard) => void;
     /**
      * Module options can have any format
      */

build/services/KeyboardLayout.d.ts

@@ -0,0 +1,2 @@
+import { KeyboardLayoutObject } from "../interfaces";
+export declare const getDefaultLayout: () => KeyboardLayoutObject;

build/services/PhysicalKeyboard.d.ts

@@ -9,16 +9,17 @@ declare class PhysicalKeyboard {
      * Creates an instance of the PhysicalKeyboard service
      */
     constructor({ dispatch, getOptions }: PhysicalKeyboardParams);
-    handleHighlightKeyDown(event: KeyboardEvent): void;
-    handleHighlightKeyUp(event: KeyboardEvent): void;
+    handleHighlightKeyDown(e: KeyboardEvent): void;
+    handleHighlightKeyUp(e: KeyboardEvent): void;
     /**
      * Transforms a KeyboardEvent's "key.code" string into a simple-keyboard layout format
-     * @param  {object} event The KeyboardEvent
+     * @param  {object} e The KeyboardEvent
      */
-    getSimpleKeyboardLayoutKey(event: KeyboardEvent): string;
+    getSimpleKeyboardLayoutKey(e: KeyboardEvent): string;
     /**
      * Retrieve key from keyCode
      */
-    keyCodeToKey(keyCode: number): string | undefined;
+    keyCodeToKey(keyCode: number): string;
+    isModifierKey: (e: KeyboardEvent) => boolean;
 }
 export default PhysicalKeyboard;

build/services/Utilities.d.ts

@@ -99,7 +99,7 @@ declare class Utilities {
      * @param  {object} display The provided display option
      * @param  {boolean} mergeDisplay Whether the provided param value should be merged with the default one.
      */
-    getButtonDisplayName(button: string, display: KeyboardOptions["display"], mergeDisplay: boolean): string;
+    getButtonDisplayName(button: string, display: KeyboardOptions["display"], mergeDisplay?: boolean): string;
     /**
      * Returns the updated input resulting from clicking a given button
      *
@@ -109,7 +109,7 @@ declare class Utilities {
      * @param  {number} caretPosEnd The cursor's current end position
      * @param  {boolean} moveCaret Whether to update simple-keyboard's cursor
      */
-    getUpdatedInput(button: string, input: string, caretPos: number, caretPosEnd?: number, moveCaret?: boolean): string;
+    getUpdatedInput(button: string, input: string, caretPos: any, caretPosEnd?: any, moveCaret?: boolean): string;
     /**
      * Moves the cursor position by a given amount
      *
@@ -185,9 +185,21 @@ 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
      */
     static noop: () => void;
+    /**
+     * Check if a function is a constructor
+     */
+    isConstructor(f: any): boolean;
 }
 export default Utilities;

build/types/services/KeyboardLayout.d.ts

@@ -1,4 +0,0 @@
-export declare const getDefaultLayout: () => {
-    default: string[];
-    shift: string[];
-};

package.json

@@ -1,16 +1,16 @@
 {
   "name": "simple-keyboard",
-  "version": "3.2.1",
+  "version": "3.8.171",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
-  "types": "build/types/index.d.ts",
   "scripts": {
     "start": "webpack serve --config webpack.config.demo.js",
-    "build": "webpack && tsc",
+    "build": "webpack && npm run build-modern && npm run build-modern-esm && tsc",
+    "build-modern": "webpack --config webpack.config.modern.js",
+    "build-modern-esm": "webpack --config webpack.config.modern_esm.js",
     "test": "jest --silent",
     "coverage": "npm run test -- --coverage",
-    "prepare": "npm run build",
-    "trypublish": "npm publish || true"
+    "prepare": "npm run build"
   },
   "repository": {
     "type": "git",
@@ -39,40 +39,40 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/cli": "^7.14.5",
-    "@babel/core": "^7.14.6",
-    "@babel/plugin-proposal-class-properties": "^7.14.5",
-    "@babel/plugin-transform-typescript": "^7.14.6",
+    "@babel/cli": "^7.29.7",
+    "@babel/core": "^7.29.6",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-transform-typescript": "^7.29.7",
     "@babel/polyfill": "^7.12.1",
-    "@babel/preset-env": "^7.14.7",
-    "@types/jest": "^26.0.23",
-    "@typescript-eslint/eslint-plugin": "^4.28.0",
-    "@typescript-eslint/parser": "^4.28.0",
-    "autoprefixer": "^10.2.6",
+    "@babel/preset-env": "^7.29.7",
+    "@types/jest": "^29.5.14",
+    "@typescript-eslint/eslint-plugin": "^5.62.0",
+    "@typescript-eslint/parser": "^5.62.0",
+    "autoprefixer": "^10.5.4",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
-    "babel-preset-minify": "^0.5.0",
-    "core-js": "^3.15.1",
-    "css-loader": "^5.2.6",
-    "eslint": "^7.29.0",
+    "babel-loader": "^10.1.1",
+    "babel-preset-minify": "^0.5.2",
+    "core-js": "^3.49.0",
+    "css-loader": "^7.1.4",
+    "css-minimizer-webpack-plugin": "^8.0.0",
+    "eslint": "^8.57.0",
     "file-loader": "^6.2.0",
-    "html-webpack-plugin": "^5.3.2",
-    "jest": "^26.6.3",
-    "mini-css-extract-plugin": "^1.6.1",
-    "optimize-css-assets-webpack-plugin": "^6.0.1",
-    "postcss": "^8.3.5",
-    "postcss-loader": "^6.1.0",
-    "prettier": "^2.3.2",
-    "prettier-webpack-plugin": "^1.2.0",
-    "style-loader": "^3.0.0",
-    "terser-webpack-plugin": "^5.1.4",
-    "typescript": "^4.3.4",
+    "html-webpack-plugin": "^5.6.8",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "mini-css-extract-plugin": "^2.10.2",
+    "postcss": "^8.5.23",
+    "postcss-loader": "^8.2.1",
+    "style-loader": "^4.0.0",
+    "terser-webpack-plugin": "^5.6.1",
+    "typescript": "^6.0.3",
     "url-loader": "^4.1.1",
-    "webpack": "^5.40.0",
-    "webpack-cli": "^4.7.2",
-    "webpack-dev-server": "4.0.0-beta.3"
+    "webpack": "^5.109.0",
+    "webpack-cli": "^6.0.1",
+    "webpack-dev-server": "4.15.0"
   },
   "jest": {
+    "testEnvironment": "jsdom",
     "roots": [
       "<rootDir>/src"
     ],

scripts/loaderMock.js

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

src/demo/BasicDemo.js

@@ -16,8 +16,9 @@ class Demo {
      * Demo Start
      */
     this.keyboard = new Keyboard({
-      onChange: input => this.onChange(input),
-      onKeyPress: button => this.onKeyPress(button)
+      onChange: this.onChange,
+      onKeyPress: this.onKeyPress,
+      useMouseEvents: true
     });
 
     /**
@@ -28,13 +29,13 @@ class Demo {
     });
   }
 
-  onChange(input) {
+  onChange = (input) => {
     document.querySelector(".input").value = input;
     console.log("Input changed", input);
   }
 
-  onKeyPress(button) {
-    console.log("Button pressed", button);
+  onKeyPress = (button, e) => {
+    console.log("Button pressed", button, e);
 
     /**
      * If you want to handle the shift and caps lock buttons
@@ -42,7 +43,11 @@ class Demo {
     if (button === "{shift}" || button === "{lock}") this.handleShift();
   }
 
-  handleShift() {
+  onKeyReleased = (button, e) => {
+    console.log("Button released", button, e);
+  }
+
+  handleShift = () => {
     const currentLayout = this.keyboard.options.layoutName;
     const shiftToggle = currentLayout === "default" ? "shift" : "default";
 

src/demo/CandidateBoxDemo.js

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

src/lib/components/CandidateBox.ts

@@ -1,20 +1,21 @@
-import "./css/CandidateBox.css";
-
 import Utilities from "../services/Utilities";
 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 +75,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 +83,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 +103,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 +114,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 +133,7 @@ class CandidateBox {
     isNextBtnElementActive &&
       nextBtnElement.classList.add("hg-candidate-box-btn-active");
 
-    nextBtnElement.onclick = () => {
+    const nextBtnElementClickAction = () => {
       if (!isNextBtnElementActive) return;
       this.renderPage({
         candidateListPages,
@@ -128,6 +143,13 @@ class CandidateBox {
         onItemSelected,
       });
     };
+
+    if(this.options.useTouchEvents) {
+      nextBtnElement.ontouchstart = nextBtnElementClickAction;
+    } else {
+      nextBtnElement.onclick = nextBtnElementClickAction;
+    }
+
     this.candidateBoxElement.appendChild(nextBtnElement);
 
     // Append candidate box to target element

src/lib/components/Keyboard.ts

@@ -1,6 +1,3 @@
-import "./css/Keyboard.css";
-
-// Services
 import { getDefaultLayout } from "../services/KeyboardLayout";
 import PhysicalKeyboard from "../services/PhysicalKeyboard";
 import Utilities from "../services/Utilities";
@@ -10,7 +7,7 @@ import {
   KeyboardButtonElements,
   KeyboardHandlerEvent,
   KeyboardElement,
-  KeyboardParams,
+  SKWindow,
 } from "../interfaces";
 import CandidateBox from "./CandidateBox";
 
@@ -24,7 +21,7 @@ import CandidateBox from "./CandidateBox";
 class SimpleKeyboard {
   input!: KeyboardInput;
   options!: KeyboardOptions;
-  utilities: any;
+  utilities!: Utilities;
   caretPosition!: number | null;
   caretPositionEnd!: number | null;
   keyboardDOM!: KeyboardElement;
@@ -49,19 +46,22 @@ class SimpleKeyboard {
 
   /**
    * Creates an instance of SimpleKeyboard
-   * @param {Array} params If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
+   * @param {Array} selectorOrOptions If first parameter is a string, it is considered the container class. The second parameter is then considered the options object. If first parameter is an object, it is considered the options object.
    */
-  constructor(...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
+     * Initializing utilities
      */
     this.utilities = new Utilities({
       getOptions: this.getOptions,
@@ -105,6 +105,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.
@@ -113,6 +116,7 @@ class SimpleKeyboard {
      * @property {function(input: string):string} onChange Executes the callback function on input change. Returns the current input’s string.
      * @property {function} onRender Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      * @property {function} onInit Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
+     * @property {function(keyboard: Keyboard):void} beforeInputUpdate Perform an action before any input change
      * @property {function(inputs: object):object} onChangeAll Executes the callback function on input change. Returns the input object with all defined inputs.
      * @property {boolean} useButtonTag Render buttons as a button element instead of a div element.
      * @property {boolean} disableCaretPositioning A prop to ensure characters are always be added/removed at the end of the string.
@@ -127,7 +131,12 @@ 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
+     * @property {boolean} updateCaretOnSelectionChange Updates caret when selectionchange event is fired
+     * @property {boolean} clickOnMouseDown When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
      */
     this.options = {
       layoutName: "default",
@@ -181,17 +190,17 @@ class SimpleKeyboard {
      * Simple-keyboard Instances
      * This enables multiple simple-keyboard support with easier management
      */
-    if (!window["SimpleKeyboardInstances"])
-      window["SimpleKeyboardInstances"] = {};
+    if (!(window as SKWindow)["SimpleKeyboardInstances"])
+      (window as SKWindow)["SimpleKeyboardInstances"] = {};
 
     this.currentInstanceName = this.utilities.camelCase(this.keyboardDOMClass);
-    window["SimpleKeyboardInstances"][this.currentInstanceName] = this;
+    (window as SKWindow)["SimpleKeyboardInstances"][this.currentInstanceName] = this;
 
     /**
      * Instance vars
      */
-    this.allKeyboardInstances = window["SimpleKeyboardInstances"];
-    this.keyboardInstanceNames = Object.keys(window["SimpleKeyboardInstances"]);
+    this.allKeyboardInstances = (window as SKWindow)["SimpleKeyboardInstances"];
+    this.keyboardInstanceNames = Object.keys((window as SKWindow)["SimpleKeyboardInstances"]);
     this.isFirstKeyboardInstance =
       this.keyboardInstanceNames[0] === this.currentInstanceName;
 
@@ -209,6 +218,7 @@ class SimpleKeyboard {
     this.candidateBox = this.options.enableLayoutCandidates
       ? new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         })
       : null;
 
@@ -232,7 +242,8 @@ class SimpleKeyboard {
    * parseParams
    */
   handleParams = (
-    params: KeyboardParams
+    selectorOrOptions?: string | HTMLDivElement | KeyboardOptions,
+    keyboardOptions?: KeyboardOptions
   ): {
     keyboardDOMClass: string;
     keyboardDOM: KeyboardElement;
@@ -246,29 +257,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 +289,7 @@ class SimpleKeyboard {
       keyboardDOM = document.querySelector(
         `.${keyboardDOMClass}`
       ) as KeyboardElement;
-      options = params[0];
+      options = selectorOrOptions;
     }
 
     return {
@@ -312,7 +323,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 +336,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 +379,42 @@ 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");
+          }
+
+          /**
+           * Perform an action before any input change
+           */
+          if (typeof this.options.beforeInputUpdate === "function") {
+            this.options.beforeInputUpdate(this);
+          }
+
           const currentInput = this.getInput(this.options.inputName, true);
           const initialCaretPosition = this.getCaretPositionEnd() || 0;
           const inputSubstr =
             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 +426,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),
@@ -413,6 +466,13 @@ class SimpleKeyboard {
      */
     if (!this.input[inputName]) this.input[inputName] = "";
 
+    /**
+     * Perform an action before any input change
+     */
+    if (typeof this.options.beforeInputUpdate === "function") {
+      this.options.beforeInputUpdate(this);
+    }
+
     /**
      * Calculating new input
      */
@@ -488,7 +548,8 @@ class SimpleKeyboard {
           "Caret at: ",
           this.getCaretPosition(),
           this.getCaretPositionEnd(),
-          `(${this.keyboardDOMClass})`
+          `(${this.keyboardDOMClass})`,
+          e?.type
         );
       }
 
@@ -528,11 +589,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 +654,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 +662,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 +722,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 +753,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 {
@@ -724,7 +821,7 @@ class SimpleKeyboard {
    * Get all simple-keyboard inputs
    */
   getAllInputs(): KeyboardInput {
-    const output = {};
+    const output = {} as KeyboardInput;
     const inputNames = Object.keys(this.input);
 
     inputNames.forEach((inputName) => {
@@ -828,6 +925,7 @@ class SimpleKeyboard {
         this.candidateBox.destroy();
         this.candidateBox = new CandidateBox({
           utilities: this.utilities,
+          options: this.options,
         });
       }
     }
@@ -843,6 +941,7 @@ class SimpleKeyboard {
     }
 
     this.keyboardDOM.className = this.keyboardDOMClass;
+    this.keyboardDOM.setAttribute("data-skInstance", this.currentInstanceName);
     this.buttonElements = {};
   }
 
@@ -852,15 +951,15 @@ class SimpleKeyboard {
    */
   // eslint-disable-next-line no-unused-vars
   dispatch(callback: (instance: SimpleKeyboard, key?: string) => void): void {
-    if (!window["SimpleKeyboardInstances"]) {
+    if (!(window as SKWindow)["SimpleKeyboardInstances"]) {
       console.warn(
         `SimpleKeyboardInstances is not defined. Dispatch cannot be called.`
       );
       throw new Error("INSTANCES_VAR_ERROR");
     }
 
-    return Object.keys(window["SimpleKeyboardInstances"]).forEach((key) => {
-      callback(window["SimpleKeyboardInstances"][key], key);
+    return Object.keys((window as SKWindow)["SimpleKeyboardInstances"]).forEach((key) => {
+      callback((window as SKWindow)["SimpleKeyboardInstances"][key], key);
     });
   }
 
@@ -1040,13 +1139,20 @@ class SimpleKeyboard {
         console.log(`Caret handling started (${this.keyboardDOMClass})`);
       }
 
+      const { physicalKeyboardHighlightPreventDefault = false } = this.options;
+
       /**
        * Event Listeners
        */
-      document.addEventListener("keyup", this.handleKeyUp);
-      document.addEventListener("keydown", this.handleKeyDown);
+      document.addEventListener("keyup", this.handleKeyUp, physicalKeyboardHighlightPreventDefault);
+      document.addEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
       document.addEventListener("mouseup", this.handleMouseUp);
       document.addEventListener("touchend", this.handleTouchEnd);
+
+      if (this.options.updateCaretOnSelectionChange) {
+        document.addEventListener("selectionchange", this.handleSelectionChange);
+      }
+
       document.addEventListener("select", this.handleSelect);
     }
   }
@@ -1094,6 +1200,21 @@ class SimpleKeyboard {
     this.caretEventHandler(event);
   }
 
+  /**
+   * Event Handler: SelectionChange
+   */
+  /* 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);
+  }
+
   /**
    * Called by {@link setEventListeners} when an event that warrants a cursor position update is triggered
    */
@@ -1104,12 +1225,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 (
@@ -1124,15 +1251,20 @@ 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
          */
-        this.activeInputElement = event.target;
+        instance.activeInputElement = event.target;
 
         if (instance.options.debug) {
           console.log(
@@ -1140,10 +1272,14 @@ class SimpleKeyboard {
             instance.getCaretPosition(),
             instance.getCaretPositionEnd(),
             event && event.target.tagName.toLowerCase(),
-            `(${instance.keyboardDOMClass})`
+            `(${instance.keyboardDOMClass})`,
+            event?.type
           );
         }
-      } else if (instance.options.disableCaretPositioning || !isKeyboard) {
+      } else if (
+        (instance.options.disableCaretPositioning || !isKeyboard) &&
+        event?.type !== "selectionchange"
+      ) {
         /**
          * If we toggled off disableCaretPositioning, we must ensure caretPosition doesn't persist once reactivated.
          */
@@ -1152,7 +1288,7 @@ class SimpleKeyboard {
         /**
          * Resetting activeInputElement
          */
-        this.activeInputElement = null;
+        instance.activeInputElement = null;
 
         if (instance.options.debug) {
           console.log(
@@ -1184,14 +1320,23 @@ class SimpleKeyboard {
         `Destroying simple-keyboard instance: ${this.currentInstanceName}`
       );
 
+    const { physicalKeyboardHighlightPreventDefault = false } = this.options;
+
     /**
      * Remove document listeners
      */
-    document.removeEventListener("keyup", this.handleKeyUp);
-    document.removeEventListener("keydown", this.handleKeyDown);
+    document.removeEventListener("keyup", this.handleKeyUp, physicalKeyboardHighlightPreventDefault);
+    document.removeEventListener("keydown", this.handleKeyDown, physicalKeyboardHighlightPreventDefault);
     document.removeEventListener("mouseup", this.handleMouseUp);
     document.removeEventListener("touchend", this.handleTouchEnd);
     document.removeEventListener("select", this.handleSelect);
+
+    // selectionchange is causing caret update issues on Chrome
+    // https://github.com/hodgef/simple-keyboard/issues/2346
+    if (this.options.updateCaretOnSelectionChange) {
+      document.removeEventListener("selectionchange", this.handleSelectionChange);
+    }
+
     document.onpointerup = null;
     document.ontouchend = null;
     document.ontouchcancel = null;
@@ -1244,6 +1389,11 @@ class SimpleKeyboard {
      */
     this.activeInputElement = null;
 
+    /**
+     * Removing instance attribute
+     */
+    this.keyboardDOM.removeAttribute("data-skInstance");
+
     /**
      * Clearing keyboardDOM
      */
@@ -1252,8 +1402,8 @@ class SimpleKeyboard {
     /**
      * Remove instance
      */
-    window["SimpleKeyboardInstances"][this.currentInstanceName] = null;
-    delete window["SimpleKeyboardInstances"][this.currentInstanceName];
+    (window as SKWindow)["SimpleKeyboardInstances"][this.currentInstanceName] = null;
+    delete (window as SKWindow)["SimpleKeyboardInstances"][this.currentInstanceName];
 
     /**
      * Reset initialized flag
@@ -1307,14 +1457,17 @@ class SimpleKeyboard {
           attrObj.attribute &&
           typeof attrObj.attribute === "string" &&
           attrObj.value &&
-          typeof attrObj.value === "string" &&
-          attrObj.buttons &&
-          typeof attrObj.buttons === "string"
+          typeof attrObj.value === "string"
         ) {
-          const attrObjButtons = attrObj.buttons.split(" ");
-
-          if (attrObjButtons.includes(button)) {
+          // If buttons is empty, undefined, or not a string, apply to all buttons
+          if (!attrObj.buttons || typeof attrObj.buttons !== "string") {
             callback(attrObj.attribute, attrObj.value);
+          } else {
+            const attrObjButtons = attrObj.buttons.split(" ");
+
+            if (attrObjButtons.includes(button)) {
+              callback(attrObj.attribute, attrObj.value);
+            }
           }
         } else {
           console.warn(
@@ -1344,7 +1497,7 @@ class SimpleKeyboard {
   /* istanbul ignore next */
   disableContextualWindow() {
     window.oncontextmenu = (event: KeyboardHandlerEvent) => {
-      if (event.target.classList.contains("hg-button")) {
+      if (event.target.classList?.contains("hg-button")) {
         event.preventDefault();
         event.stopPropagation();
         return false;
@@ -1462,7 +1615,9 @@ class SimpleKeyboard {
   loadModules() {
     if (Array.isArray(this.options.modules)) {
       this.options.modules.forEach((KeyboardModule) => {
-        const keyboardModule = new KeyboardModule(this);
+        const keyboardModule = this.utilities.isConstructor(KeyboardModule) ?
+          new KeyboardModule(this) : KeyboardModule(this);
+
         keyboardModule.init && keyboardModule.init(this);
       });
 
@@ -1536,7 +1691,7 @@ class SimpleKeyboard {
           updated_startIndex,
           updated_endIndex - updated_startIndex + 1
         );
-        removedElements = updated_endIndex - updated_startIndex;
+        removedElements += updated_endIndex - updated_startIndex;
 
         /**
          * Inserting elements to container
@@ -1624,6 +1779,11 @@ class SimpleKeyboard {
       useTouchEventsClass
     );
 
+    /**
+     * Adding keyboard identifier
+     */
+    this.keyboardDOM.setAttribute("data-skInstance", this.currentInstanceName);
+
     /**
      * Create row wrapper
      */
@@ -1634,7 +1794,7 @@ class SimpleKeyboard {
      * Iterating through each row
      */
     layout[this.options.layoutName || this.defaultName].forEach(
-      (row, rIndex) => {
+      (row: string, rIndex: number) => {
         let rowArray = row.split(" ");
 
         /**
@@ -1786,10 +1946,32 @@ 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.options.useMouseEvents && this.options.clickOnMouseDown)
+                ) {
+                  this.handleButtonClicked(button, e);
+                }
               };
               buttonDOM.onmousedown = (e: KeyboardHandlerEvent) => {
+                /**
+                 * Fire button handler for onKeyReleased use-case
+                 */
+                if (
+                  (
+                    typeof this.options.onKeyReleased === "function" ||
+                    (this.options.useMouseEvents && this.options.clickOnMouseDown)
+                  ) &&
+                  !this.isMouseHold
+                ) {
+                  this.handleButtonClicked(button, e);
+                }
                 this.handleButtonMouseDown(button, e);
               };
               buttonDOM.onmouseup = (e: KeyboardHandlerEvent) => {

src/lib/components/css/CandidateBox.css

@@ -5,7 +5,6 @@
   background: #ececec;
   border-bottom: 2px solid #b5b5b5;
   user-select: none;
-  max-width: 272px;
   transform: translateY(-100%);
   margin-top: -10px;
 }
@@ -48,7 +47,6 @@ li.hg-candidate-box-list-item:active {
   display: flex;
   align-items: center;
   padding: 0 10px;
-  background: #d0d0d0;
   color: #969696;
   cursor: pointer;
 }

src/lib/components/css/Keyboard.css

@@ -15,14 +15,15 @@
   border-radius: 5px;
 }
 
-.hg-theme-default .hg-button span {
+.hg-theme-default .hg-button span,
+.hg-theme-default .hg-button span svg
+ {
   pointer-events: none;
 }
 
 /* When using option "useButtonTag" */
 .hg-theme-default button.hg-button {
   border-width: 0;
-  outline: 0;
   font-size: inherit;
 }
 

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

@@ -216,7 +216,7 @@ it('CandidateBox select candidate will work', () => {
   keyboard.getButtonElement("a").click();
   keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
 
-  expect(onSelect).toBeCalledWith("1", expect.anything());
+  expect(onSelect).toHaveBeenCalledWith("1", expect.anything());
   keyboard.destroy();
 });
 
@@ -332,41 +332,98 @@ it('CandidateBox show not be called if keyboard.candidateBox is undefined upon s
 });
 
 it('CandidateBox selection should trigger onChange', () => {
-    const keyboard = new Keyboard({
-      layout: {
-        default: [
-          "a b {bksp}"
-        ]
-      },
-      layoutCandidates: {
-        a: "1 2 3 4 5 6"
-      },
-      onChange: jest.fn(),
-      onChangeAll: jest.fn()
-    });
-  
-    let candidateBoxOnItemSelected;
-    
-    const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
-      candidateBoxOnItemSelected(selectedCandidate);
-      keyboard.candidateBox.destroy();
-    });
-  
-    const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
-    
-    jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
-      candidateBoxOnItemSelected = params.onItemSelected;
-      params.onItemSelected = onSelect;
-      candidateBoxRenderFn(params);
-    });
-  
-    keyboard.getButtonElement("a").click();
-    keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
-  
-    expect(keyboard.options.onChange.mock.calls[0][0]).toBe("a");
-    expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
+  const keyboard = new Keyboard({
+    layout: {
+      default: [
+        "a b {bksp}"
+      ]
+    },
+    layoutCandidates: {
+      a: "1 2 3 4 5 6"
+    },
+    onChange: jest.fn(),
+    onChangeAll: jest.fn()
+  });
 
-    expect(keyboard.options.onChange.mock.calls[1][0]).toBe("1");
-    expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "1"});
-    keyboard.destroy();
-  });
+  let candidateBoxOnItemSelected;
+  
+  const onSelect = jest.fn().mockImplementation((selectedCandidate) => {
+    candidateBoxOnItemSelected(selectedCandidate);
+    keyboard.candidateBox.destroy();
+  });
+
+  const candidateBoxRenderFn = keyboard.candidateBox.renderPage;
+  
+  jest.spyOn(keyboard.candidateBox, "renderPage").mockImplementation((params) => {
+    candidateBoxOnItemSelected = params.onItemSelected;
+    params.onItemSelected = onSelect;
+    candidateBoxRenderFn(params);
+  });
+
+  keyboard.getButtonElement("a").click();
+  keyboard.candidateBox.candidateBoxElement.querySelector("li").click();
+
+  expect(keyboard.options.onChange.mock.calls[0][0]).toBe("a");
+  expect(keyboard.options.onChangeAll.mock.calls[0][0]).toMatchObject({"default": "a"});
+
+  expect(keyboard.options.onChange.mock.calls[1][0]).toBe("1");
+  expect(keyboard.options.onChangeAll.mock.calls[1][0]).toMatchObject({"default": "1"});
+  keyboard.destroy();
+});
+
+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

@@ -218,6 +218,19 @@ it('Keyboard onChange will work', () => {
   expect(output).toBe("q");
 });
 
+it('Keyboard beforeInputChange will work', () => {
+  const mockBeforeInputUpdate = jest.fn();
+  
+  const keyboard = new Keyboard({
+    beforeInputUpdate: mockBeforeInputUpdate,
+    useMouseEvents: true
+  });
+
+  keyboard.getButtonElement("q").onclick();
+
+  expect(mockBeforeInputUpdate).toHaveBeenCalledWith(keyboard);
+});
+
 it('Keyboard onChangeAll will work', () => {
     let output;
 
@@ -1351,4 +1364,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

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

src/lib/index.ts

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

src/lib/interfaces.ts

@@ -2,6 +2,10 @@
 import SimpleKeyboard from "./components/Keyboard";
 import Utilities from "./services/Utilities";
 
+export interface SKWindow extends Window {
+    SimpleKeyboardInstances?: any;
+};
+
 export interface KeyboardLayoutObject {
     [key: string]: string[];
 }
@@ -14,17 +18,16 @@ export type KeyboardButtonTheme = {
 export interface KeyboardButtonAttributes {
     attribute: string;
     value: string;
-    buttons: string;
+    buttons?: string;
 }
 
 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 = {
@@ -136,10 +139,22 @@ export interface KeyboardOptions {
     physicalKeyboardHighlight?: boolean;
 
     /**
-     * Presses keys highlighted by physicalKeyboardHighlight
+     * Calls handler for a button highlighted by physicalKeyboardHighlight
+     * In other words, this calls keyboard.handleButtonClicked(buttonName) on the highlighted button
      */
     physicalKeyboardHighlightPress?: boolean;
 
+    /**
+     * Trigger click on a button's element when using physicalKeyboardHighlightPress
+     * In other words, this calls button.click() on the highlighted button
+     */
+    physicalKeyboardHighlightPressUseClick?: boolean;
+
+    /**
+     * Whether physicalKeyboardHighlightPress should use pointer events to trigger buttons.
+     */
+    physicalKeyboardHighlightPressUsePointerEvents?: boolean;
+
     /**
      * Define the text color that the physical keyboard highlighted key should have.
      */
@@ -150,6 +165,11 @@ export interface KeyboardOptions {
      */
     physicalKeyboardHighlightBgColor?: string;
 
+    /**
+     * Whether physicalKeyboardHighlight should use preventDefault to disable default browser actions.
+     */
+    physicalKeyboardHighlightPreventDefault?: boolean;
+
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -226,19 +246,44 @@ 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;
+
+    /**
+     * Updates caret when selectionchange event is fired
+     */
+    updateCaretOnSelectionChange?: boolean;
+
+    /**
+     * When useMouseEvents is enabled, this option allows you to trigger a button click event on mousedown
+     */
+    clickOnMouseDown?: boolean;
+
     /**
      * Executes the callback function every time simple-keyboard is rendered (e.g: when you change layouts).
      */
-     onRender?: (instance?: SimpleKeyboard) => void;
+     onRender?: (instance: SimpleKeyboard) => void;
 
     /**
      * Executes the callback function once simple-keyboard is rendered for the first time (on initialization).
      */
-     onInit?: (instance?: SimpleKeyboard) => void;
+     onInit?: (instance: SimpleKeyboard) => void;
 
     /**
      * Retrieves the current input
@@ -250,8 +295,23 @@ export interface KeyboardOptions {
      */
     onChangeAll?: (inputObj: KeyboardInput, e?: MouseEvent) => any;
 
+    /**
+     * Retrieves the pressed key
+     */
+    onKeyPress?: (button: string, e?: MouseEvent) => any;
+
+    /**
+     * Retrieves the released key
+     */
+    onKeyReleased?: (button: string, e?: MouseEvent) => any;
+
+    /**
+     * Executes the callback function before an input is about to be updated
+     */
+    beforeInputUpdate?: (instance: SimpleKeyboard) => void;
+
     /**
      * Module options can have any format
      */
     [name: string]: any;
-}
+}

src/lib/services/KeyboardLayout.ts

@@ -1,4 +1,6 @@
-export const getDefaultLayout = () => {
+import { KeyboardLayoutObject } from "../interfaces";
+
+export const getDefaultLayout = (): KeyboardLayoutObject => {
   return {
     default: [
       "` 1 2 3 4 5 6 7 8 9 0 - = {bksp}",

src/lib/services/PhysicalKeyboard.ts

@@ -24,49 +24,119 @@ class PhysicalKeyboard {
     Utilities.bindMethods(PhysicalKeyboard, this);
   }
 
-  handleHighlightKeyDown(event: KeyboardEvent) {
+  handleHighlightKeyDown(e: KeyboardEvent) {
     const options = this.getOptions();
-    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+
+    if(options.physicalKeyboardHighlightPreventDefault && this.isModifierKey(e)){
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
 
     this.dispatch((instance: any) => {
-      const buttonDOM =
-        instance.getButtonElement(buttonPressed) ||
-        instance.getButtonElement(`{${buttonPressed}}`);
+      const standardButtonPressed = instance.getButtonElement(buttonPressed);
+      const functionButtonPressed = instance.getButtonElement(
+        `{${buttonPressed}}`
+      );
+      let buttonDOM;
+      let buttonName: string;
+
+      if (standardButtonPressed) {
+        buttonDOM = standardButtonPressed;
+        buttonName = buttonPressed;
+      } else if (functionButtonPressed) {
+        buttonDOM = functionButtonPressed;
+        buttonName = `{${buttonPressed}}`;
+      } else {
+        return;
+      }
+
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        buttonElement.style.background =
+          options.physicalKeyboardHighlightBgColor || "#dadce4";
+          buttonElement.style.color =
+          options.physicalKeyboardHighlightTextColor || "black";
+      }
 
       if (buttonDOM) {
-        buttonDOM.style.backgroundColor =
-          options.physicalKeyboardHighlightBgColor || "#dadce4";
-        buttonDOM.style.color =
-          options.physicalKeyboardHighlightTextColor || "black";
+        if(Array.isArray(buttonDOM)){
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
 
-        if (options.physicalKeyboardHighlightPress) {
-          buttonDOM.click();
+          // Even though we have an array of buttons, we just want to press one of them
+          if (options.physicalKeyboardHighlightPress) {
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM[0]?.onpointerdown?.(e);
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM[0]?.click();
+            } else {
+              instance.handleButtonClicked(buttonName, e);
+            }
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPress) {
+            if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+              buttonDOM?.onpointerdown?.(e);
+            } else if (options.physicalKeyboardHighlightPressUseClick) {
+              buttonDOM.click();
+            } else {
+              instance.handleButtonClicked(buttonName, e);
+            }
+          }
         }
       }
     });
   }
 
-  handleHighlightKeyUp(event: KeyboardEvent) {
-    const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
+  handleHighlightKeyUp(e: KeyboardEvent) {
+    const options = this.getOptions();
+
+    if(options.physicalKeyboardHighlightPreventDefault && this.isModifierKey(e)){
+      e.preventDefault();
+      e.stopImmediatePropagation();
+    }
+    
+    const buttonPressed = this.getSimpleKeyboardLayoutKey(e);
 
     this.dispatch((instance: any) => {
       const buttonDOM =
         instance.getButtonElement(buttonPressed) ||
         instance.getButtonElement(`{${buttonPressed}}`);
 
-      if (buttonDOM && buttonDOM.removeAttribute) {
-        buttonDOM.removeAttribute("style");
+      const applyButtonStyle = (buttonElement: HTMLElement) => {
+        if(buttonElement.removeAttribute){
+          buttonElement.removeAttribute("style");
+        }
+      };
+
+      if (buttonDOM) {
+        if(Array.isArray(buttonDOM)){
+          buttonDOM.forEach(buttonElement => applyButtonStyle(buttonElement));
+
+          // Even though we have an array of buttons, we just want to press one of them
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM[0]?.onpointerup?.(e);
+          }
+        } else {
+          applyButtonStyle(buttonDOM);
+
+          if (options.physicalKeyboardHighlightPressUsePointerEvents) {
+            buttonDOM?.onpointerup?.(e);
+          }
+        }
       }
     });
   }
 
   /**
    * 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") ||
@@ -77,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;
@@ -88,7 +158,7 @@ class PhysicalKeyboard {
   /**
    * Retrieve key from keyCode
    */
-  keyCodeToKey(keyCode: number) {
+  keyCodeToKey(keyCode: number): string {
     return {
       8: "Backspace",
       9: "Tab",
@@ -187,7 +257,18 @@ class PhysicalKeyboard {
       220: "\\",
       221: "]",
       222: "'",
-    }[keyCode];
+    }[keyCode] || "";
+  }
+
+  isModifierKey = (e: KeyboardEvent): boolean => {
+    return (
+      e.altKey
+      || e.ctrlKey
+      || e.shiftKey
+      || ["Tab", "CapsLock", "Esc", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight"].includes(
+        e.code || e.key || this.keyCodeToKey(e?.keyCode)
+      )
+    )
   }
 }
 

src/lib/services/Utilities.ts

@@ -137,7 +137,7 @@ class Utilities {
   getButtonDisplayName(
     button: string,
     display: KeyboardOptions["display"],
-    mergeDisplay: boolean
+    mergeDisplay = false
   ) {
     if (mergeDisplay) {
       display = Object.assign({}, this.getDefaultDiplay(), display);
@@ -160,12 +160,12 @@ class Utilities {
   getUpdatedInput(
     button: string,
     input: string,
-    caretPos: number,
+    caretPos: any,
     caretPosEnd = caretPos,
     moveCaret = false
   ) {
     const options = this.getOptions();
-    const commonParams: [number, number, boolean] = [
+    const commonParams: [number | undefined, number | undefined, boolean] = [
       caretPos,
       caretPosEnd,
       moveCaret,
@@ -222,6 +222,10 @@ class Utilities {
     else if (!button.includes("{") && !button.includes("}"))
       output = this.addStringAt(output, button, ...commonParams);
 
+    if(options.debug){
+      console.log("Input will be: "+ output);
+    }
+
     return output;
   }
 
@@ -532,10 +536,43 @@ 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
    */
   static noop = () => {};
+
+  /**
+   * Check if a function is a constructor
+   */
+  isConstructor(f: any) {
+    try {
+      Reflect.construct(String, [], f);
+    } catch (e) {
+      return false;
+    }
+    return true;
+  }
 }
 
 export default Utilities;

src/lib/services/tests/PhysicalKeyboard.test.js

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

tsconfig.json

@@ -1,17 +1,18 @@
 {
     "compilerOptions": {
       "noImplicitAny": true,
-      "outDir": "build/types",
+      "rootDir": "src/lib",
+      "outDir": "build",
       "module": "esnext",
       "target": "es5",
       "allowJs": true,
       "sourceMap": true,
       "declaration": true,
       "emitDeclarationOnly": true,
-      "suppressImplicitAnyIndexErrors": true,
       "lib": ["es2020", "dom"],
       "moduleResolution": "node",
       "downlevelIteration": true,
+      "ignoreDeprecations": "6.0",
       "strict": true
     },
     "include": ["src/lib"],

webpack.config.demo.js

@@ -4,7 +4,11 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 module.exports = {
   mode: "development",
   devtool: 'cheap-module-source-map',
-  entry: './src/demo/index.js',
+  entry: [
+    './src/lib/components/css/Keyboard.css',
+    './src/lib/components/css/CandidateBox.css',
+    './src/demo/index.js'
+  ],
   output: {
     filename: 'index.js'
   },

webpack.config.js

@@ -1,17 +1,17 @@
+// Configuration
 const path = require('path');
 const webpack = require('webpack');
-const PrettierPlugin = require("prettier-webpack-plugin");
 const TerserPlugin = require('terser-webpack-plugin');
 const getPackageJson = require('./scripts/getPackageJson');
 const MiniCssExtractPlugin = require("mini-css-extract-plugin");
-const OptimizeCSSAssetsPlugin = require("optimize-css-assets-webpack-plugin");
+const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
 
 const {
   version,
   name,
   license,
   repository,
-  author,
+  author
 } = getPackageJson('version', 'name', 'license', 'repository', 'author');
 
 const banner = `
@@ -26,7 +26,11 @@ const banner = `
 
 module.exports = {
   mode: "production",
-  entry: './src/lib/index.ts',
+  entry: [
+    './src/lib/components/css/Keyboard.css',
+    './src/lib/components/css/CandidateBox.css',
+    './src/lib/index.ts'
+  ],
   target: 'es5',
   output: {
     filename: 'index.js',
@@ -35,6 +39,8 @@ module.exports = {
     libraryTarget: 'umd',
     clean: true,
     globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
     environment: {
       arrowFunction: false
     }
@@ -43,7 +49,7 @@ module.exports = {
     minimize: true,
     minimizer: [
       new TerserPlugin({ extractComments: false }),
-      new OptimizeCSSAssetsPlugin()
+      new CssMinimizerPlugin()
     ],
   },
   devServer: {
@@ -88,7 +94,6 @@ module.exports = {
     ]
   },
   plugins: [
-    new PrettierPlugin(),
     new MiniCssExtractPlugin({
         filename: 'css/index.css'
     }),
@@ -97,4 +102,4 @@ module.exports = {
   resolve: {
     extensions: ['.ts', '.js', '.json']
   }
-};
+};

webpack.config.modern.js

@@ -0,0 +1,81 @@
+/**
+ * Config to support modern browsers only (build/index.modern.js)
+ */
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version} (index.modern.js - Modern Browsers bundle)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.js) removes all polyfills
+  included in the standard version. Use this if you are supporting
+  modern browsers only. Otherwise, use the standard version (index.js).
+
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")} and project contributors.
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+`;
+
+module.exports = {
+  mode: "production",
+  entry: './src/lib/index.modern.ts',
+  target: 'es5',
+  devtool: 'source-map',
+  output: {
+    filename: 'index.modern.js',
+    path: path.resolve(__dirname, 'build'),
+    library: "SimpleKeyboard",
+    libraryTarget: 'umd',
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
+  },
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ["@babel/env"]
+            ],
+            plugins: [
+              ["@babel/plugin-proposal-class-properties"],
+              ["@babel/plugin-transform-typescript"]
+            ]
+          }
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: path.resolve('scripts/loaderMock.js')
+      }
+    ]
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};

webpack.config.modern_esm.js

@@ -0,0 +1,89 @@
+/**
+ * Config to support modern browsers only (build/index.modern.js)
+ */
+const path = require('path');
+const webpack = require('webpack');
+const TerserPlugin = require('terser-webpack-plugin');
+const getPackageJson = require('./scripts/getPackageJson');
+
+const {
+  version,
+  name,
+  license,
+  repository,
+  author
+} = getPackageJson('version', 'name', 'license', 'repository', 'author');
+
+const banner = `
+  ${name} v${version} (index.modern.esm.js - Modern Browsers bundle, ESM output)
+  ${repository.url}
+
+  NOTE: This modern browsers bundle (index.modern.esm.js) removes all polyfills
+  included in the standard version. Use this if you are supporting
+  modern browsers only. Otherwise, use the standard version (index.js).
+
+  Copyright (c) ${author.replace(/ *<[^)]*> */g, " ")} and project contributors.
+
+  This source code is licensed under the ${license} license found in the
+  LICENSE file in the root directory of this source tree.
+`;
+
+module.exports = {
+  mode: "production",
+  entry: './src/lib/index.modern.ts',
+  target: [
+    'web',
+    'es2020'
+  ],
+  output: {
+    filename: 'index.modern.esm.js',
+    path: path.resolve(__dirname, 'build'),
+    globalObject: 'this',
+    hashFunction: 'xxhash64',
+    chunkFormat: 'module',
+    library: {
+      type: 'module'
+    }
+  },
+  experiments: {
+    outputModule: true
+  },
+  externalsType: 'module',
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    minimizer: [
+      new TerserPlugin({ extractComments: false }),
+    ],
+  },
+  module: {
+    rules: [
+      {
+        test: /\.m?(j|t)s$/,
+        exclude: /(node_modules|bower_components)/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [
+              ["@babel/env"]
+            ],
+            plugins: [
+              ["@babel/plugin-proposal-class-properties"],
+              ["@babel/plugin-transform-typescript"]
+            ]
+          }
+        }
+      },
+      {
+        test: /\.(sa|sc|c)ss$/,
+        use: path.resolve('scripts/loaderMock.js')
+      }
+    ]
+  },
+  plugins: [
+    new webpack.BannerPlugin(banner)
+  ],
+  resolve: {
+    extensions: ['.ts', '.js', '.json']
+  }
+};