material-ui-popup-state - npm Package Compare versions

Comparing version 1.0.3 to 1.1.0

es/index.js

@@ -72,3 +72,3 @@ "use strict";
   open,
-  close,
+  onMouseLeave,
   popupId,
@@ -81,3 +81,3 @@ variant
     onMouseEnter: open,
-    onMouseLeave: close
+    onMouseLeave
   };
@@ -97,2 +97,3 @@ }
   close,
+  onMouseLeave,
   popupId
@@ -104,3 +105,4 @@ }) {
     open: isOpen,
-    onClose: close
+    onClose: close,
+    onMouseLeave
   };
@@ -129,3 +131,4 @@ }
   anchorEl,
-  popupId
+  popupId,
+  onMouseLeave
 }) {
@@ -135,3 +138,4 @@ return {
     anchorEl,
-    open: isOpen
+    open: isOpen,
+    onMouseLeave
   };
@@ -147,3 +151,4 @@ }
     _defineProperty(this, "state", {
-      anchorEl: null
+      anchorEl: null,
+      hovered: false
     });
@@ -162,3 +167,4 @@
       this.setState({
-        anchorEl: eventOrAnchorEl && eventOrAnchorEl.currentTarget ? eventOrAnchorEl.currentTarget : eventOrAnchorEl
+        anchorEl: eventOrAnchorEl && eventOrAnchorEl.currentTarget ? eventOrAnchorEl.currentTarget : eventOrAnchorEl,
+        hovered: eventOrAnchorEl.type === 'mouseenter'
       });
@@ -168,5 +174,25 @@ });
     _defineProperty(this, "handleClose", () => this.setState({
-      anchorEl: null
+      anchorEl: null,
+      hovered: false
     }));
 
+    _defineProperty(this, "handleMouseLeave", event => {
+      const {
+        popupId
+      } = this.props;
+      const {
+        hovered,
+        anchorEl
+      } = this.state;
+      const popup = popupId && typeof document !== 'undefined' ? document.getElementById(popupId) // eslint-disable-line no-undef
+      : null;
+      const {
+        relatedTarget
+      } = event;
+
+      if (hovered && !isAncestor(popup, relatedTarget) && !isAncestor(anchorEl, relatedTarget)) {
+        this.handleClose();
+      }
+    });
+
     _defineProperty(this, "handleSetOpen", (open, eventOrAnchorEl) => {
@@ -190,2 +216,3 @@ if (open) this.handleOpen(eventOrAnchorEl);else this.handleClose();
       close: this.handleClose,
+      onMouseLeave: this.handleMouseLeave,
       toggle: this.handleToggle,
@@ -243,2 +270,13 @@ setOpen: this.handleSetOpen,
   variant: _propTypes.default.oneOf(['popover', 'popper']).isRequired
-});
+});
+
+function isAncestor(parent, child) {
+  if (!parent) return false;
+
+  while (child) {
+    if (child === parent) return true;
+    child = child.parentElement;
+  }
+
+  return false;
+}

index.js

@@ -80,6 +80,6 @@ "use strict";
       open = _ref5.open,
-      close = _ref5.close,
+      onMouseLeave = _ref5.onMouseLeave,
       popupId = _ref5.popupId,
       variant = _ref5.variant;
-  return _ref6 = {}, (0, _defineProperty2.default)(_ref6, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref6, 'aria-haspopup', true), (0, _defineProperty2.default)(_ref6, "onMouseEnter", open), (0, _defineProperty2.default)(_ref6, "onMouseLeave", close), _ref6;
+  return _ref6 = {}, (0, _defineProperty2.default)(_ref6, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref6, 'aria-haspopup', true), (0, _defineProperty2.default)(_ref6, "onMouseEnter", open), (0, _defineProperty2.default)(_ref6, "onMouseLeave", onMouseLeave), _ref6;
 }
@@ -98,2 +98,3 @@ /**
       close = _ref7.close,
+      onMouseLeave = _ref7.onMouseLeave,
       popupId = _ref7.popupId;
@@ -104,3 +105,4 @@ return {
     open: isOpen,
-    onClose: close
+    onClose: close,
+    onMouseLeave: onMouseLeave
   };
@@ -129,7 +131,9 @@ }
       anchorEl = _ref8.anchorEl,
-      popupId = _ref8.popupId;
+      popupId = _ref8.popupId,
+      onMouseLeave = _ref8.onMouseLeave;
   return {
     id: popupId,
     anchorEl: anchorEl,
-    open: isOpen
+    open: isOpen,
+    onMouseLeave: onMouseLeave
   };
@@ -158,3 +162,4 @@ }
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "state", {
-      anchorEl: null
+      anchorEl: null,
+      hovered: false
     });
@@ -171,3 +176,4 @@ (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleToggle", function (eventOrAnchorEl) {
       _this.setState({
-        anchorEl: eventOrAnchorEl && eventOrAnchorEl.currentTarget ? eventOrAnchorEl.currentTarget : eventOrAnchorEl
+        anchorEl: eventOrAnchorEl && eventOrAnchorEl.currentTarget ? eventOrAnchorEl.currentTarget : eventOrAnchorEl,
+        hovered: eventOrAnchorEl.type === 'mouseenter'
       });
@@ -177,5 +183,20 @@ });
       return _this.setState({
-        anchorEl: null
+        anchorEl: null,
+        hovered: false
       });
     });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleMouseLeave", function (event) {
+      var popupId = _this.props.popupId;
+      var _this$state = _this.state,
+          hovered = _this$state.hovered,
+          anchorEl = _this$state.anchorEl;
+      var popup = popupId && typeof document !== 'undefined' ? document.getElementById(popupId) // eslint-disable-line no-undef
+      : null;
+      var _ref9 = event,
+          relatedTarget = _ref9.relatedTarget;
+
+      if (hovered && !isAncestor(popup, relatedTarget) && !isAncestor(anchorEl, relatedTarget)) {
+        _this.handleClose();
+      }
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)((0, _assertThisInitialized2.default)(_this)), "handleSetOpen", function (open, eventOrAnchorEl) {
@@ -199,2 +220,3 @@ if (open) _this.handleOpen(eventOrAnchorEl);else _this.handleClose();
         close: this.handleClose,
+        onMouseLeave: this.handleMouseLeave,
         toggle: this.handleToggle,
@@ -252,2 +274,13 @@ setOpen: this.handleSetOpen,
   variant: _propTypes.default.oneOf(['popover', 'popper']).isRequired
-});
+});
+
+function isAncestor(parent, child) {
+  if (!parent) return false;
+
+  while (child) {
+    if (child === parent) return true;
+    child = child.parentElement;
+  }
+
+  return false;
+}

package.json

 {
   "name": "material-ui-popup-state",
-  "version": "1.0.3",
+  "version": "1.1.0",
   "description": "easiest way to create menus, popovers, and poppers with material-ui",
@@ -5,0 +5,0 @@ "main": "index.js",

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

424219

increased by1.1%

Lines of code

496

increased by14.29%

No dependency changes