From 46d39d38aa57ae4477d075d73cfc410516886c0c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E4=BA=8C=E8=B4=A7=E6=9C=BA=E5=99=A8=E4=BA=BA?=
 <smith3816@gmail.com>
Date: Tue, 3 Jun 2025 17:08:39 +0800
Subject: [PATCH] refactor: use rc-util useId

---
 src/Select.tsx                             |  2 +-
 src/hooks/useId.ts                         | 32 -------------
 tests/__snapshots__/Combobox.test.tsx.snap | 12 ++---
 tests/__snapshots__/Multiple.test.tsx.snap | 24 +++++-----
 tests/__snapshots__/Select.test.tsx.snap   | 56 +++++++++++-----------
 tests/__snapshots__/Tags.test.tsx.snap     | 40 ++++++++--------
 tests/__snapshots__/ssr.test.tsx.snap      |  2 +-
 7 files changed, 68 insertions(+), 100 deletions(-)
 delete mode 100644 src/hooks/useId.ts

diff --git a/src/Select.tsx b/src/Select.tsx
index 2d337a672..8bad7c365 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -49,7 +49,7 @@ import SelectContext from './SelectContext';
 import type { SelectContextProps } from './SelectContext';
 import useCache from './hooks/useCache';
 import useFilterOptions from './hooks/useFilterOptions';
-import useId from './hooks/useId';
+import useId from '@rc-component/util/lib/hooks/useId';
 import useOptions from './hooks/useOptions';
 import useRefFunc from './hooks/useRefFunc';
 import type { FlattenOptionData } from './interface';
diff --git a/src/hooks/useId.ts b/src/hooks/useId.ts
deleted file mode 100644
index b06775c34..000000000
--- a/src/hooks/useId.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-import * as React from 'react';
-import canUseDom from '@rc-component/util/lib/Dom/canUseDom';
-
-let uuid = 0;
-
-/** Is client side and not jsdom */
-export const isBrowserClient = process.env.NODE_ENV !== 'test' && canUseDom();
-
-/** Get unique id for accessibility usage */
-export function getUUID(): number | string {
-  let retId: string | number;
-
-  // Test never reach
-  /* istanbul ignore if */
-  if (isBrowserClient) {
-    retId = uuid;
-    uuid += 1;
-  } else {
-    retId = 'TEST_OR_SSR';
-  }
-
-  return retId;
-}
-
-export default function useId(id?: string) {
-  // Inner id for accessibility usage. Only work in client side
-  const [innerId, setInnerId] = React.useState<string>();
-  React.useEffect(() => {
-    setInnerId(`rc_select_${getUUID()}`);
-  }, []);
-  return id || innerId;
-}
diff --git a/tests/__snapshots__/Combobox.test.tsx.snap b/tests/__snapshots__/Combobox.test.tsx.snap
index 8efa34f80..173283c6a 100644
--- a/tests/__snapshots__/Combobox.test.tsx.snap
+++ b/tests/__snapshots__/Combobox.test.tsx.snap
@@ -15,13 +15,13 @@ exports[`Select.Combobox renders controlled correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="rc-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="combobox"
           type="search"
           value=""
@@ -52,13 +52,13 @@ exports[`Select.Combobox renders correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="rc-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="combobox"
           type="search"
           value=""
diff --git a/tests/__snapshots__/Multiple.test.tsx.snap b/tests/__snapshots__/Multiple.test.tsx.snap
index a84f838fa..24596ec3b 100644
--- a/tests/__snapshots__/Multiple.test.tsx.snap
+++ b/tests/__snapshots__/Multiple.test.tsx.snap
@@ -23,13 +23,13 @@ exports[`Select.Multiple max tag render not display maxTagPlaceholder if maxTagC
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               readonly=""
               role="combobox"
               style="opacity: 0;"
@@ -147,13 +147,13 @@ exports[`Select.Multiple max tag render truncates tags by maxTagCount and show m
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               readonly=""
               role="combobox"
               style="opacity: 0;"
@@ -269,13 +269,13 @@ exports[`Select.Multiple max tag render truncates tags by maxTagCount and show m
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               readonly=""
               role="combobox"
               style="opacity: 0;"
@@ -374,13 +374,13 @@ exports[`Select.Multiple max tag render truncates values by maxTagTextLength 1`]
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               readonly=""
               role="combobox"
               style="opacity: 0;"
diff --git a/tests/__snapshots__/Select.test.tsx.snap b/tests/__snapshots__/Select.test.tsx.snap
index be851696e..041f8d551 100644
--- a/tests/__snapshots__/Select.test.tsx.snap
+++ b/tests/__snapshots__/Select.test.tsx.snap
@@ -7,14 +7,14 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
 >
   <div>
     <div
-      id="rc_select_TEST_OR_SSR_list"
+      id="test-id_list"
       role="listbox"
       style="height: 0px; width: 0px; overflow: hidden;"
     >
       <div
         aria-label="1"
         aria-selected="false"
-        id="rc_select_TEST_OR_SSR_list_0"
+        id="test-id_list_0"
         role="option"
       >
         1
@@ -22,7 +22,7 @@ exports[`Select.Basic does not filter when filterOption value is false 1`] = `
       <div
         aria-label="2"
         aria-selected="false"
-        id="rc_select_TEST_OR_SSR_list_1"
+        id="test-id_list_1"
         role="option"
       >
         2
@@ -99,7 +99,7 @@ exports[`Select.Basic filterOption could be true as described in default value 1
   <div>
     <div
       class="rc-select-item-empty"
-      id="rc_select_TEST_OR_SSR_list"
+      id="test-id_list"
       role="listbox"
     >
       Not Found
@@ -123,13 +123,13 @@ exports[`Select.Basic no search 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="rc-select-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           readonly=""
           role="combobox"
           style="opacity: 0;"
@@ -166,15 +166,15 @@ exports[`Select.Basic render renders aria-attributes correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
           aria-label="some-label"
           aria-labelledby="test-id"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="antd-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="combobox"
           type="search"
           value=""
@@ -218,13 +218,13 @@ exports[`Select.Basic render renders correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="antd-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="combobox"
           type="search"
           value=""
@@ -270,13 +270,13 @@ exports[`Select.Basic render renders data-attributes correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="antd-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="combobox"
           type="search"
           value=""
@@ -320,14 +320,14 @@ exports[`Select.Basic render renders disabled select correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="antd-selection-search-input"
           disabled=""
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="combobox"
           type="search"
           value=""
@@ -362,13 +362,13 @@ exports[`Select.Basic render renders role prop correctly 1`] = `
       >
         <input
           aria-autocomplete="list"
-          aria-controls="rc_select_TEST_OR_SSR_list"
+          aria-controls="test-id_list"
           aria-expanded="false"
           aria-haspopup="listbox"
-          aria-owns="rc_select_TEST_OR_SSR_list"
+          aria-owns="test-id_list"
           autocomplete="off"
           class="antd-selection-search-input"
-          id="rc_select_TEST_OR_SSR"
+          id="test-id"
           role="button"
           type="search"
           value=""
@@ -545,14 +545,14 @@ exports[`Select.Basic should contain falsy children 1`] = `
 >
   <div>
     <div
-      id="rc_select_TEST_OR_SSR_list"
+      id="test-id_list"
       role="listbox"
       style="height: 0px; width: 0px; overflow: hidden;"
     >
       <div
         aria-label="1"
         aria-selected="true"
-        id="rc_select_TEST_OR_SSR_list_0"
+        id="test-id_list_0"
         role="option"
       >
         1
@@ -560,7 +560,7 @@ exports[`Select.Basic should contain falsy children 1`] = `
       <div
         aria-label="2"
         aria-selected="false"
-        id="rc_select_TEST_OR_SSR_list_1"
+        id="test-id_list_1"
         role="option"
       >
         2
@@ -644,14 +644,14 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
         CUSTOM NODE
       </div>
       <div
-        id="rc_select_TEST_OR_SSR_list"
+        id="test-id_list"
         role="listbox"
         style="height: 0px; width: 0px; overflow: hidden;"
       >
         <div
           aria-label="1"
           aria-selected="false"
-          id="rc_select_TEST_OR_SSR_list_0"
+          id="test-id_list_0"
           role="option"
         >
           1
@@ -659,7 +659,7 @@ exports[`Select.Basic should render custom dropdown correctly 1`] = `
         <div
           aria-label="2"
           aria-selected="false"
-          id="rc_select_TEST_OR_SSR_list_1"
+          id="test-id_list_1"
           role="option"
         >
           2
diff --git a/tests/__snapshots__/Tags.test.tsx.snap b/tests/__snapshots__/Tags.test.tsx.snap
index 89c74d8a8..477783d55 100644
--- a/tests/__snapshots__/Tags.test.tsx.snap
+++ b/tests/__snapshots__/Tags.test.tsx.snap
@@ -77,15 +77,15 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
               style="width: 0px;"
             >
               <input
-                aria-activedescendant="rc_select_TEST_OR_SSR_list_1"
+                aria-activedescendant="test-id_list_1"
                 aria-autocomplete="list"
-                aria-controls="rc_select_TEST_OR_SSR_list"
+                aria-controls="test-id_list"
                 aria-expanded="true"
                 aria-haspopup="listbox"
-                aria-owns="rc_select_TEST_OR_SSR_list"
+                aria-owns="test-id_list"
                 autocomplete="off"
                 class="rc-select-selection-search-input"
-                id="rc_select_TEST_OR_SSR"
+                id="test-id"
                 role="combobox"
                 type="search"
                 value=""
@@ -107,26 +107,26 @@ exports[`Select.Tags OptGroup renders correctly 1`] = `
     >
       <div>
         <div
-          id="rc_select_TEST_OR_SSR_list"
+          id="test-id_list"
           role="listbox"
           style="height: 0px; width: 0px; overflow: hidden;"
         >
           <div
             aria-selected="false"
-            id="rc_select_TEST_OR_SSR_list_0"
+            id="test-id_list_0"
             role="presentation"
           />
           <div
             aria-label="Jack"
             aria-selected="true"
-            id="rc_select_TEST_OR_SSR_list_1"
+            id="test-id_list_1"
             role="option"
           >
             jack
           </div>
           <div
             aria-selected="false"
-            id="rc_select_TEST_OR_SSR_list_2"
+            id="test-id_list_2"
             role="presentation"
           />
         </div>
@@ -255,13 +255,13 @@ exports[`Select.Tags max tag render not display maxTagPlaceholder if maxTagCount
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               role="combobox"
               type="search"
               value=""
@@ -376,13 +376,13 @@ exports[`Select.Tags max tag render truncates tags by maxTagCount and show maxTa
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               role="combobox"
               type="search"
               value=""
@@ -495,13 +495,13 @@ exports[`Select.Tags max tag render truncates tags by maxTagCount and show maxTa
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               role="combobox"
               type="search"
               value=""
@@ -597,13 +597,13 @@ exports[`Select.Tags max tag render truncates values by maxTagTextLength 1`] = `
           >
             <input
               aria-autocomplete="list"
-              aria-controls="rc_select_TEST_OR_SSR_list"
+              aria-controls="test-id_list"
               aria-expanded="false"
               aria-haspopup="listbox"
-              aria-owns="rc_select_TEST_OR_SSR_list"
+              aria-owns="test-id_list"
               autocomplete="off"
               class="rc-select-selection-search-input"
-              id="rc_select_TEST_OR_SSR"
+              id="test-id"
               role="combobox"
               type="search"
               value=""
diff --git a/tests/__snapshots__/ssr.test.tsx.snap b/tests/__snapshots__/ssr.test.tsx.snap
index 0ed2eda89..b66fe7ca8 100644
--- a/tests/__snapshots__/ssr.test.tsx.snap
+++ b/tests/__snapshots__/ssr.test.tsx.snap
@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection-wrap"><span class="rc-select-selection-search"><input type="search" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="undefined_list" aria-autocomplete="list" aria-controls="undefined_list" readonly="" unselectable="on" style="opacity:0" value=""/></span><span class="rc-select-selection-placeholder"></span></span></div></div>"`;
+exports[`Select.SSR should work 1`] = `"<div class="rc-select rc-select-single"><div class="rc-select-selector"><span class="rc-select-selection-wrap"><span class="rc-select-selection-search"><input type="search" id="test-id" autoComplete="off" class="rc-select-selection-search-input" role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-owns="test-id_list" aria-autocomplete="list" aria-controls="test-id_list" readonly="" unselectable="on" style="opacity:0" value=""/></span><span class="rc-select-selection-placeholder"></span></span></div></div>"`;