@hig/flyout - npm Package Compare versions

Comparing version 0.5.0 to 0.6.0

build/index.es.js

@@ -811,2 +811,127 @@ import Transition, { ENTERED, ENTERING, EXITED, EXITING } from 'react-transition-group/Transition';
 
+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; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+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 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 });
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(event) {
+      clearTimeout(this.focusTimeout);
+      this.setState({ hasHover: false });
+
+      if (this.props.onMouseLeave) {
+        this.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);
+
+HoverBehavior.propTypes = {
+  /**
+   * Generally the Flyout target and presenter
+   */
+  children: PropTypes.func.isRequired,
+  /**
+   * Amount of time between mouse enter is reported and when
+   * onMouseEnter event should fire
+   */
+  openOnHoverDelay: PropTypes.number,
+  /**
+   * Function called when the user enters the visual space
+   * occupied by the component
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * Function called when the user leaves the visual space
+   * occupied by the component
+   */
+  onMouseLeave: PropTypes.func
+};
+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"
+    }
+  }
+};
+
 function PanelContainerPresenter(props) {
@@ -906,10 +1031,12 @@ var children = props.children,
 
-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 _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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; }; }();
 
-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; }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-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; }
+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 */
@@ -936,3 +1063,3 @@
 var Flyout = function (_Component) {
-  _inherits$1(Flyout, _Component);
+  _inherits$2(Flyout, _Component);
 
@@ -944,3 +1071,3 @@ function Flyout() {
 
-    _classCallCheck$1(this, Flyout);
+    _classCallCheck$2(this, Flyout);
 
@@ -951,4 +1078,12 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    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 () {
@@ -979,8 +1114,12 @@ if (!_this.isOpenControlled()) {
       var _this2 = _this,
+          handleChildMouseEnter = _this2.handleChildMouseEnter,
+          handleChildMouseLeave = _this2.handleChildMouseLeave,
           refAction = _this2.refAction,
           refPointer = _this2.refPointer,
           refWrapper = _this2.refWrapper;
-      var pointer = _this.props.pointer;
+      var _this$props = _this.props,
+          openOnHoverDelay = _this$props.openOnHoverDelay,
+          pointer = _this$props.pointer;
 
-      var panel = _this.renderPanel();
+      var panel = _this.renderPanel({ transitionStatus: transitionStatus });
 
@@ -993,17 +1132,30 @@ var _this$getCoordinates = _this.getCoordinates(),
       return React.createElement(
-        FlyoutPresenter,
+        HoverBehavior,
         {
-          anchorPoint: anchorPoint,
-          containerPosition: containerPosition,
-          panel: panel,
-          pointer: pointer,
-          pointerPosition: pointerPosition,
-          refAction: refAction,
-          refPointer: refPointer,
-          refWrapper: refWrapper,
-          transitionStatus: transitionStatus
+          onMouseEnter: handleChildMouseEnter,
+          onMouseLeave: handleChildMouseLeave,
+          openOnHoverDelay: openOnHoverDelay
         },
-        _this.renderChildren()
+        function (_ref2) {
+          var hasHover = _ref2.hasHover,
+              onMouseEnter = _ref2.onMouseEnter,
+              onMouseLeave = _ref2.onMouseLeave;
+          return React.createElement(
+            FlyoutPresenter,
+            {
+              anchorPoint: anchorPoint,
+              containerPosition: containerPosition,
+              panel: panel,
+              pointer: pointer,
+              pointerPosition: pointerPosition,
+              refAction: refAction,
+              refPointer: refPointer,
+              refWrapper: refWrapper,
+              transitionStatus: transitionStatus
+            },
+            _this.renderChildren(hasHover, onMouseEnter, onMouseLeave)
+          );
+        }
       );
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
   }
@@ -1014,3 +1166,3 @@
 
-  _createClass$1(Flyout, [{
+  _createClass$2(Flyout, [{
     key: "componentDidMount",
@@ -1171,3 +1323,4 @@ value: function componentDidMount() {
     key: "renderPanel",
-    value: function renderPanel() {
+    value: function renderPanel(_ref3) {
+      var transitionStatus = _ref3.transitionStatus;
       var panel = this.props.panel;
@@ -1177,3 +1330,5 @@
       if (typeof panel === "function") {
-        return panel(this.createPanelPayload());
+        return panel(_extends$1({}, this.createPanelPayload(), {
+          transitionStatus: transitionStatus
+        }));
       }
@@ -1185,3 +1340,3 @@
     key: "renderChildren",
-    value: function renderChildren() {
+    value: function renderChildren(hasHover, onMouseEnter, onMouseLeave) {
       var children = this.props.children;
@@ -1196,3 +1351,8 @@ var handleChildClick = this.handleChildClick;
       if (React.Children.count(children) === 1) {
-        return React.cloneElement(children, { onClick: handleChildClick });
+        return React.cloneElement(children, {
+          hasHover: hasHover,
+          onClick: handleChildClick,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave
+        });
       }
@@ -1233,3 +1393,3 @@
   fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)).isRequired,
-  /** Use to render a custom flyout panel. Can be either a node or a render function */
+  /** Renders a custom flyout panel. Can be either a node or a render function */
   panel: PropTypes.func,
@@ -1249,3 +1409,10 @@ /** A custom pointer */
   /** When provided, it overrides the flyout's open state */
-  open: PropTypes.bool
+  open: PropTypes.bool,
+  /** Whether flyout should open when the target is hovered over */
+  openOnHover: PropTypes.bool,
+  /**
+   * If openOnHover is true, this prop will determine the delay
+   * from when mouseEnter begins until the flyout visually opens
+   */
+  openOnHoverDelay: PropTypes.number
 };
@@ -1256,10 +1423,12 @@ Flyout.defaultProps = {
   fallbackAnchorPoints: AVAILABLE_ANCHOR_POINTS,
+  openOnHover: false,
+  openOnHoverDelay: 500,
   /**
    * @param {PanelRendererPayload} payload
    */
-  panel: function panel(_ref2) {
-    var innerRef = _ref2.innerRef,
-        content = _ref2.content,
-        handleScroll = _ref2.handleScroll,
-        maxHeight = _ref2.maxHeight;
+  panel: function panel(_ref4) {
+    var innerRef = _ref4.innerRef,
+        content = _ref4.content,
+        handleScroll = _ref4.handleScroll,
+        maxHeight = _ref4.maxHeight;
 
@@ -1357,3 +1526,3 @@ return React.createElement(
       "required": false,
-      "description": "Use to render a custom flyout panel. Can be either a node or a render function",
+      "description": "Renders a custom flyout panel. Can be either a node or a render function",
       "defaultValue": {
@@ -1412,2 +1581,24 @@ "value": "function({ innerRef, content, handleScroll, maxHeight }) {\n  return (\n    <PanelContainerPresenter innerRef={innerRef} maxHeight={maxHeight}>\n      <PanelPresenter onScroll={handleScroll}>{content}</PanelPresenter>\n    </PanelContainerPresenter>\n  );\n}",
       "description": "When provided, it overrides the flyout's open state"
+    },
+    "openOnHover": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Whether flyout should open when the target is hovered over",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "openOnHoverDelay": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "If openOnHover is true, this prop will determine the delay\nfrom when mouseEnter begins until the flyout visually opens",
+      "defaultValue": {
+        "value": "500",
+        "computed": false
+      }
     }
@@ -1417,3 +1608,3 @@ }
 
-var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -1437,4 +1628,4 @@ function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function offsetContainerProperty(offsetProperty, coordinates, diff) {
-  return _extends$1({}, coordinates, {
-    containerPosition: _extends$1({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
+  return _extends$2({}, coordinates, {
+    containerPosition: _extends$2({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
   });
@@ -1470,7 +1661,7 @@ }
 function offsetPanelHorizontal(coordinates, diff) {
-  return _extends$1({}, coordinates, {
-    pointerPosition: _extends$1({}, coordinates.pointerPosition, {
+  return _extends$2({}, coordinates, {
+    pointerPosition: _extends$2({}, coordinates.pointerPosition, {
       left: coordinates.pointerPosition.left - diff
     }),
-    containerPosition: _extends$1({}, coordinates.containerPosition, {
+    containerPosition: _extends$2({}, coordinates.containerPosition, {
       left: coordinates.containerPosition.left + diff
@@ -1516,2 +1707,2 @@ })
 export default Flyout;
-export { PanelContainerPresenter as Panel, anchorPoints, AVAILABLE_ANCHOR_POINTS, AVAILABLE_ANCHOR_POINTS as availableAnchorPoints, dislocateContainer, offsetContainerHorizontal, offsetContainerVertical, offsetPanelHorizontal, PointerPresenter as Pointer };
+export { PanelContainerPresenter as Panel, anchorPoints, AVAILABLE_ANCHOR_POINTS, AVAILABLE_ANCHOR_POINTS as availableAnchorPoints, dislocateContainer, offsetContainerHorizontal, offsetContainerVertical, offsetPanelHorizontal, PointerPresenter as Pointer, transitionStatuses, AVAILABLE_TRANSITION_STATUSES };

build/index.js

@@ -819,2 +819,127 @@ 'use strict';
 
+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; }; }();
+
+function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+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; }
+
+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 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 });
+    }
+  }, {
+    key: "handleBlur",
+    value: function handleBlur(event) {
+      clearTimeout(this.focusTimeout);
+      this.setState({ hasHover: false });
+
+      if (this.props.onMouseLeave) {
+        this.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);
+
+HoverBehavior.propTypes = {
+  /**
+   * Generally the Flyout target and presenter
+   */
+  children: PropTypes.func.isRequired,
+  /**
+   * Amount of time between mouse enter is reported and when
+   * onMouseEnter event should fire
+   */
+  openOnHoverDelay: PropTypes.number,
+  /**
+   * Function called when the user enters the visual space
+   * occupied by the component
+   */
+  onMouseEnter: PropTypes.func,
+  /**
+   * Function called when the user leaves the visual space
+   * occupied by the component
+   */
+  onMouseLeave: PropTypes.func
+};
+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"
+    }
+  }
+};
+
 function PanelContainerPresenter(props) {
@@ -914,10 +1039,12 @@ var children = props.children,
 
-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 _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
-function _classCallCheck$1(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+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; }; }();
 
-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; }
+function _classCallCheck$2(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-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; }
+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 */
@@ -944,3 +1071,3 @@
 var Flyout = function (_Component) {
-  _inherits$1(Flyout, _Component);
+  _inherits$2(Flyout, _Component);
 
@@ -952,3 +1079,3 @@ function Flyout() {
 
-    _classCallCheck$1(this, Flyout);
+    _classCallCheck$2(this, Flyout);
 
@@ -959,4 +1086,12 @@ for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
 
-    return _ret = (_temp = (_this = _possibleConstructorReturn$1(this, (_ref = Flyout.__proto__ || Object.getPrototypeOf(Flyout)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
+    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 () {
@@ -987,8 +1122,12 @@ if (!_this.isOpenControlled()) {
       var _this2 = _this,
+          handleChildMouseEnter = _this2.handleChildMouseEnter,
+          handleChildMouseLeave = _this2.handleChildMouseLeave,
           refAction = _this2.refAction,
           refPointer = _this2.refPointer,
           refWrapper = _this2.refWrapper;
-      var pointer = _this.props.pointer;
+      var _this$props = _this.props,
+          openOnHoverDelay = _this$props.openOnHoverDelay,
+          pointer = _this$props.pointer;
 
-      var panel = _this.renderPanel();
+      var panel = _this.renderPanel({ transitionStatus: transitionStatus });
 
@@ -1001,17 +1140,30 @@ var _this$getCoordinates = _this.getCoordinates(),
       return React__default.createElement(
-        FlyoutPresenter,
+        HoverBehavior,
         {
-          anchorPoint: anchorPoint,
-          containerPosition: containerPosition,
-          panel: panel,
-          pointer: pointer,
-          pointerPosition: pointerPosition,
-          refAction: refAction,
-          refPointer: refPointer,
-          refWrapper: refWrapper,
-          transitionStatus: transitionStatus
+          onMouseEnter: handleChildMouseEnter,
+          onMouseLeave: handleChildMouseLeave,
+          openOnHoverDelay: openOnHoverDelay
         },
-        _this.renderChildren()
+        function (_ref2) {
+          var hasHover = _ref2.hasHover,
+              onMouseEnter = _ref2.onMouseEnter,
+              onMouseLeave = _ref2.onMouseLeave;
+          return React__default.createElement(
+            FlyoutPresenter,
+            {
+              anchorPoint: anchorPoint,
+              containerPosition: containerPosition,
+              panel: panel,
+              pointer: pointer,
+              pointerPosition: pointerPosition,
+              refAction: refAction,
+              refPointer: refPointer,
+              refWrapper: refWrapper,
+              transitionStatus: transitionStatus
+            },
+            _this.renderChildren(hasHover, onMouseEnter, onMouseLeave)
+          );
+        }
       );
-    }, _temp), _possibleConstructorReturn$1(_this, _ret);
+    }, _temp), _possibleConstructorReturn$2(_this, _ret);
   }
@@ -1022,3 +1174,3 @@
 
-  _createClass$1(Flyout, [{
+  _createClass$2(Flyout, [{
     key: "componentDidMount",
@@ -1179,3 +1331,4 @@ value: function componentDidMount() {
     key: "renderPanel",
-    value: function renderPanel() {
+    value: function renderPanel(_ref3) {
+      var transitionStatus = _ref3.transitionStatus;
       var panel = this.props.panel;
@@ -1185,3 +1338,5 @@
       if (typeof panel === "function") {
-        return panel(this.createPanelPayload());
+        return panel(_extends$1({}, this.createPanelPayload(), {
+          transitionStatus: transitionStatus
+        }));
       }
@@ -1193,3 +1348,3 @@
     key: "renderChildren",
-    value: function renderChildren() {
+    value: function renderChildren(hasHover, onMouseEnter, onMouseLeave) {
       var children = this.props.children;
@@ -1204,3 +1359,8 @@ var handleChildClick = this.handleChildClick;
       if (React__default.Children.count(children) === 1) {
-        return React__default.cloneElement(children, { onClick: handleChildClick });
+        return React__default.cloneElement(children, {
+          hasHover: hasHover,
+          onClick: handleChildClick,
+          onMouseEnter: onMouseEnter,
+          onMouseLeave: onMouseLeave
+        });
       }
@@ -1241,3 +1401,3 @@
   fallbackAnchorPoints: PropTypes.arrayOf(PropTypes.oneOf(AVAILABLE_ANCHOR_POINTS)).isRequired,
-  /** Use to render a custom flyout panel. Can be either a node or a render function */
+  /** Renders a custom flyout panel. Can be either a node or a render function */
   panel: PropTypes.func,
@@ -1257,3 +1417,10 @@ /** A custom pointer */
   /** When provided, it overrides the flyout's open state */
-  open: PropTypes.bool
+  open: PropTypes.bool,
+  /** Whether flyout should open when the target is hovered over */
+  openOnHover: PropTypes.bool,
+  /**
+   * If openOnHover is true, this prop will determine the delay
+   * from when mouseEnter begins until the flyout visually opens
+   */
+  openOnHoverDelay: PropTypes.number
 };
@@ -1264,10 +1431,12 @@ Flyout.defaultProps = {
   fallbackAnchorPoints: AVAILABLE_ANCHOR_POINTS,
+  openOnHover: false,
+  openOnHoverDelay: 500,
   /**
    * @param {PanelRendererPayload} payload
    */
-  panel: function panel(_ref2) {
-    var innerRef = _ref2.innerRef,
-        content = _ref2.content,
-        handleScroll = _ref2.handleScroll,
-        maxHeight = _ref2.maxHeight;
+  panel: function panel(_ref4) {
+    var innerRef = _ref4.innerRef,
+        content = _ref4.content,
+        handleScroll = _ref4.handleScroll,
+        maxHeight = _ref4.maxHeight;
 
@@ -1365,3 +1534,3 @@ return React__default.createElement(
       "required": false,
-      "description": "Use to render a custom flyout panel. Can be either a node or a render function",
+      "description": "Renders a custom flyout panel. Can be either a node or a render function",
       "defaultValue": {
@@ -1420,2 +1589,24 @@ "value": "function({ innerRef, content, handleScroll, maxHeight }) {\n  return (\n    <PanelContainerPresenter innerRef={innerRef} maxHeight={maxHeight}>\n      <PanelPresenter onScroll={handleScroll}>{content}</PanelPresenter>\n    </PanelContainerPresenter>\n  );\n}",
       "description": "When provided, it overrides the flyout's open state"
+    },
+    "openOnHover": {
+      "type": {
+        "name": "bool"
+      },
+      "required": false,
+      "description": "Whether flyout should open when the target is hovered over",
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      }
+    },
+    "openOnHoverDelay": {
+      "type": {
+        "name": "number"
+      },
+      "required": false,
+      "description": "If openOnHover is true, this prop will determine the delay\nfrom when mouseEnter begins until the flyout visually opens",
+      "defaultValue": {
+        "value": "500",
+        "computed": false
+      }
     }
@@ -1425,3 +1616,3 @@ }
 
-var _extends$1 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+var _extends$2 = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
@@ -1445,4 +1636,4 @@ function _defineProperty$1(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function offsetContainerProperty(offsetProperty, coordinates, diff) {
-  return _extends$1({}, coordinates, {
-    containerPosition: _extends$1({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
+  return _extends$2({}, coordinates, {
+    containerPosition: _extends$2({}, coordinates.containerPosition, _defineProperty$1({}, offsetProperty, coordinates.containerPosition[offsetProperty] + diff))
   });
@@ -1478,7 +1669,7 @@ }
 function offsetPanelHorizontal(coordinates, diff) {
-  return _extends$1({}, coordinates, {
-    pointerPosition: _extends$1({}, coordinates.pointerPosition, {
+  return _extends$2({}, coordinates, {
+    pointerPosition: _extends$2({}, coordinates.pointerPosition, {
       left: coordinates.pointerPosition.left - diff
     }),
-    containerPosition: _extends$1({}, coordinates.containerPosition, {
+    containerPosition: _extends$2({}, coordinates.containerPosition, {
       left: coordinates.containerPosition.left + diff
@@ -1533,1 +1724,3 @@ })
 exports.Pointer = PointerPresenter;
+exports.transitionStatuses = transitionStatuses;
+exports.AVAILABLE_TRANSITION_STATUSES = AVAILABLE_TRANSITION_STATUSES;

CHANGELOG.md

@@ -0,1 +1,14 @@
+# [@hig/flyout-v0.6.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.5.0...@hig/flyout@0.6.0) (2018-09-26)
+
+
+### Bug Fixes
+
+*  max-height calc on notifications-flyout ([4581856](https://github.com/Autodesk/hig/commit/4581856))
+
+
+### Features
+
+* Add prop openOnHover to Flyout.  When enabled, flyout will open when target is hovered over for .5s ([65893f3](https://github.com/Autodesk/hig/commit/65893f3))
+* timeout should be cleared no matter whether on mouse leave event exists ([7b3a300](https://github.com/Autodesk/hig/commit/7b3a300))
+
 # [@hig/flyout-v0.5.0](https://github.com/Autodesk/hig/compare/@hig/flyout@0.4.1...@hig/flyout@0.5.0) (2018-09-11)
@@ -2,0 +15,0 @@

package.json

 {
   "name": "@hig/flyout",
-  "version": "0.5.0",
+  "version": "0.6.0",
   "description": "HIG Flyout",
@@ -5,0 +5,0 @@ "author": "Autodesk Inc.",

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

Improved metrics

Total package byte prevSize

119177

increased by13.98%

Lines of code

3214

increased by12.34%

No dependency changes