feat: Add support for React 18 and useId

package.json

@@ -25,8 +25,8 @@
     "release": "np --no-2fa"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": ">=18",
+    "react-dom": ">=18"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
@@ -38,12 +38,12 @@
     "@storybook/addon-links": "^6.3.9",
     "@storybook/react": "^6.3.9",
     "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^10.0.2",
+    "@testing-library/react": "^13.4.0",
     "@types/jest": "^25.1.2",
     "@types/node": "^16.7.13",
     "@types/raf": "^3.4.0",
-    "@types/react": "^17.0.3",
-    "@types/react-dom": "^17.0.3",
+    "@types/react": "^18.0.18",
+    "@types/react-dom": "^18.0.6",
     "@types/styled-components": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
@@ -63,9 +63,9 @@
     "microbundle": "^0.13.3",
     "np": "^6.4.0",
     "prettier": "^2.3.2",
-    "react": "^17",
+    "react": "^18.2.0",
     "react-docgen-typescript-loader": "^3.7.1",
-    "react-dom": "^17",
+    "react-dom": "^18.2.0",
     "semantic-release": "^18.0.0",
     "styled-components": "^5.2.0",
     "ts-jest": "^27.0.5",

src/__tests__/utils.test.tsx

@@ -4,38 +4,8 @@ import {
   useEffectAfterMount,
   useControlledState,
   callAll,
-  useUniqueId,
 } from '../utils'
 
-describe('useUniqueId', () => {
-  it('should generate a unique ID value', () => {
-    function Comp() {
-      const justNull = null
-      const randId = useUniqueId(justNull)
-      const randId2 = useUniqueId()
-      return (
-        <div>
-          <div id={randId}>Wow</div>
-          <div id={randId2}>Ok</div>
-        </div>
-      )
-    }
-    const { getByText } = render(<Comp />)
-    const id1 = Number(getByText('Wow').id)
-    const id2 = Number(getByText('Ok').id)
-    expect(id2).not.toEqual(id1)
-  })
-
-  it('uses a fallback ID', () => {
-    function Comp() {
-      const newId = useUniqueId('awesome')
-      return <div id={newId}>Ok</div>
-    }
-    const { getByText } = render(<Comp />)
-    expect(getByText('Ok').id).toEqual('awesome')
-  })
-})
-
 describe('callAll', () => {
   it('it calls the two functions passed into it', () => {
     const functionOne = jest.fn()

src/index.ts

@@ -1,4 +1,4 @@
-import { useState, useRef, TransitionEvent, CSSProperties } from 'react'
+import { useState, useId, useRef, TransitionEvent, CSSProperties } from 'react'
 import { flushSync } from 'react-dom'
 import raf from 'raf'
 import {
@@ -8,7 +8,6 @@ import {
   getAutoHeightDuration,
   mergeRefs,
   usePaddingWarning,
-  useUniqueId,
   useEffectAfterMount,
   useControlledState,
 } from './utils'
@@ -41,7 +40,7 @@ export default function useCollapse({
     configIsExpanded,
     defaultExpanded
   )
-  const uniqueId = useUniqueId()
+  const uniqueId = useId()
   const el = useRef<HTMLElement | null>(null)
   usePaddingWarning(el)
   const collapsedHeight = `${initialConfig.collapsedHeight || 0}px`

src/utils.ts

@@ -1,11 +1,4 @@
-import {
-  RefObject,
-  useState,
-  useRef,
-  useEffect,
-  useCallback,
-  useLayoutEffect,
-} from 'react'
+import { RefObject, useState, useRef, useEffect, useCallback } from 'react'
 import warning from 'tiny-warning'
 import type { AssignableRef } from './types'
 
@@ -92,11 +85,14 @@ export function useControlledState(
   const expanded = initiallyControlled.current
     ? (isExpanded as boolean)
     : stateExpanded
-  const setExpanded = useCallback((n) => {
-    if (!initiallyControlled.current) {
-      setStateExpanded(n)
-    }
-  }, [])
+  const setExpanded = useCallback(
+    (n: boolean | ((prev: boolean) => boolean)) => {
+      if (!initiallyControlled.current) {
+        setStateExpanded(n)
+      }
+    },
+    []
+  )
 
   useEffect(() => {
     warning(
@@ -127,58 +123,6 @@ export function useEffectAfterMount(
   }, dependencies)
 }
 
-/**
- * Taken from Reach
- * https://github.com/reach/reach-ui/blob/d2b88c50caf52f473a7d20a4493e39e3c5e95b7b/packages/auto-id
- *
- * Autogenerate IDs to facilitate WAI-ARIA and server rendering.
- *
- * Note: The returned ID will initially be `null` and will update after a
- * component mounts. Users may need to supply their own ID if they need
- * consistent values for SSR.
- *
- * @see Docs https://reach.tech/auto-id
- */
-const useIsomorphicLayoutEffect =
-  typeof window !== 'undefined' ? useLayoutEffect : useEffect
-let serverHandoffComplete = false
-let id = 0
-const genId = () => ++id
-export function useUniqueId(idFromProps?: string | null) {
-  /*
-   * If this instance isn't part of the initial render, we don't have to do the
-   * double render/patch-up dance. We can just generate the ID and return it.
-   */
-  const initialId = idFromProps || (serverHandoffComplete ? genId() : null)
-
-  const [id, setId] = useState(initialId)
-
-  useIsomorphicLayoutEffect(() => {
-    if (id === null) {
-      /*
-       * Patch the ID after render. We do this in `useLayoutEffect` to avoid any
-       * rendering flicker, though it'll make the first render slower (unlikely
-       * to matter, but you're welcome to measure your app and let us know if
-       * it's a problem).
-       */
-      setId(genId())
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [])
-
-  useEffect(() => {
-    if (serverHandoffComplete === false) {
-      /*
-       * Flag all future uses of `useId` to skip the update dance. This is in
-       * `useEffect` because it goes after `useLayoutEffect`, ensuring we don't
-       * accidentally bail out of the patch-up dance prematurely.
-       */
-      serverHandoffComplete = true
-    }
-  }, [])
-  return id != null ? String(id) : undefined
-}
-
 export function usePaddingWarning(element: RefObject<HTMLElement>): void {
   // @ts-ignore
   let warn = (el?: RefObject<HTMLElement>): void => {}