react-onclickoutside - npm Package Compare versions

Comparing version 6.7.1 to 6.8.0

dist/react-onclickoutside.cjs.js

@@ -159,2 +159,3 @@ 'use strict';
 
+  var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   return _temp = _class =
@@ -189,3 +190,3 @@ /*#__PURE__*/
 
-        throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
+        throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
       };
@@ -210,3 +211,2 @@
         handlersMap[_this._uid] = function (event) {
-          if (_this.props.disableOnClickOutside) return;
           if (_this.componentNode === null) return;
@@ -296,7 +296,9 @@
         if (typeof this.__clickOutsideHandlerProp !== 'function') {
-          throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
+          throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
         }
       }
 
-      this.componentNode = reactDom.findDOMNode(this.getInstance());
+      this.componentNode = reactDom.findDOMNode(this.getInstance()); // return early so we dont initiate onClickOutside
+
+      if (this.props.disableOnClickOutside) return;
       this.enableOnClickOutside();
@@ -343,3 +345,3 @@ };
     return onClickOutside;
-  }(react.Component), _class.displayName = "OnClickOutside(" + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ")", _class.defaultProps = {
+  }(react.Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
     eventTypes: ['mousedown', 'touchstart'],
@@ -346,0 +348,0 @@ excludeScrollbar: config && config.excludeScrollbar || false,

dist/react-onclickoutside.es.js

@@ -155,2 +155,3 @@ import { Component, createElement } from 'react';
 
+  var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   return _temp = _class =
@@ -185,3 +186,3 @@ /*#__PURE__*/
 
-        throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
+        throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
       };
@@ -206,3 +207,2 @@
         handlersMap[_this._uid] = function (event) {
-          if (_this.props.disableOnClickOutside) return;
           if (_this.componentNode === null) return;
@@ -292,7 +292,9 @@
         if (typeof this.__clickOutsideHandlerProp !== 'function') {
-          throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
+          throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
         }
       }
 
-      this.componentNode = findDOMNode(this.getInstance());
+      this.componentNode = findDOMNode(this.getInstance()); // return early so we dont initiate onClickOutside
+
+      if (this.props.disableOnClickOutside) return;
       this.enableOnClickOutside();
@@ -339,3 +341,3 @@ };
     return onClickOutside;
-  }(Component), _class.displayName = "OnClickOutside(" + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ")", _class.defaultProps = {
+  }(Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
     eventTypes: ['mousedown', 'touchstart'],
@@ -342,0 +344,0 @@ excludeScrollbar: config && config.excludeScrollbar || false,

dist/react-onclickoutside.js

@@ -158,2 +158,3 @@ (function (global, factory) {
 
+  var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
   return _temp = _class =
@@ -188,3 +189,3 @@ /*#__PURE__*/
 
-        throw new Error('WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.');
+        throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
       };
@@ -209,3 +210,2 @@
         handlersMap[_this._uid] = function (event) {
-          if (_this.props.disableOnClickOutside) return;
           if (_this.componentNode === null) return;
@@ -295,7 +295,9 @@
         if (typeof this.__clickOutsideHandlerProp !== 'function') {
-          throw new Error('WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.');
+          throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
         }
       }
 
-      this.componentNode = reactDom.findDOMNode(this.getInstance());
+      this.componentNode = reactDom.findDOMNode(this.getInstance()); // return early so we dont initiate onClickOutside
+
+      if (this.props.disableOnClickOutside) return;
       this.enableOnClickOutside();
@@ -342,3 +344,3 @@ };
     return onClickOutside;
-  }(react.Component), _class.displayName = "OnClickOutside(" + (WrappedComponent.displayName || WrappedComponent.name || 'Component') + ")", _class.defaultProps = {
+  }(react.Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
     eventTypes: ['mousedown', 'touchstart'],
@@ -345,0 +347,0 @@ excludeScrollbar: config && config.excludeScrollbar || false,

dist/react-onclickoutside.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t(e.onClickOutside={},e.React,e.ReactDOM)}(this,function(e,t,n){"use strict";var o=function(){if("undefined"!=typeof window&&"function"==typeof window.addEventListener){var e=!1,t=Object.defineProperty({},"passive",{get:function(){e=!0}}),n=function(){};return window.addEventListener("testPassiveEventSupport",n,t),window.removeEventListener("testPassiveEventSupport",n,t),e}};var i,r,c=(void 0===i&&(i=0),function(){return++i}),s={},d={},u=["touchstart","touchmove"],a="ignore-react-onclickoutside";function l(e,t){var n=null;return-1!==u.indexOf(t)&&r&&(n={passive:!e.props.preventDefault}),n}e.IGNORE_CLASS_NAME=a,e.default=function(e,i){var u,p;return p=u=function(u){var a,p;function f(e){var t;return(t=u.call(this,e)||this).__outsideClickHandler=function(e){if("function"!=typeof t.__clickOutsideHandlerProp){var n=t.getInstance();if("function"!=typeof n.props.handleClickOutside){if("function"!=typeof n.handleClickOutside)throw Error("WrappedComponent lacks a handleClickOutside(event) function for processing outside click events.");n.handleClickOutside(e)}else n.props.handleClickOutside(e)}else t.__clickOutsideHandlerProp(e)},t.enableOnClickOutside=function(){if("undefined"!=typeof document&&!d[t._uid]){void 0===r&&(r=o()),d[t._uid]=!0;var e=t.props.eventTypes;e.forEach||(e=[e]),s[t._uid]=function(e){var n;t.props.disableOnClickOutside||null!==t.componentNode&&(t.props.preventDefault&&e.preventDefault(),t.props.stopPropagation&&e.stopPropagation(),(!t.props.excludeScrollbar||(n=e,document.documentElement.clientWidth>n.clientX&&document.documentElement.clientHeight>n.clientY))&&function(e,t,n){if(e===t)return!0;for(;e.parentNode;){if(i=n,(o=e)===t||(o.correspondingElement?o.correspondingElement.classList.contains(i):o.classList.contains(i)))return!0;e=e.parentNode}var o,i;return e}(e.target,t.componentNode,t.props.outsideClickIgnoreClass)===document&&t.__outsideClickHandler(e))},e.forEach(function(e){document.addEventListener(e,s[t._uid],l(t,e))})}},t.disableOnClickOutside=function(){delete d[t._uid];var e=s[t._uid];if(e&&"undefined"!=typeof document){var n=t.props.eventTypes;n.forEach||(n=[n]),n.forEach(function(n){return document.removeEventListener(n,e,l(t,n))}),delete s[t._uid]}},t.getRef=function(e){return t.instanceRef=e},t._uid=c(),t}(a=f).prototype=Object.create((p=u).prototype),a.prototype.constructor=a,a.__proto__=p;var O=f.prototype;return O.getInstance=function(){if(!e.prototype.isReactComponent)return this;var t=this.instanceRef;return t.getInstance?t.getInstance():t},O.componentDidMount=function(){if("undefined"!=typeof document&&document.createElement){var e=this.getInstance();if(i&&"function"==typeof i.handleClickOutside&&(this.__clickOutsideHandlerProp=i.handleClickOutside(e),"function"!=typeof this.__clickOutsideHandlerProp))throw Error("WrappedComponent lacks a function for processing outside click events specified by the handleClickOutside config option.");this.componentNode=n.findDOMNode(this.getInstance()),this.enableOnClickOutside()}},O.componentDidUpdate=function(){this.componentNode=n.findDOMNode(this.getInstance())},O.componentWillUnmount=function(){this.disableOnClickOutside()},O.render=function(){var n=this.props,o=function(e,t){if(null==e)return{};var n,o,i={},r=Object.keys(e);for(o=0;r.length>o;o++)0>t.indexOf(n=r[o])&&(i[n]=e[n]);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;c.length>o;o++)0>t.indexOf(n=c[o])&&Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,["excludeScrollbar"]);return e.prototype.isReactComponent?o.ref=this.getRef:o.wrappedRef=this.getRef,o.disableOnClickOutside=this.disableOnClickOutside,o.enableOnClickOutside=this.enableOnClickOutside,t.createElement(e,o)},f}(t.Component),u.displayName="OnClickOutside("+(e.displayName||e.name||"Component")+")",u.defaultProps={eventTypes:["mousedown","touchstart"],excludeScrollbar:i&&i.excludeScrollbar||!1,outsideClickIgnoreClass:a,preventDefault:!1,stopPropagation:!1},u.getClass=function(){return e.getClass?e.getClass():e},p},Object.defineProperty(e,"__esModule",{value:!0})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react"),require("react-dom")):"function"==typeof define&&define.amd?define(["exports","react","react-dom"],t):t(e.onClickOutside={},e.React,e.ReactDOM)}(this,function(e,t,n){"use strict";function o(e,t,n){return e===t||(e.correspondingElement?e.correspondingElement.classList.contains(n):e.classList.contains(n))}function i(e,t){var n=null;return-1!==a.indexOf(t)&&r&&(n={passive:!e.props.preventDefault}),n}var r,c=function(){if("undefined"!=typeof window&&"function"==typeof window.addEventListener){var e=!1,t=Object.defineProperty({},"passive",{get:function(){e=!0}}),n=function(){};return window.addEventListener("testPassiveEventSupport",n,t),window.removeEventListener("testPassiveEventSupport",n,t),e}},s=function(e){return void 0===e&&(e=0),function(){return++e}}(),u={},d={},a=["touchstart","touchmove"],l="ignore-react-onclickoutside";e.IGNORE_CLASS_NAME=l,e.default=function(e,a){var p,f,O=e.displayName||e.name||"Component";return f=p=function(l){function p(e){var t;return t=l.call(this,e)||this,t.__outsideClickHandler=function(e){if("function"!=typeof t.__clickOutsideHandlerProp){var n=t.getInstance();if("function"!=typeof n.props.handleClickOutside){if("function"!=typeof n.handleClickOutside)throw Error("WrappedComponent: "+O+" lacks a handleClickOutside(event) function for processing outside click events.");n.handleClickOutside(e)}else n.props.handleClickOutside(e)}else t.__clickOutsideHandlerProp(e)},t.enableOnClickOutside=function(){if("undefined"!=typeof document&&!d[t._uid]){void 0===r&&(r=c()),d[t._uid]=!0;var e=t.props.eventTypes;e.forEach||(e=[e]),u[t._uid]=function(e){null===t.componentNode||(t.props.preventDefault&&e.preventDefault(),t.props.stopPropagation&&e.stopPropagation(),t.props.excludeScrollbar&&function(e){return document.documentElement.clientWidth<=e.clientX||document.documentElement.clientHeight<=e.clientY}(e))||function(e,t,n){if(e===t)return!0;for(;e.parentNode;){if(o(e,t,n))return!0;e=e.parentNode}return e}(e.target,t.componentNode,t.props.outsideClickIgnoreClass)===document&&t.__outsideClickHandler(e)},e.forEach(function(e){document.addEventListener(e,u[t._uid],i(t,e))})}},t.disableOnClickOutside=function(){delete d[t._uid];var e=u[t._uid];if(e&&"undefined"!=typeof document){var n=t.props.eventTypes;n.forEach||(n=[n]),n.forEach(function(n){return document.removeEventListener(n,e,i(t,n))}),delete u[t._uid]}},t.getRef=function(e){return t.instanceRef=e},t._uid=s(),t}!function(e,t){e.prototype=Object.create(t.prototype),e.prototype.constructor=e,e.__proto__=t}(p,l);var f=p.prototype;return f.getInstance=function(){if(!e.prototype.isReactComponent)return this;var t=this.instanceRef;return t.getInstance?t.getInstance():t},f.componentDidMount=function(){if("undefined"!=typeof document&&document.createElement){var e=this.getInstance();if(a&&"function"==typeof a.handleClickOutside&&(this.__clickOutsideHandlerProp=a.handleClickOutside(e),"function"!=typeof this.__clickOutsideHandlerProp))throw Error("WrappedComponent: "+O+" lacks a function for processing outside click events specified by the handleClickOutside config option.");this.componentNode=n.findDOMNode(this.getInstance()),this.props.disableOnClickOutside||this.enableOnClickOutside()}},f.componentDidUpdate=function(){this.componentNode=n.findDOMNode(this.getInstance())},f.componentWillUnmount=function(){this.disableOnClickOutside()},f.render=function(){var n=this.props,o=function(e,t){if(null==e)return{};var n,o,i={},r=Object.keys(e);for(o=0;r.length>o;o++)0>t.indexOf(n=r[o])&&(i[n]=e[n]);if(Object.getOwnPropertySymbols){var c=Object.getOwnPropertySymbols(e);for(o=0;c.length>o;o++)0>t.indexOf(n=c[o])&&Object.prototype.propertyIsEnumerable.call(e,n)&&(i[n]=e[n])}return i}(n,["excludeScrollbar"]);return e.prototype.isReactComponent?o.ref=this.getRef:o.wrappedRef=this.getRef,o.disableOnClickOutside=this.disableOnClickOutside,o.enableOnClickOutside=this.enableOnClickOutside,t.createElement(e,o)},p}(t.Component),p.displayName="OnClickOutside("+O+")",p.defaultProps={eventTypes:["mousedown","touchstart"],excludeScrollbar:a&&a.excludeScrollbar||!1,outsideClickIgnoreClass:l,preventDefault:!1,stopPropagation:!1},p.getClass=function(){return e.getClass?e.getClass():e},f},Object.defineProperty(e,"__esModule",{value:!0})});

package.json

 {
   "name": "react-onclickoutside",
-  "version": "6.7.1",
+  "version": "6.8.0",
   "description": "An onClickOutside wrapper for React components",
@@ -41,3 +41,3 @@ "main": "dist/react-onclickoutside.cjs.js",
     "precommit": "npm test && lint-staged",
-    "prepublish": "test $(npm -v | tr . '\\n' | head -n 1) -ge '4' || exit 1",
+    "prepublish": "",
     "prepare": "npm run build",
@@ -44,0 +44,0 @@ "prerelease": "npm run test",

README.md

@@ -25,2 +25,7 @@ [![npm version](https://img.shields.io/npm/v/react-onclickoutside.svg)](https://www.npmjs.com/package/react-onclickoutside)
 * [Installation](#installation)
+* [Usage:](#usage)
+  * [ES6 Class Component](#es6-class-component)
+  * [Functional Component with UseState Hook](#functional-component-with-usestate-hook)
+  * [CommonJS Require](#commonjs-require)
+* [Ensuring there's a click handler](#ensuring-there-is-a-click-handler)
 * [Regulate which events to listen for](#regulate-which-events-to-listen-for)
@@ -49,4 +54,8 @@ * [Regulate whether or not to listen for outside clicks](#regulate-whether-or-not-to-listen-for-outside-clicks)
 
+
+## Usage
+
+### ES6 Class Component
+
 ```js
-// ES6 Class and Module Syntax
 import React, { Component } from "react";
@@ -64,6 +73,30 @@ import onClickOutside from "react-onclickoutside";
 
-or:
+### Functional Component with UseState Hook
 
 ```js
-// good old node.js/CommonJS require
+React, { useState } from "react";
+import onClickOutside from "react-onclickoutside";
+
+const Menu = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  const toggle = () => setIsOpen(!isOpen);
+  Menu.handleClickOutside = () => setIsOpen(false);
+  return (
+      //...
+  )
+};
+
+const clickOutsideConfig = {
+  handleClickOutside: () => Menu.handleClickOutside
+};
+
+export default onClickOutside(Menu, clickOutsideConfig);
+```
+
+Example: https://codesandbox.io/s/vn66kq7mml
+
+
+### CommonJS Require
+
+```js
 // .default is needed because library is bundled as ES6 module
@@ -85,2 +118,4 @@ var onClickOutside = require("react-onclickoutside").default;
 
+### Ensuring there is a click handler
+
 Note that if you try to wrap a React component class without a
@@ -320,6 +355,6 @@ `handleClickOutside(evt)` handler like this, the HOC will throw an error. In
 
-This is true, but also an edge-case problem that only exists for older versions
-of IE (including IE11), and should be addressed by you, rather than by thousands
-of individual libraries that assume browsers have proper HTML API
-implementations (IE Edge has proper `classList` support even for SVG).
+This is true, but also an edge-case problem that only exists for IE11 (as all
+versions prior to 11 [no longer exist](https://support.microsoft.com/en-us/help/17454/lifecycle-faq-internet-explorer)), and should be addressed by you, rather
+than by thousands of individual libraries that assume browsers have proper
+HTML API  implementations (IE Edge has proper `classList` support even for SVG).
 
@@ -362,4 +397,4 @@ If you need this to work, you can add a shim for `classList` to your page(s),
 for, then the README is missing important information that should be added in.
-Please [file an issue](issues) with a request for additional documentation,
+Please [file an issue](https://github.com/Pomax/react-onclickoutside/issues) with a request for additional documentation,
 describing what you were hoping to find in enough detail that it can be used to
 write up the information you needed.

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53528

increased by2.6%

Lines of code

849

increased by0.35%

Number of lines in readme file

395

increased by9.72%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes