@hig/flyout - npm Package Compare versions

Comparing version 1.3.1 to 2.0.0

build/index.es.js

 import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
-import React, { Component } from 'react';
+import React, { useEffect, useState, useRef } from 'react';
 import PropTypes from 'prop-types';
@@ -37,106 +37,75 @@ import { css, cx } from 'emotion';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var TRANSITION_DURATION = 300;
 
-var ContainerTransition = function (_Component) {
-  _inherits(ContainerTransition, _Component);
+var ContainerTransition = function ContainerTransition(props) {
+  var open = props.open;
 
-  function ContainerTransition() {
-    var _ref;
+  var _useState = useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      inside = _useState2[0],
+      setInside = _useState2[1];
 
-    var _temp, _this, _ret;
+  var _useState3 = useState(open),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isVisible = _useState4[0],
+      setIsVisible = _useState4[1];
 
-    _classCallCheck(this, ContainerTransition);
+  /**
+   * @param {string} transitionState
+   * @returns {string}
+   */
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ContainerTransition.__proto__ || Object.getPrototypeOf(ContainerTransition)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      in: _this.props.open,
-      isVisible: _this.props.open
-    }, _this.handleExit = function () {
-      _this.hide();
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
+  var getTransitionStatus = function getTransitionStatus(transitionState) {
+    return !isVisible ? transitionStatuses.HIDDEN : transitionState;
+  };
 
-  _createClass(ContainerTransition, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (!prevProps.open && this.props.open) {
-        this.show();
-      } else if (prevProps.open && !this.props.open) {
-        this.beginExit();
-      }
-    }
+  var beginExit = function beginExit() {
+    window.requestAnimationFrame(function () {
+      setInside(false);
+    });
+  };
 
-    /**
-     * @param {string} transitionState
-     * @returns {string}
-     */
+  var show = function show() {
+    window.requestAnimationFrame(function () {
+      setIsVisible(true);
+    });
+  };
 
-  }, {
-    key: "getTransitionStatus",
-    value: function getTransitionStatus(transitionState) {
-      return !this.state.isVisible ? transitionStatuses.HIDDEN : transitionState;
-    }
-  }, {
-    key: "beginExit",
-    value: function beginExit() {
-      var _this2 = this;
+  var hide = function hide() {
+    window.requestAnimationFrame(function () {
+      setIsVisible(false);
+    });
+  };
 
-      window.requestAnimationFrame(function () {
-        _this2.setState({ in: false });
-      });
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      var _this3 = this;
+  var handleExit = function handleExit() {
+    return hide();
+  };
 
-      window.requestAnimationFrame(function () {
-        _this3.setState({ isVisible: true }, function () {
-          window.requestAnimationFrame(function () {
-            _this3.setState({ in: true });
-          });
-        });
-      });
+  useEffect(function () {
+    if (open) {
+      show();
+    } else if (!open) {
+      beginExit();
     }
-  }, {
-    key: "hide",
-    value: function hide() {
-      var _this4 = this;
+  }, [open]);
 
-      window.requestAnimationFrame(function () {
-        _this4.setState({ isVisible: false });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
+  useEffect(function () {
+    if (isVisible) window.requestAnimationFrame(function () {
+      return setInside(true);
+    });
+  }, [isVisible]);
 
-      return React.createElement(
-        Transition,
-        {
-          "in": this.state.in,
-          onExited: this.handleExit,
-          timeout: TRANSITION_DURATION
-        },
-        function (transitionState) {
-          return _this5.props.children(_this5.getTransitionStatus(transitionState));
-        }
-      );
+  return React.createElement(
+    Transition,
+    { "in": inside, onExited: handleExit, timeout: TRANSITION_DURATION },
+    function (transitionState) {
+      return props.children(getTransitionStatus(transitionState));
     }
-  }]);
+  );
+};
 
-  return ContainerTransition;
-}(Component);
+ContainerTransition.displayName = "ContainerTransition";
 
@@ -147,2 +116,3 @@ ContainerTransition.propTypes = {
 };
+
 ContainerTransition.defaultProps = {
@@ -974,71 +944,44 @@ open: false
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var HoverBehavior = function HoverBehavior(props) {
+  var openOnHoverDelay = props.openOnHoverDelay,
+      onMouseEnter = props.onMouseEnter;
 
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var _useState = useState(false),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      hasHover = _useState2[0],
+      setHasHover = _useState2[1];
 
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var focusTimeout = function focusTimeout(event) {
+    return setTimeout(function () {
+      setHasHover(true);
+      onMouseEnter(event);
+    }, openOnHoverDelay);
+  };
 
-var HoverBehavior = function (_Component) {
-  _inherits$1(HoverBehavior, _Component);
-
-  function HoverBehavior(props) {
-    _classCallCheck$1(this, HoverBehavior);
-
-    // Binding in the constructor because performance
-    var _this = _possibleConstructorReturn$1(this, (HoverBehavior.__proto__ || Object.getPrototypeOf(HoverBehavior)).call(this, props));
-
-    _this.handleFocus = _this.handleFocus.bind(_this);
-    _this.handleBlur = _this.handleBlur.bind(_this);
-
-    _this.state = {
-      hasHover: false
-    };
-    return _this;
-  }
-
-  _createClass$1(HoverBehavior, [{
-    key: "handleFocus",
-    value: function handleFocus(event) {
-      var _this2 = this;
-
-      var _props = this.props,
-          openOnHoverDelay = _props.openOnHoverDelay,
-          onMouseEnter = _props.onMouseEnter;
-
-
-      if (onMouseEnter) {
-        this.focusTimeout = setTimeout(function () {
-          _this2.setState({ hasHover: true });
-          onMouseEnter(event);
-        }, openOnHoverDelay);
-      }
-
-      this.setState({ hasHover: true });
+  var handleFocus = function handleFocus(event) {
+    if (onMouseEnter) {
+      focusTimeout(event);
     }
-  }, {
-    key: "handleBlur",
-    value: function handleBlur(event) {
-      clearTimeout(this.focusTimeout);
-      this.setState({ hasHover: false });
+    setHasHover(true);
+  };
 
-      if (this.props.onMouseLeave) {
-        this.props.onMouseLeave(event);
-      }
+  var handleBlur = function handleBlur(event) {
+    clearTimeout(focusTimeout(event));
+    setHasHover(false);
+    if (props.onMouseLeave) {
+      props.onMouseLeave(event);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children({
-        hasHover: this.state.hasHover,
-        onMouseEnter: this.handleFocus,
-        onMouseLeave: this.handleBlur
-      });
-    }
-  }]);
+  };
 
-  return HoverBehavior;
-}(Component);
+  return props.children({
+    hasHover: hasHover,
+    onMouseEnter: handleFocus,
+    onMouseLeave: handleBlur
+  });
+};
 
+HoverBehavior.displayName = "HoverBehavior";
+
 HoverBehavior.propTypes = {
@@ -1065,36 +1008,2 @@ /**
 };
-HoverBehavior.__docgenInfo = {
-  "description": "",
-  "displayName": "HoverBehavior",
-  "props": {
-    "children": {
-      "type": {
-        "name": "func"
-      },
-      "required": true,
-      "description": "Generally the Flyout target and presenter"
-    },
-    "openOnHoverDelay": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Amount of time between mouse enter is reported and when\nonMouseEnter event should fire"
-    },
-    "onMouseEnter": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Function called when the user enters the visual space\noccupied by the component"
-    },
-    "onMouseLeave": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Function called when the user leaves the visual space\noccupied by the component"
-    }
-  }
-};
 
@@ -1265,12 +1174,6 @@ function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$2 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /** @typedef {import("./getCoordinates").Coordinates} Coordinates */
@@ -1296,318 +1199,270 @@
 
-var Flyout = function (_Component) {
-  _inherits$2(Flyout, _Component);
+var Flyout = function Flyout(props) {
+  var _useState = useState(props.defaultOpen),
+      _useState2 = _slicedToArray$2(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
 
-  function Flyout() {
-    var _ref;
+  var actionRef = useRef();
+  var panelRef = useRef();
+  var pointerRef = useRef();
+  var wrapperRef = useRef();
 
-    var _temp, _this, _ret;
+  /**
+   * @returns {Coordinates}
+   */
+  var getCoordinatesMethod = function getCoordinatesMethod() {
+    var alterCoordinates = props.alterCoordinates,
+        anchorPoint = props.anchorPoint,
+        fallbackAnchorPoints = props.fallbackAnchorPoints;
 
-    _classCallCheck$2(this, Flyout);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (!actionRef.current || !panelRef.current || !pointerRef.current || typeof window === "undefined") {
+      return DEFAULT_COORDINATES;
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      open: _this.props.defaultOpen
-    }, _this.handleChildMouseEnter = function () {
-      if (_this.props.openOnHover) {
-        _this.setOpen(true);
-      }
-    }, _this.handleChildMouseLeave = function () {
-      if (_this.props.openOnHover) {
-        _this.setOpen(false);
-      }
-    }, _this.handleChildClick = function () {
-      if (!_this.isOpenControlled()) {
-        _this.toggleOpen();
-      }
-    }, _this.handleBodyClick = function (event) {
-      var wrapperRef = _this.state.wrapperRef;
-      var onClickOutside = _this.props.onClickOutside;
+    var actionRect = actionRef.current.getBoundingClientRect();
+    var panelRect = panelRef.current.getBoundingClientRect();
+    var pointerRect = pointerRef.current.getBoundingClientRect();
+    var viewportRect = window.document.documentElement.getBoundingClientRect();
+    var coordinates = getCoordinates({
+      anchorPoint: anchorPoint,
+      actionRect: actionRect,
+      fallbackAnchorPoints: fallbackAnchorPoints,
+      panelRect: panelRect,
+      pointerRect: pointerRect,
+      viewportRect: viewportRect
+    });
 
-      var flyoutClicked = event.target === wrapperRef || wrapperRef.contains(event.target);
+    if (alterCoordinates) {
+      var rects = {
+        actionRect: actionRect,
+        panelRect: panelRect,
+        pointerRect: pointerRect,
+        viewportRect: viewportRect
+      };
+      return alterCoordinates(coordinates, rects);
+    }
 
-      if (flyoutClicked || !_this.isOpen()) return;
-      if (onClickOutside) onClickOutside(event);
-      if (!_this.isOpenControlled()) _this.toggleOpen();
-    }, _this.refAction = function (actionRef) {
-      _this.setState({ actionRef: actionRef });
-    }, _this.refPointer = function (pointerRef) {
-      _this.setState({ pointerRef: pointerRef });
-    }, _this.refPanel = function (panelRef) {
-      _this.setState({ panelRef: panelRef });
-    }, _this.refWrapper = function (wrapperRef) {
-      _this.setState({ wrapperRef: wrapperRef });
-    }, _this.hideFlyout = function () {
-      _this.setOpen(false);
-    }, _this.renderPresenter = function (transitionStatus) {
-      var _this2 = _this,
-          handleChildMouseEnter = _this2.handleChildMouseEnter,
-          handleChildMouseLeave = _this2.handleChildMouseLeave,
-          refAction = _this2.refAction,
-          refPointer = _this2.refPointer,
-          refWrapper = _this2.refWrapper;
+    return coordinates;
+  };
 
-      var _this$props = _this.props,
-          openOnHoverDelay = _this$props.openOnHoverDelay,
-          pointer = _this$props.pointer,
-          stylesheet = _this$props.stylesheet,
-          otherProps = _objectWithoutProperties$4(_this$props, ["openOnHoverDelay", "pointer", "stylesheet"]);
+  /**
+   * @param {boolean} open
+   */
+  var setOpenMethod = function setOpenMethod(openRef) {
+    var onClose = props.onClose,
+        onOpen = props.onOpen;
 
-      var className = otherProps.className;
+    if (openRef && onOpen) {
+      onOpen();
+    } else if (!openRef && onClose) {
+      onClose();
+    }
+    setOpen(openRef);
+  };
 
-      var panel = _this.renderPanel({ transitionStatus: transitionStatus });
+  var isOpenControlled = function isOpenControlled() {
+    return props.open !== undefined;
+  };
 
-      var _this$getCoordinates = _this.getCoordinates(),
-          anchorPoint = _this$getCoordinates.anchorPoint,
-          containerPosition = _this$getCoordinates.containerPosition,
-          pointerPosition = _this$getCoordinates.pointerPosition;
+  var isOpen = function isOpen() {
+    return isOpenControlled() ? props.open : open;
+  };
 
-      return React.createElement(
-        HoverBehavior,
-        {
-          onMouseEnter: handleChildMouseEnter,
-          onMouseLeave: handleChildMouseLeave,
-          openOnHoverDelay: openOnHoverDelay
-        },
-        function (_ref2) {
-          var onMouseEnter = _ref2.onMouseEnter,
-              onMouseLeave = _ref2.onMouseLeave;
-          return React.createElement(
-            FlyoutPresenter,
-            {
-              anchorPoint: anchorPoint,
-              className: className,
-              stylesheet: stylesheet,
-              containerPosition: containerPosition,
-              panel: panel,
-              pointer: pointer,
-              pointerPosition: pointerPosition,
-              refAction: refAction,
-              refPointer: refPointer,
-              refWrapper: refWrapper,
-              transitionStatus: transitionStatus
-            },
-            _this.renderChildren(onMouseEnter, onMouseLeave)
-          );
-        }
-      );
-    }, _temp), _possibleConstructorReturn$2(_this, _ret);
-  }
+  var handleChildMouseEnter = function handleChildMouseEnter() {
+    if (props.openOnHover) {
+      setOpenMethod(true);
+    }
+  };
 
-  /** @type {State} */
+  var handleChildMouseLeave = function handleChildMouseLeave() {
+    if (props.openOnHover) {
+      setOpenMethod(false);
+    }
+  };
 
+  /**
+   * @param {HTMLElement} actionRef
+   */
+  var refAction = function refAction(actionRefParam) {
+    actionRef.current = actionRefParam;
+  };
 
-  _createClass$2(Flyout, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.document.body.addEventListener("click", this.handleBodyClick);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.document.body.removeEventListener("click", this.handleBodyClick);
-    }
+  /**
+   * @param {SVGSVGElement} pointerRef
+   */
+  var refPointer = function refPointer(pointerRefParam) {
+    pointerRef.current = pointerRefParam;
+  };
 
-    /**
-     * @returns {Coordinates}
-     */
+  /**
+   * @param {HTMLElement} panelRef
+   */
+  var refPanel = function refPanel(panelRefParam) {
+    panelRef.current = panelRefParam;
+  };
 
-  }, {
-    key: "getCoordinates",
-    value: function getCoordinates$$1() {
-      var _props = this.props,
-          alterCoordinates = _props.alterCoordinates,
-          anchorPoint = _props.anchorPoint,
-          fallbackAnchorPoints = _props.fallbackAnchorPoints;
-      var _state = this.state,
-          actionRef = _state.actionRef,
-          panelRef = _state.panelRef,
-          pointerRef = _state.pointerRef;
+  /**
+   * @param {HTMLDivElement} wrapperRef
+   */
+  var refWrapper = function refWrapper(wrapperRefParam) {
+    wrapperRef.current = wrapperRefParam;
+  };
 
+  var hideFlyout = function hideFlyout() {
+    setOpenMethod(false);
+  };
 
-      if (!actionRef || !panelRef || !pointerRef || typeof window === "undefined") {
-        return DEFAULT_COORDINATES;
-      }
+  var toggleOpen = function toggleOpen() {
+    setOpenMethod(!open);
+  };
 
-      var actionRect = actionRef.getBoundingClientRect();
-      var panelRect = panelRef.getBoundingClientRect();
-      var pointerRect = pointerRef.getBoundingClientRect();
-      var viewportRect = window.document.documentElement.getBoundingClientRect();
-      var coordinates = getCoordinates({
-        anchorPoint: anchorPoint,
-        actionRect: actionRect,
-        fallbackAnchorPoints: fallbackAnchorPoints,
-        panelRect: panelRect,
-        pointerRect: pointerRect,
-        viewportRect: viewportRect
-      });
+  var renderContent = function renderContent() {
+    var content = props.content;
 
-      if (alterCoordinates) {
-        var rects = {
-          actionRect: actionRect,
-          panelRect: panelRect,
-          pointerRect: pointerRect,
-          viewportRect: viewportRect
-        };
 
-        return alterCoordinates(coordinates, rects);
-      }
-
-      return coordinates;
+    if (typeof content === "function") {
+      return content({ hideFlyout: hideFlyout });
     }
 
-    /**
-     * @param {boolean} open
-     */
+    return content;
+  };
 
-  }, {
-    key: "setOpen",
-    value: function setOpen(open) {
-      var _props2 = this.props,
-          onClose = _props2.onClose,
-          onOpen = _props2.onOpen;
+  /**
+   * @param {MouseEvent} event
+   */
+  var handleBodyClick = function handleBodyClick(event) {
+    var onClickOutside = props.onClickOutside;
 
+    var flyoutClicked = event.target === wrapperRef || wrapperRef.current.contains(event.target);
 
-      if (open && onOpen) {
-        onOpen();
-      } else if (!open && onClose) {
-        onClose();
-      }
+    if (flyoutClicked || !isOpen()) return;
+    if (onClickOutside) onClickOutside(event);
+    if (!isOpenControlled()) toggleOpen();
+  };
 
-      this.setState({ open: open });
+  var handleChildClick = function handleChildClick() {
+    if (!isOpenControlled()) {
+      toggleOpen();
     }
-  }, {
-    key: "isOpenControlled",
-    value: function isOpenControlled() {
-      return this.props.open !== undefined;
-    }
-  }, {
-    key: "isOpen",
-    value: function isOpen() {
-      return this.isOpenControlled() ? this.props.open : this.state.open;
-    }
+  };
 
-    /**
-     * @param {MouseEvent} event
-     */
+  /**
+   * @returns {PanelRendererPayload}
+   */
+  var createPanelPayload = function createPanelPayload() {
+    var maxHeight = props.maxHeight,
+        onScroll = props.onScroll,
+        stylesheet = props.stylesheet,
+        otherProps = _objectWithoutProperties$4(props, ["maxHeight", "onScroll", "stylesheet"]);
 
+    var className = otherProps.className;
 
-    /**
-     * @param {HTMLElement} actionRef
-     */
 
+    return {
+      hideFlyout: hideFlyout,
+      maxHeight: maxHeight,
+      content: renderContent(),
+      handleScroll: onScroll,
+      innerRef: refPanel,
+      className: className,
+      stylesheet: stylesheet
+    };
+  };
 
-    /**
-     * @param {SVGSVGElement} pointerRef
-     */
+  var renderPanel = function renderPanel(_ref) {
+    var transitionStatus = _ref.transitionStatus;
+    var panel = props.panel;
 
 
-    /**
-     * @param {HTMLElement} panelRef
-     */
-
-
-    /**
-     * @param {HTMLDivElement} wrapperRef
-     */
-
-  }, {
-    key: "toggleOpen",
-    value: function toggleOpen() {
-      this.setOpen(!this.state.open);
+    if (typeof panel === "function") {
+      return panel(_extends$1({}, createPanelPayload(), {
+        transitionStatus: transitionStatus
+      }));
     }
 
-    /**
-     * @returns {PanelRendererPayload}
-     */
+    return panel;
+  };
 
-  }, {
-    key: "createPanelPayload",
-    value: function createPanelPayload() {
-      var hideFlyout = this.hideFlyout;
+  var renderChildren = function renderChildren(onMouseEnter, onMouseLeave) {
+    var children = props.children;
 
-      var _props3 = this.props,
-          maxHeight = _props3.maxHeight,
-          onScroll = _props3.onScroll,
-          stylesheet = _props3.stylesheet,
-          otherProps = _objectWithoutProperties$4(_props3, ["maxHeight", "onScroll", "stylesheet"]);
-
-      var className = otherProps.className;
-
-
-      return {
-        hideFlyout: hideFlyout,
-        maxHeight: maxHeight,
-        content: this.renderContent(),
-        handleScroll: onScroll,
-        innerRef: this.refPanel,
-        className: className,
-        stylesheet: stylesheet
-      };
+    if (typeof children === "function") {
+      return children({ handleClick: handleChildClick });
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var content = this.props.content;
-      var hideFlyout = this.hideFlyout;
 
-
-      if (typeof content === "function") {
-        return content({ hideFlyout: hideFlyout });
-      }
-
-      return content;
+    if (React.Children.count(children) === 1) {
+      return React.cloneElement(children, {
+        onClick: combineEventHandlers(handleChildClick, children.props.onClick),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+      });
     }
-  }, {
-    key: "renderPanel",
-    value: function renderPanel(_ref3) {
-      var transitionStatus = _ref3.transitionStatus;
-      var panel = this.props.panel;
 
+    return children;
+  };
 
-      if (typeof panel === "function") {
-        return panel(_extends$1({}, this.createPanelPayload(), {
-          transitionStatus: transitionStatus
-        }));
-      }
+  var renderPresenter = function renderPresenter(transitionStatus) {
+    var openOnHoverDelay = props.openOnHoverDelay,
+        pointer = props.pointer,
+        stylesheet = props.stylesheet,
+        otherProps = _objectWithoutProperties$4(props, ["openOnHoverDelay", "pointer", "stylesheet"]);
 
-      return panel;
-    }
-  }, {
-    key: "renderChildren",
-    value: function renderChildren(onMouseEnter, onMouseLeave) {
-      var children = this.props.children;
-      var handleChildClick = this.handleChildClick;
+    var className = otherProps.className;
 
+    var panel = renderPanel({ transitionStatus: transitionStatus });
 
-      if (typeof children === "function") {
-        return children({ handleClick: handleChildClick });
-      }
+    var _getCoordinatesMethod = getCoordinatesMethod(),
+        anchorPoint = _getCoordinatesMethod.anchorPoint,
+        containerPosition = _getCoordinatesMethod.containerPosition,
+        pointerPosition = _getCoordinatesMethod.pointerPosition;
 
-      if (React.Children.count(children) === 1) {
-        return React.cloneElement(children, {
-          onClick: combineEventHandlers(handleChildClick, children.props.onClick),
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave
-        });
+    return React.createElement(
+      HoverBehavior,
+      {
+        onMouseEnter: handleChildMouseEnter,
+        onMouseLeave: handleChildMouseLeave,
+        openOnHoverDelay: openOnHoverDelay
+      },
+      function (_ref2) {
+        var onMouseEnter = _ref2.onMouseEnter,
+            onMouseLeave = _ref2.onMouseLeave;
+        return React.createElement(
+          FlyoutPresenter,
+          {
+            anchorPoint: anchorPoint,
+            className: className,
+            stylesheet: stylesheet,
+            containerPosition: containerPosition,
+            panel: panel,
+            pointer: pointer,
+            pointerPosition: pointerPosition,
+            refAction: refAction,
+            refPointer: refPointer,
+            refWrapper: refWrapper,
+            transitionStatus: transitionStatus
+          },
+          renderChildren(onMouseEnter, onMouseLeave)
+        );
       }
+    );
+  };
 
-      return children;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return React.createElement(
-        ContainerTransition,
-        { open: this.isOpen() },
-        this.renderPresenter
-      );
-    }
-  }]);
+  useEffect(function () {
+    window.document.body.addEventListener("click", handleBodyClick);
+    return function () {
+      window.document.body.removeEventListener("click", handleBodyClick);
+    };
+  });
 
-  return Flyout;
-}(Component);
+  return React.createElement(
+    ContainerTransition,
+    { open: isOpen() },
+    renderPresenter
+  );
+};
 
+Flyout.displayName = "Flyout";
+
 Flyout.propTypes = {
@@ -1656,2 +1511,3 @@ /** Manipulate flyout coordinates before rendering */
 };
+
 Flyout.defaultProps = {
@@ -1666,9 +1522,10 @@ anchorPoint: DEFAULT_COORDINATES.anchorPoint,
    */
-  panel: function panel(_ref4) {
-    var innerRef = _ref4.innerRef,
-        content = _ref4.content,
-        handleScroll = _ref4.handleScroll,
-        maxHeight = _ref4.maxHeight,
-        className = _ref4.className,
-        stylesheet = _ref4.stylesheet;
+  // eslint-disable-next-line react/prop-types
+  panel: function panel(_ref3) {
+    var innerRef = _ref3.innerRef,
+        content = _ref3.content,
+        handleScroll = _ref3.handleScroll,
+        maxHeight = _ref3.maxHeight,
+        className = _ref3.className,
+        stylesheet = _ref3.stylesheet;
 
@@ -1777,3 +1634,3 @@ return React.createElement(
       "defaultValue": {
-        "value": "function(\n    {\n      innerRef,\n      content,\n      handleScroll,\n      maxHeight,\n      className,\n      stylesheet\n    }\n) {\n  return (\n    <PanelContainerPresenter\n      innerRef={innerRef}\n      maxHeight={maxHeight}\n      className={className}\n      stylesheet={stylesheet}\n    >\n      <PanelPresenter\n        onScroll={handleScroll}\n        className={className}\n        stylesheet={stylesheet}\n      >\n        {content}\n      </PanelPresenter>\n    </PanelContainerPresenter>\n  );\n}",
+        "value": "function({ innerRef, content, handleScroll, maxHeight, className, stylesheet }) {\n  return (\n    <PanelContainerPresenter\n      innerRef={innerRef}\n      maxHeight={maxHeight}\n      className={className}\n      stylesheet={stylesheet}\n    >\n      <PanelPresenter\n        onScroll={handleScroll}\n        className={className}\n        stylesheet={stylesheet}\n      >\n        {content}\n      </PanelPresenter>\n    </PanelContainerPresenter>\n  );\n}",
         "computed": false
@@ -1780,0 +1637,0 @@ }

build/index.js

@@ -45,106 +45,75 @@ 'use strict';
 
-var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 var TRANSITION_DURATION = 300;
 
-var ContainerTransition = function (_Component) {
-  _inherits(ContainerTransition, _Component);
+var ContainerTransition = function ContainerTransition(props) {
+  var open = props.open;
 
-  function ContainerTransition() {
-    var _ref;
+  var _useState = React.useState(open),
+      _useState2 = _slicedToArray(_useState, 2),
+      inside = _useState2[0],
+      setInside = _useState2[1];
 
-    var _temp, _this, _ret;
+  var _useState3 = React.useState(open),
+      _useState4 = _slicedToArray(_useState3, 2),
+      isVisible = _useState4[0],
+      setIsVisible = _useState4[1];
 
-    _classCallCheck(this, ContainerTransition);
+  /**
+   * @param {string} transitionState
+   * @returns {string}
+   */
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = ContainerTransition.__proto__ || Object.getPrototypeOf(ContainerTransition)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      in: _this.props.open,
-      isVisible: _this.props.open
-    }, _this.handleExit = function () {
-      _this.hide();
-    }, _temp), _possibleConstructorReturn(_this, _ret);
-  }
+  var getTransitionStatus = function getTransitionStatus(transitionState) {
+    return !isVisible ? transitionStatuses.HIDDEN : transitionState;
+  };
 
-  _createClass(ContainerTransition, [{
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      if (!prevProps.open && this.props.open) {
-        this.show();
-      } else if (prevProps.open && !this.props.open) {
-        this.beginExit();
-      }
-    }
+  var beginExit = function beginExit() {
+    window.requestAnimationFrame(function () {
+      setInside(false);
+    });
+  };
 
-    /**
-     * @param {string} transitionState
-     * @returns {string}
-     */
+  var show = function show() {
+    window.requestAnimationFrame(function () {
+      setIsVisible(true);
+    });
+  };
 
-  }, {
-    key: "getTransitionStatus",
-    value: function getTransitionStatus(transitionState) {
-      return !this.state.isVisible ? transitionStatuses.HIDDEN : transitionState;
-    }
-  }, {
-    key: "beginExit",
-    value: function beginExit() {
-      var _this2 = this;
+  var hide = function hide() {
+    window.requestAnimationFrame(function () {
+      setIsVisible(false);
+    });
+  };
 
-      window.requestAnimationFrame(function () {
-        _this2.setState({ in: false });
-      });
-    }
-  }, {
-    key: "show",
-    value: function show() {
-      var _this3 = this;
+  var handleExit = function handleExit() {
+    return hide();
+  };
 
-      window.requestAnimationFrame(function () {
-        _this3.setState({ isVisible: true }, function () {
-          window.requestAnimationFrame(function () {
-            _this3.setState({ in: true });
-          });
-        });
-      });
+  React.useEffect(function () {
+    if (open) {
+      show();
+    } else if (!open) {
+      beginExit();
     }
-  }, {
-    key: "hide",
-    value: function hide() {
-      var _this4 = this;
+  }, [open]);
 
-      window.requestAnimationFrame(function () {
-        _this4.setState({ isVisible: false });
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this5 = this;
+  React.useEffect(function () {
+    if (isVisible) window.requestAnimationFrame(function () {
+      return setInside(true);
+    });
+  }, [isVisible]);
 
-      return React__default.createElement(
-        Transition__default,
-        {
-          "in": this.state.in,
-          onExited: this.handleExit,
-          timeout: TRANSITION_DURATION
-        },
-        function (transitionState) {
-          return _this5.props.children(_this5.getTransitionStatus(transitionState));
-        }
-      );
+  return React__default.createElement(
+    Transition__default,
+    { "in": inside, onExited: handleExit, timeout: TRANSITION_DURATION },
+    function (transitionState) {
+      return props.children(getTransitionStatus(transitionState));
     }
-  }]);
+  );
+};
 
-  return ContainerTransition;
-}(React.Component);
+ContainerTransition.displayName = "ContainerTransition";
 
@@ -155,2 +124,3 @@ ContainerTransition.propTypes = {
 };
+
 ContainerTransition.defaultProps = {
@@ -982,71 +952,44 @@ open: false
 
-var _createClass$1 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+var HoverBehavior = function HoverBehavior(props) {
+  var openOnHoverDelay = props.openOnHoverDelay,
+      onMouseEnter = props.onMouseEnter;
 
-function _possibleConstructorReturn$1(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
+  var _useState = React.useState(false),
+      _useState2 = _slicedToArray$1(_useState, 2),
+      hasHover = _useState2[0],
+      setHasHover = _useState2[1];
 
-function _inherits$1(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
+  var focusTimeout = function focusTimeout(event) {
+    return setTimeout(function () {
+      setHasHover(true);
+      onMouseEnter(event);
+    }, openOnHoverDelay);
+  };
 
-var HoverBehavior = function (_Component) {
-  _inherits$1(HoverBehavior, _Component);
-
-  function HoverBehavior(props) {
-    _classCallCheck$1(this, HoverBehavior);
-
-    // Binding in the constructor because performance
-    var _this = _possibleConstructorReturn$1(this, (HoverBehavior.__proto__ || Object.getPrototypeOf(HoverBehavior)).call(this, props));
-
-    _this.handleFocus = _this.handleFocus.bind(_this);
-    _this.handleBlur = _this.handleBlur.bind(_this);
-
-    _this.state = {
-      hasHover: false
-    };
-    return _this;
-  }
-
-  _createClass$1(HoverBehavior, [{
-    key: "handleFocus",
-    value: function handleFocus(event) {
-      var _this2 = this;
-
-      var _props = this.props,
-          openOnHoverDelay = _props.openOnHoverDelay,
-          onMouseEnter = _props.onMouseEnter;
-
-
-      if (onMouseEnter) {
-        this.focusTimeout = setTimeout(function () {
-          _this2.setState({ hasHover: true });
-          onMouseEnter(event);
-        }, openOnHoverDelay);
-      }
-
-      this.setState({ hasHover: true });
+  var handleFocus = function handleFocus(event) {
+    if (onMouseEnter) {
+      focusTimeout(event);
     }
-  }, {
-    key: "handleBlur",
-    value: function handleBlur(event) {
-      clearTimeout(this.focusTimeout);
-      this.setState({ hasHover: false });
+    setHasHover(true);
+  };
 
-      if (this.props.onMouseLeave) {
-        this.props.onMouseLeave(event);
-      }
+  var handleBlur = function handleBlur(event) {
+    clearTimeout(focusTimeout(event));
+    setHasHover(false);
+    if (props.onMouseLeave) {
+      props.onMouseLeave(event);
     }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children({
-        hasHover: this.state.hasHover,
-        onMouseEnter: this.handleFocus,
-        onMouseLeave: this.handleBlur
-      });
-    }
-  }]);
+  };
 
-  return HoverBehavior;
-}(React.Component);
+  return props.children({
+    hasHover: hasHover,
+    onMouseEnter: handleFocus,
+    onMouseLeave: handleBlur
+  });
+};
 
+HoverBehavior.displayName = "HoverBehavior";
+
 HoverBehavior.propTypes = {
@@ -1073,36 +1016,2 @@ /**
 };
-HoverBehavior.__docgenInfo = {
-  "description": "",
-  "displayName": "HoverBehavior",
-  "props": {
-    "children": {
-      "type": {
-        "name": "func"
-      },
-      "required": true,
-      "description": "Generally the Flyout target and presenter"
-    },
-    "openOnHoverDelay": {
-      "type": {
-        "name": "number"
-      },
-      "required": false,
-      "description": "Amount of time between mouse enter is reported and when\nonMouseEnter event should fire"
-    },
-    "onMouseEnter": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Function called when the user enters the visual space\noccupied by the component"
-    },
-    "onMouseLeave": {
-      "type": {
-        "name": "func"
-      },
-      "required": false,
-      "description": "Function called when the user leaves the visual space\noccupied by the component"
-    }
-  }
-};
 
@@ -1273,12 +1182,6 @@ function _objectWithoutProperties$2(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-var _createClass$2 = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
+var _slicedToArray$2 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
 
 function _objectWithoutProperties$4(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
 
-function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-function _possibleConstructorReturn$2(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-function _inherits$2(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
 /** @typedef {import("./getCoordinates").Coordinates} Coordinates */
@@ -1304,318 +1207,270 @@
 
-var Flyout = function (_Component) {
-  _inherits$2(Flyout, _Component);
+var Flyout = function Flyout(props) {
+  var _useState = React.useState(props.defaultOpen),
+      _useState2 = _slicedToArray$2(_useState, 2),
+      open = _useState2[0],
+      setOpen = _useState2[1];
 
-  function Flyout() {
-    var _ref;
+  var actionRef = React.useRef();
+  var panelRef = React.useRef();
+  var pointerRef = React.useRef();
+  var wrapperRef = React.useRef();
 
-    var _temp, _this, _ret;
+  /**
+   * @returns {Coordinates}
+   */
+  var getCoordinatesMethod = function getCoordinatesMethod() {
+    var alterCoordinates = props.alterCoordinates,
+        anchorPoint = props.anchorPoint,
+        fallbackAnchorPoints = props.fallbackAnchorPoints;
 
-    _classCallCheck$2(this, Flyout);
 
-    for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
+    if (!actionRef.current || !panelRef.current || !pointerRef.current || typeof window === "undefined") {
+      return DEFAULT_COORDINATES;
     }
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$2(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
-      open: _this.props.defaultOpen
-    }, _this.handleChildMouseEnter = function () {
-      if (_this.props.openOnHover) {
-        _this.setOpen(true);
-      }
-    }, _this.handleChildMouseLeave = function () {
-      if (_this.props.openOnHover) {
-        _this.setOpen(false);
-      }
-    }, _this.handleChildClick = function () {
-      if (!_this.isOpenControlled()) {
-        _this.toggleOpen();
-      }
-    }, _this.handleBodyClick = function (event) {
-      var wrapperRef = _this.state.wrapperRef;
-      var onClickOutside = _this.props.onClickOutside;
+    var actionRect = actionRef.current.getBoundingClientRect();
+    var panelRect = panelRef.current.getBoundingClientRect();
+    var pointerRect = pointerRef.current.getBoundingClientRect();
+    var viewportRect = window.document.documentElement.getBoundingClientRect();
+    var coordinates = getCoordinates({
+      anchorPoint: anchorPoint,
+      actionRect: actionRect,
+      fallbackAnchorPoints: fallbackAnchorPoints,
+      panelRect: panelRect,
+      pointerRect: pointerRect,
+      viewportRect: viewportRect
+    });
 
-      var flyoutClicked = event.target === wrapperRef || wrapperRef.contains(event.target);
+    if (alterCoordinates) {
+      var rects = {
+        actionRect: actionRect,
+        panelRect: panelRect,
+        pointerRect: pointerRect,
+        viewportRect: viewportRect
+      };
+      return alterCoordinates(coordinates, rects);
+    }
 
-      if (flyoutClicked || !_this.isOpen()) return;
-      if (onClickOutside) onClickOutside(event);
-      if (!_this.isOpenControlled()) _this.toggleOpen();
-    }, _this.refAction = function (actionRef) {
-      _this.setState({ actionRef: actionRef });
-    }, _this.refPointer = function (pointerRef) {
-      _this.setState({ pointerRef: pointerRef });
-    }, _this.refPanel = function (panelRef) {
-      _this.setState({ panelRef: panelRef });
-    }, _this.refWrapper = function (wrapperRef) {
-      _this.setState({ wrapperRef: wrapperRef });
-    }, _this.hideFlyout = function () {
-      _this.setOpen(false);
-    }, _this.renderPresenter = function (transitionStatus) {
-      var _this2 = _this,
-          handleChildMouseEnter = _this2.handleChildMouseEnter,
-          handleChildMouseLeave = _this2.handleChildMouseLeave,
-          refAction = _this2.refAction,
-          refPointer = _this2.refPointer,
-          refWrapper = _this2.refWrapper;
+    return coordinates;
+  };
 
-      var _this$props = _this.props,
-          openOnHoverDelay = _this$props.openOnHoverDelay,
-          pointer = _this$props.pointer,
-          stylesheet = _this$props.stylesheet,
-          otherProps = _objectWithoutProperties$4(_this$props, ["openOnHoverDelay", "pointer", "stylesheet"]);
+  /**
+   * @param {boolean} open
+   */
+  var setOpenMethod = function setOpenMethod(openRef) {
+    var onClose = props.onClose,
+        onOpen = props.onOpen;
 
-      var className = otherProps.className;
+    if (openRef && onOpen) {
+      onOpen();
+    } else if (!openRef && onClose) {
+      onClose();
+    }
+    setOpen(openRef);
+  };
 
-      var panel = _this.renderPanel({ transitionStatus: transitionStatus });
+  var isOpenControlled = function isOpenControlled() {
+    return props.open !== undefined;
+  };
 
-      var _this$getCoordinates = _this.getCoordinates(),
-          anchorPoint = _this$getCoordinates.anchorPoint,
-          containerPosition = _this$getCoordinates.containerPosition,
-          pointerPosition = _this$getCoordinates.pointerPosition;
+  var isOpen = function isOpen() {
+    return isOpenControlled() ? props.open : open;
+  };
 
-      return React__default.createElement(
-        HoverBehavior,
-        {
-          onMouseEnter: handleChildMouseEnter,
-          onMouseLeave: handleChildMouseLeave,
-          openOnHoverDelay: openOnHoverDelay
-        },
-        function (_ref2) {
-          var onMouseEnter = _ref2.onMouseEnter,
-              onMouseLeave = _ref2.onMouseLeave;
-          return React__default.createElement(
-            FlyoutPresenter,
-            {
-              anchorPoint: anchorPoint,
-              className: className,
-              stylesheet: stylesheet,
-              containerPosition: containerPosition,
-              panel: panel,
-              pointer: pointer,
-              pointerPosition: pointerPosition,
-              refAction: refAction,
-              refPointer: refPointer,
-              refWrapper: refWrapper,
-              transitionStatus: transitionStatus
-            },
-            _this.renderChildren(onMouseEnter, onMouseLeave)
-          );
-        }
-      );
-    }, _temp), _possibleConstructorReturn$2(_this, _ret);
-  }
+  var handleChildMouseEnter = function handleChildMouseEnter() {
+    if (props.openOnHover) {
+      setOpenMethod(true);
+    }
+  };
 
-  /** @type {State} */
+  var handleChildMouseLeave = function handleChildMouseLeave() {
+    if (props.openOnHover) {
+      setOpenMethod(false);
+    }
+  };
 
+  /**
+   * @param {HTMLElement} actionRef
+   */
+  var refAction = function refAction(actionRefParam) {
+    actionRef.current = actionRefParam;
+  };
 
-  _createClass$2(Flyout, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.document.body.addEventListener("click", this.handleBodyClick);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      window.document.body.removeEventListener("click", this.handleBodyClick);
-    }
+  /**
+   * @param {SVGSVGElement} pointerRef
+   */
+  var refPointer = function refPointer(pointerRefParam) {
+    pointerRef.current = pointerRefParam;
+  };
 
-    /**
-     * @returns {Coordinates}
-     */
+  /**
+   * @param {HTMLElement} panelRef
+   */
+  var refPanel = function refPanel(panelRefParam) {
+    panelRef.current = panelRefParam;
+  };
 
-  }, {
-    key: "getCoordinates",
-    value: function getCoordinates$$1() {
-      var _props = this.props,
-          alterCoordinates = _props.alterCoordinates,
-          anchorPoint = _props.anchorPoint,
-          fallbackAnchorPoints = _props.fallbackAnchorPoints;
-      var _state = this.state,
-          actionRef = _state.actionRef,
-          panelRef = _state.panelRef,
-          pointerRef = _state.pointerRef;
+  /**
+   * @param {HTMLDivElement} wrapperRef
+   */
+  var refWrapper = function refWrapper(wrapperRefParam) {
+    wrapperRef.current = wrapperRefParam;
+  };
 
+  var hideFlyout = function hideFlyout() {
+    setOpenMethod(false);
+  };
 
-      if (!actionRef || !panelRef || !pointerRef || typeof window === "undefined") {
-        return DEFAULT_COORDINATES;
-      }
+  var toggleOpen = function toggleOpen() {
+    setOpenMethod(!open);
+  };
 
-      var actionRect = actionRef.getBoundingClientRect();
-      var panelRect = panelRef.getBoundingClientRect();
-      var pointerRect = pointerRef.getBoundingClientRect();
-      var viewportRect = window.document.documentElement.getBoundingClientRect();
-      var coordinates = getCoordinates({
-        anchorPoint: anchorPoint,
-        actionRect: actionRect,
-        fallbackAnchorPoints: fallbackAnchorPoints,
-        panelRect: panelRect,
-        pointerRect: pointerRect,
-        viewportRect: viewportRect
-      });
+  var renderContent = function renderContent() {
+    var content = props.content;
 
-      if (alterCoordinates) {
-        var rects = {
-          actionRect: actionRect,
-          panelRect: panelRect,
-          pointerRect: pointerRect,
-          viewportRect: viewportRect
-        };
 
-        return alterCoordinates(coordinates, rects);
-      }
-
-      return coordinates;
+    if (typeof content === "function") {
+      return content({ hideFlyout: hideFlyout });
     }
 
-    /**
-     * @param {boolean} open
-     */
+    return content;
+  };
 
-  }, {
-    key: "setOpen",
-    value: function setOpen(open) {
-      var _props2 = this.props,
-          onClose = _props2.onClose,
-          onOpen = _props2.onOpen;
+  /**
+   * @param {MouseEvent} event
+   */
+  var handleBodyClick = function handleBodyClick(event) {
+    var onClickOutside = props.onClickOutside;
 
+    var flyoutClicked = event.target === wrapperRef || wrapperRef.current.contains(event.target);
 
-      if (open && onOpen) {
-        onOpen();
-      } else if (!open && onClose) {
-        onClose();
-      }
+    if (flyoutClicked || !isOpen()) return;
+    if (onClickOutside) onClickOutside(event);
+    if (!isOpenControlled()) toggleOpen();
+  };
 
-      this.setState({ open: open });
+  var handleChildClick = function handleChildClick() {
+    if (!isOpenControlled()) {
+      toggleOpen();
     }
-  }, {
-    key: "isOpenControlled",
-    value: function isOpenControlled() {
-      return this.props.open !== undefined;
-    }
-  }, {
-    key: "isOpen",
-    value: function isOpen() {
-      return this.isOpenControlled() ? this.props.open : this.state.open;
-    }
+  };
 
-    /**
-     * @param {MouseEvent} event
-     */
+  /**
+   * @returns {PanelRendererPayload}
+   */
+  var createPanelPayload = function createPanelPayload() {
+    var maxHeight = props.maxHeight,
+        onScroll = props.onScroll,
+        stylesheet = props.stylesheet,
+        otherProps = _objectWithoutProperties$4(props, ["maxHeight", "onScroll", "stylesheet"]);
 
+    var className = otherProps.className;
 
-    /**
-     * @param {HTMLElement} actionRef
-     */
 
+    return {
+      hideFlyout: hideFlyout,
+      maxHeight: maxHeight,
+      content: renderContent(),
+      handleScroll: onScroll,
+      innerRef: refPanel,
+      className: className,
+      stylesheet: stylesheet
+    };
+  };
 
-    /**
-     * @param {SVGSVGElement} pointerRef
-     */
+  var renderPanel = function renderPanel(_ref) {
+    var transitionStatus = _ref.transitionStatus;
+    var panel = props.panel;
 
 
-    /**
-     * @param {HTMLElement} panelRef
-     */
-
-
-    /**
-     * @param {HTMLDivElement} wrapperRef
-     */
-
-  }, {
-    key: "toggleOpen",
-    value: function toggleOpen() {
-      this.setOpen(!this.state.open);
+    if (typeof panel === "function") {
+      return panel(_extends$1({}, createPanelPayload(), {
+        transitionStatus: transitionStatus
+      }));
     }
 
-    /**
-     * @returns {PanelRendererPayload}
-     */
+    return panel;
+  };
 
-  }, {
-    key: "createPanelPayload",
-    value: function createPanelPayload() {
-      var hideFlyout = this.hideFlyout;
+  var renderChildren = function renderChildren(onMouseEnter, onMouseLeave) {
+    var children = props.children;
 
-      var _props3 = this.props,
-          maxHeight = _props3.maxHeight,
-          onScroll = _props3.onScroll,
-          stylesheet = _props3.stylesheet,
-          otherProps = _objectWithoutProperties$4(_props3, ["maxHeight", "onScroll", "stylesheet"]);
-
-      var className = otherProps.className;
-
-
-      return {
-        hideFlyout: hideFlyout,
-        maxHeight: maxHeight,
-        content: this.renderContent(),
-        handleScroll: onScroll,
-        innerRef: this.refPanel,
-        className: className,
-        stylesheet: stylesheet
-      };
+    if (typeof children === "function") {
+      return children({ handleClick: handleChildClick });
     }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      var content = this.props.content;
-      var hideFlyout = this.hideFlyout;
 
-
-      if (typeof content === "function") {
-        return content({ hideFlyout: hideFlyout });
-      }
-
-      return content;
+    if (React__default.Children.count(children) === 1) {
+      return React__default.cloneElement(children, {
+        onClick: utils.combineEventHandlers(handleChildClick, children.props.onClick),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave
+      });
     }
-  }, {
-    key: "renderPanel",
-    value: function renderPanel(_ref3) {
-      var transitionStatus = _ref3.transitionStatus;
-      var panel = this.props.panel;
 
+    return children;
+  };
 
-      if (typeof panel === "function") {
-        return panel(_extends$1({}, this.createPanelPayload(), {
-          transitionStatus: transitionStatus
-        }));
-      }
+  var renderPresenter = function renderPresenter(transitionStatus) {
+    var openOnHoverDelay = props.openOnHoverDelay,
+        pointer = props.pointer,
+        stylesheet = props.stylesheet,
+        otherProps = _objectWithoutProperties$4(props, ["openOnHoverDelay", "pointer", "stylesheet"]);
 
-      return panel;
-    }
-  }, {
-    key: "renderChildren",
-    value: function renderChildren(onMouseEnter, onMouseLeave) {
-      var children = this.props.children;
-      var handleChildClick = this.handleChildClick;
+    var className = otherProps.className;
 
+    var panel = renderPanel({ transitionStatus: transitionStatus });
 
-      if (typeof children === "function") {
-        return children({ handleClick: handleChildClick });
-      }
+    var _getCoordinatesMethod = getCoordinatesMethod(),
+        anchorPoint = _getCoordinatesMethod.anchorPoint,
+        containerPosition = _getCoordinatesMethod.containerPosition,
+        pointerPosition = _getCoordinatesMethod.pointerPosition;
 
-      if (React__default.Children.count(children) === 1) {
-        return React__default.cloneElement(children, {
-          onClick: utils.combineEventHandlers(handleChildClick, children.props.onClick),
-          onMouseEnter: onMouseEnter,
-          onMouseLeave: onMouseLeave
-        });
+    return React__default.createElement(
+      HoverBehavior,
+      {
+        onMouseEnter: handleChildMouseEnter,
+        onMouseLeave: handleChildMouseLeave,
+        openOnHoverDelay: openOnHoverDelay
+      },
+      function (_ref2) {
+        var onMouseEnter = _ref2.onMouseEnter,
+            onMouseLeave = _ref2.onMouseLeave;
+        return React__default.createElement(
+          FlyoutPresenter,
+          {
+            anchorPoint: anchorPoint,
+            className: className,
+            stylesheet: stylesheet,
+            containerPosition: containerPosition,
+            panel: panel,
+            pointer: pointer,
+            pointerPosition: pointerPosition,
+            refAction: refAction,
+            refPointer: refPointer,
+            refWrapper: refWrapper,
+            transitionStatus: transitionStatus
+          },
+          renderChildren(onMouseEnter, onMouseLeave)
+        );
       }
+    );
+  };
 
-      return children;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return React__default.createElement(
-        ContainerTransition,
-        { open: this.isOpen() },
-        this.renderPresenter
-      );
-    }
-  }]);
+  React.useEffect(function () {
+    window.document.body.addEventListener("click", handleBodyClick);
+    return function () {
+      window.document.body.removeEventListener("click", handleBodyClick);
+    };
+  });
 
-  return Flyout;
-}(React.Component);
+  return React__default.createElement(
+    ContainerTransition,
+    { open: isOpen() },
+    renderPresenter
+  );
+};
 
+Flyout.displayName = "Flyout";
+
 Flyout.propTypes = {
@@ -1664,2 +1519,3 @@ /** Manipulate flyout coordinates before rendering */
 };
+
 Flyout.defaultProps = {
@@ -1674,9 +1530,10 @@ anchorPoint: DEFAULT_COORDINATES.anchorPoint,
    */
-  panel: function panel(_ref4) {
-    var innerRef = _ref4.innerRef,
-        content = _ref4.content,
-        handleScroll = _ref4.handleScroll,
-        maxHeight = _ref4.maxHeight,
-        className = _ref4.className,
-        stylesheet = _ref4.stylesheet;
+  // eslint-disable-next-line react/prop-types
+  panel: function panel(_ref3) {
+    var innerRef = _ref3.innerRef,
+        content = _ref3.content,
+        handleScroll = _ref3.handleScroll,
+        maxHeight = _ref3.maxHeight,
+        className = _ref3.className,
+        stylesheet = _ref3.stylesheet;
 
@@ -1785,3 +1642,3 @@ return React__default.createElement(
       "defaultValue": {
-        "value": "function(\n    {\n      innerRef,\n      content,\n      handleScroll,\n      maxHeight,\n      className,\n      stylesheet\n    }\n) {\n  return (\n    <PanelContainerPresenter\n      innerRef={innerRef}\n      maxHeight={maxHeight}\n      className={className}\n      stylesheet={stylesheet}\n    >\n      <PanelPresenter\n        onScroll={handleScroll}\n        className={className}\n        stylesheet={stylesheet}\n      >\n        {content}\n      </PanelPresenter>\n    </PanelContainerPresenter>\n  );\n}",
+        "value": "function({ innerRef, content, handleScroll, maxHeight, className, stylesheet }) {\n  return (\n    <PanelContainerPresenter\n      innerRef={innerRef}\n      maxHeight={maxHeight}\n      className={className}\n      stylesheet={stylesheet}\n    >\n      <PanelPresenter\n        onScroll={handleScroll}\n        className={className}\n        stylesheet={stylesheet}\n      >\n        {content}\n      </PanelPresenter>\n    </PanelContainerPresenter>\n  );\n}",
         "computed": false
@@ -1788,0 +1645,0 @@ }

CHANGELOG.md

@@ -0,1 +1,13 @@
+# [@hig/flyout-v2.0.0](https://github.com/Autodesk/hig/compare/@hig/flyout@1.3.1...@hig/flyout@2.0.0) (2022-01-13)
+
+
+### Code Refactoring
+
+* Major Release - React 17 Upgrade ([2523711](https://github.com/Autodesk/hig/commit/2523711))
+
+
+### BREAKING CHANGES
+
+* This release includes upgrading to React 17 and all associated libraries. The components have also had structural changes, utilizing stateless components and hooks. There should be no change in look or behavior of components. The code usage is the same so if you’re already on react 17 you can bump the version directly. If you’re on an old version of react you’ll need to upgrade your project’s react first to 17 and then the HIG components. This upgrade also means no more fixes for the react 15 version but it will still be available for download from NPM. You can fork the repo and make fixes with the older version if there is something critical past this release date.
+
 # [@hig/flyout-v1.3.1](https://github.com/Autodesk/hig/compare/@hig/flyout@1.3.0...@hig/flyout@1.3.1) (2022-01-12)
@@ -2,0 +14,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "1.3.1",
+  "version": "2.0.0",
   "description": "HIG Flyout",
@@ -20,11 +20,11 @@ "author": "Autodesk Inc.",
   "dependencies": {
+    "@hig/utils": "^0.4.1",
     "emotion": "^10.0.0",
     "prop-types": "^15.7.1",
-    "react-transition-group": "^2.3.1",
-    "@hig/utils": "^0.4.1"
+    "react-transition-group": "^2.3.1"
   },
   "peerDependencies": {
     "@hig/theme-context": "^3.0.3",
-    "@hig/theme-data": "^2.22.0",
-    "react": "^15.4.1 || ^16.3.2"
+    "@hig/theme-data": "^2.22.1",
+    "react": "^17.0.0"
   },
@@ -31,0 +31,0 @@ "devDependencies": {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Worsened metrics

Total package byte prevSize

120317

decreased by-9.19%

Lines of code

3284

decreased by-6.97%

No dependency changes