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

Comparing version 1.3.2 to 1.4.0

core.js

@@ -11,2 +11,3 @@ "use strict";
 exports.createPopupState = createPopupState;
+exports.anchorRef = anchorRef;
 exports.bindTrigger = bindTrigger;
@@ -23,2 +24,4 @@ exports.bindToggle = bindToggle;
 
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
+
 var React = _interopRequireWildcard(require("react"));
@@ -29,2 +32,4 @@
 var initCoreState = {
+  isOpen: false,
+  setAnchorElUsed: false,
   anchorEl: null,
@@ -37,19 +42,40 @@ hovered: false,
 function createPopupState(_ref) {
-  var _ref$state = _ref.state,
-      anchorEl = _ref$state.anchorEl,
-      hovered = _ref$state.hovered,
-      _childPopupState = _ref$state._childPopupState,
-      setState = _ref.setState,
+  var state = _ref.state,
+      _setState = _ref.setState,
       parentPopupState = _ref.parentPopupState,
       popupId = _ref.popupId,
       variant = _ref.variant;
+  var isOpen = state.isOpen,
+      setAnchorElUsed = state.setAnchorElUsed,
+      anchorEl = state.anchorEl,
+      hovered = state.hovered,
+      _childPopupState = state._childPopupState; // use lastState to workaround cases where setState is called multiple times
+  // in a single render (e.g. because of refs being called multiple times)
 
+  var lastState = state;
+
+  var setState = function setState(nextState) {
+    if (hasChanges(lastState, nextState)) {
+      _setState(lastState = (0, _objectSpread2.default)({}, lastState, nextState));
+    }
+  };
+
+  var setAnchorEl = function setAnchorEl(_anchorEl) {
+    setState({
+      setAnchorElUsed: true,
+      anchorEl: _anchorEl
+    });
+  };
+
   var toggle = function toggle(eventOrAnchorEl) {
-    if (anchorEl) close();else open(eventOrAnchorEl);
+    if (isOpen) close();else open(eventOrAnchorEl);
   };
 
   var open = function open(eventOrAnchorEl) {
-    if (!eventOrAnchorElWarned && !eventOrAnchorEl) {
+    if (!eventOrAnchorElWarned && !eventOrAnchorEl && !setAnchorElUsed) {
       eventOrAnchorElWarned = true;
-      console.error('eventOrAnchorEl should be defined'); // eslint-disable-line no-console
+      /* eslint-disable no-console */
+
+      console.error('eventOrAnchorEl should be defined if setAnchorEl is not used');
+      /* eslint-enable no-console */
     }
@@ -67,6 +93,16 @@
 
-    setState({
-      anchorEl: eventOrAnchorEl && eventOrAnchorEl.currentTarget ? eventOrAnchorEl.currentTarget : eventOrAnchorEl,
-      hovered: eventOrAnchorEl.type === 'mouseenter'
-    });
+    var newState = {
+      isOpen: true,
+      hovered: eventOrAnchorEl && eventOrAnchorEl.type === 'mouseenter'
+    };
+
+    if (eventOrAnchorEl && eventOrAnchorEl.currentTarget) {
+      if (!setAnchorElUsed) {
+        newState.anchorEl = eventOrAnchorEl.currentTarget;
+      }
+    } else if (eventOrAnchorEl) {
+      newState.anchorEl = eventOrAnchorEl;
+    }
+
+    setState(newState);
   };
@@ -78,3 +114,3 @@
     setState({
-      anchorEl: null,
+      isOpen: false,
       hovered: false
@@ -86,6 +122,2 @@ });
     if (nextOpen) {
-      if (!eventOrAnchorEl) {
-        throw new Error('eventOrAnchorEl must be defined when opening');
-      }
-
       open(eventOrAnchorEl);
@@ -111,5 +143,7 @@ } else close();
     anchorEl: anchorEl,
+    setAnchorEl: setAnchorEl,
+    setAnchorElUsed: setAnchorElUsed,
     popupId: popupId,
     variant: variant,
-    isOpen: anchorEl != null,
+    isOpen: isOpen,
     open: open,
@@ -126,2 +160,16 @@ close: close,
 /**
+ * Creates a ref that sets the anchorEl for the popup.
+ *
+ * @param {object} popupState the argument passed to the child function of
+ * `PopupState`
+ */
+
+
+function anchorRef(_ref2) {
+  var setAnchorEl = _ref2.setAnchorEl;
+  return function (el) {
+    if (el) setAnchorEl(el);
+  };
+}
+/**
  * Creates props for a component that opens the popup when clicked.
@@ -134,10 +182,10 @@ *
 
-function bindTrigger(_ref2) {
-  var _ref3;
+function bindTrigger(_ref3) {
+  var _ref4;
 
-  var isOpen = _ref2.isOpen,
-      open = _ref2.open,
-      popupId = _ref2.popupId,
-      variant = _ref2.variant;
-  return _ref3 = {}, (0, _defineProperty2.default)(_ref3, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref3, 'aria-haspopup', true), (0, _defineProperty2.default)(_ref3, "onClick", open), _ref3;
+  var isOpen = _ref3.isOpen,
+      open = _ref3.open,
+      popupId = _ref3.popupId,
+      variant = _ref3.variant;
+  return _ref4 = {}, (0, _defineProperty2.default)(_ref4, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref4, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2.default)(_ref4, "onClick", open), _ref4;
 }
@@ -152,10 +200,10 @@ /**
 
-function bindToggle(_ref4) {
-  var _ref5;
+function bindToggle(_ref5) {
+  var _ref6;
 
-  var isOpen = _ref4.isOpen,
-      toggle = _ref4.toggle,
-      popupId = _ref4.popupId,
-      variant = _ref4.variant;
-  return _ref5 = {}, (0, _defineProperty2.default)(_ref5, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref5, 'aria-haspopup', true), (0, _defineProperty2.default)(_ref5, "onClick", toggle), _ref5;
+  var isOpen = _ref5.isOpen,
+      toggle = _ref5.toggle,
+      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', variant === 'popover' ? true : undefined), (0, _defineProperty2.default)(_ref6, "onClick", toggle), _ref6;
 }
@@ -170,11 +218,11 @@ /**
 
-function bindHover(_ref6) {
-  var _ref7;
+function bindHover(_ref7) {
+  var _ref8;
 
-  var isOpen = _ref6.isOpen,
-      open = _ref6.open,
-      onMouseLeave = _ref6.onMouseLeave,
-      popupId = _ref6.popupId,
-      variant = _ref6.variant;
-  return _ref7 = {}, (0, _defineProperty2.default)(_ref7, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref7, 'aria-haspopup', true), (0, _defineProperty2.default)(_ref7, "onMouseEnter", open), (0, _defineProperty2.default)(_ref7, "onMouseLeave", onMouseLeave), _ref7;
+  var isOpen = _ref7.isOpen,
+      open = _ref7.open,
+      onMouseLeave = _ref7.onMouseLeave,
+      popupId = _ref7.popupId,
+      variant = _ref7.variant;
+  return _ref8 = {}, (0, _defineProperty2.default)(_ref8, variant === 'popover' ? 'aria-owns' : 'aria-describedby', isOpen ? popupId : null), (0, _defineProperty2.default)(_ref8, 'aria-haspopup', variant === 'popover' ? true : undefined), (0, _defineProperty2.default)(_ref8, "onMouseEnter", open), (0, _defineProperty2.default)(_ref8, "onMouseLeave", onMouseLeave), _ref8;
 }
@@ -189,8 +237,8 @@ /**
 
-function bindPopover(_ref8) {
-  var isOpen = _ref8.isOpen,
-      anchorEl = _ref8.anchorEl,
-      close = _ref8.close,
-      popupId = _ref8.popupId,
-      onMouseLeave = _ref8.onMouseLeave;
+function bindPopover(_ref9) {
+  var isOpen = _ref9.isOpen,
+      anchorEl = _ref9.anchorEl,
+      close = _ref9.close,
+      popupId = _ref9.popupId,
+      onMouseLeave = _ref9.onMouseLeave;
   return {
@@ -222,6 +270,6 @@ id: popupId,
 
-function bindPopper(_ref9) {
-  var isOpen = _ref9.isOpen,
-      anchorEl = _ref9.anchorEl,
-      popupId = _ref9.popupId;
+function bindPopper(_ref10) {
+  var isOpen = _ref10.isOpen,
+      anchorEl = _ref10.anchorEl,
+      popupId = _ref10.popupId;
   return {
@@ -234,4 +282,4 @@ id: popupId,
 
-function getPopup(_ref10) {
-  var popupId = _ref10.popupId;
+function getPopup(_ref11) {
+  var popupId = _ref11.popupId;
   return popupId && typeof document !== 'undefined' ? document.getElementById(popupId) // eslint-disable-line no-undef
@@ -256,2 +304,12 @@ : null;
   return false;
+}
+
+function hasChanges(state, nextState) {
+  for (var key in nextState) {
+    if (state.hasOwnProperty(key) && state[key] !== nextState[key]) {
+      return true;
+    }
+  }
+
+  return false;
 }

es/core.js

@@ -7,2 +7,3 @@ "use strict";
 exports.createPopupState = createPopupState;
+exports.anchorRef = anchorRef;
 exports.bindTrigger = bindTrigger;
@@ -19,5 +20,10 @@ exports.bindToggle = bindToggle;
 
-/* eslint-env browser */
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
+
+function _defineProperty(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; }
+
 let eventOrAnchorElWarned = false;
 const initCoreState = {
+  isOpen: false,
+  setAnchorElUsed: false,
   anchorEl: null,
@@ -30,8 +36,4 @@ hovered: false,
 function createPopupState({
-  state: {
-    anchorEl,
-    hovered,
-    _childPopupState
-  },
-  setState,
+  state,
+  setState: _setState,
   parentPopupState,
@@ -41,10 +43,37 @@ popupId,
 }) {
+  const {
+    isOpen,
+    setAnchorElUsed,
+    anchorEl,
+    hovered,
+    _childPopupState
+  } = state; // use lastState to workaround cases where setState is called multiple times
+  // in a single render (e.g. because of refs being called multiple times)
+
+  let lastState = state;
+
+  const setState = nextState => {
+    if (hasChanges(lastState, nextState)) {
+      _setState(lastState = _objectSpread({}, lastState, nextState));
+    }
+  };
+
+  const setAnchorEl = _anchorEl => {
+    setState({
+      setAnchorElUsed: true,
+      anchorEl: _anchorEl
+    });
+  };
+
   const toggle = eventOrAnchorEl => {
-    if (anchorEl) close();else open(eventOrAnchorEl);
+    if (isOpen) close();else open(eventOrAnchorEl);
   };
 
   const open = eventOrAnchorEl => {
-    if (!eventOrAnchorElWarned && !eventOrAnchorEl) {
+    if (!eventOrAnchorElWarned && !eventOrAnchorEl && !setAnchorElUsed) {
       eventOrAnchorElWarned = true;
-      console.error('eventOrAnchorEl should be defined'); // eslint-disable-line no-console
+      /* eslint-disable no-console */
+
+      console.error('eventOrAnchorEl should be defined if setAnchorEl is not used');
+      /* eslint-enable no-console */
     }
@@ -62,6 +91,16 @@
 
-    setState({
-      anchorEl: eventOrAnchorEl && eventOrAnchorEl.currentTarget ? eventOrAnchorEl.currentTarget : eventOrAnchorEl,
-      hovered: eventOrAnchorEl.type === 'mouseenter'
-    });
+    const newState = {
+      isOpen: true,
+      hovered: eventOrAnchorEl && eventOrAnchorEl.type === 'mouseenter'
+    };
+
+    if (eventOrAnchorEl && eventOrAnchorEl.currentTarget) {
+      if (!setAnchorElUsed) {
+        newState.anchorEl = eventOrAnchorEl.currentTarget;
+      }
+    } else if (eventOrAnchorEl) {
+      newState.anchorEl = eventOrAnchorEl;
+    }
+
+    setState(newState);
   };
@@ -73,3 +112,3 @@
     setState({
-      anchorEl: null,
+      isOpen: false,
       hovered: false
@@ -81,6 +120,2 @@ });
     if (nextOpen) {
-      if (!eventOrAnchorEl) {
-        throw new Error('eventOrAnchorEl must be defined when opening');
-      }
-
       open(eventOrAnchorEl);
@@ -104,5 +139,7 @@ } else close();
     anchorEl,
+    setAnchorEl,
+    setAnchorElUsed,
     popupId,
     variant,
-    isOpen: anchorEl != null,
+    isOpen,
     open,
@@ -119,2 +156,17 @@ close,
 /**
+ * Creates a ref that sets the anchorEl for the popup.
+ *
+ * @param {object} popupState the argument passed to the child function of
+ * `PopupState`
+ */
+
+
+function anchorRef({
+  setAnchorEl
+}) {
+  return el => {
+    if (el) setAnchorEl(el);
+  };
+}
+/**
  * Creates props for a component that opens the popup when clicked.
@@ -135,3 +187,3 @@ *
     [variant === 'popover' ? 'aria-owns' : 'aria-describedby']: isOpen ? popupId : null,
-    'aria-haspopup': true,
+    'aria-haspopup': variant === 'popover' ? true : undefined,
     onClick: open
@@ -156,3 +208,3 @@ };
     [variant === 'popover' ? 'aria-owns' : 'aria-describedby']: isOpen ? popupId : null,
-    'aria-haspopup': true,
+    'aria-haspopup': variant === 'popover' ? true : undefined,
     onClick: toggle
@@ -178,3 +230,3 @@ };
     [variant === 'popover' ? 'aria-owns' : 'aria-describedby']: isOpen ? popupId : null,
-    'aria-haspopup': true,
+    'aria-haspopup': variant === 'popover' ? true : undefined,
     onMouseEnter: open,
@@ -261,2 +313,12 @@ onMouseLeave
   return false;
+}
+
+function hasChanges(state, nextState) {
+  for (let key in nextState) {
+    if (state.hasOwnProperty(key) && state[key] !== nextState[key]) {
+      return true;
+    }
+  }
+
+  return false;
 }

es/hooks.js

@@ -7,2 +7,8 @@ "use strict";
 exports.usePopupState = usePopupState;
+Object.defineProperty(exports, "anchorRef", {
+  enumerable: true,
+  get: function () {
+    return _core.anchorRef;
+  }
+});
 Object.defineProperty(exports, "bindTrigger", {
@@ -49,6 +55,3 @@ enumerable: true,
 
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; var ownKeys = Object.keys(source); if (typeof Object.getOwnPropertySymbols === 'function') { ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) { return Object.getOwnPropertyDescriptor(source, sym).enumerable; })); } ownKeys.forEach(function (key) { _defineProperty(target, key, source[key]); }); } return target; }
-
-function _defineProperty(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; }
-
+/* eslint-env browser */
 if (!_react.useState) {
@@ -63,3 +66,3 @@ throw new Error(`React.useState (added in 16.8.0) must be defined to use the hooks API`);
 }) {
-  const [state, _setState] = (0, _react.useState)(_core.initCoreState);
+  const [state, setState] = (0, _react.useState)(_core.initCoreState);
   const isMounted = (0, _react.useRef)(true);
@@ -75,7 +78,2 @@ (0, _react.useEffect)(() => () => {
   }, [popupId, state.anchorEl]);
-
-  const setState = nextState => {
-    if (isMounted.current) _setState(_objectSpread({}, state, nextState));
-  };
-
   return (0, _core.createPopupState)({
@@ -82,0 +80,0 @@ state,

es/hoverWorkaround.js

@@ -41,9 +41,13 @@ "use strict";
       },
-      ModalClasses
+      ModalClasses,
+      style
     } = _ref,
         classes = _objectWithoutProperties(_ref.classes, ["_modalRoot"]),
-        props = _objectWithoutProperties(_ref, ["classes", "ModalClasses"]);
+        props = _objectWithoutProperties(_ref, ["classes", "ModalClasses", "style"]);
 
     return React.createElement(Comp, _extends({
       classes: classes,
+      style: _objectSpread({
+        pointerEvents: 'none'
+      }, style),
       ModalClasses: _objectSpread({}, ModalClasses, {
@@ -50,0 +54,0 @@ root: ModalClasses && ModalClasses.root ? `${ModalClasses.root} ${_modalRoot}` : _modalRoot

es/index.js

@@ -6,2 +6,8 @@ "use strict";
 });
+Object.defineProperty(exports, "anchorRef", {
+  enumerable: true,
+  get: function () {
+    return _core.anchorRef;
+  }
+});
 Object.defineProperty(exports, "bindTrigger", {
@@ -8,0 +14,0 @@ enumerable: true,

hooks.js

@@ -9,2 +9,8 @@ "use strict";
 exports.usePopupState = usePopupState;
+Object.defineProperty(exports, "anchorRef", {
+  enumerable: true,
+  get: function get() {
+    return _core.anchorRef;
+  }
+});
 Object.defineProperty(exports, "bindTrigger", {
@@ -47,4 +53,2 @@ enumerable: true,
 
-var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread"));
-
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
@@ -71,3 +75,3 @@
       state = _useState2[0],
-      _setState = _useState2[1];
+      setState = _useState2[1];
 
@@ -86,7 +90,2 @@ var isMounted = (0, _react.useRef)(true);
   }, [popupId, state.anchorEl]);
-
-  var setState = function setState(nextState) {
-    if (isMounted.current) _setState((0, _objectSpread2.default)({}, state, nextState));
-  };
-
   return (0, _core.createPopupState)({
@@ -93,0 +92,0 @@ state: state,

hoverWorkaround.js

@@ -37,5 +37,9 @@ "use strict";
         ModalClasses = _ref.ModalClasses,
-        props = (0, _objectWithoutProperties2.default)(_ref, ["classes", "ModalClasses"]);
+        style = _ref.style,
+        props = (0, _objectWithoutProperties2.default)(_ref, ["classes", "ModalClasses", "style"]);
     return React.createElement(Comp, (0, _extends2.default)({
       classes: classes,
+      style: (0, _objectSpread2.default)({
+        pointerEvents: 'none'
+      }, style),
       ModalClasses: (0, _objectSpread2.default)({}, ModalClasses, {
@@ -42,0 +46,0 @@ root: ModalClasses && ModalClasses.root ? "".concat(ModalClasses.root, " ").concat(_modalRoot) : _modalRoot

index.js

@@ -10,2 +10,8 @@ "use strict";
 });
+Object.defineProperty(exports, "anchorRef", {
+  enumerable: true,
+  get: function get() {
+    return _core.anchorRef;
+  }
+});
 Object.defineProperty(exports, "bindTrigger", {
@@ -12,0 +18,0 @@ enumerable: true,

package.json

 {
   "name": "material-ui-popup-state",
-  "version": "1.3.2",
+  "version": "1.4.0",
   "description": "easiest way to create menus, popovers, and poppers with material-ui",
@@ -108,4 +108,4 @@ "main": "index.js",
     "@jedwards1211/eslint-config-react": "^4.0.0",
-    "@material-ui/core": "^3.0.0",
-    "@material-ui/icons": "^3.0.2",
+    "@material-ui/core": "^4.0.2",
+    "@material-ui/icons": "^4.0.1",
     "babel-eslint": "^10.0.1",
@@ -112,0 +112,0 @@ "babel-loader": "^8.0.5",

README.md

@@ -198,2 +198,5 @@ # material-ui-popup-state
 
+- `anchorRef`: creates a `ref` function to pass to the `anchorEl`
+  (by default, the `currentTarget` of the mouse event that triggered the popup
+  is used; only use `anchorRef` if you want a different element to be the anchor).
 - `bindMenu`: creates props to control a `Menu` component.
@@ -262,8 +265,10 @@ - `bindPopover`: creates props to control a `Popover` component.
 
-- `open(eventOrAnchorEl)`: opens the popup
+- `open([eventOrAnchorEl])`: opens the popup
 - `close()`: closes the popup
-- `toggle(eventOrAnchorEl)`: opens the popup if it is closed, or closes the popup if it is open.
-- `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open. `eventOrAnchorEl` is required if `open` is truthy.
+- `toggle([eventOrAnchorEl])`: opens the popup if it is closed, or closes the popup if it is open.
+- `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open.
 - `isOpen`: `true`/`false` if the popup is open/closed
-- `anchorEl`: the current anchor element (`null` when the popup is closed)
+- `anchorEl`: the current anchor element
+- `setAnchorEl`: sets the anchor element (the `currentTarget` of the triggering
+  mouse event is used by default unless you have called `setAnchorEl`)
 - `popupId`: the `popupId` prop you passed to `PopupState`
@@ -466,2 +471,5 @@ - `variant`: the `variant` prop you passed to `PopupState`
 
+- `anchorRef`: creates a `ref` function to pass to the `anchorEl`
+  (by default, the `currentTarget` of the mouse event that triggered the popup
+  is used; only use `anchorRef` if you want a different element to be the anchor).
 - `bindMenu`: creates props to control a `Menu` component.
@@ -524,9 +532,11 @@ - `bindPopover`: creates props to control a `Popover` component.
 
-- `open(eventOrAnchorEl)`: opens the popup
+- `open([eventOrAnchorEl])`: opens the popup
 - `close()`: closes the popup
-- `toggle(eventOrAnchorEl)`: opens the popup if it is closed, or closes the popup if it is open.
-- `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open. `eventOrAnchorEl` is required if `open` is truthy.
+- `toggle([eventOrAnchorEl])`: opens the popup if it is closed, or closes the popup if it is open.
+- `setOpen(open, [eventOrAnchorEl])`: sets whether the popup is open.
 - `isOpen`: `true`/`false` if the popup is open/closed
-- `anchorEl`: the current anchor element (`null` when the popup is closed)
+- `anchorEl`: the current anchor element
+- `setAnchorEl`: sets the anchor element (the `currentTarget` of the triggering
+  mouse event is used by default unless you have called `setAnchorEl`)
 - `popupId`: the `popupId` prop you passed to `PopupState`
 - `variant`: the `variant` prop you passed to `PopupState`

No alert changes

Improved metrics

Total package byte prevSize

551852

increased by2.01%

Lines of code

1158

increased by11.99%

Number of lines in readme file

539

increased by1.89%

No dependency changes