@khanacademy/wonder-blocks-popover 2.0.4 → 2.0.6

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/dist/index.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for index
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 import Popover from "./components/popover";
 import PopoverContent from "./components/popover-content";
 import PopoverContentCore from "./components/popover-content-core";

package/dist/util/util.js.flow

@@ -1,10 +1,9 @@
 /**
- * Flowtype definitions for util
+ * Flowtype definitions for data
  * Generated by Flowgen from a Typescript Definition
  * Flowgen v1.21.0
  * @flow
  */
-
 declare export function findFocusableNodes(
   root: HTMLElement | Document
 ): Array<HTMLElement>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-popover",
-  "version": "2.0.4",
+  "version": "2.0.6",
   "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.4",
-    "@khanacademy/wonder-blocks-icon-button": "^4.0.4",
-    "@khanacademy/wonder-blocks-modal": "^4.0.4",
+    "@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-spacing": "^4.0.1",
-    "@khanacademy/wonder-blocks-tooltip": "^2.0.4",
-    "@khanacademy/wonder-blocks-typography": "^2.0.4"
+    "@khanacademy/wonder-blocks-tooltip": "^2.0.6",
+    "@khanacademy/wonder-blocks-typography": "^2.0.6"
   },
   "peerDependencies": {
     "@popperjs/core": "^2.10.1",
@@ -33,6 +33,6 @@
     "react-popper": "^2.0.0"
   },
   "devDependencies": {
-    "wb-dev-build-settings": "^0.9.3"
+    "wb-dev-build-settings": "^0.9.5"
   }
 }