feat: Remove React 18 support (#120)

- Fix #117

.storybook/main.js

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

package.json

@@ -25,24 +25,24 @@
     "release": "np --no-2fa"
   },
   "peerDependencies": {
-    "react": ">=16.8",
-    "react-dom": ">=16.8"
+    "react": "^16.8 || ^17",
+    "react-dom": "^16.8 || ^17"
   },
   "devDependencies": {
     "@babel/core": "^7.8.4",
     "@babel/eslint-parser": "^7.15.4",
     "@babel/preset-react": "^7.14.5",
-    "@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",
+    "@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",
     "@testing-library/jest-dom": "^5.3.0",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^10.0.2",
     "@types/jest": "^25.1.2",
     "@types/node": "^16.7.13",
-    "@types/react": "^18.0.18",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "^17.0.3",
+    "@types/react-dom": "^17.0.3",
     "@types/styled-components": "^5.0.1",
     "@typescript-eslint/eslint-plugin": "^4.31.0",
     "@typescript-eslint/parser": "^4.31.0",
@@ -62,9 +62,9 @@
     "microbundle": "^0.13.3",
     "np": "^6.4.0",
     "prettier": "^2.3.2",
-    "react": "^18.2.0",
+    "react": "^17",
     "react-docgen-typescript-loader": "^3.7.1",
-    "react-dom": "^18.2.0",
+    "react-dom": "^17",
     "semantic-release": "^18.0.0",
     "styled-components": "^5.2.0",
     "ts-jest": "^27.0.5",

src/index.ts

@@ -7,9 +7,9 @@ import {
   getAutoHeightDuration,
   mergeRefs,
   usePaddingWarning,
+  useUniqueId,
   useEffectAfterMount,
   useControlledState,
-  useId,
 } from './utils'
 import {
   UseCollapseInput,
@@ -40,7 +40,7 @@ export default function useCollapse({
     configIsExpanded,
     defaultExpanded
   )
-  const uniqueId = useId()
+  const uniqueId = useUniqueId()
   const el = useRef<HTMLElement | null>(null)
   usePaddingWarning(el)
   const collapsedHeight = `${initialConfig.collapsedHeight || 0}px`

src/utils.ts

@@ -1,4 +1,3 @@
-import * as React from 'react'
 import {
   RefObject,
   useState,
@@ -93,14 +92,11 @@ export function useControlledState(
   const expanded = initiallyControlled.current
     ? (isExpanded as boolean)
     : stateExpanded
-  const setExpanded = useCallback(
-    (n: boolean | ((prev: boolean) => boolean)) => {
-      if (!initiallyControlled.current) {
-        setStateExpanded(n)
-      }
-    },
-    []
-  )
+  const setExpanded = useCallback((n) => {
+    if (!initiallyControlled.current) {
+      setStateExpanded(n)
+    }
+  }, [])
 
   useEffect(() => {
     warning(
@@ -183,16 +179,6 @@ 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 => {}