@hig/flyout - npm Package Compare versions

Comparing version 1.2.2 to 1.3.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,17 @@
+# [@hig/flyout-v1.3.0](https://github.com/Autodesk/hig/compare/@hig/flyout@1.2.2...@hig/flyout@1.3.0) (2022-01-12)
+
+
+### Bug Fixes
+
+*  react v. in peerDependencies instead of dependencies ([4701332](https://github.com/Autodesk/hig/commit/4701332))
+* control errors , space lines ([1367496](https://github.com/Autodesk/hig/commit/1367496))
+* improve useEffect manage state ([0deebd0](https://github.com/Autodesk/hig/commit/0deebd0))
+* onmouseover not working flyout ([cecb453](https://github.com/Autodesk/hig/commit/cecb453))
+
+
+### Features
+
+* fix lint errors ([2b94e12](https://github.com/Autodesk/hig/commit/2b94e12))
+* update Flyout test ([24d8a58](https://github.com/Autodesk/hig/commit/24d8a58))
+
 # [@hig/flyout-v1.2.2](https://github.com/Autodesk/hig/compare/@hig/flyout@1.2.1...@hig/flyout@1.2.2) (2021-02-05)
@@ -2,0 +18,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "1.2.2",
+  "version": "1.3.0",
   "description": "HIG Flyout",
@@ -20,11 +20,11 @@ "author": "Autodesk Inc.",
   "dependencies": {
+    "@hig/utils": "^0.4.0",
     "emotion": "^10.0.0",
     "prop-types": "^15.7.1",
-    "react-transition-group": "^2.3.1",
-    "@hig/utils": "^0.4.0"
+    "react-transition-group": "^2.3.1"
   },
   "peerDependencies": {
-    "@hig/theme-context": "^3.0.1",
-    "@hig/theme-data": "^2.19.3",
-    "react": "^15.4.1 || ^16.3.2"
+    "@hig/theme-context": "^3.0.2",
+    "@hig/theme-data": "^2.22.0",
+    "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

118990

decreased by-9.45%

Lines of code

3284

decreased by-6.97%

No dependency changes