refactor: Upgrade utils and replace useMergedState (#793)

* refactor: Upgrade utils and replace useMergedState

* refactor: useUUID replace useId

* fix: coverage

---------

Co-authored-by: 刘欢 <[email protected]>

Author: EmilyyyLiu

package.json

@@ -46,7 +46,7 @@
   "dependencies": {
     "@rc-component/motion": "^1.1.4",
     "@rc-component/trigger": "^3.0.0",
-    "@rc-component/util": "^1.0.0",
+    "@rc-component/util": "^1.3.0",
     "classnames": "2.x",
     "rc-overflow": "^1.3.1"
   },

src/Menu.tsx

@@ -1,7 +1,8 @@
 import classNames from 'classnames';
 import type { CSSMotionProps } from '@rc-component/motion';
 import Overflow from 'rc-overflow';
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
+import useId from '@rc-component/util/lib/hooks/useId';
 import isEqual from '@rc-component/util/lib/isEqual';
 import warning from '@rc-component/util/lib/warning';
 import * as React from 'react';
@@ -14,7 +15,6 @@ import PrivateContext from './context/PrivateContext';
 import { getFocusableElements, refreshElements, useAccessibility } from './hooks/useAccessibility';
 import useKeyRecords, { OVERFLOW_KEY } from './hooks/useKeyRecords';
 import useMemoCallback from './hooks/useMemoCallback';
-import useUUID from './hooks/useUUID';
 import type {
   BuiltinPlacements,
   Components,
@@ -260,7 +260,7 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
 
   const containerRef = React.useRef<HTMLUListElement>();
 
-  const uuid = useUUID(id);
+  const uuid = useId(id ? `rc-menu-uuid-${id}` : 'rc-menu-uuid');
 
   const isRtl = direction === 'rtl';
 
@@ -273,10 +273,8 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   }
 
   // ========================= Open =========================
-  const [mergedOpenKeys, setMergedOpenKeys] = useMergedState(defaultOpenKeys, {
-    value: openKeys,
-    postState: keys => keys || EMPTY_LIST,
-  });
+  const [innerOpenKeys, setMergedOpenKeys] = useControlledState(defaultOpenKeys, openKeys);
+  const mergedOpenKeys = innerOpenKeys || EMPTY_LIST;
 
   // React 18 will merge mouse event which means we open key will not sync
   // ref: https://github.com/ant-design/ant-design/issues/38818
@@ -376,11 +374,9 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
   }, [lastVisibleIndex, allVisible]);
 
   // ======================== Active ========================
-  const [mergedActiveKey, setMergedActiveKey] = useMergedState(
+  const [mergedActiveKey, setMergedActiveKey] = useControlledState(
     activeKey || ((defaultActiveFirst && childList[0]?.key) as string),
-    {
-      value: activeKey,
-    },
+    activeKey,
   );
 
   const onActive = useMemoCallback((key: string) => {
@@ -423,22 +419,21 @@ const Menu = React.forwardRef<MenuRef, MenuProps>((props, ref) => {
 
   // ======================== Select ========================
   // >>>>> Select keys
-  const [mergedSelectKeys, setMergedSelectKeys] = useMergedState(defaultSelectedKeys || [], {
-    value: selectedKeys,
-
-    // Legacy convert key to array
-    postState: keys => {
-      if (Array.isArray(keys)) {
-        return keys;
-      }
+  const [internalSelectKeys, setMergedSelectKeys] = useControlledState(
+    defaultSelectedKeys || [],
+    selectedKeys,
+  );
+  const mergedSelectKeys = React.useMemo(() => {
+    if (Array.isArray(internalSelectKeys)) {
+      return internalSelectKeys;
+    }
 
-      if (keys === null || keys === undefined) {
-        return EMPTY_LIST;
-      }
+    if (internalSelectKeys === null || internalSelectKeys === undefined) {
+      return EMPTY_LIST;
+    }
 
-      return [keys];
-    },
-  });
+    return [internalSelectKeys];
+  }, [internalSelectKeys]);
 
   // >>>>> Trigger select
   const triggerSelection = (info: MenuInfo) => {

src/context/IdContext.ts

@@ -3,9 +3,6 @@ import * as React from 'react';
 export const IdContext = React.createContext<string>(null);
 
 export function getMenuId(uuid: string, eventKey: string) {
-  if (uuid === undefined) {
-    return null;
-  }
   return `${uuid}-${eventKey}`;
 }
 

src/hooks/useUUID.ts

@@ -13,11 +13,11 @@ HTMLCollection [
       role="none"
     >
       <div
-        aria-controls="rc-menu-uuid-test-light-popup"
+        aria-controls="rc-menu-uuid-light-popup"
         aria-expanded="true"
         aria-haspopup="true"
         class="rc-menu-submenu-title"
-        data-menu-id="rc-menu-uuid-test-light"
+        data-menu-id="rc-menu-uuid-light"
         role="menuitem"
         style="padding-left: 24px;"
         tabindex="-1"
@@ -31,12 +31,12 @@ HTMLCollection [
       <ul
         class="rc-menu rc-menu-sub rc-menu-inline"
         data-menu-list="true"
-        id="rc-menu-uuid-test-light-popup"
+        id="rc-menu-uuid-light-popup"
         role="menu"
       >
         <li
           class="rc-menu-item"
-          data-menu-id="rc-menu-uuid-test-bamboo"
+          data-menu-id="rc-menu-uuid-bamboo"
           role="menuitem"
           style="padding-left: 48px;"
           tabindex="-1"