@khanacademy/wonder-blocks-popover 1.1.4 → 1.1.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "1.1.4",
+  "version": "1.1.5",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,16 +15,16 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@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-tooltip": "^1.3.4",
-    "@khanacademy/wonder-blocks-typography": "^1.1.27"
+    "@babel/runtime": "^7.16.3",
+    "@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-tooltip": "^1.3.5",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -34,7 +34,7 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
+    "wb-dev-build-settings": "^0.2.0"
   },
-  "gitHead": "b6193f70c73e70fbaf76bc688dc69a47fb1d0ef3"
+  "gitHead": "9ebea88533e702011165072f090a377e02fa3f0f"
 }

package/src/components/__tests__/focus-manager.test.js

@@ -6,9 +6,28 @@ import {mount} from "enzyme";
 import FocusManager from "../focus-manager.js";
 import {findFocusableNodes} from "../../util/util.js";
 
+import {unmountAll} from "../../../../../utils/testing/enzyme-shim.js";
+import {getElementAttachedToDocument} from "../../../../../utils/testing/get-element-attached-to-document.js";
+
 describe("FocusManager", () => {
+    beforeEach(() => {
+        jest.useRealTimers();
+    });
+
+    afterEach(() => {
+        unmountAll();
+        if (document.body) {
+            document.body.innerHTML = "";
+        }
+    });
+
     it("should focus on the first focusable element inside the popover", async () => {
         // Arrange
+        // We need the elements in the DOM document for the focus() calls to
+        // work.
+        const containerDiv = getElementAttachedToDocument("container");
+        const focusManagerDiv = getElementAttachedToDocument("focusManagerDiv");
+
         const ref = await new Promise((resolve) => {
             const nodes = (
                 <div ref={resolve}>
@@ -16,7 +35,7 @@ describe("FocusManager", () => {
                     <button data-next />
                 </div>
             );
-            mount(nodes);
+            mount(nodes, {attachTo: containerDiv});
         });
         const domNode = ((ReactDOM.findDOMNode(ref): any): HTMLElement);
 
@@ -38,10 +57,10 @@ describe("FocusManager", () => {
                     <button data-tab-index="2" />
                 </div>
             </FocusManager>,
+            {attachTo: focusManagerDiv},
         );
 
         // Act
-
         // focus on the previous element before the popover (anchor element)
         anchorElementNode.focus();
         // press `tab` to focus on the next element
@@ -61,6 +80,11 @@ describe("FocusManager", () => {
 
     it("should focus on the last focusable element inside the popover", async () => {
         // Arrange
+        // We need the elements in the DOM document for the focus() calls to
+        // work.
+        const containerDiv = getElementAttachedToDocument("container");
+        const focusManagerDiv = getElementAttachedToDocument("focusManagerDiv");
+
         const ref = await new Promise((resolve) => {
             const nodes = (
                 <div ref={resolve}>
@@ -68,7 +92,7 @@ describe("FocusManager", () => {
                     <button data-next />
                 </div>
             );
-            mount(nodes);
+            mount(nodes, {attachTo: containerDiv});
         });
         const domNode = ((ReactDOM.findDOMNode(ref): any): HTMLElement);
 
@@ -90,6 +114,7 @@ describe("FocusManager", () => {
                     <button data-tab-index="2" />
                 </div>
             </FocusManager>,
+            {attachTo: focusManagerDiv},
         );
 
         // Act

package/src/components/__tests__/initial-focus.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 InitialFocus from "../initial-focus.js";
 

package/src/components/popover.js

@@ -161,9 +161,8 @@ export default class Popover extends React.Component<Props, State> {
     /**
      * Popover content ref
      */
-    contentRef: RefObject<
-        PopoverContent | PopoverContentCore,
-    > = React.createRef();
+    contentRef: RefObject<PopoverContent | PopoverContentCore> =
+        React.createRef();
 
     /**
      * Popover dialog closed