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

Comparing version 2.2.3 to 2.2.4

dist/index.d.ts

 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 = FocusEvent | MouseEvent | TouchEvent;
+type FocusEvents = 'focusin' | 'focusout';
+type MouseEvents = 'click' | 'mousedown' | 'mouseup';
+type TouchEvents = 'touchstart' | 'touchend';
+type Events = FocusEvent | MouseEvent | TouchEvent;
 interface Props extends HTMLAttributes<HTMLElement> {
@@ -7,0 +7,0 @@ onClickAway: (event: Events) => void;

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

@@ -1,2 +0,2 @@
-import n,{useRef as e,useEffect as t,cloneElement as r}from"react";function o(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,v=c.onClickAway,s=c.focusEvent,l=void 0===s?"focusin":s,d=c.mouseEvent,f=void 0===d?"click":d,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 w=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,e,t=null!==(n=null===(e=p.current)||void 0===e?void 0:e.ownerDocument)&&void 0!==n?n:document,r=function(n){L.current&&(p.current&&p.current.contains(n.target)||h.current===n.target||!t.contains(n.target)||v(n))};return t.addEventListener(f,r),t.addEventListener(E,r),t.addEventListener(l,r),function(){t.removeEventListener(f,r),t.removeEventListener(E,r),t.removeEventListener(l,r)}}),[l,f,v,E]);var y=u[f],g=u[E],k=u[l];return n.Children.only(r(a,(o(i={ref:function(n){p.current=n;var e=a.ref;"function"==typeof e?e(n):e&&(e.current=n)}},k,w(k)),o(i,y,w(y)),o(i,g,w(g)),i)))};c.displayName="ClickAwayListener";export{c as default};
+import n,{useRef as e,useEffect as t,cloneElement as r}from"react";function o(n,e,t){return(e=function(n){var e=function(n,e){if("object"!=typeof n||!n)return n;var t=n[Symbol.toPrimitive];if(void 0!==t){var r=t.call(n,e||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===e?String:Number)(n)}(n,"string");return"symbol"==typeof e?e:e+""}(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"},i=function(i){var c=i.children,a=i.onClickAway,v=i.focusEvent,f=void 0===v?"focusin":v,l=i.mouseEvent,s=void 0===l?"click":l,d=i.touchEvent,m=void 0===d?"touchend":d,p=e(null),y=e(null),E=e(!1);t((function(){return setTimeout((function(){E.current=!0}),0),function(){E.current=!1}}),[]);var b=function(n){return function(e){y.current=e.target;var t=null==c?void 0:c.props[n];t&&t(e)}};t((function(){var n,e,t=null!==(n=null===(e=p.current)||void 0===e?void 0:e.ownerDocument)&&void 0!==n?n:document,r=function(n){E.current&&(p.current&&p.current.contains(n.target)||y.current===n.target||!t.contains(n.target)||a(n))};return t.addEventListener(s,r),t.addEventListener(m,r),t.addEventListener(f,r),function(){t.removeEventListener(s,r),t.removeEventListener(m,r),t.removeEventListener(f,r)}}),[f,s,a,m]);var h=u[s],g=u[m],w=u[f];return n.Children.only(r(c,o(o(o({ref:function(n){p.current=n;var e=c.ref;"function"==typeof e?e(n):e&&(e.current=n)}},w,b(w)),h,b(h)),g,b(g))))};i.displayName="ClickAwayListener";export{i as default};
 //# 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);function r(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"},o=function(n){var o,c=n.children,i=n.onClickAway,f=n.focusEvent,a=void 0===f?"focusin":f,s=n.mouseEvent,l=void 0===s?"click":s,v=n.touchEvent,d=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,n,t=null!==(e=null===(n=m.current)||void 0===n?void 0:n.ownerDocument)&&void 0!==e?e:document,r=function(e){p.current&&(m.current&&m.current.contains(e.target)||E.current===e.target||!t.contains(e.target)||i(e))};return t.addEventListener(l,r),t.addEventListener(d,r),t.addEventListener(a,r),function(){t.removeEventListener(l,r),t.removeEventListener(d,r),t.removeEventListener(a,r)}}),[a,l,i,d]);var y=u[l],L=u[d],w=u[a];return t.default.Children.only(e.cloneElement(c,(r(o={ref:function(e){m.current=e;var n=c.ref;"function"==typeof n?n(e):n&&(n.current=e)}},w,h(w)),r(o,y,h(y)),r(o,L,h(L)),o)))};o.displayName="ClickAwayListener",module.exports=o;
+"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 r(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var o={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},u=function(n){var u=n.children,i=n.onClickAway,c=n.focusEvent,f=void 0===c?"focusin":c,a=n.mouseEvent,v=void 0===a?"click":a,s=n.touchEvent,l=void 0===s?"touchend":s,d=e.useRef(null),m=e.useRef(null),p=e.useRef(!1);e.useEffect((function(){return setTimeout((function(){p.current=!0}),0),function(){p.current=!1}}),[]);var E=function(e){return function(n){m.current=n.target;var t=null==u?void 0:u.props[e];t&&t(n)}};e.useEffect((function(){var e,n,t=null!==(e=null===(n=d.current)||void 0===n?void 0:n.ownerDocument)&&void 0!==e?e:document,r=function(e){p.current&&(d.current&&d.current.contains(e.target)||m.current===e.target||!t.contains(e.target)||i(e))};return t.addEventListener(v,r),t.addEventListener(l,r),t.addEventListener(f,r),function(){t.removeEventListener(v,r),t.removeEventListener(l,r),t.removeEventListener(f,r)}}),[f,v,i,l]);var y=o[v],b=o[l],h=o[f];return t.default.Children.only(e.cloneElement(u,r(r(r({ref:function(e){d.current=e;var n=u.ref;"function"==typeof n?n(e):n&&(n.current=e)}},h,E(h)),y,E(y)),b,E(b))))};u.displayName="ClickAwayListener",module.exports=u;
 //# 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);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 r={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},u=function(n){var u,c=n.children,i=n.onClickAway,f=n.focusEvent,a=void 0===f?"focusin":f,s=n.mouseEvent,l=void 0===s?"click":s,d=n.touchEvent,v=void 0===d?"touchend":d,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,n,t=null!==(e=null===(n=m.current)||void 0===n?void 0:n.ownerDocument)&&void 0!==e?e:document,o=function(e){E.current&&(m.current&&m.current.contains(e.target)||p.current===e.target||!t.contains(e.target)||i(e))};return t.addEventListener(l,o),t.addEventListener(v,o),t.addEventListener(a,o),function(){t.removeEventListener(l,o),t.removeEventListener(v,o),t.removeEventListener(a,o)}}),[a,l,i,v]);var h=r[l],b=r[v],g=r[a];return t.default.Children.only(e.cloneElement(c,(o(u={ref:function(e){m.current=e;var n=c.ref;"function"==typeof n?n(e):n&&(n.current=e)}},g,y(g)),o(u,h,y(h)),o(u,b,y(b)),u)))};return u.displayName="ClickAwayListener",u}));
+!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 r(e,n,t){return(n=function(e){var n=function(e,n){if("object"!=typeof e||!e)return e;var t=e[Symbol.toPrimitive];if(void 0!==t){var r=t.call(e,n||"default");if("object"!=typeof r)return r;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(e)}(e,"string");return"symbol"==typeof n?n:n+""}(n))in e?Object.defineProperty(e,n,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[n]=t,e}var o={click:"onClick",focusin:"onFocus",focusout:"onFocus",mousedown:"onMouseDown",mouseup:"onMouseUp",touchstart:"onTouchStart",touchend:"onTouchEnd"},u=function(n){var u=n.children,i=n.onClickAway,c=n.focusEvent,f=void 0===c?"focusin":c,a=n.mouseEvent,l=void 0===a?"click":a,s=n.touchEvent,d=void 0===s?"touchend":s,v=e.useRef(null),m=e.useRef(null),p=e.useRef(!1);e.useEffect((function(){return setTimeout((function(){p.current=!0}),0),function(){p.current=!1}}),[]);var y=function(e){return function(n){m.current=n.target;var t=null==u?void 0:u.props[e];t&&t(n)}};e.useEffect((function(){var e,n,t=null!==(e=null===(n=v.current)||void 0===n?void 0:n.ownerDocument)&&void 0!==e?e:document,r=function(e){p.current&&(v.current&&v.current.contains(e.target)||m.current===e.target||!t.contains(e.target)||i(e))};return t.addEventListener(l,r),t.addEventListener(d,r),t.addEventListener(f,r),function(){t.removeEventListener(l,r),t.removeEventListener(d,r),t.removeEventListener(f,r)}}),[f,l,i,d]);var E=o[l],b=o[d],h=o[f];return t.default.Children.only(e.cloneElement(u,r(r(r({ref:function(e){v.current=e;var n=u.ref;"function"==typeof n?n(e):n&&(n.current=e)}},h,y(h)),E,y(E)),b,y(b))))};return u.displayName="ClickAwayListener",u}));
 //# sourceMappingURL=react-click-away-listener.umd.js.map

package.json

 {
 	"name": "react-click-away-listener",
-	"version": "2.2.3",
+	"version": "2.2.4",
 	"description": "A simple click away listener built with React Hooks",
@@ -37,7 +37,7 @@ "main": "dist/react-click-away-listener.js",
 		"@rollup/plugin-node-resolve": "^13.1.3",
-		"@semantic-release/npm": "^9.0.1",
-		"@testing-library/react": "^13.1.1",
-		"@testing-library/react-hooks": "^8.0.0",
-		"@types/jest": "^27.4.1",
-		"@types/react": "^18.0.5",
+		"@semantic-release/npm": "^12.0.1",
+		"@testing-library/dom": "^10.4.0",
+		"@testing-library/react": "^16.0.1",
+		"@types/jest": "^29.5.12",
+		"@types/react": "^18.3.12",
 		"@typescript-eslint/parser": "^5.14.0",
@@ -54,11 +54,12 @@ "coveralls": "^3.1.1",
 		"ghooks": "^2.0.4",
-		"jest": "^27.5.1",
+		"jest": "^29.7.0",
+		"jest-environment-jsdom": "^29.7.0",
 		"npm-run-all": "^4.1.5",
 		"prettier": "^2.5.1",
-		"react": "^18.0.0",
-		"react-dom": "^18.0.0",
+		"react": "^18.3.1",
+		"react-dom": "^18.3.1",
 		"rimraf": "^3.0.2",
-		"rollup": "^2.70.0",
+		"rollup": "^2.79.2",
 		"rollup-plugin-terser": "^7.0.2",
-		"typescript": "^4.6.2"
+		"typescript": "^5.5.4"
 	},
@@ -65,0 +66,0 @@ "peerDependencies": {

README.md

@@ -6,4 +6,4 @@ <p align="center">
   <a href="https://www.npmjs.org/package/react-click-away-listener"><img src="https://img.shields.io/npm/v/react-click-away-listener.svg?style=flat-square" alt="npm"></a>
-  <a href="https://coveralls.io/github/ooade/react-click-away-listener?branch=master"><img src="https://coveralls.io/repos/github/ooade/react-click-away-listener/badge.svg?branch=master" alt="Coverage Status" /></a>
-  <a href="https://github.com/ooade/react-click-away-listener/blob/main/.github/workflows/build-test-code.yml"><img src="https://github.com/ooade/react-click-away-listener/workflows/Test/badge.svg" alt="Test"/></a>
+  <a href="https://coveralls.io/github/ooade/react-click-away-listener?branch=main"><img src="https://coveralls.io/repos/github/ooade/react-click-away-listener/badge.svg?branch=main" alt="Coverage Status" /></a>
+  <a href="https://github.com/ooade/react-click-away-listener/blob/main/.github/workflows/test-main.yml"><img src="https://github.com/ooade/react-click-away-listener/actions/workflows/test-main.yml/badge.svg" alt="Test main"/></a>
   <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>
@@ -20,6 +20,12 @@ <a href="https://bundlephobia.com/package/react-click-away-listener
 ```sh
+npm install react-click-away-listener
+```
+
+or
+
+```sh
 yarn add react-click-away-listener
 ```
 
-- It's quite **small** in size! Just [![Bundlephobia](https://img.shields.io/bundlephobia/min/react-click-away-listener.svg?style=flat-square&label "Bundle size (minified)")](https://bundlephobia.com/result?p=react-click-away-listener) minified, or [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/react-click-away-listener.svg?style=flat-square&label "Bundle size (minified+gzipped)")](https://bundlephobia.com/result?p=react-click-away-listener) minified & gzipp’d.
+- It's quite **small** in size! Just [![Bundlephobia](https://img.shields.io/bundlephobia/min/react-click-away-listener.svg?style=flat-square&label 'Bundle size (minified)')](https://bundlephobia.com/result?p=react-click-away-listener) minified, or [![Bundlephobia](https://img.shields.io/bundlephobia/minzip/react-click-away-listener.svg?style=flat-square&label 'Bundle size (minified+gzipped)')](https://bundlephobia.com/result?p=react-click-away-listener) minified & gzipp’d.
 - It's built with **TypeScript**.
@@ -42,3 +48,6 @@ - It works with [React Portals](https://reactjs.org/docs/portals.html) ([v2.0.0](https://github.com/ooade/react-click-away-listener/releases/tag/v2.0.0) onwards).
 			<ClickAwayListener onClickAway={handleClickAway}>
-				<div> Triggers whenever a click event is registered outside this div element </div>
+				<div>
+					{' '}
+					Triggers whenever a click event is registered outside this div element{' '}
+				</div>
 			</ClickAwayListener>
@@ -72,7 +81,7 @@ </div>
 <ClickAwayListener onClickAway={handleClickAway}>
-  <>
-    <p>First paragraph</p>
-    <button>Example Button</button>
-    <p>Second paragraph</p>
-  </>
+	<>
+		<p>First paragraph</p>
+		<button>Example Button</button>
+		<p>Second paragraph</p>
+	</>
 </ClickAwayListener>
@@ -86,6 +95,3 @@ ```
 <ClickAwayListener onClickAway={handleClickAway}>
-  <>
-    First text node
-    Second text node
-  </>
+	<>First text node Second text node</>
 </ClickAwayListener>
@@ -96,8 +102,8 @@ ```
 
-| 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          |
-| focusEvent  | 'focusin' \|<br/>'focusout'       | 'focusin'        | The focus 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         |
+| focusEvent  | 'focusin' \|<br/>'focusout'                 | 'focusin'  | The focus event type that gets fired on ClickAway         |
 
@@ -104,0 +110,0 @@ ## Examples

No alert changes

Improved metrics

Total package byte prevSize

32712

increased by3.26%

Lines of code

39

increased by8.33%

Number of lines in readme file

111

increased by5.71%

Worsened metrics

Dev dependency count

31

increased by3.33%

No dependency changes