@khanacademy/wonder-blocks-popover 2.0.4 → 2.0.6

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
 };