feat: Add support for React 18 and useId (#98)

Co-authored-by: Rogin Farrer <[email protected]>

.storybook/main.js

@@ -1,11 +1,8 @@
 module.exports = {
-  "stories": [
-    "../src/**/*.stories.mdx",
-    "../src/**/*.stories.@(js|jsx|ts|tsx)"
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-a11y',
   ],
-  "addons": [
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-a11y"
-  ]
 }

package.json

@@ -32,18 +32,18 @@
     "@babel/core": "^7.8.4",
     "@babel/eslint-parser": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
-    "@storybook/addon-a11y": "^6.3.9",
-    "@storybook/addon-actions": "^6.3.9",
-    "@storybook/addon-essentials": "^6.3.9",
-    "@storybook/addon-links": "^6.3.9",
-    "@storybook/react": "^6.3.9",
+    "@storybook/addon-a11y": "^6.5.11",
+    "@storybook/addon-actions": "^6.5.11",
+    "@storybook/addon-essentials": "^6.5.11",
+    "@storybook/addon-links": "^6.5.11",
+    "@storybook/react": "^6.5.11",
     "@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/index.ts

@@ -8,9 +8,9 @@ import {
   getAutoHeightDuration,
   mergeRefs,
   usePaddingWarning,
-  useUniqueId,
   useEffectAfterMount,
   useControlledState,
+  useId,
 } from './utils'
 import {
   UseCollapseInput,
@@ -41,7 +41,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,3 +1,4 @@
+import * as React from 'react'
 import {
   RefObject,
   useState,
@@ -92,11 +93,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(
@@ -179,6 +183,16 @@ export function useUniqueId(idFromProps?: string | null) {
   return id != null ? String(id) : undefined
 }
 
+// Workaround for https://github.com/webpack/webpack/issues/14814
+const maybeReactUseId: undefined | (() => string) = (React as any)['useId' + '']
+export function useId(idOverride?: string): string | undefined {
+  if (maybeReactUseId !== undefined) {
+    const reactId = maybeReactUseId()
+    return idOverride ?? reactId
+  }
+  return useUniqueId(idOverride)
+}
+
 export function usePaddingWarning(element: RefObject<HTMLElement>): void {
   // @ts-ignore
   let warn = (el?: RefObject<HTMLElement>): void => {}