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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Fixed alerts

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

53528

2.6%

Lines of code

849

0.35%

Number of lines in readme file

395

9.72%

Number of medium supply chain risk alerts

0

-100%

No dependency changes