From 2c13254157486649ca35f10888eba028aa2f68e6 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Fri, 3 Jul 2026 12:48:30 +0000 Subject: [PATCH 1/4] chore(deps-dev): bump the npm-dependencies group with 6 updates Bumps the npm-dependencies group with 6 updates: | Package | From | To | | --- | --- | --- | | [@eslint/js](https://github.com/eslint/eslint/tree/HEAD/packages/js) | `9.39.4` | `10.0.1` | | [eslint](https://github.com/eslint/eslint) | `9.39.4` | `10.6.0` | | [react-dnd](https://github.com/react-dnd/react-dnd) | `2.6.0` | `16.0.1` | | [react-dnd-html5-backend](https://github.com/react-dnd/react-dnd) | `2.6.0` | `16.0.1` | | [react-resizable](https://github.com/react-grid-layout/react-resizable) | `3.2.0` | `4.0.2` | | [react-window](https://github.com/bvaughn/react-window) | `1.8.11` | `2.2.7` | Updates `@eslint/js` from 9.39.4 to 10.0.1 - [Release notes](https://github.com/eslint/eslint/releases) - [Commits](https://github.com/eslint/eslint/commits/v10.0.1/packages/js) Updates `eslint` from 9.39.4 to 10.6.0 - [Release notes](https://github.com/eslint/eslint/releases) - [Commits](https://github.com/eslint/eslint/compare/v9.39.4...v10.6.0) Updates `react-dnd` from 2.6.0 to 16.0.1 - [Release notes](https://github.com/react-dnd/react-dnd/releases) - [Changelog](https://github.com/react-dnd/react-dnd/blob/main/CHANGELOG.md) - [Commits](https://github.com/react-dnd/react-dnd/commits) Updates `react-dnd-html5-backend` from 2.6.0 to 16.0.1 - [Release notes](https://github.com/react-dnd/react-dnd/releases) - [Changelog](https://github.com/react-dnd/react-dnd/blob/main/CHANGELOG.md) - [Commits](https://github.com/react-dnd/react-dnd/commits) Updates `react-resizable` from 3.2.0 to 4.0.2 - [Release notes](https://github.com/react-grid-layout/react-resizable/releases) - [Changelog](https://github.com/react-grid-layout/react-resizable/blob/master/CHANGELOG.md) - [Commits](https://github.com/react-grid-layout/react-resizable/compare/v3.2.0...v4.0.2) Updates `react-window` from 1.8.11 to 2.2.7 - [Release notes](https://github.com/bvaughn/react-window/releases) - [Changelog](https://github.com/bvaughn/react-window/blob/main/CHANGELOG.md) - [Commits](https://github.com/bvaughn/react-window/compare/1.8.11...2.2.7) --- updated-dependencies: - dependency-name: "@eslint/js" dependency-version: 10.0.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: npm-dependencies - dependency-name: eslint dependency-version: 10.6.0 dependency-type: direct:development update-type: version-update:semver-major dependency-group: npm-dependencies - dependency-name: react-dnd dependency-version: 16.0.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: npm-dependencies - dependency-name: react-dnd-html5-backend dependency-version: 16.0.1 dependency-type: direct:development update-type: version-update:semver-major dependency-group: npm-dependencies - dependency-name: react-resizable dependency-version: 4.0.2 dependency-type: direct:development update-type: version-update:semver-major dependency-group: npm-dependencies - dependency-name: react-window dependency-version: 2.2.7 dependency-type: direct:development update-type: version-update:semver-major dependency-group: npm-dependencies ... Signed-off-by: dependabot[bot] --- package.json | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/package.json b/package.json index d00a427d3..1554c8876 100644 --- a/package.json +++ b/package.json @@ -57,7 +57,7 @@ "clsx": "^2.1.1" }, "devDependencies": { - "@eslint/js": "^9.39.4", + "@eslint/js": "^10.0.1", "@rc-component/dropdown": "^1.0.2", "@rc-component/father-plugin": "^2.2.0", "@rc-component/menu": "^1.4.1", @@ -74,7 +74,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 +90,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", From 20efbb35ca9436a4ed8d27c5ef3e31aefc24e825 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 6 Jul 2026 09:23:10 +0800 Subject: [PATCH 2/4] fix: support eslint 10 dependency update --- .github/workflows/surge-preview.yml | 2 +- eslint.config.mjs | 5 +++-- package.json | 1 + 3 files changed, 5 insertions(+), 3 deletions(-) diff --git a/.github/workflows/surge-preview.yml b/.github/workflows/surge-preview.yml index 58dd21534..d0af8670b 100644 --- a/.github/workflows/surge-preview.yml +++ b/.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' }} diff --git a/eslint.config.mjs b/eslint.config.mjs index 40f08ec94..a298e8e02 100644 --- a/eslint.config.mjs +++ b/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: { diff --git a/package.json b/package.json index 1554c8876..8193a1f58 100644 --- a/package.json +++ b/package.json @@ -58,6 +58,7 @@ }, "devDependencies": { "@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", From 235c6533204909170cd52a8ee5751c30bf332d22 Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 6 Jul 2026 09:40:29 +0800 Subject: [PATCH 3/4] fix: support updated demo dependencies --- docs/examples/react-dnd.tsx | 108 ++++++++++++---------------- docs/examples/virtual-list-grid.tsx | 57 ++++++--------- docs/examples/virtual-list.tsx | 22 +++--- 3 files changed, 79 insertions(+), 108 deletions(-) diff --git a/docs/examples/react-dnd.tsx b/docs/examples/react-dnd.tsx index b28600274..0ae6c51cd 100644 --- a/docs/examples/react-dnd.tsx +++ b/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(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(), - ); -}; - -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 ; }; -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 = () => ( -
-

Integrate with react-dnd

- -
+ +
+

Integrate with react-dnd

+ +
+ ); export default Test; diff --git a/docs/examples/virtual-list-grid.tsx b/docs/examples/virtual-list-grid.tsx index 72de31087..a1db24613 100644 --- a/docs/examples/virtual-list-grid.tsx +++ b/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) => ( +
+ r{rowIndex}, c{columnIndex} +
+); const Demo = () => { - const gridRef = React.useRef(null); + const gridRef = React.useRef(null); const [connectObject] = React.useState(() => { 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 ( { 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 }) => ( -
- r{rowIndex}, c{columnIndex} -
- )} - + /> ); }; diff --git a/docs/examples/virtual-list.tsx b/docs/examples/virtual-list.tsx index 55ce842a5..0ca304668 100644 --- a/docs/examples/virtual-list.tsx +++ b/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) => (
( const Demo = () => { const gridRef = React.useRef(null); - React.useEffect(() => { - gridRef.current.resetAfterIndices({ columnIndex: 0, shouldForceUpdate: false }); - }, []); - const renderVirtualList = (rawData: object[], { scrollbarSize }: any) => ( { const { width } = columns[index]; return index === columns.length - 1 ? width - scrollbarSize - 1 : width; }} - height={300} rowCount={rawData.length} - rowHeight={() => 50} - width={301} - > - {Cell} - + rowHeight={50} + style={{ height: 300, width: 301 }} + /> ); return ( From c15fe96a866921116b9c23891158b665a9629a2a Mon Sep 17 00:00:00 2001 From: afc163 Date: Mon, 6 Jul 2026 09:47:28 +0800 Subject: [PATCH 4/4] fix: support react-window 2 in tests --- tests/Table.spec.jsx | 52 +++++++++++++++++--------------------------- 1 file changed, 20 insertions(+), 32 deletions(-) diff --git a/tests/Table.spec.jsx b/tests/Table.spec.jsx index dc3b5d5ca..155f83d67 100644 --- a/tests/Table.spec.jsx +++ b/tests/Table.spec.jsx @@ -1,7 +1,7 @@ import { render, fireEvent } from '@testing-library/react'; import { resetWarned } from '@rc-component/util'; import React from 'react'; -import { VariableSizeGrid as Grid } from 'react-window'; +import { Grid } from 'react-window'; import Table, { INTERNAL_COL_DEFINE } from '../src'; import Cell from '../src/Cell'; import { INTERNAL_HOOKS } from '../src/constant'; @@ -1239,58 +1239,46 @@ describe('Table.Basic', () => { 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 => { - 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 Cell = ({ ariaAttributes, columnIndex, rowIndex, style }) => ( +
+ r{rowIndex}, c{columnIndex} +
+ ); const renderVirtualList = (rawData, { scrollbarSize, ref, onScroll }) => { ref.current = connectObject; return ( { const { width } = columns[index]; return index === columns.length - 1 ? width - scrollbarSize - 1 : width; }} - height={300} rowCount={rawData.length} - rowHeight={() => 50} - width={800} - onScroll={({ scrollLeft }) => { - onScroll({ scrollLeft }); + rowHeight={50} + style={{ height: 300, width: 800 }} + onScroll={event => { + onScroll({ scrollLeft: event.currentTarget.scrollLeft }); }} - > - {({ columnIndex, rowIndex, style }) => ( -
- r{rowIndex}, c{columnIndex} -
- )} - + /> ); };