React 18 support

.github/workflows/tests.yml

@@ -10,9 +10,6 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v2
-      - uses: CultureHQ/actions-yarn@master
-        with:
-          args: install
-      - uses: CultureHQ/actions-yarn@master
-        with:
-          args: test
+      - uses: actions/setup-node@v2
+      - run: yarn install
+      - run: yarn test

package.json

@@ -59,7 +59,8 @@
   ],
   "peerDependencies": {
     "@popperjs/core": "^2.0.0",
-    "react": "^16.8.0 || ^17"
+    "react": "^16.8.0 || ^17 || ^18",
+    "react-dom": "^16.8.0 || ^17 || ^18"
   },
   "dependencies": {
     "react-fast-compare": "^3.0.1",
@@ -80,8 +81,8 @@
     "@rollup/plugin-commonjs": "^11.0.2",
     "@rollup/plugin-node-resolve": "^7.1.1",
     "@rollup/plugin-replace": "^2.3.1",
-    "@testing-library/react": "^10.0.2",
-    "@testing-library/react-hooks": "^3.2.1",
+    "@testing-library/react": "^13.1.1",
+    "@testing-library/react-hooks": "^8.0.0",
     "@types/react": "^16.9.29",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^25.2.4",
@@ -93,18 +94,18 @@
     "eslint-plugin-promise": "^4.2.1",
     "eslint-plugin-react": "^7.19.0",
     "eslint-plugin-react-hooks": "^3.0.0",
-    "flow-bin": "^0.147.0",
+    "flow-bin": "^0.176.2",
     "flow-copy-source": "^2.0.9",
     "gh-pages": "^2.2.0",
     "git-branch-is": "^3.1.0",
     "jest": "^25.2.4",
     "parcel-bundler": "^1.12.4",
     "prettier": "^2.0.2",
     "pretty-quick": "^2.0.1",
-    "react": "17.0.0",
-    "react-dom": "^17.0.0",
+    "react": "18.0.0",
+    "react-dom": "^18.0.0",
     "react-spring": "^8.0.27",
-    "react-test-renderer": "^17.0.0",
+    "react-test-renderer": "^18.0.0",
     "rimraf": "^3.0.2",
     "rollup": "^2.3.1",
     "rollup-plugin-babel": "^4.4.0",

rollup.config.js

@@ -9,6 +9,7 @@ const input = './src/index.js';
 
 const umdGlobals = {
   react: 'React',
+  'react-dom': 'ReactDOM',
   '@popperjs/core': 'Popper',
 };
 

src/Reference.js

@@ -23,6 +23,7 @@ export function Reference({ children, innerRef }: ReferenceProps): React.Node {
   );
 
   // ran on unmount
+  // eslint-disable-next-line react-hooks/exhaustive-deps
   React.useEffect(() => () => setRef(innerRef, null), []);
 
   React.useEffect(() => {

src/usePopper.js

@@ -1,5 +1,6 @@
 // @flow strict
 import * as React from 'react';
+import * as ReactDOM from 'react-dom';
 import {
   createPopper as defaultCreatePopper,
   type Options as PopperOptions,
@@ -74,13 +75,15 @@ export const usePopper = (
       fn: ({ state }) => {
         const elements = Object.keys(state.elements);
 
-        setState({
-          styles: fromEntries(
-            elements.map(element => [element, state.styles[element] || {}])
-          ),
-          attributes: fromEntries(
-            elements.map(element => [element, state.attributes[element]])
-          ),
+        ReactDOM.flushSync(() => {
+          setState({
+            styles: fromEntries(
+              elements.map((element) => [element, state.styles[element] || {}])
+            ),
+            attributes: fromEntries(
+              elements.map((element) => [element, state.attributes[element]])
+            ),
+          });
         });
       },
       requires: ['computeStyles'],

src/usePopper.test.js

@@ -14,18 +14,18 @@ describe('userPopper', () => {
   });
 
   it('initializes the Popper instance', async () => {
-    const { result, wait } = renderHook(() =>
+    const { result, waitFor } = renderHook(() =>
       usePopper(referenceElement, popperElement)
     );
 
-    await wait(() => {
+    await waitFor(() => {
       expect(result.current.state).not.toBe(null);
     });
   });
 
   it("doesn't update Popper instance on props update if not needed by Popper", async () => {
     const spy = jest.spyOn(PopperJs, 'createPopper');
-    const { wait, rerender } = renderHook(
+    const { waitFor, rerender } = renderHook(
       ({ referenceElement, popperElement }) =>
         usePopper(referenceElement, popperElement),
       { initialProps: { referenceElement, popperElement } }
@@ -35,7 +35,7 @@ describe('userPopper', () => {
       await rerender({ referenceElement, popperElement });
     });
 
-    await wait(() => {
+    await waitFor(() => {
       expect(spy).toHaveBeenCalledTimes(1);
     });
   });