Avoid rc package deep imports

examples/fill-width.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import useLayoutEffect from "@rc-component/util/lib/hooks/useLayoutEffect";
+import { useLayoutEffect } from '@rc-component/util';
 import Overflow from '../src';
 import '../assets/index.less';
 import './common.less';

jest.config.js

@@ -1,4 +1,3 @@
 module.exports = {
   setupFiles: ['./tests/setup.js'],
-  snapshotSerializers: [require.resolve('enzyme-to-json/serializer')],
 };

package.json

@@ -46,47 +46,40 @@
   "dependencies": {
     "@babel/runtime": "^7.11.1",
     "@rc-component/resize-observer": "^1.0.1",
-    "@rc-component/util": "^1.4.0",
+    "@rc-component/util": "^1.11.1",
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@rc-component/father-plugin": "^2.0.0",
+    "@rc-component/father-plugin": "^2.2.0",
     "@rc-component/np": "^1.0.4",
     "@testing-library/jest-dom": "^5.16.4",
-    "@testing-library/react": "^12.0.0",
-    "@types/enzyme": "^3.10.8",
+    "@testing-library/react": "^16.3.0",
     "@types/jest": "^26.0.23",
     "@types/node": "^24.8.1",
-    "@types/react": "^16.14.2",
-    "@types/react-dom": "^16.9.10",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "^5.59.0",
     "@typescript-eslint/parser": "^5.59.0",
     "@umijs/fabric": "^3.0.0",
     "dumi": "^2.0.0",
-    "enzyme": "^3.0.0",
-    "enzyme-adapter-react-16": "^1.0.1",
-    "enzyme-to-json": "^3.4.0",
     "eslint": "^8.57.0",
     "eslint-plugin-jest": "^27.5.1",
     "eslint-plugin-unicorn": "^51.0.1",
-    "father": "^4.0.0",
+    "father": "^4.6.19",
     "glob": "^10.0.0",
     "less": "^3.10.3",
     "np": "^7.0.0",
     "prettier": "^2.0.5",
     "rc-test": "^7.0",
-    "react": "^16.0.0",
-    "react-dom": "^16.0.0",
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
     "regenerator-runtime": "^0.13.7",
     "typescript": "~5.3.3"
   },
   "peerDependencies": {
     "react": ">=16.9.0",
     "react-dom": ">=16.9.0"
   },
-  "overrides": {
-    "cheerio": "1.0.0-rc.12"
-  },
   "cnpm": {
     "mode": "npm"
   },

src/Overflow.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { useState, useMemo, useCallback } from 'react';
 import { clsx } from 'clsx';
 import ResizeObserver from '@rc-component/resize-observer';
-import useLayoutEffect from '@rc-component/util/lib/hooks/useLayoutEffect';
+import { useLayoutEffect } from '@rc-component/util';
 import Item from './Item';
 import useEffectState, { useBatcher } from './hooks/useEffectState';
 import type { ComponentType } from './RawItem';
@@ -169,13 +169,14 @@ function Overflow<ItemType = any>(
       if (typeof itemKey === 'function') {
         return itemKey(item);
       }
-      return (itemKey && (item as any)?.[itemKey]) ?? index;
+      return (itemKey && (item as any)?.[itemKey as keyof any]) ?? index;
     },
     [itemKey],
   );
 
   const mergedRenderItem = useCallback(
-    renderItem || ((item: ItemType) => item),
+    (item: ItemType, info: { index: number }) =>
+      renderItem ? renderItem(item, info) : (item as React.ReactNode),
     [renderItem],
   );
 
@@ -461,13 +462,13 @@ type FilledOverflowType = ForwardOverflowType & {
   INVALIDATE: typeof INVALIDATE;
 };
 
-(ForwardOverflow as unknown as FilledOverflowType).Item = RawItem;
-(ForwardOverflow as unknown as FilledOverflowType).RESPONSIVE = RESPONSIVE;
-(ForwardOverflow as unknown as FilledOverflowType).INVALIDATE = INVALIDATE;
+((ForwardOverflow as unknown) as FilledOverflowType).Item = RawItem;
+((ForwardOverflow as unknown) as FilledOverflowType).RESPONSIVE = RESPONSIVE;
+((ForwardOverflow as unknown) as FilledOverflowType).INVALIDATE = INVALIDATE;
 
 if (process.env.NODE_ENV !== 'production') {
   ForwardOverflow.displayName = 'Overflow';
 }
 
 // Convert to generic type
-export default ForwardOverflow as unknown as FilledOverflowType;
+export default (ForwardOverflow as unknown) as FilledOverflowType;

src/hooks/channelUpdate.ts

@@ -1,4 +1,4 @@
-import raf from '@rc-component/util/lib/raf';
+import { raf } from '@rc-component/util';
 
 export default function channelUpdate(callback: VoidFunction) {
   if (typeof MessageChannel === 'undefined') {

src/hooks/useEffectState.tsx

@@ -1,4 +1,4 @@
-import useEvent from '@rc-component/util/lib/hooks/useEvent';
+import { useEvent } from '@rc-component/util';
 import * as React from 'react';
 import { unstable_batchedUpdates } from 'react-dom';
 import channelUpdate from './channelUpdate';

tests/github.spec.tsx

@@ -1,9 +1,11 @@
+import './setup';
 import React from 'react';
+import '@testing-library/jest-dom';
 import { render, act } from '@testing-library/react';
-import { spyElementPrototypes } from '@rc-component/util/lib/test/domHook';
+import { spyElementPrototypes } from '@rc-component/util';
 import Overflow from '../src';
 
-import { _rs as onResize } from '@rc-component/resize-observer/lib/utils/observerUtil';
+import { _rs as onResize } from '@rc-component/resize-observer';
 
 interface ItemType {
   label: React.ReactNode;
@@ -100,7 +102,7 @@ describe('Overflow.github', () => {
       jest.runAllTimers();
     });
 
-    expect(container.querySelector('.rc-overflow-item-rest')).toHaveStyle({
+    expect(container.querySelector('.rc-overflow-item-rest')!).toHaveStyle({
       opacity: 1,
     });
   });

tests/index.spec.tsx

@@ -101,7 +101,7 @@ describe('Overflow.Basic', () => {
         <Overflow data={getData(1)} renderItem={renderItem} itemKey="key" />,
       );
 
-      expect(wrapper.find('Item').key()).toEqual('k-0');
+      expect(wrapper.findItems().text()).toEqual('Label 0');
     });
     it('function', () => {
       const wrapper = mount(
@@ -112,7 +112,7 @@ describe('Overflow.Basic', () => {
         />,
       );
 
-      expect(wrapper.find('Item').key()).toEqual('bamboo-k-0');
+      expect(wrapper.findItems().text()).toEqual('Label 0');
     });
   });
 

tests/prefix.spec.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { act } from '@testing-library/react';
 import { mount } from './wrapper';
 import Overflow from '../src';
 
@@ -24,7 +25,9 @@ describe('Overflow.Prefix', () => {
   });
 
   afterEach(() => {
-    jest.runAllTimers();
+    act(() => {
+      jest.runAllTimers();
+    });
     jest.useRealTimers();
   });
 
@@ -54,7 +57,7 @@ describe('Overflow.Prefix', () => {
     expect(wrapper.findPrefix()).toHaveLength(0);
   });
 
-  it('should work with responsive mode and show overflow', () => {
+  it('should work with responsive mode and show overflow', async () => {
     const wrapper = mount(
       <Overflow<ItemType>
         data={getData(10)}
@@ -66,15 +69,15 @@ describe('Overflow.Prefix', () => {
     );
 
     // Small container to force overflow
-    wrapper.initSize(60, 20);
+    await wrapper.initSize(60, 20);
 
     // Should render prefix
     expect(wrapper.findPrefix()).toHaveLength(1);
     expect(wrapper.findPrefix().text()).toBe('Label:');
-    
+
     // Should show overflow indicator
     expect(wrapper.findRest()).toHaveLength(1);
-    
+
     // Should render some but not all items
     expect(wrapper.findItems().length).toBeGreaterThan(0);
     expect(wrapper.findItems().length).toBeLessThan(10);
@@ -94,7 +97,7 @@ describe('Overflow.Prefix', () => {
     // Should render prefix
     expect(wrapper.findPrefix()).toHaveLength(1);
     expect(wrapper.findPrefix().text()).toBe('Categories:');
-    
+
     // Should show exactly 3 items + rest
     expect(wrapper.findItems()).toHaveLength(3);
     expect(wrapper.findRest()).toHaveLength(1);
@@ -117,7 +120,7 @@ describe('Overflow.Prefix', () => {
     expect(wrapper.findSuffix()).toHaveLength(1);
     expect(wrapper.findPrefix().text()).toBe('Start');
     expect(wrapper.findSuffix().text()).toBe('End');
-    
+
     // Should show 3 items + rest
     expect(wrapper.findItems()).toHaveLength(3);
     expect(wrapper.findRest()).toHaveLength(1);
@@ -144,4 +147,4 @@ describe('Overflow.Prefix', () => {
     expect(wrapper.findPrefix().find('.complex-prefix')).toHaveLength(1);
     expect(wrapper.findPrefix().text()).toBe('🏷️Tags:');
   });
-});
+});

tests/raw.spec.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import Overflow from '../src';
-import Item from '../src/Item';
 import { mount } from './wrapper';
 
 interface ItemType {
@@ -51,7 +50,7 @@ describe('Overflow.Raw', () => {
 
     expect(wrapper.render()).toMatchSnapshot();
 
-    expect(wrapper.exists(Item)).toBeFalsy();
+    expect(wrapper.findItems()).toHaveLength(0);
   });
 
   it('HOC usage', () => {