@khanacademy/wonder-blocks-core 11.1.0 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @khanacademy/wonder-blocks-core
 
+## 12.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.
+
 ## 11.1.0
 
 ### Minor Changes

package/dist/components/text.d.ts

@@ -13,54 +13,54 @@ import * as React from "react";
  */
 declare const Text: React.ForwardRefExoticComponent<{
     children?: React.ReactNode;
-    style?: import("../util/types").StyleType;
-    testId?: string | undefined;
-    lang?: string | undefined;
-    className?: string | undefined;
-    htmlFor?: string | undefined;
-    tabIndex?: number | undefined;
-    id?: string | undefined;
-    title?: string | undefined;
-    "data-modal-launcher-portal"?: boolean | undefined;
-    "data-placement"?: string | undefined;
+    style?: import("..").StyleType;
+    testId?: string;
+    lang?: string;
+    className?: string;
+    htmlFor?: string;
+    tabIndex?: number;
+    id?: string;
+    title?: string;
+    "data-modal-launcher-portal"?: boolean;
+    "data-placement"?: string;
 } & Readonly<import("..").AriaAttributes> & Readonly<{
-    role?: import("..").AriaRole | undefined;
+    role?: import("..").AriaRole;
 }> & {
-    onMouseDown?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onMouseUp?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onMouseMove?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onClick?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDoubleClick?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onMouseEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onMouseLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onMouseOut?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onMouseOver?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDrag?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDragEnd?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDragEnter?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDragExit?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDragLeave?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDragOver?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDragStart?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
-    onDrop?: ((e: React.MouseEvent<Element, MouseEvent>) => unknown) | undefined;
+    onMouseDown?: (e: React.MouseEvent) => unknown;
+    onMouseUp?: (e: React.MouseEvent) => unknown;
+    onMouseMove?: (e: React.MouseEvent) => unknown;
+    onClick?: (e: React.MouseEvent) => unknown;
+    onDoubleClick?: (e: React.MouseEvent) => unknown;
+    onMouseEnter?: (e: React.MouseEvent) => unknown;
+    onMouseLeave?: (e: React.MouseEvent) => unknown;
+    onMouseOut?: (e: React.MouseEvent) => unknown;
+    onMouseOver?: (e: React.MouseEvent) => unknown;
+    onDrag?: (e: React.MouseEvent) => unknown;
+    onDragEnd?: (e: React.MouseEvent) => unknown;
+    onDragEnter?: (e: React.MouseEvent) => unknown;
+    onDragExit?: (e: React.MouseEvent) => unknown;
+    onDragLeave?: (e: React.MouseEvent) => unknown;
+    onDragOver?: (e: React.MouseEvent) => unknown;
+    onDragStart?: (e: React.MouseEvent) => unknown;
+    onDrop?: (e: React.MouseEvent) => unknown;
 } & {
-    onKeyDown?: ((e: React.KeyboardEvent<Element>) => unknown) | undefined;
-    onKeyPress?: ((e: React.KeyboardEvent<Element>) => unknown) | undefined;
-    onKeyUp?: ((e: React.KeyboardEvent<Element>) => unknown) | undefined;
+    onKeyDown?: (e: React.KeyboardEvent) => unknown;
+    onKeyPress?: (e: React.KeyboardEvent) => unknown;
+    onKeyUp?: (e: React.KeyboardEvent) => unknown;
 } & {
-    onChange?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
-    onInput?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
-    onInvalid?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
-    onSubmit?: ((e: React.ChangeEvent<HTMLInputElement>) => unknown) | undefined;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onInput?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onInvalid?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
+    onSubmit?: (e: React.ChangeEvent<HTMLInputElement>) => unknown;
 } & {
-    onTouchCancel?: ((e: React.TouchEvent<Element>) => unknown) | undefined;
-    onTouchEnd?: ((e: React.TouchEvent<Element>) => unknown) | undefined;
-    onTouchMove?: ((e: React.TouchEvent<Element>) => unknown) | undefined;
-    onTouchStart?: ((e: React.TouchEvent<Element>) => unknown) | undefined;
+    onTouchCancel?: (e: React.TouchEvent) => unknown;
+    onTouchEnd?: (e: React.TouchEvent) => unknown;
+    onTouchMove?: (e: React.TouchEvent) => unknown;
+    onTouchStart?: (e: React.TouchEvent) => unknown;
 } & {
-    onFocus?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
-    onBlur?: ((e: React.FocusEvent<Element, Element>) => unknown) | undefined;
+    onFocus?: (e: React.FocusEvent) => unknown;
+    onBlur?: (e: React.FocusEvent) => unknown;
 } & {
-    tag?: string | undefined;
+    tag?: string;
 } & React.RefAttributes<unknown>>;
 export default Text;

package/dist/es/index.js

@@ -355,4 +355,13 @@ const RenderStateRoot = ({
   }, children);
 };
 
-export { Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, View, addStyle, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState };
+const keys = {
+  enter: "Enter",
+  escape: "Escape",
+  tab: "Tab",
+  space: " ",
+  up: "ArrowUp",
+  down: "ArrowDown"
+};
+
+export { Id, InitialFallback, RenderState, RenderStateRoot, Server, Text, View, addStyle, keys, useForceUpdate, useIsMounted, useLatestRef, useOnMountEffect, useOnline, usePreHydrationEffect, useRenderState };

package/dist/index.d.ts

@@ -15,3 +15,4 @@ export { RenderStateRoot } from "./components/render-state-root";
 export { RenderState } from "./components/render-state-context";
 export type { AriaRole, AriaAttributes } from "./util/aria-types";
 export type { AriaProps, StyleType, PropsFor } from "./util/types";
+export { keys } from "./util/keys";

package/dist/index.js

@@ -382,6 +382,15 @@ const RenderStateRoot = ({
   }, children);
 };
 
+const keys = {
+  enter: "Enter",
+  escape: "Escape",
+  tab: "Tab",
+  space: " ",
+  up: "ArrowUp",
+  down: "ArrowDown"
+};
+
 exports.Id = Id;
 exports.InitialFallback = InitialFallback;
 exports.RenderState = RenderState;
@@ -390,6 +399,7 @@ exports.Server = Server;
 exports.Text = Text;
 exports.View = View;
 exports.addStyle = addStyle;
+exports.keys = keys;
 exports.useForceUpdate = useForceUpdate;
 exports.useIsMounted = useIsMounted;
 exports.useLatestRef = useLatestRef;

package/dist/util/keys.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Key value mapping reference:
+ * https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_key_values
+ */
+export declare const keys: {
+    readonly enter: "Enter";
+    readonly escape: "Escape";
+    readonly tab: "Tab";
+    readonly space: " ";
+    readonly up: "ArrowUp";
+    readonly down: "ArrowDown";
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-core",
-  "version": "11.1.0",
+  "version": "12.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"