chore: update maintenance dependencies

.github/dependabot.yml

@@ -8,6 +8,10 @@ updates:
       time: '21:00'
       timezone: Asia/Shanghai
     open-pull-requests-limit: 10
+    groups:
+      npm-dependencies:
+        patterns:
+          - '*'
 
   - package-ecosystem: github-actions
     directory: '/'
@@ -17,3 +21,7 @@ updates:
       time: '21:00'
       timezone: Asia/Shanghai
     open-pull-requests-limit: 10
+    groups:
+      github-actions:
+        patterns:
+          - '*'

README.md

@@ -1,6 +1,6 @@
 <div align="center">
   <h1>@rc-component/virtual-list</h1>
-  <p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Part of the Ant Design ecosystem.</sub></p>
+  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Part of the Ant Design ecosystem.</sub></p>
   <p>📜 Virtual scrolling list component for React.</p>
 
   <p>

README.zh-CN.md

@@ -1,6 +1,6 @@
 <div align="center">
   <h1>@rc-component/virtual-list</h1>
-  <p><sub><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /> Ant Design 生态的一部分。</sub></p>
+  <p><sub><a href="https://ant.design"><img alt="Ant Design" height="14" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" style="vertical-align: -0.125em;" /></a> Ant Design 生态的一部分。</sub></p>
   <p>📜 React 虚拟列表组件，用于高性能渲染长列表。</p>
 
   <p>

eslint.config.mjs

@@ -0,0 +1,91 @@
+import { FlatCompat } from '@eslint/eslintrc';
+import js from '@eslint/js';
+import tsEslintPlugin from '@typescript-eslint/eslint-plugin';
+import { createRequire } from 'node:module';
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+const require = createRequire(import.meta.url);
+
+const compat = new FlatCompat({
+  baseDirectory: __dirname,
+  recommendedConfig: js.configs.recommended,
+  allConfig: js.configs.all,
+});
+
+const recommendedTsRulesConfig = tsEslintPlugin.configs.recommended;
+const recommendedTsRulesObject = Array.isArray(recommendedTsRulesConfig)
+  ? recommendedTsRulesConfig.reduce((rules, config) => ({ ...rules, ...(config.rules || {}) }), {})
+  : recommendedTsRulesConfig?.rules || {};
+const recommendedTsRules = new Set(Object.keys(recommendedTsRulesObject));
+const noopRule = {
+  meta: { type: 'problem', docs: {}, schema: [] },
+  create: () => ({}),
+};
+
+function normalizeConfig(config) {
+  const next = { ...config };
+
+  if (next.plugins?.['@typescript-eslint']) {
+    next.plugins = { ...next.plugins };
+    delete next.plugins['@typescript-eslint'];
+  }
+
+  if (next.rules) {
+    next.rules = Object.fromEntries(
+      Object.entries(next.rules).filter(([ruleName]) => {
+        if (!ruleName.startsWith('@typescript-eslint/')) {
+          return true;
+        }
+        return recommendedTsRules.has(ruleName);
+      }),
+    );
+  }
+
+  return next;
+}
+
+export default [
+  {
+    ignores: [
+      'node_modules/',
+      'coverage/',
+      'es/',
+      'lib/',
+      'dist/',
+      'docs-dist/',
+      '.dumi/',
+      '.doc/',
+      '.vercel/',
+      '.eslintrc.js',
+      'src/index.d.ts',
+    ],
+  },
+  {
+    plugins: {
+      '@typescript-eslint': {
+        ...tsEslintPlugin,
+        rules: {
+          ...tsEslintPlugin.rules,
+          'consistent-type-exports': noopRule,
+        },
+      },
+    },
+  },
+  ...compat.config(require('./.eslintrc.js')).map(normalizeConfig),
+  {
+    rules: {
+      '@typescript-eslint/no-empty-object-type': 'off',
+      '@typescript-eslint/no-unsafe-function-type': 'off',
+      '@typescript-eslint/no-unused-vars': [
+        'warn',
+        {
+          argsIgnorePattern: '^_',
+          varsIgnorePattern: '^_',
+        },
+      ],
+    },
+  },
+];

examples/animate.tsx

@@ -130,7 +130,7 @@ const Demo = () => {
   const [animating, setAnimating] = React.useState(false);
   const [insertIndex, setInsertIndex] = React.useState<number>();
 
-  const listRef = React.useRef<ListRef>();
+  const listRef = React.useRef<ListRef>(null);
 
   const onClose = (id: string) => {
     setCloseMap({

examples/no-virtual.tsx

@@ -7,7 +7,7 @@ interface Item {
   height: number;
 }
 
-const MyItem: React.FC<Item> = ({ id, height }, ref) => {
+const MyItem = React.forwardRef<HTMLSpanElement, Item>(({ id, height }, ref) => {
   return (
     <span
       ref={ref}
@@ -23,7 +23,7 @@ const MyItem: React.FC<Item> = ({ id, height }, ref) => {
       {id}
     </span>
   );
-};
+});
 
 const ForwardMyItem = React.forwardRef(MyItem as any);
 

examples/switch.tsx

@@ -6,7 +6,7 @@ interface Item {
   id: number;
 }
 
-const MyItem: React.FC<Item> = ({ id }, ref) => (
+const MyItem = React.forwardRef<HTMLSpanElement, Item>(({ id }, ref) => (
   <span
     ref={ref}
     style={{
@@ -21,7 +21,7 @@ const MyItem: React.FC<Item> = ({ id }, ref) => (
   >
     {id}
   </span>
-);
+));
 
 const ForwardMyItem = React.forwardRef(MyItem as any);
 
@@ -39,7 +39,7 @@ const Demo = () => {
   const [height, setHeight] = React.useState(200);
   const [data, setData] = React.useState(getData(20));
   const [fullHeight, setFullHeight] = React.useState(true);
-  const listRef = React.useRef<ListRef>();
+  const listRef = React.useRef<ListRef>(null);
 
   return (
     <React.StrictMode>

global.d.ts

@@ -0,0 +1,48 @@
+/// <reference types="jest" />
+/// <reference types="node" />
+/// <reference types="react" />
+/// <reference types="react-dom" />
+/// <reference types="@testing-library/jest-dom" />
+
+declare module '*.css';
+declare module '*.less';
+declare module 'jsonp';
+
+declare namespace JSX {
+  type Element = React.JSX.Element;
+  interface ElementClass extends React.JSX.ElementClass {}
+  interface ElementAttributesProperty extends React.JSX.ElementAttributesProperty {}
+  interface ElementChildrenAttribute extends React.JSX.ElementChildrenAttribute {}
+  type LibraryManagedAttributes<C, P> = React.JSX.LibraryManagedAttributes<C, P>;
+  interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {}
+  interface IntrinsicClassAttributes<T> extends React.JSX.IntrinsicClassAttributes<T> {}
+  interface IntrinsicElements extends React.JSX.IntrinsicElements {}
+}
+
+declare namespace jest {
+  interface Matchers<R> {
+    lastCalledWith(...expected: unknown[]): R;
+    nthCalledWith(nthCall: number, ...expected: unknown[]): R;
+    toBeCalled(): R;
+    toBeCalledTimes(expected: number): R;
+    toBeCalledWith(...expected: unknown[]): R;
+  }
+}
+
+declare const vi: {
+  fn: <T extends (...args: any[]) => any = (...args: any[]) => any>(implementation?: T) => jest.MockedFunction<T>;
+  mock: (moduleName: string, factory?: (importOriginal: <T>() => Promise<T>) => unknown) => void;
+  spyOn: typeof jest.spyOn;
+  useFakeTimers: () => void;
+  useRealTimers: () => void;
+  advanceTimersByTime: (msToRun: number) => void;
+  clearAllTimers: () => void;
+  runAllTimers: () => void;
+  importActual: <T>(moduleName: string) => Promise<T>;
+  clearAllMocks: () => void;
+  resetAllMocks: () => void;
+  restoreAllMocks: () => void;
+};
+
+
+declare module 'moment/locale/zh-cn';

package.json

@@ -48,30 +48,41 @@
     "react-dom": ">=18.0.0"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.29.7",
+    "@babel/eslint-plugin": "^7.29.7",
+    "@eslint/eslintrc": "^3.3.5",
+    "@eslint/js": "^9.39.4",
     "@rc-component/father-plugin": "^2.2.0",
     "@rc-component/np": "^1.0.4",
+    "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
-    "@testing-library/react": "^15.0.7",
-    "@types/jest": "^29.5.14",
+    "@testing-library/react": "^16.3.2",
+    "@types/jest": "^30.0.0",
     "@types/node": "^26.0.1",
-    "@types/react": "^18.3.31",
-    "@types/react-dom": "^18.3.7",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@types/warning": "^3.0.4",
+    "@typescript-eslint/eslint-plugin": "^8.62.0",
+    "@typescript-eslint/parser": "^8.62.0",
+    "cross-env": "^10.1.0",
     "dumi": "^2.4.35",
-    "eslint": "^8.57.1",
-    "eslint-plugin-unicorn": "^56.0.1",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-jest": "^29.15.3",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-unicorn": "^65.0.1",
     "father": "^4.6.23",
+    "gh-pages": "^6.3.0",
     "glob": "^13.0.6",
+    "husky": "^9.1.7",
+    "lint-staged": "^17.0.8",
+    "prettier": "^3.9.0",
     "rc-animate": "^2.9.1",
     "rc-test": "^7.1.3",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "typescript": "^5.9.3",
-    "cross-env": "^10.1.0",
-    "gh-pages": "^6.3.0",
-    "prettier": "^3.9.0",
-    "husky": "^9.1.7",
-    "lint-staged": "^16.4.0"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "typescript": "^6.0.3"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.0",

src/Item.tsx

@@ -2,15 +2,18 @@ import * as React from 'react';
 
 export interface ItemProps {
   children: React.ReactElement;
-  setRef: (element: HTMLElement) => void;
+  setRef: (element: HTMLElement | null) => void;
 }
 
 export function Item({ children, setRef }: ItemProps) {
-  const refFunc = React.useCallback(node => {
-    setRef(node);
-  }, []);
+  const refFunc = React.useCallback(
+    (node) => {
+      setRef(node);
+    },
+    [setRef],
+  );
 
-  return React.cloneElement(children, {
+  return React.cloneElement(children as React.ReactElement<any>, {
     ref: refFunc,
   });
 }

src/List.tsx

@@ -15,12 +15,7 @@ import useHeights from './hooks/useHeights';
 import useMobileTouchMove from './hooks/useMobileTouchMove';
 import useOriginScroll from './hooks/useOriginScroll';
 import useScrollDrag from './hooks/useScrollDrag';
-import type {
-  ScrollOffset,
-  ScrollOffsetInfo,
-  ScrollPos,
-  ScrollTarget,
-} from './hooks/useScrollTo';
+import type { ScrollOffset, ScrollOffsetInfo, ScrollPos, ScrollTarget } from './hooks/useScrollTo';
 import useScrollTo from './hooks/useScrollTo';
 import type { ExtraRenderInfo, GetKey, RenderFunc, SharedConfig } from './interface';
 import type { ScrollBarDirectionType, ScrollBarRef } from './ScrollBar';
@@ -154,9 +149,9 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
 
   const mergedClassName = clsx(prefixCls, { [`${prefixCls}-rtl`]: isRTL }, className);
   const mergedData = data || EMPTY_DATA;
-  const componentRef = useRef<HTMLDivElement>();
-  const fillerInnerRef = useRef<HTMLDivElement>();
-  const containerRef = useRef<HTMLDivElement>();
+  const componentRef = useRef<HTMLDivElement>(null);
+  const fillerInnerRef = useRef<HTMLDivElement>(null);
+  const containerRef = useRef<HTMLDivElement>(null);
 
   // =============================== Item Key ===============================
 
@@ -196,7 +191,7 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   // Put ref here since the range is generate by follow
   const rangeRef = useRef({ start: 0, end: mergedData.length });
 
-  const diffItemRef = useRef<T>();
+  const diffItemRef = useRef<T | undefined>(undefined);
   const [diffItem] = useDiffItem(mergedData, getKey);
   diffItemRef.current = diffItem;
 
@@ -315,8 +310,8 @@ export function RawList<T>(props: ListProps<T>, ref: React.Ref<ListRef>) {
   };
 
   // Hack on scrollbar to enable flash call
-  const verticalScrollBarRef = useRef<ScrollBarRef>();
-  const horizontalScrollBarRef = useRef<ScrollBarRef>();
+  const verticalScrollBarRef = useRef<ScrollBarRef>(null);
+  const horizontalScrollBarRef = useRef<ScrollBarRef>(null);
 
   const horizontalScrollBarSpinSize = React.useMemo(
     () => getSpinSize(size.width, scrollWidth),