chore(deps-dev): bump the npm-dependencies group with 4 updates

.github/workflows/surge-preview.yml

@@ -37,7 +37,7 @@ jobs:
       - name: Build preview
         if: ${{ steps.surge-token.outputs.enabled == 'true' }}
         run: |
-          npm install
+          npm install --legacy-peer-deps
           npm run build
       - uses: afc163/surge-preview@bf90a5a86111f6311ca42f0a5a0f80fb0fb03cec
         if: ${{ steps.surge-token.outputs.enabled == 'true' }}

docs/examples/renderTabBar-dragable.tsx

@@ -1,51 +1,34 @@
 import React from 'react';
-import { DndProvider, DragSource, DropTarget } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { DndProvider, useDrag, useDrop } from 'react-dnd';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import Tabs from '@rc-component/tabs';
 import type { TabsProps } from '@rc-component/tabs';
 import '../../assets/index.less';
 
 // Drag & Drop node
-class TabNode extends React.Component<any, any> {
-  render() {
-    const { connectDragSource, connectDropTarget, children } = this.props;
-
-    return connectDragSource(connectDropTarget(children));
-  }
-}
-
-const cardTarget = {
-  drop(props, monitor) {
-    const dragKey = monitor.getItem().index;
-    const hoverKey = props.index;
-
-    if (dragKey === hoverKey) {
-      return;
-    }
+const WrapTabNode: React.FC<any> = ({ children, index, moveTabNode }) => {
+  const [, drop] = useDrop({
+    accept: 'DND_NODE',
+    drop(item: { index: React.Key }) {
+      const dragKey = item.index;
+      const hoverKey = index;
+
+      if (dragKey === hoverKey) {
+        return;
+      }
 
-    props.moveTabNode(dragKey, hoverKey);
-    monitor.getItem().index = hoverKey;
-  },
-};
+      moveTabNode(dragKey, hoverKey);
+      item.index = hoverKey;
+    },
+  });
+  const [, drag] = useDrag({
+    type: 'DND_NODE',
+    item: { index },
+  });
 
-const cardSource = {
-  beginDrag(props) {
-    return {
-      id: props.id,
-      index: props.index,
-    };
-  },
+  return drag(drop(children));
 };
 
-const WrapTabNode = DropTarget('DND_NODE', cardTarget, connect => ({
-  connectDropTarget: connect.dropTarget(),
-}))(
-  DragSource('DND_NODE', cardSource, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    isDragging: monitor.isDragging(),
-  }))(TabNode),
-);
-
 class DraggableTabs extends React.Component<TabsProps> {
   state = {
     order: [],
@@ -111,7 +94,6 @@ class DraggableTabs extends React.Component<TabsProps> {
     });
 
     return (
-      // @ts-ignore https://github.com/react-dnd/react-dnd/issues/3636 需要升级 15.0.0 类型支持 children 但是写法需要重新调整验证
       <DndProvider backend={HTML5Backend}>
         <Tabs renderTabBar={this.renderTabBar} {...this.props} items={orderTabs} />
       </DndProvider>

eslint.config.mjs

@@ -1,4 +1,5 @@
 import js from '@eslint/js';
+import { fixupConfigRules } from '@eslint/compat';
 import { defineConfig } from 'eslint/config';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
@@ -40,8 +41,8 @@ export default defineConfig([
     files: ['**/*.{js,jsx,ts,tsx}'],
     extends: [
       js.configs.recommended,
-      react.configs.flat.recommended,
-      react.configs.flat['jsx-runtime'],
+      ...fixupConfigRules(react.configs.flat.recommended),
+      ...fixupConfigRules(react.configs.flat['jsx-runtime']),
       prettier,
     ],
     plugins: {

package.json

@@ -49,7 +49,8 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
+    "@eslint/compat": "^2.1.0",
     "@rc-component/father-plugin": "^2.2.0",
     "@rc-component/np": "^1.0.4",
     "@testing-library/dom": "^10.4.1",
@@ -63,7 +64,7 @@
     "@types/react-dom": "^19.2.3",
     "cross-env": "^10.1.0",
     "dumi": "^2.4.38",
-    "eslint": "^9.39.4",
+    "eslint": "^10.6.0",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-jest": "^29.15.4",
     "eslint-plugin-react": "^7.37.5",
@@ -77,8 +78,8 @@
     "prettier": "^3.9.4",
     "rc-test": "^7.1.3",
     "react": "^19.2.7",
-    "react-dnd": "^10.0.0",
-    "react-dnd-html5-backend": "^10.0.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^19.2.7",
     "react-sticky": "^6.0.3",
     "typescript": "^6.0.3",

src/hooks/useTouchMove.ts

@@ -82,7 +82,7 @@ export default function useTouchMove(
     const { deltaX, deltaY } = e;
 
     // Convert both to x & y since wheel only happened on PC
-    let mixed: number = 0;
+    let mixed: number;
     const absX = Math.abs(deltaX);
     const absY = Math.abs(deltaY);
     if (absX === absY) {