Socket
Socket
Sign inDemoInstall

react-onclickoutside

Package Overview
Dependencies
Maintainers
2
Versions
79
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-onclickoutside - npm Package Compare versions

Comparing version 6.10.0 to 6.11.0

57

dist/react-onclickoutside.cjs.js

@@ -11,6 +11,16 @@ 'use strict';

subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
_setPrototypeOf(subClass, superClass);
}
function _objectWithoutProperties(source, excluded) {
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};

@@ -27,14 +37,11 @@ var target = {};

if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
return target;
}
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return target;
return self;
}

@@ -162,5 +169,3 @@

var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
return _temp = _class =
/*#__PURE__*/
function (_Component) {
return _temp = _class = /*#__PURE__*/function (_Component) {
_inheritsLoose(onClickOutside, _Component);

@@ -247,3 +252,3 @@

events.forEach(function (eventName) {
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_this, eventName));
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});

@@ -264,3 +269,3 @@ };

events.forEach(function (eventName) {
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_this, eventName));
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});

@@ -286,3 +291,3 @@ delete handlersMap[_this._uid];

_proto.getInstance = function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
if (WrappedComponent.prototype && !WrappedComponent.prototype.isReactComponent) {
return this;

@@ -325,11 +330,11 @@ }

this.componentNode = this.__getComponentNode();
};
}
/**
* Remove all document's event listeners for this component
*/
;
_proto.componentWillUnmount = function componentWillUnmount() {
this.disableOnClickOutside();
};
}
/**

@@ -339,4 +344,4 @@ * Can be called to explicitly enable event listening

*/
;
/**

@@ -347,7 +352,7 @@ * Pass-through render

// eslint-disable-next-line no-unused-vars
var _props = this.props,
excludeScrollbar = _props.excludeScrollbar,
props = _objectWithoutProperties(_props, ["excludeScrollbar"]);
var _this$props = this.props;
_this$props.excludeScrollbar;
var props = _objectWithoutPropertiesLoose(_this$props, ["excludeScrollbar"]);
if (WrappedComponent.prototype.isReactComponent) {
if (WrappedComponent.prototype && WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;

@@ -376,2 +381,2 @@ } else {

exports.IGNORE_CLASS_NAME = IGNORE_CLASS_NAME;
exports['default'] = onClickOutsideHOC;
exports.default = onClickOutsideHOC;

59

dist/react-onclickoutside.es.js

@@ -1,2 +0,2 @@

import { Component, createElement } from 'react';
import { createElement, Component } from 'react';
import { findDOMNode } from 'react-dom';

@@ -7,6 +7,16 @@

subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
_setPrototypeOf(subClass, superClass);
}
function _objectWithoutProperties(source, excluded) {
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};

@@ -23,14 +33,11 @@ var target = {};

if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
return target;
}
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return target;
return self;
}

@@ -158,5 +165,3 @@

var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
return _temp = _class =
/*#__PURE__*/
function (_Component) {
return _temp = _class = /*#__PURE__*/function (_Component) {
_inheritsLoose(onClickOutside, _Component);

@@ -243,3 +248,3 @@

events.forEach(function (eventName) {
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_this, eventName));
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});

@@ -260,3 +265,3 @@ };

events.forEach(function (eventName) {
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_this, eventName));
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});

@@ -282,3 +287,3 @@ delete handlersMap[_this._uid];

_proto.getInstance = function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
if (WrappedComponent.prototype && !WrappedComponent.prototype.isReactComponent) {
return this;

@@ -321,11 +326,11 @@ }

this.componentNode = this.__getComponentNode();
};
}
/**
* Remove all document's event listeners for this component
*/
;
_proto.componentWillUnmount = function componentWillUnmount() {
this.disableOnClickOutside();
};
}
/**

@@ -335,4 +340,4 @@ * Can be called to explicitly enable event listening

*/
;
/**

@@ -343,7 +348,7 @@ * Pass-through render

// eslint-disable-next-line no-unused-vars
var _props = this.props,
excludeScrollbar = _props.excludeScrollbar,
props = _objectWithoutProperties(_props, ["excludeScrollbar"]);
var _this$props = this.props;
_this$props.excludeScrollbar;
var props = _objectWithoutPropertiesLoose(_this$props, ["excludeScrollbar"]);
if (WrappedComponent.prototype.isReactComponent) {
if (WrappedComponent.prototype && WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;

@@ -371,3 +376,3 @@ } else {

export default onClickOutsideHOC;
export { IGNORE_CLASS_NAME };
export default onClickOutsideHOC;

553

dist/react-onclickoutside.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
(factory((global.onClickOutside = {}),global.React,global.ReactDOM));
}(this, (function (exports,react,reactDom) { 'use strict';
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.onClickOutside = {}, global.React, global.ReactDOM));
}(this, (function (exports, react, reactDom) { 'use strict';
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
subClass.__proto__ = superClass;
}
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
_setPrototypeOf(subClass, superClass);
}
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
return target;
}
return target;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
/**
* Check whether some DOM node is our Component's node.
*/
function isNodeFound(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
} // SVG <use/> elements do not technically reside in the rendered DOM, so
// they do not have classList directly, but they offer a link to their
// corresponding element, which can have classList. This extra check is for
// that case.
// See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement
// Discussion: https://github.com/Pomax/react-onclickoutside/pull/17
return self;
}
/**
* Check whether some DOM node is our Component's node.
*/
function isNodeFound(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
} // SVG <use/> elements do not technically reside in the rendered DOM, so
// they do not have classList directly, but they offer a link to their
// corresponding element, which can have classList. This extra check is for
// that case.
// See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement
// Discussion: https://github.com/Pomax/react-onclickoutside/pull/17
if (current.correspondingElement) {
return current.correspondingElement.classList.contains(ignoreClass);
if (current.correspondingElement) {
return current.correspondingElement.classList.contains(ignoreClass);
}
return current.classList.contains(ignoreClass);
}
/**
* Try to find our node in a hierarchy of nodes, returning the document
* node as highest node if our node is not found in the path up.
*/
return current.classList.contains(ignoreClass);
}
/**
* Try to find our node in a hierarchy of nodes, returning the document
* node as highest node if our node is not found in the path up.
*/
function findHighest(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
} // If source=local then this event came from 'somewhere'
// inside and should be ignored. We could handle this with
// a layered approach, too, but that requires going back to
// thinking in terms of Dom node nesting, running counter
// to React's 'you shouldn't care about the DOM' philosophy.
function findHighest(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
} // If source=local then this event came from 'somewhere'
// inside and should be ignored. We could handle this with
// a layered approach, too, but that requires going back to
// thinking in terms of Dom node nesting, running counter
// to React's 'you shouldn't care about the DOM' philosophy.
while (current.parentNode) {
if (isNodeFound(current, componentNode, ignoreClass)) {
return true;
}
while (current.parentNode) {
if (isNodeFound(current, componentNode, ignoreClass)) {
return true;
current = current.parentNode;
}
current = current.parentNode;
return current;
}
/**
* Check if the browser scrollbar was clicked
*/
return current;
}
/**
* Check if the browser scrollbar was clicked
*/
function clickedScrollbar(evt) {
return document.documentElement.clientWidth <= evt.clientX || document.documentElement.clientHeight <= evt.clientY;
}
// ideally will get replaced with external dep
// when rafrex/detect-passive-events#4 and rafrex/detect-passive-events#5 get merged in
var testPassiveEventSupport = function testPassiveEventSupport() {
if (typeof window === 'undefined' || typeof window.addEventListener !== 'function') {
return;
function clickedScrollbar(evt) {
return document.documentElement.clientWidth <= evt.clientX || document.documentElement.clientHeight <= evt.clientY;
}
var passive = false;
var options = Object.defineProperty({}, 'passive', {
get: function get() {
passive = true;
// ideally will get replaced with external dep
// when rafrex/detect-passive-events#4 and rafrex/detect-passive-events#5 get merged in
var testPassiveEventSupport = function testPassiveEventSupport() {
if (typeof window === 'undefined' || typeof window.addEventListener !== 'function') {
return;
}
});
var noop = function noop() {};
var passive = false;
var options = Object.defineProperty({}, 'passive', {
get: function get() {
passive = true;
}
});
window.addEventListener('testPassiveEventSupport', noop, options);
window.removeEventListener('testPassiveEventSupport', noop, options);
return passive;
};
var noop = function noop() {};
function autoInc(seed) {
if (seed === void 0) {
seed = 0;
}
return function () {
return ++seed;
window.addEventListener('testPassiveEventSupport', noop, options);
window.removeEventListener('testPassiveEventSupport', noop, options);
return passive;
};
}
var uid = autoInc();
function autoInc(seed) {
if (seed === void 0) {
seed = 0;
}
var passiveEventSupport;
var handlersMap = {};
var enabledInstances = {};
var touchEvents = ['touchstart', 'touchmove'];
var IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';
/**
* Options for addEventHandler and removeEventHandler
*/
function getEventHandlerOptions(instance, eventName) {
var handlerOptions = null;
var isTouchEvent = touchEvents.indexOf(eventName) !== -1;
if (isTouchEvent && passiveEventSupport) {
handlerOptions = {
passive: !instance.props.preventDefault
return function () {
return ++seed;
};
}
return handlerOptions;
}
/**
* This function generates the HOC function that you'll use
* in order to impart onOutsideClick listening to an
* arbitrary component. It gets called at the end of the
* bootstrapping code to yield an instance of the
* onClickOutsideHOC function defined inside setupHOC().
*/
var uid = autoInc();
var passiveEventSupport;
var handlersMap = {};
var enabledInstances = {};
var touchEvents = ['touchstart', 'touchmove'];
var IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';
/**
* Options for addEventHandler and removeEventHandler
*/
function onClickOutsideHOC(WrappedComponent, config) {
var _class, _temp;
function getEventHandlerOptions(instance, eventName) {
var handlerOptions = null;
var isTouchEvent = touchEvents.indexOf(eventName) !== -1;
var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
return _temp = _class =
/*#__PURE__*/
function (_Component) {
_inheritsLoose(onClickOutside, _Component);
if (isTouchEvent && passiveEventSupport) {
handlerOptions = {
passive: !instance.props.preventDefault
};
}
function onClickOutside(props) {
var _this;
return handlerOptions;
}
/**
* This function generates the HOC function that you'll use
* in order to impart onOutsideClick listening to an
* arbitrary component. It gets called at the end of the
* bootstrapping code to yield an instance of the
* onClickOutsideHOC function defined inside setupHOC().
*/
_this = _Component.call(this, props) || this;
_this.__outsideClickHandler = function (event) {
if (typeof _this.__clickOutsideHandlerProp === 'function') {
_this.__clickOutsideHandlerProp(event);
function onClickOutsideHOC(WrappedComponent, config) {
var _class, _temp;
return;
}
var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
return _temp = _class = /*#__PURE__*/function (_Component) {
_inheritsLoose(onClickOutside, _Component);
var instance = _this.getInstance();
function onClickOutside(props) {
var _this;
if (typeof instance.props.handleClickOutside === 'function') {
instance.props.handleClickOutside(event);
return;
}
_this = _Component.call(this, props) || this;
if (typeof instance.handleClickOutside === 'function') {
instance.handleClickOutside(event);
return;
}
_this.__outsideClickHandler = function (event) {
if (typeof _this.__clickOutsideHandlerProp === 'function') {
_this.__clickOutsideHandlerProp(event);
throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
};
return;
}
_this.__getComponentNode = function () {
var instance = _this.getInstance();
var instance = _this.getInstance();
if (config && typeof config.setClickOutsideRef === 'function') {
return config.setClickOutsideRef()(instance);
}
if (typeof instance.props.handleClickOutside === 'function') {
instance.props.handleClickOutside(event);
return;
}
if (typeof instance.setClickOutsideRef === 'function') {
return instance.setClickOutsideRef();
}
if (typeof instance.handleClickOutside === 'function') {
instance.handleClickOutside(event);
return;
}
return reactDom.findDOMNode(instance);
};
throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
};
_this.enableOnClickOutside = function () {
if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
return;
}
_this.__getComponentNode = function () {
var instance = _this.getInstance();
if (typeof passiveEventSupport === 'undefined') {
passiveEventSupport = testPassiveEventSupport();
}
enabledInstances[_this._uid] = true;
var events = _this.props.eventTypes;
if (!events.forEach) {
events = [events];
}
handlersMap[_this._uid] = function (event) {
if (_this.componentNode === null) return;
if (_this.props.preventDefault) {
event.preventDefault();
if (config && typeof config.setClickOutsideRef === 'function') {
return config.setClickOutsideRef()(instance);
}
if (_this.props.stopPropagation) {
event.stopPropagation();
if (typeof instance.setClickOutsideRef === 'function') {
return instance.setClickOutsideRef();
}
if (_this.props.excludeScrollbar && clickedScrollbar(event)) return;
var current = event.target;
return reactDom.findDOMNode(instance);
};
if (findHighest(current, _this.componentNode, _this.props.outsideClickIgnoreClass) !== document) {
_this.enableOnClickOutside = function () {
if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
return;
}
_this.__outsideClickHandler(event);
};
if (typeof passiveEventSupport === 'undefined') {
passiveEventSupport = testPassiveEventSupport();
}
events.forEach(function (eventName) {
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_this, eventName));
});
};
_this.disableOnClickOutside = function () {
delete enabledInstances[_this._uid];
var fn = handlersMap[_this._uid];
if (fn && typeof document !== 'undefined') {
enabledInstances[_this._uid] = true;
var events = _this.props.eventTypes;

@@ -258,114 +226,151 @@

handlersMap[_this._uid] = function (event) {
if (_this.componentNode === null) return;
if (_this.props.preventDefault) {
event.preventDefault();
}
if (_this.props.stopPropagation) {
event.stopPropagation();
}
if (_this.props.excludeScrollbar && clickedScrollbar(event)) return;
var current = event.target;
if (findHighest(current, _this.componentNode, _this.props.outsideClickIgnoreClass) !== document) {
return;
}
_this.__outsideClickHandler(event);
};
events.forEach(function (eventName) {
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_this, eventName));
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});
delete handlersMap[_this._uid];
}
};
};
_this.getRef = function (ref) {
return _this.instanceRef = ref;
};
_this.disableOnClickOutside = function () {
delete enabledInstances[_this._uid];
var fn = handlersMap[_this._uid];
_this._uid = uid();
return _this;
}
/**
* Access the WrappedComponent's instance.
*/
if (fn && typeof document !== 'undefined') {
var events = _this.props.eventTypes;
if (!events.forEach) {
events = [events];
}
var _proto = onClickOutside.prototype;
events.forEach(function (eventName) {
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});
delete handlersMap[_this._uid];
}
};
_proto.getInstance = function getInstance() {
if (!WrappedComponent.prototype.isReactComponent) {
return this;
}
_this.getRef = function (ref) {
return _this.instanceRef = ref;
};
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
};
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
_proto.componentDidMount = function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
_this._uid = uid();
return _this;
}
/**
* Access the WrappedComponent's instance.
*/
var instance = this.getInstance();
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
var _proto = onClickOutside.prototype;
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
_proto.getInstance = function getInstance() {
if (WrappedComponent.prototype && !WrappedComponent.prototype.isReactComponent) {
return this;
}
}
this.componentNode = this.__getComponentNode(); // return early so we dont initiate onClickOutside
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
};
if (this.props.disableOnClickOutside) return;
this.enableOnClickOutside();
};
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
_proto.componentDidMount = function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
}
_proto.componentDidUpdate = function componentDidUpdate() {
this.componentNode = this.__getComponentNode();
};
/**
* Remove all document's event listeners for this component
*/
var instance = this.getInstance();
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
_proto.componentWillUnmount = function componentWillUnmount() {
this.disableOnClickOutside();
};
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
}
}
this.componentNode = this.__getComponentNode(); // return early so we dont initiate onClickOutside
/**
* Pass-through render
*/
_proto.render = function render() {
// eslint-disable-next-line no-unused-vars
var _props = this.props,
excludeScrollbar = _props.excludeScrollbar,
props = _objectWithoutProperties(_props, ["excludeScrollbar"]);
if (this.props.disableOnClickOutside) return;
this.enableOnClickOutside();
};
if (WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
_proto.componentDidUpdate = function componentDidUpdate() {
this.componentNode = this.__getComponentNode();
}
/**
* Remove all document's event listeners for this component
*/
;
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
return react.createElement(WrappedComponent, props);
};
_proto.componentWillUnmount = function componentWillUnmount() {
this.disableOnClickOutside();
}
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
;
return onClickOutside;
}(react.Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
eventTypes: ['mousedown', 'touchstart'],
excludeScrollbar: config && config.excludeScrollbar || false,
outsideClickIgnoreClass: IGNORE_CLASS_NAME,
preventDefault: false,
stopPropagation: false
}, _class.getClass = function () {
return WrappedComponent.getClass ? WrappedComponent.getClass() : WrappedComponent;
}, _temp;
}
/**
* Pass-through render
*/
_proto.render = function render() {
// eslint-disable-next-line no-unused-vars
var _this$props = this.props;
_this$props.excludeScrollbar;
var props = _objectWithoutPropertiesLoose(_this$props, ["excludeScrollbar"]);
exports.IGNORE_CLASS_NAME = IGNORE_CLASS_NAME;
exports['default'] = onClickOutsideHOC;
if (WrappedComponent.prototype && WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
}
Object.defineProperty(exports, '__esModule', { value: true });
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
return react.createElement(WrappedComponent, props);
};
return onClickOutside;
}(react.Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
eventTypes: ['mousedown', 'touchstart'],
excludeScrollbar: config && config.excludeScrollbar || false,
outsideClickIgnoreClass: IGNORE_CLASS_NAME,
preventDefault: false,
stopPropagation: false
}, _class.getClass = function () {
return WrappedComponent.getClass ? WrappedComponent.getClass() : WrappedComponent;
}, _temp;
}
exports.IGNORE_CLASS_NAME = IGNORE_CLASS_NAME;
exports.default = onClickOutsideHOC;
Object.defineProperty(exports, '__esModule', { value: true });
})));

376

dist/react-onclickoutside.min.js

@@ -1,1 +0,375 @@

!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,s,u){"use strict";var t,d,a=(void 0===t&&(t=0),function(){return++t}),l={},p={},o=["touchstart","touchmove"],n="ignore-react-onclickoutside";function f(e,t){var n=null;return!!~o.indexOf(t)&&d&&(n={passive:!e.props.preventDefault}),n}e.IGNORE_CLASS_NAME=n,e.default=function(i,r){var e,c=i.displayName||i.name||"Component",t=e=function(t){var e;function n(e){var n=t.call(this,e)||this;return n.__outsideClickHandler=function(e){if("function"!=typeof n.__clickOutsideHandlerProp){var t=n.getInstance();if("function"!=typeof t.props.handleClickOutside){if("function"!=typeof t.handleClickOutside)throw Error("WrappedComponent: "+c+" lacks a handleClickOutside(event) function for processing outside click events.");t.handleClickOutside(e)}else t.props.handleClickOutside(e)}else n.__clickOutsideHandlerProp(e)},n.__getComponentNode=function(){var e=n.getInstance();return r&&"function"==typeof r.setClickOutsideRef?r.setClickOutsideRef()(e):"function"==typeof e.setClickOutsideRef?e.setClickOutsideRef():u.findDOMNode(e)},n.enableOnClickOutside=function(){var e;"undefined"==typeof document||p[n._uid]||(void 0===d&&(d=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}}()),p[n._uid]=!0,(e=n.props.eventTypes).forEach||(e=[e]),l[n._uid]=function(e){var t;null!==n.componentNode&&(n.props.preventDefault&&e.preventDefault(),n.props.stopPropagation&&e.stopPropagation(),n.props.excludeScrollbar&&(t=e,document.documentElement.clientWidth<=t.clientX||document.documentElement.clientHeight<=t.clientY)||function(e,t,n){if(e===t)return!0;for(;e.parentNode;){if(i=n,(o=e)===t||(o.correspondingElement||o).classList.contains(i))return!0;e=e.parentNode}var o,i;return e}(e.target,n.componentNode,n.props.outsideClickIgnoreClass)!==document||n.__outsideClickHandler(e))},e.forEach(function(e){document.addEventListener(e,l[n._uid],f(n,e))}))},n.disableOnClickOutside=function(){delete p[n._uid];var e,t=l[n._uid];t&&"undefined"!=typeof document&&((e=n.props.eventTypes).forEach||(e=[e]),e.forEach(function(e){return document.removeEventListener(e,t,f(n,e))}),delete l[n._uid])},n.getRef=function(e){return n.instanceRef=e},n._uid=a(),n}(e=n).prototype=Object.create((o=t).prototype),(e.prototype.constructor=e).__proto__=o;var o=n.prototype;return o.getInstance=function(){if(!i.prototype.isReactComponent)return this;var e=this.instanceRef;return e.getInstance?e.getInstance():e},o.componentDidMount=function(){if("undefined"!=typeof document&&document.createElement){var e=this.getInstance();if(r&&"function"==typeof r.handleClickOutside&&(this.__clickOutsideHandlerProp=r.handleClickOutside(e),"function"!=typeof this.__clickOutsideHandlerProp))throw Error("WrappedComponent: "+c+" lacks a function for processing outside click events specified by the handleClickOutside config option.");this.componentNode=this.__getComponentNode(),this.props.disableOnClickOutside||this.enableOnClickOutside()}},o.componentDidUpdate=function(){this.componentNode=this.__getComponentNode()},o.componentWillUnmount=function(){this.disableOnClickOutside()},o.render=function(){var e=this.props,e=function(e,t){if(null==e)return{};var n,o={},i=Object.keys(e);for(c=0;c<i.length;c++)~t.indexOf(n=i[c])||(o[n]=e[n]);if(Object.getOwnPropertySymbols)for(var r=Object.getOwnPropertySymbols(e),c=0;c<r.length;c++)~t.indexOf(n=r[c])||Object.prototype.propertyIsEnumerable.call(e,n)&&(o[n]=e[n]);return o}(e,["excludeScrollbar"]);return i.prototype.isReactComponent?e.ref=this.getRef:e.wrappedRef=this.getRef,e.disableOnClickOutside=this.disableOnClickOutside,e.enableOnClickOutside=this.enableOnClickOutside,s.createElement(i,e)},n}(s.Component);return e.displayName="OnClickOutside("+c+")",e.defaultProps={eventTypes:["mousedown","touchstart"],excludeScrollbar:r&&r.excludeScrollbar||!1,outsideClickIgnoreClass:n,preventDefault:!1,stopPropagation:!1},e.getClass=function(){return i.getClass?i.getClass():i},t},Object.defineProperty(e,"__esModule",{value:!0})});
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('react'), require('react-dom')) :
typeof define === 'function' && define.amd ? define(['exports', 'react', 'react-dom'], factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.onClickOutside = {}, global.React, global.ReactDOM));
}(this, (function (exports, react, reactDom) { 'use strict';
function _inheritsLoose(subClass, superClass) {
subClass.prototype = Object.create(superClass.prototype);
subClass.prototype.constructor = subClass;
_setPrototypeOf(subClass, superClass);
}
function _setPrototypeOf(o, p) {
_setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
o.__proto__ = p;
return o;
};
return _setPrototypeOf(o, p);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _assertThisInitialized(self) {
if (self === void 0) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return self;
}
/**
* Check whether some DOM node is our Component's node.
*/
function isNodeFound(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
} // SVG <use/> elements do not technically reside in the rendered DOM, so
// they do not have classList directly, but they offer a link to their
// corresponding element, which can have classList. This extra check is for
// that case.
// See: http://www.w3.org/TR/SVG11/struct.html#InterfaceSVGUseElement
// Discussion: https://github.com/Pomax/react-onclickoutside/pull/17
if (current.correspondingElement) {
return current.correspondingElement.classList.contains(ignoreClass);
}
return current.classList.contains(ignoreClass);
}
/**
* Try to find our node in a hierarchy of nodes, returning the document
* node as highest node if our node is not found in the path up.
*/
function findHighest(current, componentNode, ignoreClass) {
if (current === componentNode) {
return true;
} // If source=local then this event came from 'somewhere'
// inside and should be ignored. We could handle this with
// a layered approach, too, but that requires going back to
// thinking in terms of Dom node nesting, running counter
// to React's 'you shouldn't care about the DOM' philosophy.
while (current.parentNode) {
if (isNodeFound(current, componentNode, ignoreClass)) {
return true;
}
current = current.parentNode;
}
return current;
}
/**
* Check if the browser scrollbar was clicked
*/
function clickedScrollbar(evt) {
return document.documentElement.clientWidth <= evt.clientX || document.documentElement.clientHeight <= evt.clientY;
}
// ideally will get replaced with external dep
// when rafrex/detect-passive-events#4 and rafrex/detect-passive-events#5 get merged in
var testPassiveEventSupport = function testPassiveEventSupport() {
if (typeof window === 'undefined' || typeof window.addEventListener !== 'function') {
return;
}
var passive = false;
var options = Object.defineProperty({}, 'passive', {
get: function get() {
passive = true;
}
});
var noop = function noop() {};
window.addEventListener('testPassiveEventSupport', noop, options);
window.removeEventListener('testPassiveEventSupport', noop, options);
return passive;
};
function autoInc(seed) {
if (seed === void 0) {
seed = 0;
}
return function () {
return ++seed;
};
}
var uid = autoInc();
var passiveEventSupport;
var handlersMap = {};
var enabledInstances = {};
var touchEvents = ['touchstart', 'touchmove'];
var IGNORE_CLASS_NAME = 'ignore-react-onclickoutside';
/**
* Options for addEventHandler and removeEventHandler
*/
function getEventHandlerOptions(instance, eventName) {
var handlerOptions = null;
var isTouchEvent = touchEvents.indexOf(eventName) !== -1;
if (isTouchEvent && passiveEventSupport) {
handlerOptions = {
passive: !instance.props.preventDefault
};
}
return handlerOptions;
}
/**
* This function generates the HOC function that you'll use
* in order to impart onOutsideClick listening to an
* arbitrary component. It gets called at the end of the
* bootstrapping code to yield an instance of the
* onClickOutsideHOC function defined inside setupHOC().
*/
function onClickOutsideHOC(WrappedComponent, config) {
var _class, _temp;
var componentName = WrappedComponent.displayName || WrappedComponent.name || 'Component';
return _temp = _class = /*#__PURE__*/function (_Component) {
_inheritsLoose(onClickOutside, _Component);
function onClickOutside(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.__outsideClickHandler = function (event) {
if (typeof _this.__clickOutsideHandlerProp === 'function') {
_this.__clickOutsideHandlerProp(event);
return;
}
var instance = _this.getInstance();
if (typeof instance.props.handleClickOutside === 'function') {
instance.props.handleClickOutside(event);
return;
}
if (typeof instance.handleClickOutside === 'function') {
instance.handleClickOutside(event);
return;
}
throw new Error("WrappedComponent: " + componentName + " lacks a handleClickOutside(event) function for processing outside click events.");
};
_this.__getComponentNode = function () {
var instance = _this.getInstance();
if (config && typeof config.setClickOutsideRef === 'function') {
return config.setClickOutsideRef()(instance);
}
if (typeof instance.setClickOutsideRef === 'function') {
return instance.setClickOutsideRef();
}
return reactDom.findDOMNode(instance);
};
_this.enableOnClickOutside = function () {
if (typeof document === 'undefined' || enabledInstances[_this._uid]) {
return;
}
if (typeof passiveEventSupport === 'undefined') {
passiveEventSupport = testPassiveEventSupport();
}
enabledInstances[_this._uid] = true;
var events = _this.props.eventTypes;
if (!events.forEach) {
events = [events];
}
handlersMap[_this._uid] = function (event) {
if (_this.componentNode === null) return;
if (_this.props.preventDefault) {
event.preventDefault();
}
if (_this.props.stopPropagation) {
event.stopPropagation();
}
if (_this.props.excludeScrollbar && clickedScrollbar(event)) return;
var current = event.target;
if (findHighest(current, _this.componentNode, _this.props.outsideClickIgnoreClass) !== document) {
return;
}
_this.__outsideClickHandler(event);
};
events.forEach(function (eventName) {
document.addEventListener(eventName, handlersMap[_this._uid], getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});
};
_this.disableOnClickOutside = function () {
delete enabledInstances[_this._uid];
var fn = handlersMap[_this._uid];
if (fn && typeof document !== 'undefined') {
var events = _this.props.eventTypes;
if (!events.forEach) {
events = [events];
}
events.forEach(function (eventName) {
return document.removeEventListener(eventName, fn, getEventHandlerOptions(_assertThisInitialized(_this), eventName));
});
delete handlersMap[_this._uid];
}
};
_this.getRef = function (ref) {
return _this.instanceRef = ref;
};
_this._uid = uid();
return _this;
}
/**
* Access the WrappedComponent's instance.
*/
var _proto = onClickOutside.prototype;
_proto.getInstance = function getInstance() {
if (WrappedComponent.prototype && !WrappedComponent.prototype.isReactComponent) {
return this;
}
var ref = this.instanceRef;
return ref.getInstance ? ref.getInstance() : ref;
};
/**
* Add click listeners to the current document,
* linked to this component's state.
*/
_proto.componentDidMount = function componentDidMount() {
// If we are in an environment without a DOM such
// as shallow rendering or snapshots then we exit
// early to prevent any unhandled errors being thrown.
if (typeof document === 'undefined' || !document.createElement) {
return;
}
var instance = this.getInstance();
if (config && typeof config.handleClickOutside === 'function') {
this.__clickOutsideHandlerProp = config.handleClickOutside(instance);
if (typeof this.__clickOutsideHandlerProp !== 'function') {
throw new Error("WrappedComponent: " + componentName + " lacks a function for processing outside click events specified by the handleClickOutside config option.");
}
}
this.componentNode = this.__getComponentNode(); // return early so we dont initiate onClickOutside
if (this.props.disableOnClickOutside) return;
this.enableOnClickOutside();
};
_proto.componentDidUpdate = function componentDidUpdate() {
this.componentNode = this.__getComponentNode();
}
/**
* Remove all document's event listeners for this component
*/
;
_proto.componentWillUnmount = function componentWillUnmount() {
this.disableOnClickOutside();
}
/**
* Can be called to explicitly enable event listening
* for clicks and touches outside of this element.
*/
;
/**
* Pass-through render
*/
_proto.render = function render() {
// eslint-disable-next-line no-unused-vars
var _this$props = this.props;
_this$props.excludeScrollbar;
var props = _objectWithoutPropertiesLoose(_this$props, ["excludeScrollbar"]);
if (WrappedComponent.prototype && WrappedComponent.prototype.isReactComponent) {
props.ref = this.getRef;
} else {
props.wrappedRef = this.getRef;
}
props.disableOnClickOutside = this.disableOnClickOutside;
props.enableOnClickOutside = this.enableOnClickOutside;
return react.createElement(WrappedComponent, props);
};
return onClickOutside;
}(react.Component), _class.displayName = "OnClickOutside(" + componentName + ")", _class.defaultProps = {
eventTypes: ['mousedown', 'touchstart'],
excludeScrollbar: config && config.excludeScrollbar || false,
outsideClickIgnoreClass: IGNORE_CLASS_NAME,
preventDefault: false,
stopPropagation: false
}, _class.getClass = function () {
return WrappedComponent.getClass ? WrappedComponent.getClass() : WrappedComponent;
}, _temp;
}
exports.IGNORE_CLASS_NAME = IGNORE_CLASS_NAME;
exports.default = onClickOutsideHOC;
Object.defineProperty(exports, '__esModule', { value: true });
})));

41

package.json
{
"name": "react-onclickoutside",
"version": "6.10.0",
"version": "6.11.0",
"description": "An onClickOutside wrapper for React components",

@@ -38,3 +38,3 @@ "main": "dist/react-onclickoutside.cjs.js",

"prebuild": "npm run clean",
"build": "rollup -c",
"build": "rollup -c rollup.config.js",
"lint": "eslint src/*.js ./test",

@@ -53,35 +53,34 @@ "test": "run-s test:**",

"devDependencies": {
"@babel/core": "7.0.0-beta.31",
"@babel/plugin-proposal-class-properties": "7.0.0-beta.31",
"@babel/plugin-proposal-object-rest-spread": "7.0.0-beta.31",
"@babel/preset-env": "7.0.0-beta.31",
"@babel/preset-stage-0": "7.0.0-beta.31",
"@babel/core": "^7.14.2",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-object-rest-spread": "^7.14.2",
"@babel/preset-env": "^7.14.2",
"@babel/preset-stage-0": "^7.8.3",
"@rollup/plugin-babel": "^5.3.0",
"babel-eslint": "^8.0.2",
"babel-loader": "8.0.0-beta.0",
"babel-loader": "^8.2.2",
"chai": "^4.1.2",
"eslint": "^4.12.0",
"husky": "^0.14.3",
"karma": "^1.4.0",
"karma": "^6.3.2",
"karma-chai": "^0.1.0",
"karma-firefox-launcher": "^1.0.1",
"karma-mocha": "^1.3.0",
"karma-mocha": "^2.0.1",
"karma-spec-reporter": "0.0.31",
"karma-webpack": "^2.0.6",
"karma-webpack": "^5.0.0",
"lint-staged": "^5.0.0",
"mocha": "^4.0.1",
"mocha": "^8.4.0",
"npm-run-all": "^4.0.2",
"prettier": "^1.8.2",
"react": "^15.5.x",
"react-dom": "^15.5.x",
"react-test-renderer": "^15.5.x",
"react": "17.0.2",
"react-dom": "17.0.2",
"react-test-renderer": "^17.0.2",
"require-hijack": "^1.2.1",
"rimraf": "^2.6.2",
"rollup": "^0.52.0",
"rollup-plugin-babel": "4.0.0-beta.0",
"rollup-plugin-uglify": "^2.0.1",
"webpack": "^3.8.1"
"rollup": "^2.50.1",
"webpack": "^5.37.1"
},
"peerDependencies": {
"react": "^15.5.x || ^16.x || ^17.x",
"react-dom": "^15.5.x || ^16.x || ^17.x"
"react": "^17.0.2",
"react-dom": "^17.0.2"
},

@@ -88,0 +87,0 @@ "lint-staged": {

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc