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

Comparing version 1.8.0 to 1.8.1

core.d.ts

@@ -31,2 +31,4 @@ import { SyntheticEvent } from 'react'
   _childPopupState: PopupState | undefined
+  _deferNextOpen: boolean
+  _deferNextClose: boolean
 }
@@ -33,0 +35,0 @@

core.js

@@ -44,3 +44,5 @@ "use strict";
   hovered: false,
-  _childPopupState: null
+  _childPopupState: null,
+  _deferNextOpen: false,
+  _deferNextClose: false
 };
@@ -60,3 +62,5 @@ exports.initCoreState = initCoreState;
       hovered = state.hovered,
-      _childPopupState = state._childPopupState; // use lastState to workaround cases where setState is called multiple times
+      _childPopupState = state._childPopupState,
+      _deferNextOpen = state._deferNextOpen,
+      _deferNextClose = state._deferNextClose; // use lastState to workaround cases where setState is called multiple times
   // in a single render (e.g. because of refs being called multiple times)
@@ -80,49 +84,90 @@
   var toggle = function toggle(eventOrAnchorEl) {
-    if (isOpen) close();else open(eventOrAnchorEl);
+    if (isOpen) close(eventOrAnchorEl);else open(eventOrAnchorEl);
   };
 
   var open = function open(eventOrAnchorEl) {
-    if (!eventOrAnchorEl && !setAnchorElUsed) {
-      warn('missingEventOrAnchorEl', 'eventOrAnchorEl should be defined if setAnchorEl is not used');
+    var eventType = eventOrAnchorEl && eventOrAnchorEl.type;
+    var currentTarget = eventOrAnchorEl && eventOrAnchorEl.currentTarget;
+
+    if (eventType === 'touchstart') {
+      setState({
+        _deferNextOpen: true
+      });
+      return;
     }
 
-    if (parentPopupState) {
-      if (!parentPopupState.isOpen) return;
+    var doOpen = function doOpen() {
+      if (!eventOrAnchorEl && !setAnchorElUsed) {
+        warn('missingEventOrAnchorEl', 'eventOrAnchorEl should be defined if setAnchorEl is not used');
+      }
 
-      parentPopupState._setChildPopupState(popupState);
+      if (parentPopupState) {
+        if (!parentPopupState.isOpen) return;
+
+        parentPopupState._setChildPopupState(popupState);
+      }
+
+      if (!disableAutoFocus && (typeof document === "undefined" ? "undefined" : (0, _typeof2["default"])(document)) === 'object' && document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      var newState = {
+        isOpen: true,
+        hovered: eventType === 'mouseover'
+      };
+
+      if (currentTarget) {
+        if (!setAnchorElUsed) {
+          newState.anchorEl = currentTarget;
+        }
+      } else if (eventOrAnchorEl) {
+        newState.anchorEl = eventOrAnchorEl;
+      }
+
+      setState(newState);
+    };
+
+    if (_deferNextOpen) {
+      setState({
+        _deferNextOpen: false
+      });
+      setTimeout(doOpen, 0);
+    } else {
+      doOpen();
     }
+  };
 
-    if (!disableAutoFocus && (typeof document === "undefined" ? "undefined" : (0, _typeof2["default"])(document)) === 'object' && document.activeElement) {
-      document.activeElement.blur();
+  var close = function close(arg) {
+    var eventType = arg && arg.type;
+
+    if (eventType === 'touchstart') {
+      setState({
+        _deferNextClose: true
+      });
+      return;
     }
 
-    var newState = {
-      isOpen: true,
-      hovered: eventOrAnchorEl && eventOrAnchorEl.type === 'mouseover'
+    var doClose = function doClose() {
+      if (_childPopupState) _childPopupState.close();
+      if (parentPopupState) parentPopupState._setChildPopupState(null);
+      setState({
+        isOpen: false,
+        hovered: false
+      });
     };
 
-    if (eventOrAnchorEl && eventOrAnchorEl.currentTarget) {
-      if (!setAnchorElUsed) {
-        newState.anchorEl = eventOrAnchorEl.currentTarget;
-      }
-    } else if (eventOrAnchorEl) {
-      newState.anchorEl = eventOrAnchorEl;
+    if (_deferNextClose) {
+      setState({
+        _deferNextClose: false
+      });
+      setTimeout(doClose, 0);
+    } else {
+      doClose();
     }
-
-    setState(newState);
   };
 
-  var close = function close() {
-    if (_childPopupState) _childPopupState.close();
-    if (parentPopupState) parentPopupState._setChildPopupState(null);
-    setState({
-      isOpen: false,
-      hovered: false
-    });
-  };
-
   var setOpen = function setOpen(nextOpen, eventOrAnchorEl) {
     if (nextOpen) {
       open(eventOrAnchorEl);
-    } else close();
+    } else close(eventOrAnchorEl);
   };
@@ -134,3 +179,3 @@
     if (hovered && !isElementInPopup(relatedTarget, popupState)) {
-      close();
+      close(event);
     }
@@ -192,3 +237,3 @@ };
       variant = _ref3.variant;
-  return _ref4 = {}, (0, _defineProperty2["default"])(_ref4, variant === 'popover' ? 'aria-controls' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2["default"])(_ref4, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2["default"])(_ref4, "onClick", open), _ref4;
+  return _ref4 = {}, (0, _defineProperty2["default"])(_ref4, variant === 'popover' ? 'aria-controls' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2["default"])(_ref4, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2["default"])(_ref4, "onClick", open), (0, _defineProperty2["default"])(_ref4, "onTouchStart", open), _ref4;
 }
@@ -230,3 +275,3 @@ /**
       variant = _ref7.variant;
-  return _ref8 = {}, (0, _defineProperty2["default"])(_ref8, variant === 'popover' ? 'aria-controls' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2["default"])(_ref8, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2["default"])(_ref8, "onClick", toggle), _ref8;
+  return _ref8 = {}, (0, _defineProperty2["default"])(_ref8, variant === 'popover' ? 'aria-controls' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2["default"])(_ref8, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2["default"])(_ref8, "onClick", toggle), (0, _defineProperty2["default"])(_ref8, "onTouchStart", toggle), _ref8;
 }
@@ -249,3 +294,3 @@ /**
       variant = _ref9.variant;
-  return _ref10 = {}, (0, _defineProperty2["default"])(_ref10, variant === 'popover' ? 'aria-controls' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2["default"])(_ref10, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2["default"])(_ref10, "onMouseOver", open), (0, _defineProperty2["default"])(_ref10, "onMouseLeave", onMouseLeave), _ref10;
+  return _ref10 = {}, (0, _defineProperty2["default"])(_ref10, variant === 'popover' ? 'aria-controls' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2["default"])(_ref10, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2["default"])(_ref10, "onTouchStart", open), (0, _defineProperty2["default"])(_ref10, "onMouseOver", open), (0, _defineProperty2["default"])(_ref10, "onMouseLeave", onMouseLeave), _ref10;
 }
@@ -252,0 +297,0 @@ /**

es/core.d.ts

@@ -31,2 +31,4 @@ import { SyntheticEvent } from 'react'
   _childPopupState: PopupState | undefined
+  _deferNextOpen: boolean
+  _deferNextClose: boolean
 }
@@ -33,0 +35,0 @@

es/core.js

@@ -37,3 +37,5 @@ "use strict";
   hovered: false,
-  _childPopupState: null
+  _childPopupState: null,
+  _deferNextOpen: false,
+  _deferNextClose: false
 };
@@ -55,3 +57,5 @@ exports.initCoreState = initCoreState;
     hovered,
-    _childPopupState
+    _childPopupState,
+    _deferNextOpen,
+    _deferNextClose
   } = state; // use lastState to workaround cases where setState is called multiple times
@@ -78,49 +82,90 @@ // in a single render (e.g. because of refs being called multiple times)
   const toggle = eventOrAnchorEl => {
-    if (isOpen) close();else open(eventOrAnchorEl);
+    if (isOpen) close(eventOrAnchorEl);else open(eventOrAnchorEl);
   };
 
   const open = eventOrAnchorEl => {
-    if (!eventOrAnchorEl && !setAnchorElUsed) {
-      warn('missingEventOrAnchorEl', 'eventOrAnchorEl should be defined if setAnchorEl is not used');
+    const eventType = eventOrAnchorEl && eventOrAnchorEl.type;
+    const currentTarget = eventOrAnchorEl && eventOrAnchorEl.currentTarget;
+
+    if (eventType === 'touchstart') {
+      setState({
+        _deferNextOpen: true
+      });
+      return;
     }
 
-    if (parentPopupState) {
-      if (!parentPopupState.isOpen) return;
+    const doOpen = () => {
+      if (!eventOrAnchorEl && !setAnchorElUsed) {
+        warn('missingEventOrAnchorEl', 'eventOrAnchorEl should be defined if setAnchorEl is not used');
+      }
 
-      parentPopupState._setChildPopupState(popupState);
+      if (parentPopupState) {
+        if (!parentPopupState.isOpen) return;
+
+        parentPopupState._setChildPopupState(popupState);
+      }
+
+      if (!disableAutoFocus && typeof document === 'object' && document.activeElement) {
+        document.activeElement.blur();
+      }
+
+      const newState = {
+        isOpen: true,
+        hovered: eventType === 'mouseover'
+      };
+
+      if (currentTarget) {
+        if (!setAnchorElUsed) {
+          newState.anchorEl = currentTarget;
+        }
+      } else if (eventOrAnchorEl) {
+        newState.anchorEl = eventOrAnchorEl;
+      }
+
+      setState(newState);
+    };
+
+    if (_deferNextOpen) {
+      setState({
+        _deferNextOpen: false
+      });
+      setTimeout(doOpen, 0);
+    } else {
+      doOpen();
     }
+  };
 
-    if (!disableAutoFocus && typeof document === 'object' && document.activeElement) {
-      document.activeElement.blur();
+  const close = arg => {
+    const eventType = arg && arg.type;
+
+    if (eventType === 'touchstart') {
+      setState({
+        _deferNextClose: true
+      });
+      return;
     }
 
-    const newState = {
-      isOpen: true,
-      hovered: eventOrAnchorEl && eventOrAnchorEl.type === 'mouseover'
+    const doClose = () => {
+      if (_childPopupState) _childPopupState.close();
+      if (parentPopupState) parentPopupState._setChildPopupState(null);
+      setState({
+        isOpen: false,
+        hovered: false
+      });
     };
 
-    if (eventOrAnchorEl && eventOrAnchorEl.currentTarget) {
-      if (!setAnchorElUsed) {
-        newState.anchorEl = eventOrAnchorEl.currentTarget;
-      }
-    } else if (eventOrAnchorEl) {
-      newState.anchorEl = eventOrAnchorEl;
+    if (_deferNextClose) {
+      setState({
+        _deferNextClose: false
+      });
+      setTimeout(doClose, 0);
+    } else {
+      doClose();
     }
-
-    setState(newState);
   };
 
-  const close = () => {
-    if (_childPopupState) _childPopupState.close();
-    if (parentPopupState) parentPopupState._setChildPopupState(null);
-    setState({
-      isOpen: false,
-      hovered: false
-    });
-  };
-
   const setOpen = (nextOpen, eventOrAnchorEl) => {
     if (nextOpen) {
       open(eventOrAnchorEl);
-    } else close();
+    } else close(eventOrAnchorEl);
   };
@@ -132,3 +177,3 @@
     if (hovered && !isElementInPopup(relatedTarget, popupState)) {
-      close();
+      close(event);
     }
@@ -192,3 +237,4 @@ };
     'aria-haspopup': variant === 'popover' ? true : undefined,
-    onClick: open
+    onClick: open,
+    onTouchStart: open
   };
@@ -238,3 +284,4 @@ }
     'aria-haspopup': variant === 'popover' ? true : undefined,
-    onClick: toggle
+    onClick: toggle,
+    onTouchStart: toggle
   };
@@ -261,2 +308,3 @@ }
     'aria-haspopup': variant === 'popover' ? true : undefined,
+    onTouchStart: open,
     onMouseOver: open,
@@ -263,0 +311,0 @@ onMouseLeave

package.json

 {
   "name": "material-ui-popup-state",
-  "version": "1.8.0",
+  "version": "1.8.1",
   "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

122400

increased by3.9%

Lines of code

1893

increased by4.7%

No dependency changes