react-click-away-listener - npm Package Compare versions

Comparing version 2.1.0-beta.1 to 2.1.0

dist/index.d.ts

@@ -1,7 +0,9 @@
-import { ReactElement, FunctionComponent, HTMLAttributes } from 'react';
+import { ReactElement, HTMLAttributes, FunctionComponent } from 'react';
+declare type FocusEvents = 'focusin' | 'focusout';
 declare type MouseEvents = 'click' | 'mousedown' | 'mouseup';
 declare type TouchEvents = 'touchstart' | 'touchend';
-declare type Events = MouseEvent | TouchEvent;
+declare type Events = FocusEvent | MouseEvent | TouchEvent;
 interface Props extends HTMLAttributes<HTMLElement> {
     onClickAway: (event: Events) => void;
+    focusEvent?: FocusEvents;
     mouseEvent?: MouseEvents;
@@ -8,0 +10,0 @@ touchEvent?: TouchEvents;

dist/react-click-away-listener.es.js

@@ -1,2 +0,2 @@
-import n,{useRef as e,useEffect as t}from"react";export default function(r){var o=r.children,c=r.onClickAway,u=r.mouseEvent,i=void 0===u?"click":u,v=r.touchEvent,d=void 0===v?"touchend":v,a=e(null),f=e(null),l=function(n){var e=n.event,t=n.type;f.current=e.target;var r=null==o?void 0:o.props[t];r&&r(e)};return t((function(){var n=function(n){a.current&&a.current.contains(n.target)||f.current===n.target||c(n)};return document.addEventListener(i,n),document.addEventListener(d,n),function(){document.removeEventListener(i,n),document.removeEventListener(d,n)}}),[i,c,d]),n.cloneElement(o,{ref:function(n){a.current=n;var e=o.ref;"function"==typeof e?e(n):e&&(e.current=n)},onClick:function(n){return l({type:"onClick",event:n})},onTouchEnd:function(n){return l({type:"onTouchEnd",event:n})}})}
+import n,{useRef as e,useEffect as t,cloneElement as o}from"react";function r(n,e,t){return e in n?Object.defineProperty(n,e,{value:t,enumerable:!0,configurable:!0,writable:!0}):n[e]=t,n}var u={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},c=function(c){var i,a=c.children,d=c.onClickAway,s=c.focusEvent,v=void 0===s?"focusin":s,f=c.mouseEvent,l=void 0===f?"click":f,m=c.touchEvent,E=void 0===m?"touchend":m,p=e(null),h=e(null),L=e(!1);t((function(){return setTimeout((function(){L.current=!0}),0),function(){L.current=!1}}),[]);var y=function(n){return function(e){h.current=e.target;var t=null==a?void 0:a.props[n];t&&t(e)}};t((function(){var n=function(n){L.current&&(p.current&&p.current.contains(n.target)||h.current===n.target||!document.contains(n.target)||d(n))};return document.addEventListener(l,n),document.addEventListener(E,n),document.addEventListener(v,n),function(){document.removeEventListener(l,n),document.removeEventListener(E,n),document.removeEventListener(v,n)}}),[v,l,d,E]);var g=u[l],k=u[E],w=u[v];return n.Children.only(o(a,(r(i={ref:function(n){p.current=n;var e=a.ref;"function"==typeof e?e(n):e&&(e.current=n)}},w,y(w)),r(i,g,y(g)),r(i,k,y(k)),i)))};c.displayName="ClickAwayListener";export default c;
 //# sourceMappingURL=react-click-away-listener.es.js.map

dist/react-click-away-listener.js

@@ -1,2 +0,2 @@
-"use strict";var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e);module.exports=function(n){var r=n.children,u=n.onClickAway,o=n.mouseEvent,c=void 0===o?"click":o,i=n.touchEvent,f=void 0===i?"touchend":i,v=e.useRef(null),d=e.useRef(null),a=function(e){var n=e.event,t=e.type;d.current=n.target;var u=null==r?void 0:r.props[t];u&&u(n)};return e.useEffect((function(){var e=function(e){v.current&&v.current.contains(e.target)||d.current===e.target||u(e)};return document.addEventListener(c,e),document.addEventListener(f,e),function(){document.removeEventListener(c,e),document.removeEventListener(f,e)}}),[c,u,f]),t.default.cloneElement(r,{ref:function(e){v.current=e;var n=r.ref;"function"==typeof n?n(e):n&&(n.current=e)},onClick:function(e){return a({type:"onClick",event:e})},onTouchEnd:function(e){return a({type:"onTouchEnd",event:e})}})};
+"use strict";var e=require("react");function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e);function u(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var r={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},o=function(n){var o,c=n.children,i=n.onClickAway,f=n.focusEvent,a=void 0===f?"focusin":f,s=n.mouseEvent,d=void 0===s?"click":s,v=n.touchEvent,l=void 0===v?"touchend":v,m=e.useRef(null),E=e.useRef(null),p=e.useRef(!1);e.useEffect((function(){return setTimeout((function(){p.current=!0}),0),function(){p.current=!1}}),[]);var h=function(e){return function(n){E.current=n.target;var t=null==c?void 0:c.props[e];t&&t(n)}};e.useEffect((function(){var e=function(e){p.current&&(m.current&&m.current.contains(e.target)||E.current===e.target||!document.contains(e.target)||i(e))};return document.addEventListener(d,e),document.addEventListener(l,e),document.addEventListener(a,e),function(){document.removeEventListener(d,e),document.removeEventListener(l,e),document.removeEventListener(a,e)}}),[a,d,i,l]);var y=r[d],L=r[l],b=r[a];return t.default.Children.only(e.cloneElement(c,(u(o={ref:function(e){m.current=e;var n=c.ref;"function"==typeof n?n(e):n&&(n.current=e)}},b,h(b)),u(o,y,h(y)),u(o,L,h(L)),o)))};o.displayName="ClickAwayListener",module.exports=o;
 //# sourceMappingURL=react-click-away-listener.js.map

dist/react-click-away-listener.umd.js

@@ -1,2 +0,2 @@
-!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):(e="undefined"!=typeof globalThis?globalThis:e||self)["react-click-away-listener"]=n(e.react)}(this,(function(e){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e);return function(n){var r=n.children,o=n.onClickAway,u=n.mouseEvent,c=void 0===u?"click":u,i=n.touchEvent,f=void 0===i?"touchend":i,d=e.useRef(null),a=e.useRef(null),l=function(e){var n=e.event,t=e.type;a.current=n.target;var o=null==r?void 0:r.props[t];o&&o(n)};return e.useEffect((function(){var e=function(e){d.current&&d.current.contains(e.target)||a.current===e.target||o(e)};return document.addEventListener(c,e),document.addEventListener(f,e),function(){document.removeEventListener(c,e),document.removeEventListener(f,e)}}),[c,o,f]),t.default.cloneElement(r,{ref:function(e){d.current=e;var n=r.ref;"function"==typeof n?n(e):n&&(n.current=e)},onClick:function(e){return l({type:"onClick",event:e})},onTouchEnd:function(e){return l({type:"onTouchEnd",event:e})}})}}));
+!function(e,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n(require("react")):"function"==typeof define&&define.amd?define(["react"],n):(e="undefined"!=typeof globalThis?globalThis:e||self)["react-click-away-listener"]=n(e.react)}(this,(function(e){"use strict";function n(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var t=n(e);function o(e,n,t){return n in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var u={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},r=function(n){var r,c=n.children,i=n.onClickAway,f=n.focusEvent,a=void 0===f?"focusin":f,d=n.mouseEvent,s=void 0===d?"click":d,l=n.touchEvent,v=void 0===l?"touchend":l,m=e.useRef(null),p=e.useRef(null),E=e.useRef(!1);e.useEffect((function(){return setTimeout((function(){E.current=!0}),0),function(){E.current=!1}}),[]);var y=function(e){return function(n){p.current=n.target;var t=null==c?void 0:c.props[e];t&&t(n)}};e.useEffect((function(){var e=function(e){E.current&&(m.current&&m.current.contains(e.target)||p.current===e.target||!document.contains(e.target)||i(e))};return document.addEventListener(s,e),document.addEventListener(v,e),document.addEventListener(a,e),function(){document.removeEventListener(s,e),document.removeEventListener(v,e),document.removeEventListener(a,e)}}),[a,s,i,v]);var h=u[s],b=u[v],g=u[a];return t.default.Children.only(e.cloneElement(c,(o(r={ref:function(e){m.current=e;var n=c.ref;"function"==typeof n?n(e):n&&(n.current=e)}},g,y(g)),o(r,h,y(h)),o(r,b,y(b)),r)))};return r.displayName="ClickAwayListener",r}));
 //# sourceMappingURL=react-click-away-listener.umd.js.map

package.json

 {
 	"name": "react-click-away-listener",
-	"version": "2.1.0-beta.1",
+	"version": "2.1.0",
 	"description": "A simple click away listener built with React Hooks",
@@ -13,3 +13,3 @@ "main": "dist/react-click-away-listener.js",
 		"coverage": "jest --coverage",
-		"prepare": "npm run build",
+		"prepublish": "npm run build",
 		"build:rollup": "rollup -c rollup.config.js",
@@ -33,35 +33,36 @@ "build:declaration": "tsc",
 	"devDependencies": {
-		"@babel/preset-env": "^7.3.1",
-		"@babel/preset-react": "^7.0.0",
-		"@babel/preset-typescript": "^7.10.4",
-		"@rollup/plugin-babel": "^5.2.0",
-		"@rollup/plugin-node-resolve": "^11.1.0",
-		"@semantic-release/npm": "^7.0.10",
-		"@testing-library/react": "^9.3.1",
-		"@testing-library/react-hooks": "^5.0.3",
-		"@types/jest": "^24.0.21",
-		"@types/react": "^16.9.11",
-		"@typescript-eslint/parser": "^3.2.0",
+		"@babel/preset-env": "^7.14.1",
+		"@babel/preset-react": "^7.13.13",
+		"@babel/preset-typescript": "^7.13.0",
+		"@rollup/plugin-babel": "^5.3.0",
+		"@rollup/plugin-node-resolve": "^13.0.0",
+		"@semantic-release/npm": "^7.1.3",
+		"@testing-library/react": "^11.2.6",
+		"@testing-library/react-hooks": "^5.1.2",
+		"@types/jest": "^26.0.23",
+		"@types/react": "^17.0.5",
+		"@typescript-eslint/parser": "^4.23.0",
 		"coveralls": "^3.1.0",
-		"eslint": "^5.13.0",
-		"eslint-config-prettier": "^6.11.0",
-		"eslint-plugin-import": "^2.16.0",
-		"eslint-plugin-jsx-a11y": "^6.2.0",
-		"eslint-plugin-prettier": "^3.1.4",
-		"eslint-plugin-react": "^7.12.4",
-		"eslint-plugin-react-hooks": "^1.6.0",
+		"cz-conventional-changelog": "^3.3.0",
+		"eslint": "^7.26.0",
+		"eslint-config-prettier": "^8.3.0",
+		"eslint-plugin-import": "^2.22.1",
+		"eslint-plugin-jsx-a11y": "^6.4.1",
+		"eslint-plugin-prettier": "^3.4.0",
+		"eslint-plugin-react": "^7.23.2",
+		"eslint-plugin-react-hooks": "^4.2.0",
 		"ghooks": "^2.0.4",
 		"jest": "^26.6.3",
 		"npm-run-all": "^4.1.5",
-		"prettier": "^2.0.5",
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1",
+		"prettier": "^2.3.0",
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.38.0",
-		"rollup-plugin-terser": "^7.0.0",
-		"typescript": "^3.6.4"
+		"rollup": "^2.47.0",
+		"rollup-plugin-terser": "^7.0.2",
+		"typescript": "^4.2.4"
 	},
 	"peerDependencies": {
-		"react": "^17.0.1",
-		"react-dom": "^17.0.1"
+		"react": "^17.0.2",
+		"react-dom": "^17.0.2"
 	},
@@ -75,3 +76,7 @@ "jest": {
 		"ghooks": {
+			"prepare-commit-msg": "exec < /dev/tty && git cz --hook || true",
 			"pre-commit": "npm run prettier"
+		},
+		"commitizen": {
+			"path": "./node_modules/cz-conventional-changelog"
 		}
@@ -78,0 +83,0 @@ },

README.md

@@ -9,2 +9,4 @@ <p align="center">
   <a href="https://www.npmjs.org/package/react-click-away-listener"><img src="https://img.shields.io/npm/dm/react-click-away-listener.svg?style=flat-square" alt="downloads/month"></a>
+  <a href="https://bundlephobia.com/package/react-click-away-listener
+"><img alt="npm bundle size" src="https://img.shields.io/bundlephobia/minzip/react-click-away-listener?style=flat-square"></a>
   <a href="http://makeapullrequest.com"><img src="https://img.shields.io/badge/PR(s)-welcome-brightgreen.svg?style=flat-square" alt="pullrequest"></a>
@@ -24,3 +26,3 @@ <a href="http://www.firsttimersonly.com"><img src="https://img.shields.io/badge/first--timers--only-friendly-blue.svg?style=flat-square" alt="firsttimersonly"></a>
 - It supports both Mouse and Touch Events.
-- It works with Portals.
+- It works with Portals (>= v2).
 
@@ -34,3 +36,3 @@ ## Usage
 	const handleClickAway = () => {
-		console.log('Hey, you can close the Popup now');
+		console.log('Maybe close the popup');
 	};
@@ -41,5 +43,4 @@
 			<ClickAwayListener onClickAway={handleClickAway}>
-				<div> Some Popup, Nav or anything </div>
+				<div> Triggers whenever a click event is registered outside this div element </div>
 			</ClickAwayListener>
-			<div id="something-else">Hola, mi amigos</div>
 		</div>
@@ -50,10 +51,13 @@ );
 
+Caveats:
+ - Ensure the ClickAway component has just one child else `React.only` will throw an error.
+ - It doesn't work with Text nodes.
+
 ## Props
 
-| Prop        | Default value | Description                                               |
-| ----------- | ------------- |---------------------------------------------------------- |
-| onClickAway | undefined     | Fires when a user clicks outside the click away component |
-| as          | div           | The rendered element type                                 |
-| mouseEvent  | click         | The mouse event type that gets fired on ClickAway         |
-| touchEvent  | touchend      | The touch event type that gets fired on ClickAway         |
+| Name        | Type                              | Default       | Description                                               |
+| ----------- | ----------------------------------| ------------- |---------------------------------------------------------- |
+| onClickAway | (event) => void                   |               | Fires when a user clicks outside the click away component |
+| mouseEvent  | 'click' \|<br/>'mousedown' \|<br/>'mouseup'| 'click'     | The mouse event type that gets fired on ClickAway          |
+| touchEvent  | 'touchstart' \|<br/>'touchend'         | 'touchend'  | The touch event type that gets fired on ClickAway          |
 
@@ -60,0 +64,0 @@ ## Examples

Fixed alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

27536

increased by37.5%

Lines of code

36

increased by28.57%

Number of low quality alerts

3

decreased by-25%

Number of lines in readme file

66

increased by6.45%

Worsened metrics

Dev dependency count

30

increased by3.45%

No dependency changes