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

.github/workflows/surge-preview.yml

@@ -33,7 +33,7 @@ jobs:
 
       - name: Install dependencies
         if: ${{ steps.surge-token.outputs.enabled == 'true' }}
-        run: npm install --ignore-scripts --no-audit --loglevel=warn
+        run: npm install --legacy-peer-deps --ignore-scripts --no-audit --loglevel=warn
 
       - name: Build preview
         if: ${{ steps.surge-token.outputs.enabled == 'true' }}

docs/examples/react-dnd.tsx

@@ -3,8 +3,8 @@
 import React from 'react';
 import { createGlobalStyle } from 'styled-components';
 import update from 'immutability-helper';
-import { DragDropContext, 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 type { TableProps } from '@rc-component/table';
 import Table from '@rc-component/table';
 import '../../assets/index.less';
@@ -37,19 +37,49 @@ function dragDirection(
   return null;
 }
 
-let BodyRow = props => {
+const BodyRow = props => {
   const {
-    isOver,
-    connectDragSource,
-    connectDropTarget,
     moveRow,
-    dragRow,
-    clientOffset,
-    sourceClientOffset,
-    initialClientOffset,
     ...restProps
   } = props;
+  const ref = React.useRef<HTMLTableRowElement>(null);
   const style = { cursor: 'move' };
+  const [{ isOver, sourceClientOffset }, drop] = useDrop({
+    accept: 'row',
+    drop(item: { index: number }) {
+      const dragIndex = item.index;
+      const hoverIndex = restProps.index;
+
+      // Don't replace items with themselves
+      if (dragIndex === hoverIndex) {
+        return;
+      }
+
+      // Time to actually perform the action
+      moveRow(dragIndex, hoverIndex);
+
+      // Note: we're mutating the monitor item here!
+      // Generally it's better to avoid mutations,
+      // but it's good here for the sake of performance
+      // to avoid expensive index searches.
+      item.index = hoverIndex;
+    },
+    collect: monitor => ({
+      isOver: monitor.isOver(),
+      sourceClientOffset: monitor.getSourceClientOffset(),
+    }),
+  });
+  const [{ dragRow, clientOffset, initialClientOffset }, drag] = useDrag({
+    type: 'row',
+    item: { index: restProps.index },
+    collect: monitor => ({
+      dragRow: monitor.getItem(),
+      clientOffset: monitor.getClientOffset(),
+      initialClientOffset: monitor.getInitialClientOffset(),
+    }),
+  });
+
+  drag(drop(ref));
 
   let { className } = restProps;
   if (isOver && initialClientOffset) {
@@ -68,53 +98,9 @@ let BodyRow = props => {
     }
   }
 
-  return connectDragSource(
-    connectDropTarget(<tr {...restProps} className={className} style={style} />),
-  );
-};
-
-const rowSource = {
-  beginDrag(props) {
-    return {
-      index: props.index,
-    };
-  },
-};
-
-const rowTarget = {
-  drop(props, monitor) {
-    const dragIndex = monitor.getItem().index;
-    const hoverIndex = props.index;
-
-    // Don't replace items with themselves
-    if (dragIndex === hoverIndex) {
-      return;
-    }
-
-    // Time to actually perform the action
-    props.moveRow(dragIndex, hoverIndex);
-
-    // Note: we're mutating the monitor item here!
-    // Generally it's better to avoid mutations,
-    // but it's good here for the sake of performance
-    // to avoid expensive index searches.
-    monitor.getItem().index = hoverIndex;
-  },
+  return <tr ref={ref} {...restProps} className={className} style={style} />;
 };
 
-BodyRow = DropTarget('row', rowTarget, (connect, monitor) => ({
-  connectDropTarget: connect.dropTarget(),
-  isOver: monitor.isOver(),
-  sourceClientOffset: monitor.getSourceClientOffset(),
-}))(
-  DragSource('row', rowSource, (connect, monitor) => ({
-    connectDragSource: connect.dragSource(),
-    dragRow: monitor.getItem(),
-    clientOffset: monitor.getClientOffset(),
-    initialClientOffset: monitor.getInitialClientOffset(),
-  }))(BodyRow),
-);
-
 const columns: TableProps['columns'] = [
   { title: 'title1', dataIndex: 'a', key: 'a', width: 100 },
   { title: 'title2', dataIndex: 'b', key: 'b', width: 100 },
@@ -177,13 +163,13 @@ class Demo extends React.Component {
   }
 }
 
-const WrappedDemo = DragDropContext(HTML5Backend)(Demo);
-
 const Test = () => (
-  <div>
-    <h2>Integrate with react-dnd</h2>
-    <WrappedDemo />
-  </div>
+  <DndProvider backend={HTML5Backend}>
+    <div>
+      <h2>Integrate with react-dnd</h2>
+      <Demo />
+    </div>
+  </DndProvider>
 );
 
 export default Test;

docs/examples/virtual-list-grid.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { VariableSizeGrid as Grid } from 'react-window';
+import { Grid, type CellComponentProps, type GridImperativeAPI } from 'react-window';
 import Table from '@rc-component/table';
 import '../../assets/index.less';
 import './virtual-list.less';
@@ -22,65 +22,54 @@ for (let i = 0; i < 100000; i += 1) {
     d: `d${i}`,
   });
 }
+const Cell = ({ ariaAttributes, columnIndex, rowIndex, style }: CellComponentProps) => (
+  <div
+    {...ariaAttributes}
+    className={clsx('virtual-cell', {
+      'virtual-cell-last': columnIndex === columns.length - 1,
+    })}
+    style={style}
+  >
+    r{rowIndex}, c{columnIndex}
+  </div>
+);
 const Demo = () => {
-  const gridRef = React.useRef<any>(null);
+  const gridRef = React.useRef<GridImperativeAPI>(null);
   const [connectObject] = React.useState<any>(() => {
     const obj = {};
     Object.defineProperty(obj, 'scrollLeft', {
       get: () => {
-        if (gridRef.current) {
-          return gridRef.current?.state?.scrollLeft;
-        }
-        return null;
+        return gridRef.current?.element?.scrollLeft ?? null;
       },
       set: (scrollLeft: number) => {
-        if (gridRef.current) {
-          gridRef.current.scrollTo({ scrollLeft });
-        }
+        gridRef.current?.element?.scrollTo({ left: scrollLeft });
       },
     });
 
     return obj;
   });
 
-  React.useEffect(() => {
-    gridRef.current.resetAfterIndices({
-      columnIndex: 0,
-      shouldForceUpdate: false,
-    });
-  }, []);
-
   const renderVirtualList = (rawData: object[], { scrollbarSize, ref, onScroll }: any) => {
     ref.current = connectObject;
 
     return (
       <Grid
-        ref={gridRef}
+        gridRef={gridRef}
         className="virtual-grid"
+        cellComponent={Cell}
+        cellProps={{}}
         columnCount={columns.length}
         columnWidth={index => {
           const { width } = columns[index];
           return index === columns.length - 1 ? width - scrollbarSize - 1 : width;
         }}
-        height={300}
         rowCount={rawData.length}
-        rowHeight={() => 50}
-        width={301}
-        onScroll={({ scrollLeft }) => {
-          onScroll({ scrollLeft });
+        rowHeight={50}
+        style={{ height: 300, width: 301 }}
+        onScroll={event => {
+          onScroll({ scrollLeft: event.currentTarget.scrollLeft });
         }}
-      >
-        {({ columnIndex, rowIndex, style }) => (
-          <div
-            className={clsx('virtual-cell', {
-              'virtual-cell-last': columnIndex === columns.length - 1,
-            })}
-            style={style}
-          >
-            r{rowIndex}, c{columnIndex}
-          </div>
-        )}
-      </Grid>
+      />
     );
   };
 

docs/examples/virtual-list.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { clsx } from 'clsx';
-import { VariableSizeGrid as Grid } from 'react-window';
+import { Grid, type CellComponentProps } from 'react-window';
 import Table from '@rc-component/table';
 import '../../assets/index.less';
 import './virtual-list.less';
@@ -21,8 +21,9 @@ for (let i = 0; i < 100000; i += 1) {
   });
 }
 
-const Cell = ({ columnIndex, rowIndex, style }) => (
+const Cell = ({ ariaAttributes, columnIndex, rowIndex, style }: CellComponentProps) => (
   <div
+    {...ariaAttributes}
     className={clsx('virtual-cell', {
       'virtual-cell-last': columnIndex === columns.length - 1,
     })}
@@ -35,26 +36,21 @@ const Cell = ({ columnIndex, rowIndex, style }) => (
 const Demo = () => {
   const gridRef = React.useRef<any>(null);
 
-  React.useEffect(() => {
-    gridRef.current.resetAfterIndices({ columnIndex: 0, shouldForceUpdate: false });
-  }, []);
-
   const renderVirtualList = (rawData: object[], { scrollbarSize }: any) => (
     <Grid
-      ref={gridRef}
+      gridRef={gridRef}
       className="virtual-grid"
+      cellComponent={Cell}
+      cellProps={{}}
       columnCount={columns.length}
       columnWidth={index => {
         const { width } = columns[index];
         return index === columns.length - 1 ? width - scrollbarSize - 1 : width;
       }}
-      height={300}
       rowCount={rawData.length}
-      rowHeight={() => 50}
-      width={301}
-    >
-      {Cell}
-    </Grid>
+      rowHeight={50}
+      style={{ height: 300, width: 301 }}
+    />
   );
 
   return (

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

@@ -57,7 +57,8 @@
     "clsx": "^2.1.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.39.4",
+    "@eslint/js": "^10.0.1",
+    "@eslint/compat": "^2.1.0",
     "@rc-component/dropdown": "^1.0.2",
     "@rc-component/father-plugin": "^2.2.0",
     "@rc-component/menu": "^1.4.1",
@@ -74,7 +75,7 @@
     "@types/styled-components": "^5.1.36",
     "@vitest/coverage-v8": "^4.1.9",
     "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",
@@ -90,11 +91,11 @@
     "lint-staged": "^17.0.8",
     "prettier": "^3.9.4",
     "react": "^19.2.7",
-    "react-dnd": "^2.5.4",
-    "react-dnd-html5-backend": "^2.5.4",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^19.2.7",
-    "react-resizable": "^3.0.5",
-    "react-window": "^1.8.5",
+    "react-resizable": "^4.0.2",
+    "react-window": "^2.2.7",
     "regenerator-runtime": "^0.14.0",
     "styled-components": "^6.1.1",
     "typescript": "^6.0.3",