Update node version in .nvmrc

.github/workflows/build-test-code.yml → .github/workflows/build-test-pr.yml

@@ -1,12 +1,13 @@
-name: Test
+name: Test PR
 
 on:
   pull_request:
     branches: [main]
     paths:
       - 'src/**'
       - '__tests__/**'
-      - yarn.lock
+      - package-lock.json
+      - .nvmrc
 
 concurrency:
   group: ${{ github.workflow }}-${{ github.event.pull_request.number || github.ref }}
@@ -20,7 +21,7 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn run coverage
-      - run: yarn run build
+          cache: 'npm'
+      - run: npm ci --legacy-peer-deps
+      - run: npm run coverage
+      - run: npm run build

.github/workflows/publish-on-npm.yml

@@ -5,7 +5,7 @@ on:
     branches: [main, beta]
     paths:
       - 'src/**'
-      - yarn.lock
+      - package-lock.json
 
 jobs:
   release:
@@ -15,8 +15,8 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
+          cache: 'npm'
+      - run: npm ci --legacy-peer-deps
       - run: npx semantic-release
         env:
           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

.github/workflows/report-coverage.yml

@@ -4,8 +4,8 @@ on:
   push:
     branches: [main]
     paths:
-     - 'src/**'
-     - '__tests__/**'
+      - 'src/**'
+      - '__tests__/**'
 
 jobs:
   report_test_coverage:
@@ -15,9 +15,9 @@ jobs:
       - uses: actions/setup-node@v3
         with:
           node-version-file: '.nvmrc'
-          cache: 'yarn'
-      - run: yarn install --frozen-lockfile
-      - run: yarn run coverage
+          cache: 'npm'
+      - run: npm ci --legacy-peer-deps
+      - run: npm run coverage
       - uses: coverallsapp/github-action@master
         with:
-          github-token: ${{ secrets.GITHUB_TOKEN }}
+          github-token: ${{ secrets.GITHUB_TOKEN }}

.github/workflows/test-main.yml

@@ -0,0 +1,18 @@
+name: Test main
+
+on:
+  push:
+    branches: [main]
+
+jobs:
+  test_pull_request:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version-file: '.nvmrc'
+          cache: 'npm'
+      - run: npm ci --legacy-peer-deps
+      - run: npm run coverage
+      - run: npm run build

.nvmrc

@@ -1 +1 @@
-18.12.1
+20.11.0

README.md

@@ -15,11 +15,17 @@
 
 ## Installation
 
+```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**.
 - 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).
 - It supports **mouse**, **touch** and **focus** events.
@@ -37,7 +43,10 @@ const App = () => {
 	return (
 		<div id="app">
 			<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>
 		</div>
 	);
@@ -66,11 +75,11 @@ If you have multiple child components to pass, you can simply wrap them around a
 ```jsx
 // Assume the `handleClickAway` function is defined.
 <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>
 ```
 
@@ -79,21 +88,18 @@ Or if you only have text nodes, you can also wrap them in a [React Fragment](htt
 ```jsx
 // Assume the `handleClickAway` function is defined.
 <ClickAwayListener onClickAway={handleClickAway}>
-  <>
-    First text node
-    Second text node
-  </>
+	<>First text node Second text node</>
 </ClickAwayListener>
 ```
 
 ## Props
 
-| 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         |
 
 ## Examples
 

__tests__/index.tsx

@@ -78,7 +78,7 @@ describe('ClickAway Listener', () => {
 			fireEvent[fireEventFn](getByText(/A button/i));
 			fireEvent[fireEventFn](getByText(/A text element/i));
 			fireEvent[fireEventFn](getByText(/Hello World/i));
-			expect(handleClickAway).toBeCalledTimes(2);
+			expect(handleClickAway).toHaveBeenCalledTimes(2);
 		}
 	);
 
@@ -107,7 +107,7 @@ describe('ClickAway Listener', () => {
 			fireEvent[fireEventFn](getByText(/A button/i));
 			fireEvent[fireEventFn](getByText(/A text element/i));
 			fireEvent[fireEventFn](getByText(/Hello World/i));
-			expect(handleClickAway).toBeCalledTimes(2);
+			expect(handleClickAway).toHaveBeenCalledTimes(2);
 		}
 	);
 
@@ -136,7 +136,7 @@ describe('ClickAway Listener', () => {
 			fireEvent[fireEventFn](getByText(/A button/i));
 			fireEvent[fireEventFn](getByText(/A text element/i));
 			fireEvent[fireEventFn](getByText(/Hello World/i));
-			expect(handleClickAway).toBeCalledTimes(2);
+			expect(handleClickAway).toHaveBeenCalledTimes(2);
 		}
 	);
 
@@ -168,14 +168,14 @@ describe('ClickAway Listener', () => {
 		fireEvent.click(getByTestId('text-one'));
 		fireEvent.click(getByTestId('hello-world'));
 		fireEvent.click(getByTestId('some-other-button-one'));
-		expect(handleClickAway).toBeCalledTimes(3);
+		expect(handleClickAway).toHaveBeenCalledTimes(3);
 
 		// 4 from the previous ones, and the 3 new ones
 		fireEvent.click(getByTestId('button-two'));
 		fireEvent.click(getByTestId('text-two'));
 		fireEvent.click(getByTestId('foo-bar'));
 		fireEvent.click(getByTestId('some-other-button-two'));
-		expect(handleClickAway2).toBeCalledTimes(7);
+		expect(handleClickAway2).toHaveBeenCalledTimes(7);
 	});
 
 	const Input = React.forwardRef<HTMLInputElement>((props, ref) => {
@@ -214,7 +214,7 @@ describe('ClickAway Listener', () => {
 
 		fireEvent.click(getByText(/A button/i));
 		fireEvent.click(getByText(/A text element/i));
-		expect(handleClickAway).toBeCalledTimes(2);
+		expect(handleClickAway).toHaveBeenCalledTimes(2);
 		expect(result.current.ref).toStrictEqual(inputRef);
 	});
 
@@ -234,8 +234,8 @@ describe('ClickAway Listener', () => {
 
 		fireEvent.click(getByText('Hello World'));
 		fireEvent.click(getByText('The new boston'));
-		expect(handleClickAway).toBeCalledTimes(1);
-		expect(handleClick).toBeCalledTimes(1);
+		expect(handleClickAway).toHaveBeenCalledTimes(1);
+		expect(handleClick).toHaveBeenCalledTimes(1);
 	});
 
 	it('should work with function refs', () => {
@@ -269,7 +269,7 @@ describe('ClickAway Listener', () => {
 		buttonRef.click();
 		divRef.click();
 		expect(buttonRef).toHaveProperty('type', 'submit');
-		expect(handleClickAway).toBeCalledTimes(1);
+		expect(handleClickAway).toHaveBeenCalledTimes(1);
 	});
 
 	it('should work with Portals', () => {
@@ -311,6 +311,6 @@ describe('ClickAway Listener', () => {
 		jest.advanceTimersByTime(0);
 		fireEvent.click(getByText(/Hello World/i));
 		fireEvent.click(getByText(/A button/i));
-		expect(handleClickAway).toBeCalledTimes(1);
+		expect(handleClickAway).toHaveBeenCalledTimes(1);
 	});
 });