From 28e590ed702660a74e136d982b7d3ca9bcae8314 Mon Sep 17 00:00:00 2001
From: "shingo.sasaki" <shingo.sasaki.0529@gmail.com>
Date: Tue, 17 Sep 2024 14:54:37 +0900
Subject: [PATCH] =?UTF-8?q?feat!:=20useId=20=E3=81=AE=E7=8B=AC=E8=87=AA?=
 =?UTF-8?q?=E5=AE=9F=E8=A3=85=E3=82=92=E5=89=8A=E9=99=A4=E3=81=97=E3=80=81?=
 =?UTF-8?q?React=2018=20=E6=9C=AA=E6=BA=80=E3=81=AE=E3=82=B5=E3=83=9D?=
 =?UTF-8?q?=E3=83=BC=E3=83=88=E3=82=92=E7=B5=82=E4=BA=86=E3=81=99=E3=82=8B?=
 =?UTF-8?q?=20(#4920)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 packages/smarthr-ui/package.json            |  4 +--
 packages/smarthr-ui/src/hooks/useId.test.ts | 25 +++++++++++++++
 packages/smarthr-ui/src/hooks/useId.tsx     | 35 ++-------------------
 packages/smarthr-ui/src/index.ts            |  3 --
 4 files changed, 30 insertions(+), 37 deletions(-)
 create mode 100644 packages/smarthr-ui/src/hooks/useId.test.ts

diff --git a/packages/smarthr-ui/package.json b/packages/smarthr-ui/package.json
index 7e31c2ee76..c5d3a5689b 100644
--- a/packages/smarthr-ui/package.json
+++ b/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": {
diff --git a/packages/smarthr-ui/src/hooks/useId.test.ts b/packages/smarthr-ui/src/hooks/useId.test.ts
new file mode 100644
index 0000000000..babe9dcb45
--- /dev/null
+++ b/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)
+  })
+})
diff --git a/packages/smarthr-ui/src/hooks/useId.tsx b/packages/smarthr-ui/src/hooks/useId.tsx
index 9bf0f859c9..bd5cb6d468 100644
--- a/packages/smarthr-ui/src/hooks/useId.tsx
+++ b/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
 }
diff --git a/packages/smarthr-ui/src/index.ts b/packages/smarthr-ui/src/index.ts
index c58d7b1e86..2f00951da7 100644
--- a/packages/smarthr-ui/src/index.ts
+++ b/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'