feat!: useId の独自実装を削除し、React 18 未満のサポートを終了する (#4920)

packages/smarthr-ui/package.json

@@ -91,8 +91,8 @@
     "webpack": "^5.94.0"
   },
   "peerDependencies": {
-    "react": "16.13.0 || ^17.0.1 || ^18.0.0",
-    "react-dom": "16.13.0 || ^17.0.1 || ^18.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "styled-components": "^5.0.1"
   },
   "bugs": {

packages/smarthr-ui/src/hooks/useId.test.ts

@@ -0,0 +1,25 @@
+import { renderHook } from '@testing-library/react'
+
+import { useId } from './useId'
+
+describe('useId', () => {
+  it('defaultId を指定した場合、毎回同じ値を返す', () => {
+    const { result: id1 } = renderHook(() => useId('test'))
+    const { result: id2 } = renderHook(() => useId('test'))
+    const { result: id3 } = renderHook(() => useId('test'))
+
+    expect(id1.current).toEqual('test')
+    expect(id2.current).toEqual('test')
+    expect(id3.current).toEqual('test')
+  })
+
+  it('defaultId を指定しない場合、異なる値を返す', () => {
+    const { result: id1 } = renderHook(() => useId())
+    const { result: id2 } = renderHook(() => useId())
+    const { result: id3 } = renderHook(() => useId())
+
+    expect(id1.current).not.toEqual(id2.current)
+    expect(id2.current).not.toEqual(id3.current)
+    expect(id3.current).not.toEqual(id1.current)
+  })
+})

packages/smarthr-ui/src/hooks/useId.tsx

@@ -1,35 +1,6 @@
-import React, { ReactNode, VFC, createContext, useContext, useMemo } from 'react'
-
-type IdContextValue = {
-  prefix: number
-  current: number
-}
-
-const defaultContext: IdContextValue = {
-  prefix: 0,
-  current: 0,
-}
-
-const IdContext = createContext<IdContextValue>(defaultContext)
-
-function useId_OLD() {
-  const context = useContext(IdContext)
-  return useMemo(() => `id-${context.prefix}-${++context.current}`, [context])
-}
+import React from 'react'
 
 export const useId = (defaultId?: string): string => {
-  if (defaultId) return defaultId
-
-  // React v18 以降は React.useId を使う
-  return ('useId' in React ? React.useId : useId_OLD)()
-}
-
-export const SequencePrefixIdProvider: VFC<{ children: ReactNode }> = ({ children }) => {
-  const context = useContext(IdContext)
-  // increment `prefix` and reset `current` to 0 on every Provider
-  const value: IdContextValue = {
-    prefix: context.prefix + 1,
-    current: 0,
-  }
-  return <IdContext.Provider value={value}>{children}</IdContext.Provider>
+  const id = React.useId()
+  return defaultId || id
 }

packages/smarthr-ui/src/index.ts

@@ -127,6 +127,3 @@ export { defaultBreakpoint } from './themes/createBreakpoint'
 
 // constants
 export { FONT_FAMILY, CHART_COLORS, OTHER_CHART_COLOR } from './constants'
-
-// utils
-export { SequencePrefixIdProvider } from './hooks/useId'