@khanacademy/wonder-blocks-dropdown 2.5.1 → 2.5.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-dropdown",
-  "version": "2.5.1",
+  "version": "2.5.2",
   "design": "v1",
   "description": "Dropdown variants for Wonder Blocks.",
   "main": "dist/index.js",
@@ -15,18 +15,18 @@
     "access": "public"
   },
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-button": "^2.10.1",
-    "@khanacademy/wonder-blocks-clickable": "^2.2.0",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.2.0",
-    "@khanacademy/wonder-blocks-icon": "^1.2.23",
-    "@khanacademy/wonder-blocks-icon-button": "^3.4.0",
-    "@khanacademy/wonder-blocks-layout": "^1.4.5",
-    "@khanacademy/wonder-blocks-modal": "^2.1.44",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-timing": "^2.0.2",
-    "@khanacademy/wonder-blocks-typography": "^1.1.27"
+    "@babel/runtime": "^7.16.3",
+    "@khanacademy/wonder-blocks-button": "^2.10.2",
+    "@khanacademy/wonder-blocks-clickable": "^2.2.1",
+    "@khanacademy/wonder-blocks-color": "^1.1.20",
+    "@khanacademy/wonder-blocks-core": "^4.0.0",
+    "@khanacademy/wonder-blocks-icon": "^1.2.24",
+    "@khanacademy/wonder-blocks-icon-button": "^3.4.1",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-modal": "^2.1.45",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-timing": "^2.0.3",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -39,7 +39,7 @@
     "react-window": "^1.8.5"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "61090a61b6e9d2a735976d5fd53a15d06f10c853"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/components/__tests__/dropdown-core-virtualized.test.js

@@ -8,6 +8,8 @@ import SeparatorItem from "../separator-item.js";
 import DropdownCoreVirtualized from "../dropdown-core-virtualized.js";
 import SearchTextInput from "../search-text-input.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+
 describe("DropdownCoreVirtualized", () => {
     beforeEach(() => {
         jest.useFakeTimers();
@@ -24,6 +26,12 @@ describe("DropdownCoreVirtualized", () => {
     });
 
     afterEach(() => {
+        // We have to explicitly unmount before clearing mocks, otherwise jest
+        // timers will throw because we'll try to clear an animation frame that
+        // we set with a setTimeout but are clearing with clearAnimationFrame
+        // because we restored the clearAnimationFrame mock (and we won't
+        // have cleared the timeout we actually set!)
+        unmountAll();
         jest.restoreAllMocks();
     });
 

package/src/components/__tests__/dropdown-core.test.js

@@ -8,6 +8,8 @@ import SearchTextInput from "../search-text-input.js";
 import DropdownCore from "../dropdown-core.js";
 import {keyCodes} from "../../util/constants.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+
 jest.mock("../dropdown-core-virtualized.js");
 
 const elementAtIndex = (wrapper, index) =>
@@ -87,6 +89,12 @@ describe("DropdownCore", () => {
     });
 
     afterEach(() => {
+        // We have to explicitly unmount before clearing mocks, otherwise jest
+        // timers will throw because we'll try to clear an animation frame that
+        // we set with a setTimeout but are clearing with clearAnimationFrame
+        // because we restored the clearAnimationFrame mock (and we won't
+        // have cleared the timeout we actually set!)
+        unmountAll();
         jest.restoreAllMocks();
     });
 

package/src/components/__tests__/multi-select.test.js

@@ -14,6 +14,8 @@ import MultiSelect from "../multi-select.js";
 import {keyCodes} from "../../util/constants.js";
 import SearchTextInput from "../search-text-input.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+
 import type {Labels} from "../multi-select.js";
 
 jest.useFakeTimers();
@@ -68,6 +70,12 @@ describe("MultiSelect", () => {
     });
 
     afterEach(() => {
+        // We have to explicitly unmount before clearing mocks, otherwise jest
+        // timers will throw because we'll try to clear an animation frame that
+        // we set with a setTimeout but are clearing with clearAnimationFrame
+        // because we restored the clearAnimationFrame mock (and we won't
+        // have cleared the timeout we actually set!)
+        unmountAll();
         jest.restoreAllMocks();
     });
 

package/src/components/__tests__/single-select.test.js

@@ -1,8 +1,6 @@
 //@flow
 import * as React from "react";
 import {render, screen} from "@testing-library/react";
-// eslint-disable-next-line import/no-unassigned-import
-import "@testing-library/jest-dom/extend-expect";
 
 import OptionItem from "../option-item.js";
 import SingleSelect from "../single-select.js";
@@ -25,8 +23,7 @@ describe("SingleSelect", () => {
     afterEach(() => {
         window.scrollTo.mockClear();
         onChange.mockReset();
-        // $FlowIgnore[prop-missing]: Flow doesn't understand that we're mocking console.error
-        console.error.mockReset(); // eslint-disable-line no-console
+        jest.spyOn(console, "error").mockReset();
     });
 
     afterEach(() => {
@@ -52,7 +49,7 @@ describe("SingleSelect", () => {
                 userEvent.click(opener);
 
                 // Assert
-                expect(screen.queryByRole("listbox")).toBeInTheDocument();
+                expect(screen.getByRole("listbox")).toBeInTheDocument();
             });
 
             it("should focus the first item in the dropdown", () => {
@@ -121,9 +118,7 @@ describe("SingleSelect", () => {
                         userEvent.keyboard(key);
 
                         // Assert
-                        expect(
-                            screen.queryByRole("listbox"),
-                        ).toBeInTheDocument();
+                        expect(screen.getByRole("listbox")).toBeInTheDocument();
                     });
 
                     it("should focus the first item in the dropdown", () => {
@@ -152,7 +147,7 @@ describe("SingleSelect", () => {
 
                 // Assert
                 expect(onChange).not.toHaveBeenCalled();
-                expect(screen.queryByRole("listbox")).toBeInTheDocument();
+                expect(screen.getByRole("listbox")).toBeInTheDocument();
             });
 
             it("should select an item when pressing {space}", () => {
@@ -278,7 +273,7 @@ describe("SingleSelect", () => {
             userEvent.click(screen.getByText("Choose"));
 
             // Assert
-            expect(screen.queryByRole("listbox")).toBeInTheDocument();
+            expect(screen.getByRole("listbox")).toBeInTheDocument();
         });
 
         it("closes the menu when the anchor is clicked", () => {
@@ -321,7 +316,7 @@ describe("SingleSelect", () => {
             userEvent.click(opener);
 
             // Assert
-            expect(screen.queryByRole("listbox")).toBeInTheDocument();
+            expect(screen.getByRole("listbox")).toBeInTheDocument();
         });
 
         it("calls the custom onClick handler", () => {

package/src/components/checkbox.js

@@ -14,8 +14,7 @@ import type {IconAsset} from "@khanacademy/wonder-blocks-icon";
 // If the intended icon is a check without a checkbox, you should be using
 // icons.check from the Wonder Blocks Icon package.
 const checkboxCheck: IconAsset = {
-    small:
-        "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
+    small: "M11.263 4.324a1 1 0 1 1 1.474 1.352l-5.5 6a1 1 0 0 1-1.505-.036l-2.5-3a1 1 0 1 1 1.536-1.28L6.536 9.48l4.727-5.157z",
 };
 const {blue, white, offBlack16, offBlack32, offBlack50, offWhite} = Color;
 

package/src/components/dropdown-core.js

@@ -522,9 +522,8 @@ class DropdownCore extends React.Component<Props, State> {
         // appropriate item in handleKeyDown
         this.itemsClicked = true;
         this.focusedIndex = index;
-        this.focusedOriginalIndex = this.state.itemRefs[
-            this.focusedIndex
-        ].originalIndex;
+        this.focusedOriginalIndex =
+            this.state.itemRefs[this.focusedIndex].originalIndex;
     };
 
     handleDropdownMouseUp: (event: SyntheticMouseEvent<>) => void = (event) => {

package/src/components/select-opener.js

@@ -16,15 +16,8 @@ import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
 
 const StyledButton = addStyle("button");
 
-const {
-    blue,
-    white,
-    white50,
-    offBlack,
-    offBlack16,
-    offBlack32,
-    offBlack64,
-} = Color;
+const {blue, white, white50, offBlack, offBlack16, offBlack32, offBlack64} =
+    Color;
 
 type SelectOpenerProps = {|
     ...AriaProps,