@khanacademy/wonder-blocks-popover 2.0.5 → 2.0.7

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @khanacademy/wonder-blocks-popover
 
+## 2.0.7
+
+### Patch Changes
+
+-   @khanacademy/wonder-blocks-icon@2.0.7
+-   @khanacademy/wonder-blocks-icon-button@4.0.7
+-   @khanacademy/wonder-blocks-modal@4.0.7
+-   @khanacademy/wonder-blocks-tooltip@2.0.7
+-   @khanacademy/wonder-blocks-typography@2.0.7
+
+## 2.0.6
+
+### Patch Changes
+
+-   c20f48f3: Don't transpile classes when building bundles
+-   Updated dependencies [c20f48f3]
+    -   @khanacademy/wonder-blocks-core@5.0.4
+    -   @khanacademy/wonder-blocks-icon@2.0.6
+    -   @khanacademy/wonder-blocks-icon-button@4.0.6
+    -   @khanacademy/wonder-blocks-modal@4.0.6
+    -   @khanacademy/wonder-blocks-tooltip@2.0.6
+    -   @khanacademy/wonder-blocks-typography@2.0.6
+
 ## 2.0.5
 
 ### Patch Changes

package/dist/components/popover-content.js.flow

@@ -60,16 +60,16 @@ declare type Props = {|
      */
     icon?:
       | string
-      | React.Element<React.ElementProps<"img">>
-      | React.Element<React.ElementProps<"svg">>,
+      | React.Element<"img">
+      | React.Element<"svg">,
 
     /**
      * Decorate the popover with a full-bleed illustration. It cannot be used at
      * the same time with icon.
      */
     image?:
-      | React.Element<React.ElementProps<"img">>
-      | React.Element<React.ElementProps<"svg">>,
+      | React.Element<"img">
+      | React.Element<"svg">,
 
     /**
      * When true, changes the popover dialog background to blue; otherwise, the

package/dist/components/popover-dialog.js.flow

@@ -20,8 +20,8 @@ declare type Props = {|
      * The content to render inside the dialog.
      */
     children:
-      | React.Element<React.ElementProps<typeof PopoverContent>>
-      | React.Element<React.ElementProps<typeof PopoverContentCore>>,
+      | React.Element<typeof PopoverContent>
+      | React.Element<typeof PopoverContentCore>,
 
     /**
      * The unique identifier to give to the popover content.

package/dist/components/popover.js.flow

@@ -10,8 +10,8 @@ import type { Placement } from "@khanacademy/wonder-blocks-tooltip";
 import PopoverContent from "./popover-content";
 import PopoverContentCore from "./popover-content-core";
 declare type PopoverContents =
-  | React.Element<React.ElementProps<typeof PopoverContent>>
-  | React.Element<React.ElementProps<typeof PopoverContentCore>>;
+  | React.Element<typeof PopoverContent>
+  | React.Element<typeof PopoverContentCore>;
 declare type Props = {|
   ...AriaProps,
   ...{|

package/dist/es/index.js

@@ -25,39 +25,20 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 const defaultContext = {
   close: undefined,
   placement: "top"
 };
 var PopoverContext = React.createContext(defaultContext);
 
-let PopoverAnchor = function (_React$Component) {
-  _inheritsLoose(PopoverAnchor, _React$Component);
-  function PopoverAnchor() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = PopoverAnchor.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+class PopoverAnchor extends React.Component {
+  componentDidMount() {
     const anchorNode = ReactDOM.findDOMNode(this);
     if (anchorNode) {
       this.props.anchorRef(anchorNode);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       id,
@@ -84,22 +65,16 @@ let PopoverAnchor = function (_React$Component) {
         } : onClick
       }));
     }
-  };
-  return PopoverAnchor;
-}(React.Component);
-
-let PopoverDialog = function (_React$Component) {
-  _inheritsLoose(PopoverDialog, _React$Component);
-  function PopoverDialog() {
-    return _React$Component.apply(this, arguments) || this;
   }
-  var _proto = PopoverDialog.prototype;
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+}
+
+class PopoverDialog extends React.Component {
+  componentDidUpdate(prevProps) {
     if (prevProps.placement !== this.props.placement) {
       this.props.onUpdate(this.props.placement);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       placement,
       children,
@@ -126,9 +101,8 @@ let PopoverDialog = function (_React$Component) {
       placement: placement,
       offset: tailOffset
     })));
-  };
-  return PopoverDialog;
-}(React.Component);
+  }
+}
 const styles$2 = StyleSheet.create({
   hide: {
     pointerEvents: "none",
@@ -155,13 +129,11 @@ function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
 
-let InitialFocus = function (_React$Component) {
-  _inheritsLoose(InitialFocus, _React$Component);
-  function InitialFocus(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.setInitialFocusableElement = node => {
-      const firstFocusableElement = _this.maybeGetInitialFocusElement(node) || _this.maybeGetFirstFocusableElement(node) || node;
+class InitialFocus extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.setInitialFocusableElement = node => {
+      const firstFocusableElement = this.maybeGetInitialFocusElement(node) || this.maybeGetFirstFocusableElement(node) || node;
       if (firstFocusableElement === node) {
         node.tabIndex = -1;
       }
@@ -169,17 +141,15 @@ let InitialFocus = function (_React$Component) {
         firstFocusableElement.focus();
       }, 0);
     };
-    return _this;
   }
-  var _proto = InitialFocus.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     const node = ReactDOM.findDOMNode(this);
     if (!node) {
       return;
     }
     this.setInitialFocusableElement(node);
-  };
-  _proto.maybeGetInitialFocusElement = function maybeGetInitialFocusElement(node) {
+  }
+  maybeGetInitialFocusElement(node) {
     const {
       initialFocusId
     } = this.props;
@@ -187,45 +157,42 @@ let InitialFocus = function (_React$Component) {
       return null;
     }
     return node.querySelector(`#${initialFocusId}`);
-  };
-  _proto.maybeGetFirstFocusableElement = function maybeGetFirstFocusableElement(node) {
+  }
+  maybeGetFirstFocusableElement(node) {
     const focusableElements = findFocusableNodes(node);
     if (!focusableElements.length) {
       return null;
     }
     return focusableElements[0];
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return this.props.children;
-  };
-  return InitialFocus;
-}(React.Component);
+  }
+}
 
-let FocusManager = function (_React$Component) {
-  _inheritsLoose(FocusManager, _React$Component);
-  function FocusManager(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.nextElementAfterPopover = void 0;
-    _this.rootNode = void 0;
-    _this.focusableElementsInPopover = [];
-    _this.addEventListeners = () => {
+class FocusManager extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.nextElementAfterPopover = void 0;
+    this.rootNode = void 0;
+    this.focusableElementsInPopover = [];
+    this.addEventListeners = () => {
       const {
         anchorElement
-      } = _this.props;
+      } = this.props;
       if (anchorElement) {
-        anchorElement.addEventListener("keydown", _this.handleKeydownPreviousFocusableElement, true);
+        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
       }
-      _this.nextElementAfterPopover = _this.getNextFocusableElement();
-      if (_this.nextElementAfterPopover) {
-        _this.nextElementAfterPopover.addEventListener("keydown", _this.handleKeydownNextFocusableElement, true);
+      this.nextElementAfterPopover = this.getNextFocusableElement();
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
       }
     };
-    _this.getNextFocusableElement = () => {
+    this.getNextFocusableElement = () => {
       const {
         anchorElement
-      } = _this.props;
-      if (!anchorElement || _this.nextElementAfterPopover) {
+      } = this.props;
+      if (!anchorElement || this.nextElementAfterPopover) {
         return;
       }
       const focusableElements = findFocusableNodes(document);
@@ -236,7 +203,7 @@ let FocusManager = function (_React$Component) {
       }
       return;
     };
-    _this.getComponentRootNode = node => {
+    this.getComponentRootNode = node => {
       if (!node) {
         return;
       }
@@ -244,42 +211,40 @@ let FocusManager = function (_React$Component) {
       if (!rootNode) {
         throw new Error("Assertion error: root node should exist after mount");
       }
-      _this.rootNode = rootNode;
-      _this.focusableElementsInPopover = findFocusableNodes(_this.rootNode);
+      this.rootNode = rootNode;
+      this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
     };
-    _this.handleFocusPreviousFocusableElement = () => {
-      if (_this.props.anchorElement) {
-        _this.props.anchorElement.focus();
+    this.handleFocusPreviousFocusableElement = () => {
+      if (this.props.anchorElement) {
+        this.props.anchorElement.focus();
       }
     };
-    _this.handleFocusNextFocusableElement = () => {
-      if (_this.nextElementAfterPopover) {
-        _this.nextElementAfterPopover.focus();
+    this.handleFocusNextFocusableElement = () => {
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.focus();
       }
     };
-    _this.handleKeydownPreviousFocusableElement = e => {
+    this.handleKeydownPreviousFocusableElement = e => {
       if (e.key === "Tab" && !e.shiftKey) {
         e.preventDefault();
-        _this.focusableElementsInPopover[0].focus();
+        this.focusableElementsInPopover[0].focus();
       }
     };
-    _this.handleKeydownNextFocusableElement = e => {
+    this.handleKeydownNextFocusableElement = e => {
       if (e.key === "Tab" && e.shiftKey) {
         e.preventDefault();
-        const lastElementIndex = _this.focusableElementsInPopover.length - 1;
-        _this.focusableElementsInPopover[lastElementIndex].focus();
+        const lastElementIndex = this.focusableElementsInPopover.length - 1;
+        this.focusableElementsInPopover[lastElementIndex].focus();
       }
     };
-    return _this;
   }
-  var _proto = FocusManager.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     this.addEventListeners();
-  };
-  _proto.componentDidUpdate = function componentDidUpdate() {
+  }
+  componentDidUpdate() {
     this.addEventListeners();
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     const {
       anchorElement
     } = this.props;
@@ -290,8 +255,8 @@ let FocusManager = function (_React$Component) {
     if (this.nextElementAfterPopover) {
       this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children
     } = this.props;
@@ -312,103 +277,94 @@ let FocusManager = function (_React$Component) {
         position: "fixed"
       }
     }));
-  };
-  return FocusManager;
-}(React.Component);
+  }
+}
 
-let PopoverEventListener = function (_React$Component) {
-  _inheritsLoose(PopoverEventListener, _React$Component);
-  function PopoverEventListener(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
+class PopoverEventListener extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       isFirstClick: true
     };
-    _this._handleKeyup = e => {
+    this._handleKeyup = e => {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        _this.props.onClose();
+        this.props.onClose();
       }
     };
-    _this._handleClick = e => {
+    this._handleClick = e => {
       var _this$props$contentRe;
-      if (_this.state.isFirstClick) {
-        _this.setState({
+      if (this.state.isFirstClick) {
+        this.setState({
           isFirstClick: false
         });
         return;
       }
-      const node = ReactDOM.findDOMNode((_this$props$contentRe = _this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
+      const node = ReactDOM.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
-        _this.props.onClose();
+        this.props.onClose();
       }
     };
-    return _this;
   }
-  var _proto = PopoverEventListener.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     window.addEventListener("keyup", this._handleKeyup);
     window.addEventListener("click", this._handleClick);
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     window.removeEventListener("keyup", this._handleKeyup);
     window.removeEventListener("click", this._handleClick);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return null;
-  };
-  return PopoverEventListener;
-}(React.Component);
+  }
+}
 
-let Popover = function (_React$Component) {
-  _inheritsLoose(Popover, _React$Component);
-  function Popover(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
-      opened: !!_this.props.opened,
+class Popover extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: !!this.props.opened,
       anchorElement: null,
-      placement: _this.props.placement
+      placement: this.props.placement
     };
-    _this.contentRef = React.createRef();
-    _this.handleClose = () => {
-      _this.setState({
+    this.contentRef = React.createRef();
+    this.handleClose = () => {
+      this.setState({
         opened: false
       }, () => {
-        _this.props.onClose == null ? void 0 : _this.props.onClose();
+        var _this$props$onClose, _this$props;
+        (_this$props$onClose = (_this$props = this.props).onClose) == null ? void 0 : _this$props$onClose.call(_this$props);
       });
     };
-    _this.handleOpen = () => {
-      if (_this.props.dismissEnabled && _this.state.opened) {
-        _this.setState({
+    this.handleOpen = () => {
+      if (this.props.dismissEnabled && this.state.opened) {
+        this.setState({
           opened: false
         });
       } else {
-        _this.setState({
+        this.setState({
           opened: true
         });
       }
     };
-    _this.updateRef = ref => {
+    this.updateRef = ref => {
       const actualRef = ref && ReactDOM.findDOMNode(ref);
-      if (actualRef && _this.state.anchorElement !== actualRef) {
-        _this.setState({
+      if (actualRef && this.state.anchorElement !== actualRef) {
+        this.setState({
           anchorElement: actualRef
         });
       }
     };
-    return _this;
   }
-  Popover.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props, state) {
     return {
       opened: typeof props.opened === "boolean" ? props.opened : state.opened
     };
-  };
-  var _proto = Popover.prototype;
-  _proto.renderContent = function renderContent() {
+  }
+  renderContent() {
     const {
       content
     } = this.props;
@@ -418,8 +374,8 @@ let Popover = function (_React$Component) {
     return React.cloneElement(popoverContents, {
       ref: this.contentRef
     });
-  };
-  _proto.renderPopper = function renderPopper(uniqueId) {
+  }
+  renderPopper(uniqueId) {
     const {
       initialFocusId,
       placement
@@ -440,11 +396,11 @@ let Popover = function (_React$Component) {
         placement
       })
     }), this.renderContent())));
-  };
-  _proto.getHost = function getHost() {
+  }
+  getHost() {
     return maybeGetPortalMountedModalHostElement(this.state.anchorElement) || document.body;
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       dismissEnabled,
@@ -473,20 +429,14 @@ let Popover = function (_React$Component) {
       onClose: this.handleClose,
       contentRef: this.contentRef
     }));
-  };
-  return Popover;
-}(React.Component);
+  }
+}
 Popover.defaultProps = {
   placement: "top"
 };
 
-let CloseButton = function (_React$Component) {
-  _inheritsLoose(CloseButton, _React$Component);
-  function CloseButton() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = CloseButton.prototype;
-  _proto.render = function render() {
+class CloseButton extends React.Component {
+  render() {
     const {
       light,
       "aria-label": ariaLabel,
@@ -506,21 +456,15 @@ let CloseButton = function (_React$Component) {
         testId: testId
       });
     });
-  };
-  return CloseButton;
-}(React.Component);
+  }
+}
 CloseButton.defaultProps = {
   light: true,
   "aria-label": "Close Popover"
 };
 
-let PopoverContentCore = function (_React$Component) {
-  _inheritsLoose(PopoverContentCore, _React$Component);
-  function PopoverContentCore() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = PopoverContentCore.prototype;
-  _proto.render = function render() {
+class PopoverContentCore extends React.Component {
+  render() {
     const {
       children,
       closeButtonLight,
@@ -539,9 +483,8 @@ let PopoverContentCore = function (_React$Component) {
       style: styles$1.closeButton,
       testId: `${testId || "popover"}-close-btn`
     }), children);
-  };
-  return PopoverContentCore;
-}(React.Component);
+  }
+}
 PopoverContentCore.defaultProps = {
   color: "white",
   closeButtonLight: false,
@@ -576,17 +519,15 @@ const styles$1 = StyleSheet.create({
 });
 
 const StyledImage = addStyle("img");
-let PopoverContent = function (_React$Component) {
-  _inheritsLoose(PopoverContent, _React$Component);
-  function PopoverContent(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.maybeRenderImage = ({
+class PopoverContent extends React.Component {
+  constructor(...args) {
+    super(...args);
+    this.maybeRenderImage = ({
       placement
     }) => {
       const {
         image
-      } = _this.props;
+      } = this.props;
       if (!image) {
         return null;
       }
@@ -594,10 +535,10 @@ let PopoverContent = function (_React$Component) {
         style: [styles.image, placement === "bottom" && styles.imageToBottom]
       }, image);
     };
-    _this.maybeRenderIcon = () => {
+    this.maybeRenderIcon = () => {
       const {
         icon
-      } = _this.props;
+      } = this.props;
       if (!icon) {
         return null;
       }
@@ -608,10 +549,10 @@ let PopoverContent = function (_React$Component) {
         style: styles.icon
       }));
     };
-    _this.maybeRenderActions = close => {
+    this.maybeRenderActions = close => {
       const {
         actions
-      } = _this.props;
+      } = this.props;
       if (!actions) {
         return null;
       }
@@ -621,10 +562,8 @@ let PopoverContent = function (_React$Component) {
         close: close
       }) : actions);
     };
-    return _this;
   }
-  var _proto = PopoverContent.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     const {
       icon,
       image
@@ -632,15 +571,15 @@ let PopoverContent = function (_React$Component) {
     if (image && icon) {
       throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.");
     }
-  };
-  _proto.validateProps = function validateProps({
+  }
+  validateProps({
     placement
   }) {
     if (this.props.image && (placement === "left" || placement === "right")) {
       throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.");
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       closeButtonLabel,
       closeButtonVisible,
@@ -677,9 +616,8 @@ let PopoverContent = function (_React$Component) {
         style: styles.title
       }, title), React.createElement(Body, null, content))), this.maybeRenderActions(close));
     });
-  };
-  return PopoverContent;
-}(React.Component);
+  }
+}
 PopoverContent.defaultProps = {
   closeButtonVisible: false
 };

package/dist/index.js

@@ -55,39 +55,20 @@ function _extends() {
   return _extends.apply(this, arguments);
 }
 
-function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
-    o.__proto__ = p;
-    return o;
-  };
-  return _setPrototypeOf(o, p);
-}
-
-function _inheritsLoose(subClass, superClass) {
-  subClass.prototype = Object.create(superClass.prototype);
-  subClass.prototype.constructor = subClass;
-  _setPrototypeOf(subClass, superClass);
-}
-
 const defaultContext = {
   close: undefined,
   placement: "top"
 };
 var PopoverContext = React__namespace.createContext(defaultContext);
 
-let PopoverAnchor = function (_React$Component) {
-  _inheritsLoose(PopoverAnchor, _React$Component);
-  function PopoverAnchor() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = PopoverAnchor.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+class PopoverAnchor extends React__namespace.Component {
+  componentDidMount() {
     const anchorNode = ReactDOM__namespace.findDOMNode(this);
     if (anchorNode) {
       this.props.anchorRef(anchorNode);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       id,
@@ -114,22 +95,16 @@ let PopoverAnchor = function (_React$Component) {
         } : onClick
       }));
     }
-  };
-  return PopoverAnchor;
-}(React__namespace.Component);
-
-let PopoverDialog = function (_React$Component) {
-  _inheritsLoose(PopoverDialog, _React$Component);
-  function PopoverDialog() {
-    return _React$Component.apply(this, arguments) || this;
   }
-  var _proto = PopoverDialog.prototype;
-  _proto.componentDidUpdate = function componentDidUpdate(prevProps) {
+}
+
+class PopoverDialog extends React__namespace.Component {
+  componentDidUpdate(prevProps) {
     if (prevProps.placement !== this.props.placement) {
       this.props.onUpdate(this.props.placement);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       placement,
       children,
@@ -156,9 +131,8 @@ let PopoverDialog = function (_React$Component) {
       placement: placement,
       offset: tailOffset
     })));
-  };
-  return PopoverDialog;
-}(React__namespace.Component);
+  }
+}
 const styles$2 = aphrodite.StyleSheet.create({
   hide: {
     pointerEvents: "none",
@@ -185,13 +159,11 @@ function findFocusableNodes(root) {
   return Array.from(root.querySelectorAll(FOCUSABLE_ELEMENTS));
 }
 
-let InitialFocus = function (_React$Component) {
-  _inheritsLoose(InitialFocus, _React$Component);
-  function InitialFocus(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.setInitialFocusableElement = node => {
-      const firstFocusableElement = _this.maybeGetInitialFocusElement(node) || _this.maybeGetFirstFocusableElement(node) || node;
+class InitialFocus extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.setInitialFocusableElement = node => {
+      const firstFocusableElement = this.maybeGetInitialFocusElement(node) || this.maybeGetFirstFocusableElement(node) || node;
       if (firstFocusableElement === node) {
         node.tabIndex = -1;
       }
@@ -199,17 +171,15 @@ let InitialFocus = function (_React$Component) {
         firstFocusableElement.focus();
       }, 0);
     };
-    return _this;
   }
-  var _proto = InitialFocus.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     const node = ReactDOM__namespace.findDOMNode(this);
     if (!node) {
       return;
     }
     this.setInitialFocusableElement(node);
-  };
-  _proto.maybeGetInitialFocusElement = function maybeGetInitialFocusElement(node) {
+  }
+  maybeGetInitialFocusElement(node) {
     const {
       initialFocusId
     } = this.props;
@@ -217,45 +187,42 @@ let InitialFocus = function (_React$Component) {
       return null;
     }
     return node.querySelector(`#${initialFocusId}`);
-  };
-  _proto.maybeGetFirstFocusableElement = function maybeGetFirstFocusableElement(node) {
+  }
+  maybeGetFirstFocusableElement(node) {
     const focusableElements = findFocusableNodes(node);
     if (!focusableElements.length) {
       return null;
     }
     return focusableElements[0];
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return this.props.children;
-  };
-  return InitialFocus;
-}(React__namespace.Component);
+  }
+}
 
-let FocusManager = function (_React$Component) {
-  _inheritsLoose(FocusManager, _React$Component);
-  function FocusManager(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.nextElementAfterPopover = void 0;
-    _this.rootNode = void 0;
-    _this.focusableElementsInPopover = [];
-    _this.addEventListeners = () => {
+class FocusManager extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.nextElementAfterPopover = void 0;
+    this.rootNode = void 0;
+    this.focusableElementsInPopover = [];
+    this.addEventListeners = () => {
       const {
         anchorElement
-      } = _this.props;
+      } = this.props;
       if (anchorElement) {
-        anchorElement.addEventListener("keydown", _this.handleKeydownPreviousFocusableElement, true);
+        anchorElement.addEventListener("keydown", this.handleKeydownPreviousFocusableElement, true);
       }
-      _this.nextElementAfterPopover = _this.getNextFocusableElement();
-      if (_this.nextElementAfterPopover) {
-        _this.nextElementAfterPopover.addEventListener("keydown", _this.handleKeydownNextFocusableElement, true);
+      this.nextElementAfterPopover = this.getNextFocusableElement();
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.addEventListener("keydown", this.handleKeydownNextFocusableElement, true);
       }
     };
-    _this.getNextFocusableElement = () => {
+    this.getNextFocusableElement = () => {
       const {
         anchorElement
-      } = _this.props;
-      if (!anchorElement || _this.nextElementAfterPopover) {
+      } = this.props;
+      if (!anchorElement || this.nextElementAfterPopover) {
         return;
       }
       const focusableElements = findFocusableNodes(document);
@@ -266,7 +233,7 @@ let FocusManager = function (_React$Component) {
       }
       return;
     };
-    _this.getComponentRootNode = node => {
+    this.getComponentRootNode = node => {
       if (!node) {
         return;
       }
@@ -274,42 +241,40 @@ let FocusManager = function (_React$Component) {
       if (!rootNode) {
         throw new Error("Assertion error: root node should exist after mount");
       }
-      _this.rootNode = rootNode;
-      _this.focusableElementsInPopover = findFocusableNodes(_this.rootNode);
+      this.rootNode = rootNode;
+      this.focusableElementsInPopover = findFocusableNodes(this.rootNode);
     };
-    _this.handleFocusPreviousFocusableElement = () => {
-      if (_this.props.anchorElement) {
-        _this.props.anchorElement.focus();
+    this.handleFocusPreviousFocusableElement = () => {
+      if (this.props.anchorElement) {
+        this.props.anchorElement.focus();
       }
     };
-    _this.handleFocusNextFocusableElement = () => {
-      if (_this.nextElementAfterPopover) {
-        _this.nextElementAfterPopover.focus();
+    this.handleFocusNextFocusableElement = () => {
+      if (this.nextElementAfterPopover) {
+        this.nextElementAfterPopover.focus();
       }
     };
-    _this.handleKeydownPreviousFocusableElement = e => {
+    this.handleKeydownPreviousFocusableElement = e => {
       if (e.key === "Tab" && !e.shiftKey) {
         e.preventDefault();
-        _this.focusableElementsInPopover[0].focus();
+        this.focusableElementsInPopover[0].focus();
       }
     };
-    _this.handleKeydownNextFocusableElement = e => {
+    this.handleKeydownNextFocusableElement = e => {
       if (e.key === "Tab" && e.shiftKey) {
         e.preventDefault();
-        const lastElementIndex = _this.focusableElementsInPopover.length - 1;
-        _this.focusableElementsInPopover[lastElementIndex].focus();
+        const lastElementIndex = this.focusableElementsInPopover.length - 1;
+        this.focusableElementsInPopover[lastElementIndex].focus();
       }
     };
-    return _this;
   }
-  var _proto = FocusManager.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     this.addEventListeners();
-  };
-  _proto.componentDidUpdate = function componentDidUpdate() {
+  }
+  componentDidUpdate() {
     this.addEventListeners();
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     const {
       anchorElement
     } = this.props;
@@ -320,8 +285,8 @@ let FocusManager = function (_React$Component) {
     if (this.nextElementAfterPopover) {
       this.nextElementAfterPopover.removeEventListener("keydown", this.handleKeydownNextFocusableElement, true);
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children
     } = this.props;
@@ -342,103 +307,94 @@ let FocusManager = function (_React$Component) {
         position: "fixed"
       }
     }));
-  };
-  return FocusManager;
-}(React__namespace.Component);
+  }
+}
 
-let PopoverEventListener = function (_React$Component) {
-  _inheritsLoose(PopoverEventListener, _React$Component);
-  function PopoverEventListener(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
+class PopoverEventListener extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
       isFirstClick: true
     };
-    _this._handleKeyup = e => {
+    this._handleKeyup = e => {
       if (e.key === "Escape") {
         e.preventDefault();
         e.stopPropagation();
-        _this.props.onClose();
+        this.props.onClose();
       }
     };
-    _this._handleClick = e => {
+    this._handleClick = e => {
       var _this$props$contentRe;
-      if (_this.state.isFirstClick) {
-        _this.setState({
+      if (this.state.isFirstClick) {
+        this.setState({
           isFirstClick: false
         });
         return;
       }
-      const node = ReactDOM__namespace.findDOMNode((_this$props$contentRe = _this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
+      const node = ReactDOM__namespace.findDOMNode((_this$props$contentRe = this.props.contentRef) == null ? void 0 : _this$props$contentRe.current);
       if (node && !node.contains(e.target)) {
         e.preventDefault();
         e.stopPropagation();
-        _this.props.onClose();
+        this.props.onClose();
       }
     };
-    return _this;
   }
-  var _proto = PopoverEventListener.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     window.addEventListener("keyup", this._handleKeyup);
     window.addEventListener("click", this._handleClick);
-  };
-  _proto.componentWillUnmount = function componentWillUnmount() {
+  }
+  componentWillUnmount() {
     window.removeEventListener("keyup", this._handleKeyup);
     window.removeEventListener("click", this._handleClick);
-  };
-  _proto.render = function render() {
+  }
+  render() {
     return null;
-  };
-  return PopoverEventListener;
-}(React__namespace.Component);
+  }
+}
 
-let Popover = function (_React$Component) {
-  _inheritsLoose(Popover, _React$Component);
-  function Popover(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.state = {
-      opened: !!_this.props.opened,
+class Popover extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.state = {
+      opened: !!this.props.opened,
       anchorElement: null,
-      placement: _this.props.placement
+      placement: this.props.placement
     };
-    _this.contentRef = React__namespace.createRef();
-    _this.handleClose = () => {
-      _this.setState({
+    this.contentRef = React__namespace.createRef();
+    this.handleClose = () => {
+      this.setState({
         opened: false
       }, () => {
-        _this.props.onClose == null ? void 0 : _this.props.onClose();
+        var _this$props$onClose, _this$props;
+        (_this$props$onClose = (_this$props = this.props).onClose) == null ? void 0 : _this$props$onClose.call(_this$props);
       });
     };
-    _this.handleOpen = () => {
-      if (_this.props.dismissEnabled && _this.state.opened) {
-        _this.setState({
+    this.handleOpen = () => {
+      if (this.props.dismissEnabled && this.state.opened) {
+        this.setState({
           opened: false
         });
       } else {
-        _this.setState({
+        this.setState({
           opened: true
         });
       }
     };
-    _this.updateRef = ref => {
+    this.updateRef = ref => {
       const actualRef = ref && ReactDOM__namespace.findDOMNode(ref);
-      if (actualRef && _this.state.anchorElement !== actualRef) {
-        _this.setState({
+      if (actualRef && this.state.anchorElement !== actualRef) {
+        this.setState({
           anchorElement: actualRef
         });
       }
     };
-    return _this;
   }
-  Popover.getDerivedStateFromProps = function getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props, state) {
     return {
       opened: typeof props.opened === "boolean" ? props.opened : state.opened
     };
-  };
-  var _proto = Popover.prototype;
-  _proto.renderContent = function renderContent() {
+  }
+  renderContent() {
     const {
       content
     } = this.props;
@@ -448,8 +404,8 @@ let Popover = function (_React$Component) {
     return React__namespace.cloneElement(popoverContents, {
       ref: this.contentRef
     });
-  };
-  _proto.renderPopper = function renderPopper(uniqueId) {
+  }
+  renderPopper(uniqueId) {
     const {
       initialFocusId,
       placement
@@ -470,11 +426,11 @@ let Popover = function (_React$Component) {
         placement
       })
     }), this.renderContent())));
-  };
-  _proto.getHost = function getHost() {
+  }
+  getHost() {
     return wonderBlocksModal.maybeGetPortalMountedModalHostElement(this.state.anchorElement) || document.body;
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       children,
       dismissEnabled,
@@ -503,20 +459,14 @@ let Popover = function (_React$Component) {
       onClose: this.handleClose,
       contentRef: this.contentRef
     }));
-  };
-  return Popover;
-}(React__namespace.Component);
+  }
+}
 Popover.defaultProps = {
   placement: "top"
 };
 
-let CloseButton = function (_React$Component) {
-  _inheritsLoose(CloseButton, _React$Component);
-  function CloseButton() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = CloseButton.prototype;
-  _proto.render = function render() {
+class CloseButton extends React__namespace.Component {
+  render() {
     const {
       light,
       "aria-label": ariaLabel,
@@ -536,21 +486,15 @@ let CloseButton = function (_React$Component) {
         testId: testId
       });
     });
-  };
-  return CloseButton;
-}(React__namespace.Component);
+  }
+}
 CloseButton.defaultProps = {
   light: true,
   "aria-label": "Close Popover"
 };
 
-let PopoverContentCore = function (_React$Component) {
-  _inheritsLoose(PopoverContentCore, _React$Component);
-  function PopoverContentCore() {
-    return _React$Component.apply(this, arguments) || this;
-  }
-  var _proto = PopoverContentCore.prototype;
-  _proto.render = function render() {
+class PopoverContentCore extends React__namespace.Component {
+  render() {
     const {
       children,
       closeButtonLight,
@@ -569,9 +513,8 @@ let PopoverContentCore = function (_React$Component) {
       style: styles$1.closeButton,
       testId: `${testId || "popover"}-close-btn`
     }), children);
-  };
-  return PopoverContentCore;
-}(React__namespace.Component);
+  }
+}
 PopoverContentCore.defaultProps = {
   color: "white",
   closeButtonLight: false,
@@ -606,17 +549,15 @@ const styles$1 = aphrodite.StyleSheet.create({
 });
 
 const StyledImage = wonderBlocksCore.addStyle("img");
-let PopoverContent = function (_React$Component) {
-  _inheritsLoose(PopoverContent, _React$Component);
-  function PopoverContent(...args) {
-    var _this;
-    _this = _React$Component.call.apply(_React$Component, [this].concat(args)) || this;
-    _this.maybeRenderImage = ({
+class PopoverContent extends React__namespace.Component {
+  constructor(...args) {
+    super(...args);
+    this.maybeRenderImage = ({
       placement
     }) => {
       const {
         image
-      } = _this.props;
+      } = this.props;
       if (!image) {
         return null;
       }
@@ -624,10 +565,10 @@ let PopoverContent = function (_React$Component) {
         style: [styles.image, placement === "bottom" && styles.imageToBottom]
       }, image);
     };
-    _this.maybeRenderIcon = () => {
+    this.maybeRenderIcon = () => {
       const {
         icon
-      } = _this.props;
+      } = this.props;
       if (!icon) {
         return null;
       }
@@ -638,10 +579,10 @@ let PopoverContent = function (_React$Component) {
         style: styles.icon
       }));
     };
-    _this.maybeRenderActions = close => {
+    this.maybeRenderActions = close => {
       const {
         actions
-      } = _this.props;
+      } = this.props;
       if (!actions) {
         return null;
       }
@@ -651,10 +592,8 @@ let PopoverContent = function (_React$Component) {
         close: close
       }) : actions);
     };
-    return _this;
   }
-  var _proto = PopoverContent.prototype;
-  _proto.componentDidMount = function componentDidMount() {
+  componentDidMount() {
     const {
       icon,
       image
@@ -662,15 +601,15 @@ let PopoverContent = function (_React$Component) {
     if (image && icon) {
       throw new Error("'image' and 'icon' cannot be used at the same time. You can fix this by either removing 'image' or 'icon' from your instance.");
     }
-  };
-  _proto.validateProps = function validateProps({
+  }
+  validateProps({
     placement
   }) {
     if (this.props.image && (placement === "left" || placement === "right")) {
       throw new Error("'image' can only be vertically placed. You can fix this by either changing `placement` to `top` or `bottom` or removing the `image` prop inside `content`.");
     }
-  };
-  _proto.render = function render() {
+  }
+  render() {
     const {
       closeButtonLabel,
       closeButtonVisible,
@@ -707,9 +646,8 @@ let PopoverContent = function (_React$Component) {
         style: styles.title
       }, title), React__namespace.createElement(wonderBlocksTypography.Body, null, content))), this.maybeRenderActions(close));
     });
-  };
-  return PopoverContent;
-}(React__namespace.Component);
+  }
+}
 PopoverContent.defaultProps = {
   closeButtonVisible: false
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "2.0.5",
+  "version": "2.0.7",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -17,13 +17,13 @@
   "dependencies": {
     "@babel/runtime": "^7.18.6",
     "@khanacademy/wonder-blocks-color": "^2.0.1",
-    "@khanacademy/wonder-blocks-core": "^5.0.3",
-    "@khanacademy/wonder-blocks-icon": "^2.0.5",
-    "@khanacademy/wonder-blocks-icon-button": "^4.0.5",
-    "@khanacademy/wonder-blocks-modal": "^4.0.5",
+    "@khanacademy/wonder-blocks-core": "^5.0.4",
+    "@khanacademy/wonder-blocks-icon": "^2.0.7",
+    "@khanacademy/wonder-blocks-icon-button": "^4.0.7",
+    "@khanacademy/wonder-blocks-modal": "^4.0.7",
     "@khanacademy/wonder-blocks-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-tooltip": "^2.0.5",
-    "@khanacademy/wonder-blocks-typography": "^2.0.5"
+    "@khanacademy/wonder-blocks-tooltip": "^2.0.7",
+    "@khanacademy/wonder-blocks-typography": "^2.0.7"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -33,6 +33,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.4"
+    "wb-dev-build-settings": "^0.9.6"
   }
 }