Added physicalKeyboardHighlightPress option. Fixes #735

Bumps [resolve](https://github.com/browserify/resolve) from 1.17.0 to 1.18.1.
- [Release notes](https://github.com/browserify/resolve/releases)
- [Commits](https://github.com/browserify/resolve/compare/v1.17.0...v1.18.1)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

.github/stale.yml

@@ -1,5 +1,5 @@
 # Number of days of inactivity before an issue becomes stale
-daysUntilStale: 3
+daysUntilStale: 5
 # Number of days of inactivity before a stale issue is closed
 daysUntilClose: 2
 # Issues with these labels will never be considered stale
@@ -14,4 +14,4 @@ markComment: >
   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
+closeComment: false

build/css/index.css

@@ -1,6 +1,6 @@
 /*!
  * 
- *   simple-keyboard v2.31.0
+ *   simple-keyboard v2.32.0
  *   https://github.com/hodgef/simple-keyboard
  * 
  *   Copyright (c) Francisco Hodge (https://github.com/hodgef)

build/index.d.ts

@@ -87,6 +87,21 @@ declare module 'simple-keyboard' {
      */
     physicalKeyboardHighlight?: boolean;
 
+    /**
+     * Presses keys highlighted by physicalKeyboardHighlight
+     */
+    physicalKeyboardHighlightPress?: boolean;
+
+    /**
+     * Define the text color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightTextColor?: string;
+
+    /**
+     * Define the background color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightBgColor?: string;
+
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -107,16 +122,6 @@ declare module 'simple-keyboard' {
      */
     stopMouseUpPropagation?: boolean;
 
-    /**
-     * Define the text color that the physical keyboard highlighted key should have.
-     */
-    physicalKeyboardHighlightTextColor?: string;
-
-    /**
-     * Define the background color that the physical keyboard highlighted key should have.
-     */
-    physicalKeyboardHighlightBgColor?: string;
-
     /**
      * Render buttons as a button element instead of a div element.
      */

package.json

@@ -1,6 +1,6 @@
 {
   "name": "simple-keyboard",
-  "version": "2.31.0",
+  "version": "2.32.0",
   "description": "On-screen Javascript Virtual Keyboard",
   "main": "build/index.js",
   "types": "build/index.d.ts",
@@ -40,10 +40,10 @@
   ],
   "license": "MIT",
   "devDependencies": {
-    "@babel/core": "7.12.0",
-    "@babel/plugin-proposal-class-properties": "^7.10.4",
-    "@babel/preset-env": "^7.12.0",
-    "@babel/preset-react": "^7.10.4",
+    "@babel/core": "7.12.3",
+    "@babel/plugin-proposal-class-properties": "^7.12.1",
+    "@babel/preset-env": "^7.12.1",
+    "@babel/preset-react": "^7.12.1",
     "@svgr/webpack": "5.4.0",
     "@testing-library/jest-dom": "^5.11.4",
     "@testing-library/react": "^11.1.0",
@@ -51,7 +51,7 @@
     "@typescript-eslint/eslint-plugin": "^2.10.0",
     "@typescript-eslint/parser": "^2.10.0",
     "babel-eslint": "^10.1.0",
-    "babel-jest": "^26.5.2",
+    "babel-jest": "^26.6.0",
     "babel-loader": "8.1.0",
     "babel-plugin-named-asset-import": "^0.3.6",
     "babel-preset-react-app": "^9.1.2",
@@ -73,11 +73,11 @@
     "fs-extra": "9.0.1",
     "html-webpack-plugin": "4.5.0",
     "identity-obj-proxy": "3.0.0",
-    "jest": "26.5.3",
+    "jest": "26.6.0",
     "jest-environment-jsdom-fourteen": "1.0.1",
-    "jest-resolve": "26.5.2",
+    "jest-resolve": "26.6.0",
     "jest-watch-typeahead": "0.6.1",
-    "mini-css-extract-plugin": "1.0.0",
+    "mini-css-extract-plugin": "1.1.0",
     "optimize-css-assets-webpack-plugin": "5.0.4",
     "pnp-webpack-plugin": "1.6.4",
     "postcss-flexbugs-fixes": "4.2.1",
@@ -90,8 +90,8 @@
     "react": "^16.14.0",
     "react-app-polyfill": "^1.0.6",
     "react-dev-utils": "^10.2.1",
-    "react-dom": "^16.13.1",
-    "resolve": "1.17.0",
+    "react-dom": "^16.14.0",
+    "resolve": "1.18.1",
     "resolve-url-loader": "3.1.1",
     "sass-loader": "10.0.3",
     "semver": "7.3.2",

src/lib/@types/index.d.ts

@@ -87,6 +87,21 @@ declare module 'simple-keyboard' {
      */
     physicalKeyboardHighlight?: boolean;
 
+    /**
+     * Presses keys highlighted by physicalKeyboardHighlight
+     */
+    physicalKeyboardHighlightPress?: boolean;
+
+    /**
+     * Define the text color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightTextColor?: string;
+
+    /**
+     * Define the background color that the physical keyboard highlighted key should have.
+     */
+    physicalKeyboardHighlightBgColor?: string;
+
     /**
      * Calling preventDefault for the mousedown events keeps the focus on the input.
      */
@@ -107,16 +122,6 @@ declare module 'simple-keyboard' {
      */
     stopMouseUpPropagation?: boolean;
 
-    /**
-     * Define the text color that the physical keyboard highlighted key should have.
-     */
-    physicalKeyboardHighlightTextColor?: string;
-
-    /**
-     * Define the background color that the physical keyboard highlighted key should have.
-     */
-    physicalKeyboardHighlightBgColor?: string;
-
     /**
      * Render buttons as a button element instead of a div element.
      */

src/lib/components/Keyboard.js

@@ -64,12 +64,13 @@ class SimpleKeyboard {
      * @property {object} maxLength Restrains simple-keyboard’s individual inputs to a certain length. This should be used in addition to the input element’s maxlengthattribute.
      * @property {boolean} syncInstanceInputs When set to true, this option synchronizes the internal input of every simple-keyboard instance.
      * @property {boolean} physicalKeyboardHighlight Enable highlighting of keys pressed on physical keyboard.
+     * @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} 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.
      * @property {boolean} stopMouseUpPropagation Stops pointer up events on simple-keyboard buttons from bubbling to parent elements.
-     * @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 {function(button: string):string} onKeyPress Executes the callback function on key press. Returns button layout name (i.e.: “{shift}”).
      * @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).

src/lib/services/PhysicalKeyboard.js

@@ -34,11 +34,24 @@ class PhysicalKeyboard {
           options.physicalKeyboardHighlightBgColor || "#dadce4";
         buttonDOM.style.color =
           options.physicalKeyboardHighlightTextColor || "black";
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger mousedown
+           */
+          (
+            buttonDOM.onpointerdown ||
+            buttonDOM.onmousedown ||
+            buttonDOM.ontouchstart ||
+            Utilities.noop
+          )();
+        }
       }
     });
   }
 
   handleHighlightKeyUp(event) {
+    const options = this.getOptions();
     const buttonPressed = this.getSimpleKeyboardLayoutKey(event);
 
     this.dispatch(instance => {
@@ -48,6 +61,18 @@ class PhysicalKeyboard {
 
       if (buttonDOM && buttonDOM.removeAttribute) {
         buttonDOM.removeAttribute("style");
+
+        if (options.physicalKeyboardHighlightPress) {
+          /**
+           * Trigger mousedown
+           */
+          (
+            buttonDOM.onpointerup ||
+            buttonDOM.onmouseup ||
+            buttonDOM.ontouchend ||
+            Utilities.noop
+          )();
+        }
       }
     });
   }

src/lib/services/Utilities.js

@@ -430,6 +430,8 @@ class Utilities {
         word.length ? str + word[0].toUpperCase() + word.slice(1) : str
       );
   }
+
+  static noop = () => {};
 }
 
 export default Utilities;

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

@@ -113,4 +113,57 @@ it('PhysicalKeyboard will work with F1-F12 keys', () => {
       tagName: "input"
     }
   }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+});
+
+it('PhysicalKeyboard will work with physicalKeyboardHighlightPress (touch)', () => {
+  setDOM();
+
+  new Keyboard({
+    physicalKeyboardHighlight: true,
+    physicalKeyboardHighlightPress: true,
+    useTouchEvents: true,
+    debug: true
+  });
+
+  document.dispatchEvent(new KeyboardEvent('keydown', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
+
+  document.dispatchEvent(new KeyboardEvent('keyup', {
+    code: "KeyF",
+    key: "f",
+    target: {
+      tagName: "input"
+    }
+  }));
 });