@khanacademy/wonder-blocks-core 11.0.1 → 12.0.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @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
+
+-   7516b239: Update useOnMountEffect to pass isMountedRef to callback
+
 ## 11.0.1
 
 ### Patch 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

@@ -291,7 +291,14 @@ function useLatestRef(value) {
 }
 
 const useOnMountEffect = callback => {
-  React.useEffect(callback, []);
+  const isMountedRef = React.useRef(true);
+  React.useEffect(() => {
+    const cleanup = callback(isMountedRef);
+    return () => {
+      cleanup == null ? void 0 : cleanup();
+      isMountedRef.current = false;
+    };
+  }, []);
 };
 
 const useOnline = () => {
@@ -348,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/hooks/use-on-mount-effect.d.ts

@@ -1,9 +1,10 @@
+import * as React from "react";
 /**
  * Runs a callback once on mount.
  *
  * If the callback returns a cleanup function, it will be called when the component is unmounted.
  *
- * @param {() => (void | (() => void))} callback function that forces the component to update.
+ * @param {(isMountedRef: React.MutableRefObject<boolean>) => void | (() => void)} callback function that forces the component to update.
  *
  * The following code snippets are equivalent
  * ```
@@ -25,5 +26,26 @@
  * }, []);
  *
  * If you only need to do something on mount, don't return a cleanup function from `callback`.
+ *
+ * If your callback is async, use the `isMountedRef` ref that's passed to the callback to ensure
+ * that the component using `useOnMountEffect` hasn't been unmounted, e.g.
+ *
+ * ```
+ * const MyComponent = () => {
+ *    const [foo, setFoo] = React.useState("");
+ *    useOnMountEffect((isMountedRef) => {
+ *        const action = async () => {
+ *            const res = await fetch("/foo");
+ *            const text = res.text();
+ *            if (isMountedRef.current) {
+ *                setFoo(text);
+ *            }
+ *        }
+ *
+ *        action();
+ *    });
+ *
+ *    return foo !== "" ? <h1>Loading...</h1> : <h1>{foo}</h1>;
+ * }
  */
-export declare const useOnMountEffect: (callback: () => void | (() => void)) => void;
+export declare const useOnMountEffect: (callback: (isMountedRef: React.MutableRefObject<boolean>) => void | (() => void)) => void;

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

@@ -318,7 +318,14 @@ function useLatestRef(value) {
 }
 
 const useOnMountEffect = callback => {
-  React__namespace.useEffect(callback, []);
+  const isMountedRef = React__namespace.useRef(true);
+  React__namespace.useEffect(() => {
+    const cleanup = callback(isMountedRef);
+    return () => {
+      cleanup == null ? void 0 : cleanup();
+      isMountedRef.current = false;
+    };
+  }, []);
 };
 
 const useOnline = () => {
@@ -375,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;
@@ -383,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.0.1",
+  "version": "12.0.0",
   "design": "v1",
   "publishConfig": {
     "access": "public"