refactor: Upgrade utils and replace useMergedState (#299)

* refactor: Upgrade utils and replace useMergedState

* chore: debug of ci

* chore: adjust ci

* chore: rollback

* chore: use utoo

* chore: use back

* chore: rollback

* test: fix test

* test: fix test

---------

Co-authored-by: 刘欢 <lh01217311@antgroup.com>
Co-authored-by: 二货机器人 <smith3816@gmail.com>

Author: 3 people

.github/workflows/main.yml

@@ -2,5 +2,5 @@ name: ✅ test
 on: [push, pull_request]
 jobs:
   test:
-    uses: react-component/rc-test/.github/workflows/test.yml@main
-    secrets: inherit
+    uses: react-component/rc-test/.github/workflows/test-utoo.yml@main
+    secrets: inherit

package.json

@@ -49,7 +49,7 @@
     "@rc-component/menu": "~1.1.0",
     "@rc-component/textarea": "~1.0.0",
     "@rc-component/trigger": "^3.0.0",
-    "@rc-component/util": "^1.2.0",
+    "@rc-component/util": "^1.3.0",
     "classnames": "^2.2.6"
   },
   "devDependencies": {

src/Mentions.tsx

@@ -5,7 +5,7 @@ import type { CommonInputProps } from '@rc-component/input/lib/interface';
 import type { TextAreaProps, TextAreaRef } from '@rc-component/textarea';
 import TextArea from '@rc-component/textarea';
 import toArray from '@rc-component/util/lib/Children/toArray';
-import useMergedState from '@rc-component/util/lib/hooks/useMergedState';
+import useControlledState from '@rc-component/util/lib/hooks/useControlledState';
 import KeyCode from '@rc-component/util/lib/KeyCode';
 import React, {
   forwardRef,
@@ -171,10 +171,10 @@ const InternalMentions = forwardRef<MentionsRef, MentionsProps>(
     const [isFocus, setIsFocus] = useState(false);
 
     // ============================== Value ===============================
-    const [mergedValue, setMergedValue] = useMergedState('', {
-      defaultValue,
-      value: value,
-    });
+    const [mergedValue, setMergedValue] = useControlledState(
+      defaultValue || '',
+      value,
+    );
 
     // =============================== Open ===============================
     const { open } = useContext(UnstableContext);
@@ -564,10 +564,10 @@ const Mentions = forwardRef<MentionsRef, MentionsProps>(
     }));
 
     // ============================== Value ===============================
-    const [mergedValue, setMergedValue] = useMergedState('', {
-      defaultValue,
-      value: customValue,
-    });
+    const [mergedValue, setMergedValue] = useControlledState(
+      defaultValue || '',
+      customValue,
+    );
 
     // ============================== Change ==============================
     const triggerChange = (currentValue: string) => {

tests/DropdownMenu.spec.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { render, fireEvent } from '@testing-library/react';
+import { render, fireEvent, act } from '@testing-library/react';
+import KeyCode from '@rc-component/util/lib/KeyCode';
 import Mentions, { UnstableContext } from '../src';
-import { expectMeasuring } from './util';
+import { expectMeasuring, simulateInput } from './util';
 
 describe('DropdownMenu', () => {
   // Generate 20 options for testing scrolling behavior
@@ -10,43 +11,73 @@ describe('DropdownMenu', () => {
     label: `item-${index}`,
   }));
 
-  // Setup component with UnstableContext for testing dropdown behavior
-  const { container } = render(
-    <UnstableContext.Provider value={{ open: true }}>
-      <Mentions defaultValue="@" options={generateOptions} />
-    </UnstableContext.Provider>,
-  );
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
 
   it('should scroll into view when navigating with keyboard', () => {
+    // Setup component with UnstableContext for testing dropdown behavior
+    const { container } = render(
+      <UnstableContext.Provider value={{ open: true }}>
+        <Mentions defaultValue="@" options={generateOptions} />
+      </UnstableContext.Provider>,
+    );
+
     // Mock scrollIntoView since it's not implemented in JSDOM
     const scrollIntoViewMock = jest
       .spyOn(HTMLElement.prototype, 'scrollIntoView')
       .mockImplementation(jest.fn());
 
-    // Press ArrowDown multiple times to make options overflow the visible area
-    for (let i = 0; i < 10; i++) {
-      fireEvent.keyDown(document.activeElement!, { key: 'ArrowDown' });
-    }
+    const textarea = container.querySelector('textarea')!;
+
+    act(() => {
+      // First trigger the measuring state by typing @
+      simulateInput(container, '@');
+      jest.runAllTimers();
+    });
+
+    // Verify we're in measuring state
+    expectMeasuring(container, true);
+
+    act(() => {
+      // Press ArrowDown multiple times to make options overflow the visible area
+      for (let i = 0; i < 10; i++) {
+        fireEvent.keyDown(textarea, {
+          keyCode: KeyCode.DOWN,
+          which: KeyCode.DOWN,
+        });
+      }
+      jest.runAllTimers();
+    });
 
     // Verify if scrollIntoView was called
     expect(scrollIntoViewMock).toHaveBeenCalledWith({
       block: 'nearest',
       inline: 'nearest',
     });
+    scrollIntoViewMock.mockClear();
 
-    // Press ArrowUp to verify scrolling up
-    for (let i = 0; i < 5; i++) {
-      fireEvent.keyDown(document.activeElement!, { key: 'ArrowUp' });
-    }
+    act(() => {
+      // Press ArrowUp to verify scrolling up
+      for (let i = 0; i < 5; i++) {
+        fireEvent.keyDown(textarea, {
+          keyCode: KeyCode.UP,
+          which: KeyCode.UP,
+        });
+      }
+      jest.runAllTimers();
+    });
 
     // Verify if scrollIntoView was called again
     expect(scrollIntoViewMock).toHaveBeenCalledWith({
       block: 'nearest',
       inline: 'nearest',
     });
 
-    expectMeasuring(container);
-
     scrollIntoViewMock.mockRestore();
   });
 });