@khanacademy/wonder-blocks-clickable 5.0.6 → 6.0.0

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @khanacademy/wonder-blocks-clickable
 
+## 6.0.0
+
+### Major Changes
+
+-   0199324d: Fixes keyboard tests in Dropdown and Clickable with specific key events. We now check `event.key` instead of `event.which` or `event.keyCode` to remove deprecated event properties and match the keys returned from Testing Library/userEvent.
+
+### Patch Changes
+
+-   Updated dependencies [0199324d]
+    -   @khanacademy/wonder-blocks-core@12.0.0
+
+## 5.0.7
+
+### Patch Changes
+
+-   Updated dependencies [8cfaeab0]
+-   Updated dependencies [c162abb4]
+    -   @khanacademy/wonder-blocks-tokens@4.1.0
+
 ## 5.0.6
 
 ### Patch Changes

package/dist/es/index.js

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { StyleSheet } from 'aphrodite';
 import { withRouter, Link } from 'react-router-dom';
 import { __RouterContext } from 'react-router';
-import { addStyle } from '@khanacademy/wonder-blocks-core';
+import { keys, addStyle } from '@khanacademy/wonder-blocks-core';
 import { color } from '@khanacademy/wonder-blocks-tokens';
 
 const getAppropriateTriggersForRole = role => {
@@ -44,10 +44,6 @@ const disabledHandlers = {
   onKeyDown: () => void 0,
   onKeyUp: () => void 0
 };
-const keyCodes = {
-  enter: 13,
-  space: 32
-};
 const startState = {
   hovered: false,
   focused: false,
@@ -140,17 +136,17 @@ class ClickableBehavior extends React.Component {
       if (onKeyDown) {
         onKeyDown(e);
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === keys.enter || triggerOnSpace && keyName === keys.space) {
         e.preventDefault();
         this.setState({
           pressed: true
         });
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === keys.enter) {
         this.enterClick = true;
       }
     };
@@ -162,18 +158,18 @@ class ClickableBehavior extends React.Component {
       if (onKeyUp) {
         onKeyUp(e);
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === keys.enter || triggerOnSpace && keyName === keys.space) {
         this.setState({
           pressed: false,
           focused: true
         });
         this.runCallbackAndMaybeNavigate(e);
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === keys.enter) {
         this.enterClick = false;
       }
     };

package/dist/index.js

@@ -72,10 +72,6 @@ const disabledHandlers = {
   onKeyDown: () => void 0,
   onKeyUp: () => void 0
 };
-const keyCodes = {
-  enter: 13,
-  space: 32
-};
 const startState = {
   hovered: false,
   focused: false,
@@ -168,17 +164,17 @@ class ClickableBehavior extends React__namespace.Component {
       if (onKeyDown) {
         onKeyDown(e);
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === wonderBlocksCore.keys.enter || triggerOnSpace && keyName === wonderBlocksCore.keys.space) {
         e.preventDefault();
         this.setState({
           pressed: true
         });
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === wonderBlocksCore.keys.enter) {
         this.enterClick = true;
       }
     };
@@ -190,18 +186,18 @@ class ClickableBehavior extends React__namespace.Component {
       if (onKeyUp) {
         onKeyUp(e);
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
         triggerOnEnter,
         triggerOnSpace
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === wonderBlocksCore.keys.enter || triggerOnSpace && keyName === wonderBlocksCore.keys.space) {
         this.setState({
           pressed: false,
           focused: true
         });
         this.runCallbackAndMaybeNavigate(e);
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === wonderBlocksCore.keys.enter) {
         this.enterClick = false;
       }
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "5.0.6",
+  "version": "6.0.0",
   "design": "v1",
   "description": "Clickable component for Wonder-Blocks.",
   "main": "dist/index.js",
@@ -17,8 +17,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^11.1.0",
-    "@khanacademy/wonder-blocks-tokens": "^4.0.0"
+    "@khanacademy/wonder-blocks-core": "^12.0.0",
+    "@khanacademy/wonder-blocks-tokens": "^4.1.0"
   },
   "peerDependencies": {
     "aphrodite": "^1.2.5",