@khanacademy/wonder-blocks-clickable - npm Package Compare versions

Comparing version 5.0.7 to 6.0.0

CHANGELOG.md

 # @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
@@ -4,0 +15,0 @@

dist/es/index.js

@@ -7,3 +7,3 @@ import _objectWithoutPropertiesLoose from '@babel/runtime/helpers/objectWithoutPropertiesLoose';
 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';
@@ -48,6 +48,2 @@
 };
-const keyCodes = {
-  enter: 13,
-  space: 32
-};
 const startState = {
@@ -145,3 +141,3 @@ hovered: false,
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
@@ -151,3 +147,3 @@ triggerOnEnter,
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === keys.enter || triggerOnSpace && keyName === keys.space) {
         e.preventDefault();
@@ -157,3 +153,3 @@ this.setState({
         });
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === keys.enter) {
         this.enterClick = true;
@@ -170,3 +166,3 @@ }
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
@@ -176,3 +172,3 @@ triggerOnEnter,
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === keys.enter || triggerOnSpace && keyName === keys.space) {
         this.setState({
@@ -183,3 +179,3 @@ pressed: false,
         this.runCallbackAndMaybeNavigate(e);
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === keys.enter) {
         this.enterClick = false;
@@ -186,0 +182,0 @@ }

dist/index.js

@@ -75,6 +75,2 @@ 'use strict';
 };
-const keyCodes = {
-  enter: 13,
-  space: 32
-};
 const startState = {
@@ -172,3 +168,3 @@ hovered: false,
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
@@ -178,3 +174,3 @@ triggerOnEnter,
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === wonderBlocksCore.keys.enter || triggerOnSpace && keyName === wonderBlocksCore.keys.space) {
         e.preventDefault();
@@ -184,3 +180,3 @@ this.setState({
         });
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === wonderBlocksCore.keys.enter) {
         this.enterClick = true;
@@ -197,3 +193,3 @@ }
       }
-      const keyCode = e.which || e.keyCode;
+      const keyName = e.key;
       const {
@@ -203,3 +199,3 @@ triggerOnEnter,
       } = getAppropriateTriggersForRole(role);
-      if (triggerOnEnter && keyCode === keyCodes.enter || triggerOnSpace && keyCode === keyCodes.space) {
+      if (triggerOnEnter && keyName === wonderBlocksCore.keys.enter || triggerOnSpace && keyName === wonderBlocksCore.keys.space) {
         this.setState({
@@ -210,3 +206,3 @@ pressed: false,
         this.runCallbackAndMaybeNavigate(e);
-      } else if (!triggerOnEnter && keyCode === keyCodes.enter) {
+      } else if (!triggerOnEnter && keyName === wonderBlocksCore.keys.enter) {
         this.enterClick = false;
@@ -213,0 +209,0 @@ }

package.json

 {
   "name": "@khanacademy/wonder-blocks-clickable",
-  "version": "5.0.7",
+  "version": "6.0.0",
   "design": "v1",
@@ -20,3 +20,3 @@ "description": "Clickable component for Wonder-Blocks.",
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-core": "^11.1.0",
+    "@khanacademy/wonder-blocks-core": "^12.0.0",
     "@khanacademy/wonder-blocks-tokens": "^4.1.0"
@@ -23,0 +23,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

58587

increased by0.5%

Worsened metrics

Lines of code

1488

decreased by-0.53%

Dependency changes

• + Added@babel/runtime@7.26.7(transitive)

• + Added@khanacademy/wonder-blocks-core@12.1.1(transitive)

• - Removed@babel/runtime@7.26.9(transitive)

• - Removed@khanacademy/wonder-blocks-core@11.1.0(transitive)

• Updated@khanacademy/wonder-blocks-core@^12.0.0