@khanacademy/wonder-blocks-popover 1.1.2 → 1.1.6

package/CHANGELOG.md

@@ -0,0 +1,9 @@
+# @khanacademy/wonder-blocks-popover
+
+## 1.1.6
+### Patch Changes
+
+- Updated dependencies [e7bbf149]
+  - @khanacademy/wonder-blocks-modal@2.2.0
+  - @khanacademy/wonder-blocks-icon-button@3.4.2
+  - @khanacademy/wonder-blocks-tooltip@1.3.6

package/dist/es/index.js

@@ -1,6 +1,7 @@
 import _extends from '@babel/runtime/helpers/extends';
-import { createContext, Component, cloneElement, createElement, Fragment, createRef } from 'react';
-import ReactDOM, { findDOMNode } from 'react-dom';
+import * as React from 'react';
+import * as ReactDOM from 'react-dom';
+import ReactDOM__default from 'react-dom';
 import { View, IDProvider, addStyle } from '@khanacademy/wonder-blocks-core';
 import { TooltipTail, TooltipPopper } from '@khanacademy/wonder-blocks-tooltip';
 import { maybeGetPortalMountedModalHostElement } from '@khanacademy/wonder-blocks-modal';
@@ -26,15 +27,15 @@ const defaultContext = {
  *    of the following values: "top", "bottom", "left" or "right".
  */
 
-var PopoverContext = /*#__PURE__*/createContext(defaultContext);
+var PopoverContext = /*#__PURE__*/React.createContext(defaultContext);
 
 /**
  * The element that triggers the popover dialog. This is also used as reference
  * to position the dialog itself.
  */
-class PopoverAnchor extends Component {
+class PopoverAnchor extends React.Component {
   componentDidMount() {
-    const anchorNode = findDOMNode(this);
+    const anchorNode = ReactDOM.findDOMNode(this);
 
     if (anchorNode) {
       this.props.anchorRef(anchorNode);
@@ -61,11 +62,11 @@ class PopoverAnchor extends Component {
         open: onClick
       }); // we clone it to allow injecting the sharedProps defined before
 
-      return /*#__PURE__*/cloneElement(renderedChildren, sharedProps);
+      return /*#__PURE__*/React.cloneElement(renderedChildren, sharedProps);
     } else {
       // add onClick handler to automatically open the dialog after
       // clicking on this anchor element
-      return /*#__PURE__*/cloneElement(children, _extends({}, children.props, sharedProps, {
+      return /*#__PURE__*/React.cloneElement(children, _extends({}, children.props, sharedProps, {
         onClick: children.props.onClick ? e => {
           e.stopPropagation(); // This is done to avoid overriding a custom onClick
           // handler inside the children node
@@ -93,7 +94,7 @@ class PopoverAnchor extends Component {
  *
  * Note that without explicit positioning, the tail will not be centered.
  */
-class PopoverDialog extends Component {
+class PopoverDialog extends React.Component {
   componentDidUpdate(prevProps) {
     // if the placement has changed, then we need to notify this to the
     // parent component (`Popover`). This way, the context will update its
@@ -118,14 +119,14 @@ class PopoverDialog extends Component {
     const contentProps = children.props; // extract the background color from the popover content
 
     const color = contentProps.emphasized ? "blue" : contentProps.color;
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(View, {
       "aria-describedby": ariaDescribedby,
       id: id,
       role: "dialog",
       ref: updateBubbleRef,
       "data-placement": placement,
-      style: [isReferenceHidden && styles.hide, styles[`content-${placement}`], style]
-    }, children, /*#__PURE__*/createElement(TooltipTail, {
+      style: [isReferenceHidden && styles$2.hide, styles$2[`content-${placement}`], style]
+    }, children, /*#__PURE__*/React.createElement(TooltipTail, {
       color: color,
       updateRef: updateTailRef,
       placement: placement,
@@ -134,7 +135,7 @@ class PopoverDialog extends Component {
   }
 
 }
-const styles = StyleSheet.create({
+const styles$2 = StyleSheet.create({
   /**
    * The hide style ensures that the bounds of the popover stay unchanged.
    * This is because popper.js calculates the bubble position based off its
@@ -178,7 +179,7 @@ function findFocusableNodes(root) {
  * This component finds which element (from within the children) needs to
  * receive focus. After that, the children is rendered with the focus assigned.
  */
-class InitialFocus extends Component {
+class InitialFocus extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -201,7 +202,7 @@ class InitialFocus extends Component {
   }
 
   componentDidMount() {
-    const node = findDOMNode(this);
+    const node = ReactDOM.findDOMNode(this);
 
     if (!node) {
       return;
@@ -269,7 +270,7 @@ class InitialFocus extends Component {
  *    next shift + tab will set focus on the PopoverAnchor element.
  *
  */
-class FocusManager extends Component {
+class FocusManager extends React.Component {
   constructor(...args) {
     super(...args);
     this.focusableElementsInPopover = [];
@@ -321,7 +322,7 @@ class FocusManager extends Component {
         return;
       }
 
-      const rootNode = findDOMNode(node);
+      const rootNode = ReactDOM.findDOMNode(node);
 
       if (!rootNode) {
         throw new Error("Assertion error: root node should exist after mount");
@@ -405,17 +406,17 @@ class FocusManager extends Component {
     const {
       children
     } = this.props;
-    return /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement("div", {
+    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
       tabIndex: "0",
       onFocus: this.handleFocusPreviousFocusableElement,
       style: {
         position: "fixed"
       }
-    }), /*#__PURE__*/createElement("div", {
+    }), /*#__PURE__*/React.createElement("div", {
       ref: this.getComponentRootNode
-    }, /*#__PURE__*/createElement(InitialFocus, {
+    }, /*#__PURE__*/React.createElement(InitialFocus, {
       initialFocusId: this.props.initialFocusId
-    }, children)), /*#__PURE__*/createElement("div", {
+    }, children)), /*#__PURE__*/React.createElement("div", {
       tabIndex: "0",
       onFocus: this.handleFocusNextFocusableElement,
       style: {
@@ -431,7 +432,7 @@ class FocusManager extends Component {
  * This includes when pressing Escape or clicking outside the Popover.
  * @see @khanacademy/wonder-blocks-modal/components/modal-launcher.js
  */
-class PopoverEventListener extends Component {
+class PopoverEventListener extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -467,7 +468,7 @@ class PopoverEventListener extends Component {
         return;
       }
 
-      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
+      const node = ReactDOM__default.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
 
       if (node && !node.contains(e.target)) {
         // Stop the event going any further.
@@ -504,7 +505,7 @@ class PopoverEventListener extends Component {
  * This component uses the `PopoverPopper` component to position the
  * `PopoverContentCore` component according to the children it is wrapping.
  */
-class Popover extends Component {
+class Popover extends React.Component {
   constructor(...args) {
     super(...args);
     this.state = {
@@ -512,7 +513,7 @@ class Popover extends Component {
       anchorElement: null,
       placement: this.props.placement
     };
-    this.contentRef = /*#__PURE__*/createRef();
+    this.contentRef = /*#__PURE__*/React.createRef();
 
     this.handleClose = () => {
       this.setState({
@@ -535,7 +536,7 @@ class Popover extends Component {
     };
 
     this.updateRef = ref => {
-      const actualRef = ref && ReactDOM.findDOMNode(ref);
+      const actualRef = ref && ReactDOM__default.findDOMNode(ref);
 
       if (actualRef && this.state.anchorElement !== actualRef) {
         this.setState({
@@ -559,7 +560,7 @@ class Popover extends Component {
     const {
       content
     } = this.props;
-    return /*#__PURE__*/cloneElement(typeof content === "function" ? content({
+    return /*#__PURE__*/React.cloneElement(typeof content === "function" ? content({
       close: this.handleClose
     }) : content, {
       ref: this.contentRef
@@ -574,13 +575,13 @@ class Popover extends Component {
     const {
       anchorElement
     } = this.state;
-    return /*#__PURE__*/createElement(FocusManager, {
+    return /*#__PURE__*/React.createElement(FocusManager, {
       anchorElement: anchorElement,
       initialFocusId: initialFocusId
-    }, /*#__PURE__*/createElement(TooltipPopper, {
+    }, /*#__PURE__*/React.createElement(TooltipPopper, {
       anchorElement: anchorElement,
       placement: placement
-    }, props => /*#__PURE__*/createElement(PopoverDialog, _extends({}, props, {
+    }, props => /*#__PURE__*/React.createElement(PopoverDialog, _extends({}, props, {
       "aria-describedby": `${uniqueId}-anchor`,
       id: uniqueId,
       onUpdate: placement => this.setState({
@@ -608,21 +609,21 @@ class Popover extends Component {
       placement
     } = this.state;
     const popperHost = this.getHost();
-    return /*#__PURE__*/createElement(PopoverContext.Provider, {
+    return /*#__PURE__*/React.createElement(PopoverContext.Provider, {
       value: {
         close: this.handleClose,
         placement: placement
       }
-    }, /*#__PURE__*/createElement(IDProvider, {
+    }, /*#__PURE__*/React.createElement(IDProvider, {
       id: id,
       scope: "popover"
-    }, uniqueId => /*#__PURE__*/createElement(Fragment, null, /*#__PURE__*/createElement(PopoverAnchor, {
+    }, uniqueId => /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(PopoverAnchor, {
       anchorRef: this.updateRef,
       id: `${uniqueId}-anchor`,
       "aria-controls": uniqueId,
       "aria-expanded": opened ? "true" : "false",
       onClick: this.handleOpen
-    }, children), popperHost && opened && /*#__PURE__*/ReactDOM.createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && /*#__PURE__*/createElement(PopoverEventListener, {
+    }, children), popperHost && opened && /*#__PURE__*/ReactDOM__default.createPortal(this.renderPopper(uniqueId), popperHost))), dismissEnabled && opened && /*#__PURE__*/React.createElement(PopoverEventListener, {
       onClose: this.handleClose,
       contentRef: this.contentRef
     }));
@@ -638,7 +639,7 @@ Popover.defaultProps = {
  * inside the PopoverContentCore. It’s rendered if closeButtonVisible is set
  * true.
  */
-class CloseButton extends Component {
+class CloseButton extends React.Component {
   render() {
     const {
       light,
@@ -646,10 +647,10 @@ class CloseButton extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(PopoverContext.Consumer, null, ({
+    return /*#__PURE__*/React.createElement(PopoverContext.Consumer, null, ({
       close
     }) => {
-      return /*#__PURE__*/createElement(IconButton, {
+      return /*#__PURE__*/React.createElement(IconButton, {
         icon: icons.dismiss,
         "aria-label": ariaLabel,
         onClick: close,
@@ -671,7 +672,7 @@ CloseButton.defaultProps = {
  * This is the base popover container. It’s used internally by all the variants.
  * Also, it can be used to create flexible popovers.
  */
-class PopoverContentCore extends Component {
+class PopoverContentCore extends React.Component {
   render() {
     const {
       children,
@@ -682,10 +683,10 @@ class PopoverContentCore extends Component {
       style,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(View, {
+    return /*#__PURE__*/React.createElement(View, {
       "data-test-id": testId,
       style: [styles$1.content, color !== "white" && styles$1[color], style]
-    }, closeButtonVisible && /*#__PURE__*/createElement(CloseButton, {
+    }, closeButtonVisible && /*#__PURE__*/React.createElement(CloseButton, {
       "aria-label": closeButtonLabel,
       light: closeButtonLight || color !== "white",
       style: styles$1.closeButton,
@@ -744,7 +745,7 @@ const StyledImage = addStyle("img");
  * main responsibility is populate the contents depending on the variation used.
  */
 
-class PopoverContent extends Component {
+class PopoverContent extends React.Component {
   constructor(...args) {
     super(...args);
 
@@ -759,8 +760,8 @@ class PopoverContent extends Component {
         return null;
       }
 
-      return /*#__PURE__*/createElement(View, {
-        style: [styles$2.image, placement === "bottom" && styles$2.imageToBottom]
+      return /*#__PURE__*/React.createElement(View, {
+        style: [styles.image, placement === "bottom" && styles.imageToBottom]
       }, image);
     };
 
@@ -773,11 +774,11 @@ class PopoverContent extends Component {
         return null;
       }
 
-      return /*#__PURE__*/createElement(View, {
-        style: styles$2.iconContainer
-      }, typeof icon !== "string" ? icon : /*#__PURE__*/createElement(StyledImage, {
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.iconContainer
+      }, typeof icon !== "string" ? icon : /*#__PURE__*/React.createElement(StyledImage, {
         src: icon,
-        style: styles$2.icon
+        style: styles.icon
       }));
     };
 
@@ -790,8 +791,8 @@ class PopoverContent extends Component {
         return null;
       }
 
-      return /*#__PURE__*/createElement(View, {
-        style: styles$2.actions
+      return /*#__PURE__*/React.createElement(View, {
+        style: styles.actions
       }, typeof actions === "function" ? actions({
         close: close
       }) : actions);
@@ -835,7 +836,7 @@ class PopoverContent extends Component {
       title,
       testId
     } = this.props;
-    return /*#__PURE__*/createElement(PopoverContext.Consumer, null, ({
+    return /*#__PURE__*/React.createElement(PopoverContext.Consumer, null, ({
       close,
       placement
     }) => {
@@ -844,22 +845,22 @@ class PopoverContent extends Component {
         close,
         placement
       });
-      return /*#__PURE__*/createElement(PopoverContentCore, {
+      return /*#__PURE__*/React.createElement(PopoverContentCore, {
         color: emphasized ? "blue" : "white",
         closeButtonLight: image && placement === "top",
         closeButtonLabel: closeButtonLabel,
         closeButtonVisible: closeButtonVisible,
         style: style,
         testId: testId
-      }, /*#__PURE__*/createElement(View, {
-        style: !!icon && styles$2.withIcon
+      }, /*#__PURE__*/React.createElement(View, {
+        style: !!icon && styles.withIcon
       }, this.maybeRenderImage({
         placement
-      }), this.maybeRenderIcon(), /*#__PURE__*/createElement(View, {
-        style: styles$2.text
-      }, /*#__PURE__*/createElement(HeadingSmall, {
-        style: styles$2.title
-      }, title), /*#__PURE__*/createElement(Body, null, content))), this.maybeRenderActions(close));
+      }), this.maybeRenderIcon(), /*#__PURE__*/React.createElement(View, {
+        style: styles.text
+      }, /*#__PURE__*/React.createElement(HeadingSmall, {
+        style: styles.title
+      }, title), /*#__PURE__*/React.createElement(Body, null, content))), this.maybeRenderActions(close));
     });
   }
 
@@ -867,7 +868,7 @@ class PopoverContent extends Component {
 PopoverContent.defaultProps = {
   closeButtonVisible: false
 };
-const styles$2 = StyleSheet.create({
+const styles = StyleSheet.create({
   /**
    * Shared styles
    */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "1.1.2",
+  "version": "1.1.6",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -15,26 +15,25 @@
   "author": "",
   "license": "MIT",
   "dependencies": {
-    "@babel/runtime": "^7.13.10",
-    "@khanacademy/wonder-blocks-color": "^1.1.19",
-    "@khanacademy/wonder-blocks-core": "^3.1.5",
-    "@khanacademy/wonder-blocks-icon": "^1.2.22",
-    "@khanacademy/wonder-blocks-icon-button": "^3.3.14",
-    "@khanacademy/wonder-blocks-layout": "^1.4.4",
-    "@khanacademy/wonder-blocks-modal": "^2.1.43",
-    "@khanacademy/wonder-blocks-spacing": "^3.0.4",
-    "@khanacademy/wonder-blocks-tooltip": "^1.3.2",
-    "@khanacademy/wonder-blocks-typography": "^1.1.26"
+    "@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.2",
+    "@khanacademy/wonder-blocks-layout": "^1.4.6",
+    "@khanacademy/wonder-blocks-modal": "^2.2.0",
+    "@khanacademy/wonder-blocks-spacing": "^3.0.5",
+    "@khanacademy/wonder-blocks-tooltip": "^1.3.6",
+    "@khanacademy/wonder-blocks-typography": "^1.1.28"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
     "aphrodite": "^1.2.5",
-    "react": "^16.4.1",
-    "react-dom": "^16.4.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.1.2"
-  },
-  "gitHead": "2a21f4ec19e5611fe716237c21f45c9164b65710"
+    "wb-dev-build-settings": "^0.2.0"
+  }
 }

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -22,9 +22,9 @@ exports[`wonder-blocks-popover example 1 1`] = `
 >
   <button
     aria-controls="uid-popover-0-wb-id"
+    aria-disabled={false}
     aria-expanded="false"
     className=""
-    disabled={false}
     id="uid-popover-0-wb-id-anchor"
     onBlur={[Function]}
     onClick={[Function]}
@@ -142,9 +142,9 @@ exports[`wonder-blocks-popover example 2 1`] = `
   >
     <button
       aria-controls="uid-popover-1-wb-id"
+      aria-disabled={false}
       aria-expanded="true"
       className=""
-      disabled={false}
       id="uid-popover-1-wb-id-anchor"
       onBlur={[Function]}
       onClick={[Function]}
@@ -242,8 +242,8 @@ exports[`wonder-blocks-popover example 2 1`] = `
       }
     />
     <button
+      aria-disabled={false}
       className=""
-      disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
       onDragStart={[Function]}
@@ -339,9 +339,9 @@ exports[`wonder-blocks-popover example 3 1`] = `
 >
   <button
     aria-controls="uid-popover-2-wb-id"
+    aria-disabled={false}
     aria-expanded="false"
     className=""
-    disabled={false}
     id="uid-popover-2-wb-id-anchor"
     onBlur={[Function]}
     onClick={[Function]}
@@ -437,9 +437,9 @@ exports[`wonder-blocks-popover example 4 1`] = `
 >
   <button
     aria-controls="uid-popover-3-wb-id"
+    aria-disabled={false}
     aria-expanded="false"
     className=""
-    disabled={false}
     id="uid-popover-3-wb-id-anchor"
     onBlur={[Function]}
     onClick={[Function]}
@@ -535,9 +535,9 @@ exports[`wonder-blocks-popover example 5 1`] = `
 >
   <button
     aria-controls="uid-popover-4-wb-id"
+    aria-disabled={false}
     aria-expanded="false"
     className=""
-    disabled={false}
     id="uid-popover-4-wb-id-anchor"
     onBlur={[Function]}
     onClick={[Function]}
@@ -969,8 +969,8 @@ exports[`wonder-blocks-popover example 7 1`] = `
         }
       >
         <button
+          aria-disabled={false}
           className=""
-          disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
           onDragStart={[Function]}
@@ -1070,8 +1070,8 @@ exports[`wonder-blocks-popover example 7 1`] = `
           }
         />
         <button
+          aria-disabled={false}
           className=""
-          disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
           onDragStart={[Function]}

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

@@ -2,13 +2,33 @@
 import * as React from "react";
 import * as ReactDOM from "react-dom";
 import {mount} from "enzyme";
+import "jest-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 +36,7 @@ describe("FocusManager", () => {
                     <button data-next />
                 </div>
             );
-            mount(nodes);
+            mount(nodes, {attachTo: containerDiv});
         });
         const domNode = ((ReactDOM.findDOMNode(ref): any): HTMLElement);
 
@@ -38,10 +58,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 +81,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 +93,7 @@ describe("FocusManager", () => {
                     <button data-next />
                 </div>
             );
-            mount(nodes);
+            mount(nodes, {attachTo: containerDiv});
         });
         const domNode = ((ReactDOM.findDOMNode(ref): any): HTMLElement);
 
@@ -90,6 +115,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/__tests__/popover-anchor.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import PopoverAnchor from "../popover-anchor.js";
 

package/src/components/__tests__/popover-content.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import PopoverContent from "../popover-content.js";
 import PopoverContext from "../popover-context.js";

package/src/components/__tests__/popover-dialog.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {TooltipTail} from "@khanacademy/wonder-blocks-tooltip";
 

package/src/components/__tests__/popover-event-listener.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import {View} from "@khanacademy/wonder-blocks-core";
 import PopoverEventListener from "../popover-event-listener.js";

package/src/components/__tests__/popover.test.js

@@ -1,6 +1,7 @@
 // @flow
 import * as React from "react";
 import {mount} from "enzyme";
+import "jest-enzyme";
 
 import Popover from "../popover.js";
 import PopoverContent from "../popover-content.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

package/src/components/popover.stories.js

@@ -11,7 +11,14 @@ import Popover from "./popover.js";
 import PopoverContent from "./popover-content.js";
 
 export default {
-    title: "Popover",
+    title: "Floating/Popover",
+    parameters: {
+        // TODO(WB-1170): Reassess this after investigating more about Chromatic
+        // flakyness.
+        chromatic: {
+            delay: 400,
+        },
+    },
 };
 
 const styles = StyleSheet.create({
@@ -57,7 +64,7 @@ const BasePopoverExample = ({placement}: {|placement: Placement|}) => {
     );
 };
 
-export const popoverAlignment: StoryComponentType = () => (
+export const PopoverAlignment: StoryComponentType = () => (
     <View style={styles.container}>
         <BasePopoverExample placement="left" />
         <BasePopoverExample placement="bottom" />

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2018 Khan Academy
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.