From 792830c61a8698d1702e9a80281a506fefbd0336 Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 23 Jun 2025 13:46:34 +0100 Subject: [PATCH 001/230] Bump prettier from 3.5.3 to 3.6.0 (#3814) Bumps [prettier](https://github.com/prettier/prettier) from 3.5.3 to 3.6.0. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.5.3...3.6.0) --- updated-dependencies: - dependency-name: prettier dependency-version: 3.6.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 65047a6ef9..7b71268ebd 100644 --- a/package.json +++ b/package.json @@ -84,7 +84,7 @@ "jspdf-autotable": "^5.0.2", "playwright": "^1.53.0", "postcss": "^8.5.2", - "prettier": "3.5.3", + "prettier": "3.6.0", "react": "^19.1.0", "react-dom": "^19.1.0", "rolldown": "^1.0.0-beta.9", From ac978eef404ff35c8ded8e63dddbe73aed33d21d Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 23 Jun 2025 14:02:12 +0100 Subject: [PATCH 002/230] Bump @biomejs/biome from 2.0.0 to 2.0.4 (#3815) Bumps [@biomejs/biome](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome) from 2.0.0 to 2.0.4. - [Release notes](https://github.com/biomejs/biome/releases) - [Changelog](https://github.com/biomejs/biome/blob/main/packages/@biomejs/biome/CHANGELOG.md) - [Commits](https://github.com/biomejs/biome/commits/@biomejs/biome@2.0.4/packages/@biomejs/biome) --- updated-dependencies: - dependency-name: "@biomejs/biome" dependency-version: 2.0.4 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 7b71268ebd..70602fa3cf 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ }, "devDependencies": { "@babel/preset-typescript": "^7.27.1", - "@biomejs/biome": "2.0.0", + "@biomejs/biome": "2.0.4", "@eslint/markdown": "^6.3.0", "@faker-js/faker": "^9.6.0", "@ianvs/prettier-plugin-sort-imports": "^4.4.2", From 239704502878a5b2ff6ba11286dda9ec3801f381 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 24 Jun 2025 11:01:17 -0500 Subject: [PATCH 003/230] Fix a few accessibility issues (#3816) * Add `aria-label` * group radiop buttons * Associate h1 with the main landmark * Apply lighthouse suggestions * Split nav * Revert 1 change * remove import --- index.html | 1 + website/Nav.tsx | 127 +++++++++++++---------- website/routes/AllFeatures.tsx | 1 + website/routes/Animation.tsx | 1 + website/routes/CellNavigation.tsx | 8 +- website/routes/ColumnGrouping.tsx | 1 + website/routes/ColumnSpanning.tsx | 1 + website/routes/ColumnsReordering.tsx | 1 + website/routes/CommonFeatures.tsx | 1 + website/routes/ContextMenu.tsx | 1 + website/routes/CustomizableRenderers.tsx | 1 + website/routes/HeaderFilters.tsx | 1 + website/routes/InfiniteScrolling.tsx | 1 + website/routes/MasterDetail.tsx | 1 + website/routes/MillionCells.tsx | 1 + website/routes/NoRows.tsx | 1 + website/routes/ResizableGrid.tsx | 1 + website/routes/RowGrouping.tsx | 1 + website/routes/RowsReordering.tsx | 1 + website/routes/ScrollToCell.tsx | 1 + website/routes/TreeView.tsx | 8 +- website/routes/VariableRowHeight.tsx | 1 + 22 files changed, 103 insertions(+), 59 deletions(-) diff --git a/index.html b/index.html index eefe6526e7..8e8135b360 100644 --- a/index.html +++ b/index.html @@ -2,6 +2,7 @@ + React Data Grid diff --git a/website/Nav.tsx b/website/Nav.tsx index 608cb455ce..cb4684f5d7 100644 --- a/website/Nav.tsx +++ b/website/Nav.tsx @@ -1,26 +1,33 @@ +import { useId } from 'react'; import { Link } from '@tanstack/react-router'; import { css } from '@linaria/core'; import type { Direction } from '../src/types'; -const navClassname = css` - display: flex; - flex-direction: column; - white-space: nowrap; - +const headerClassname = css` border-inline-start: 4px solid light-dark(hsl(210deg 50% 80%), hsl(210deg 50% 40%)); + h1 { + font-size: 24px; + } + h1, h2 { margin: 8px; } +`; + +const navClassname = css` + display: flex; + flex-direction: column; + white-space: nowrap; a { color: inherit; font-size: 14px; line-height: 22px; text-decoration: none; - padding-block: 0; + padding-block: 2px; padding-inline: 16px; transition: 0.1s background-color; @@ -49,57 +56,67 @@ interface Props { } export default function Nav({ direction, onDirectionChange }: Props) { + const demosNavId = useId(); + const linksNavId = useId(); + return ( - + ); } diff --git a/website/routes/AllFeatures.tsx b/website/routes/AllFeatures.tsx index c36e0a7586..9ed3b137ce 100644 --- a/website/routes/AllFeatures.tsx +++ b/website/routes/AllFeatures.tsx @@ -276,6 +276,7 @@ function AllFeatures() { )} ('CHANGE_ROW'); @@ -144,8 +145,8 @@ function CellNavigation() { return ( <> -
- Cell Navigation Modes: +
+ Cell Navigation Modes:
}} diff --git a/website/routes/ResizableGrid.tsx b/website/routes/ResizableGrid.tsx index 13e1811019..a013bbd80d 100644 --- a/website/routes/ResizableGrid.tsx +++ b/website/routes/ResizableGrid.tsx @@ -26,6 +26,7 @@ function ResizableGrid() { return ( setAllowDelete(!allowDelete)} /> - + ); } diff --git a/website/routes/VariableRowHeight.tsx b/website/routes/VariableRowHeight.tsx index 5323df8275..81556f98b5 100644 --- a/website/routes/VariableRowHeight.tsx +++ b/website/routes/VariableRowHeight.tsx @@ -28,6 +28,7 @@ function VariableRowHeight() { return ( Date: Wed, 25 Jun 2025 16:03:00 +0100 Subject: [PATCH 004/230] rolldown-vite (#3771) --- README.md | 2 +- browserslist | 5 ----- package.json | 18 ++++++++++-------- vite.config.ts | 7 +------ 4 files changed, 12 insertions(+), 20 deletions(-) delete mode 100644 browserslist diff --git a/README.md b/README.md index 0bba832f16..897fb9b8d1 100644 --- a/README.md +++ b/README.md @@ -21,7 +21,7 @@ The DataGrid component is designed to handle large datasets efficiently while of ## Features - [React 19.0+](package.json) support -- [Evergreen browsers and server-side rendering](browserslist) support +- Evergreen browsers and server-side rendering support - Tree-shaking support and only [one npm dependency](package.json) to keep your bundles slim - Great performance thanks to virtualization: columns and rows outside the viewport are not rendered - Strictly typed with TypeScript diff --git a/browserslist b/browserslist deleted file mode 100644 index 524f5934f7..0000000000 --- a/browserslist +++ /dev/null @@ -1,5 +0,0 @@ -last 2 chrome versions -last 2 edge versions -last 2 firefox versions -last 2 safari versions -maintained node versions diff --git a/package.json b/package.json index 70602fa3cf..c2564cb31e 100644 --- a/package.json +++ b/package.json @@ -65,13 +65,12 @@ "@types/react-dom": "^19.1.3", "@typescript-eslint/eslint-plugin": "^8.33.1", "@typescript-eslint/parser": "^8.33.1", - "@vitejs/plugin-react": "^4.5.2", - "@vitest/browser": "^3.2.3", - "@vitest/coverage-v8": "^3.2.3", - "@vitest/eslint-plugin": "^1.2.1", + "@vitejs/plugin-react-oxc": "^0.2.3", + "@vitest/browser": "^3.2.4", + "@vitest/coverage-v8": "^3.2.4", + "@vitest/eslint-plugin": "^1.2.7", "@wyw-in-js/rollup": "^0.7.0", "@wyw-in-js/vite": "^0.7.0", - "browserslist": "^4.24.5", "eslint": "^9.28.0", "eslint-plugin-jest-dom": "^5.5.0", "eslint-plugin-react": "^7.37.4", @@ -90,12 +89,15 @@ "rolldown": "^1.0.0-beta.9", "rolldown-plugin-dts": "^0.13.3", "typescript": "~5.8.2", - "vite": "^6.3.5", - "vitest": "^3.2.3", - "vitest-browser-react": "^0.3.0" + "vite": "npm:rolldown-vite@^7.0.1", + "vitest": "^3.2.4", + "vitest-browser-react": "^1.0.0" }, "peerDependencies": { "react": "^19.0", "react-dom": "^19.0" + }, + "overrides": { + "vite": "$vite" } } diff --git a/vite.config.ts b/vite.config.ts index 028bfc2e4e..23e22199a7 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,6 @@ import { tanstackRouter } from '@tanstack/router-plugin/vite'; -import react from '@vitejs/plugin-react'; +import react from '@vitejs/plugin-react-oxc'; import wyw from '@wyw-in-js/vite'; -import browserslist from 'browserslist'; import { defineConfig } from 'vite'; import type { BrowserCommand } from 'vitest/node'; @@ -49,7 +48,6 @@ export default defineConfig(({ command, isPreview }) => ({ cacheDir: '.cache/vite', clearScreen: false, build: { - target: browserslist().map((version) => version.replace(' ', '')), modulePreload: { polyfill: false }, sourcemap: true, reportCompressedSize: false @@ -75,9 +73,6 @@ export default defineConfig(({ command, isPreview }) => ({ server: { open: true }, - optimizeDeps: { - include: ['@vitest/coverage-v8/browser'] - }, test: { globals: true, coverage: { From d622914bc8ba1bf7b724910ce3f33685d7e7636c Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 30 Jun 2025 13:19:34 +0100 Subject: [PATCH 005/230] Bump prettier from 3.6.0 to 3.6.2 (#3818) Bumps [prettier](https://github.com/prettier/prettier) from 3.6.0 to 3.6.2. - [Release notes](https://github.com/prettier/prettier/releases) - [Changelog](https://github.com/prettier/prettier/blob/main/CHANGELOG.md) - [Commits](https://github.com/prettier/prettier/compare/3.6.0...3.6.2) --- updated-dependencies: - dependency-name: prettier dependency-version: 3.6.2 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index c2564cb31e..bdffebdbf3 100644 --- a/package.json +++ b/package.json @@ -83,7 +83,7 @@ "jspdf-autotable": "^5.0.2", "playwright": "^1.53.0", "postcss": "^8.5.2", - "prettier": "3.6.0", + "prettier": "3.6.2", "react": "^19.1.0", "react-dom": "^19.1.0", "rolldown": "^1.0.0-beta.9", From 9725fa8a852393db0baba4939d684cb91f8ea5fa Mon Sep 17 00:00:00 2001 From: "dependabot[bot]" <49699333+dependabot[bot]@users.noreply.github.com> Date: Mon, 30 Jun 2025 13:31:31 +0100 Subject: [PATCH 006/230] Bump @biomejs/biome from 2.0.4 to 2.0.6 (#3817) Bumps [@biomejs/biome](https://github.com/biomejs/biome/tree/HEAD/packages/@biomejs/biome) from 2.0.4 to 2.0.6. - [Release notes](https://github.com/biomejs/biome/releases) - [Changelog](https://github.com/biomejs/biome/blob/main/packages/@biomejs/biome/CHANGELOG.md) - [Commits](https://github.com/biomejs/biome/commits/@biomejs/biome@2.0.6/packages/@biomejs/biome) --- updated-dependencies: - dependency-name: "@biomejs/biome" dependency-version: 2.0.6 dependency-type: direct:development update-type: version-update:semver-patch ... Signed-off-by: dependabot[bot] Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index bdffebdbf3..ee1c1abeee 100644 --- a/package.json +++ b/package.json @@ -53,7 +53,7 @@ }, "devDependencies": { "@babel/preset-typescript": "^7.27.1", - "@biomejs/biome": "2.0.4", + "@biomejs/biome": "2.0.6", "@eslint/markdown": "^6.3.0", "@faker-js/faker": "^9.6.0", "@ianvs/prettier-plugin-sort-imports": "^4.4.2", From 7dc8e42b742b66e7078ce13b7057de0fc567ddc0 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Thu, 3 Jul 2025 08:07:33 -0500 Subject: [PATCH 007/230] Update dependencies (#3820) * Update dependencies * Update remaning deps --- eslint.config.js | 14 ++++++++++++++ package.json | 24 ++++++++++++------------ test/browser/events.test.tsx | 2 +- 3 files changed, 27 insertions(+), 13 deletions(-) diff --git a/eslint.config.js b/eslint.config.js index e94437ee9d..d2513453e8 100644 --- a/eslint.config.js +++ b/eslint.config.js @@ -621,6 +621,7 @@ export default defineConfig([ 'vitest/no-hooks': 1, 'vitest/no-identical-title': 1, 'vitest/no-import-node-test': 1, + 'vitest/no-importing-vitest-globals': 1, 'vitest/no-interpolation-in-snapshots': 0, 'vitest/no-large-snapshots': 0, 'vitest/no-mocks-import': 1, @@ -629,6 +630,16 @@ export default defineConfig([ 'vitest/no-standalone-expect': 1, 'vitest/no-test-prefixes': 0, 'vitest/no-test-return-statement': 0, + 'vitest/padding-around-after-all-blocks': 0, + 'vitest/padding-around-after-each-blocks': 0, + 'vitest/padding-around-all': 0, + 'vitest/padding-around-before-all-blocks': 0, + 'vitest/padding-around-before-each-blocks': 0, + 'vitest/padding-around-describe-blocks': 0, + 'vitest/padding-around-expect-groups': 0, + 'vitest/padding-around-test-blocks': 0, + 'vitest/prefer-called-once': 1, + 'vitest/prefer-called-times': 0, 'vitest/prefer-called-with': 0, 'vitest/prefer-comparison-matcher': 1, 'vitest/prefer-each': 1, @@ -637,6 +648,7 @@ export default defineConfig([ 'vitest/prefer-expect-resolves': 1, 'vitest/prefer-hooks-in-order': 1, 'vitest/prefer-hooks-on-top': 1, + 'vitest/prefer-importing-vitest-globals': 0, 'vitest/prefer-lowercase-title': 0, 'vitest/prefer-mock-promise-shorthand': 1, 'vitest/prefer-snapshot-hint': 0, @@ -660,6 +672,7 @@ export default defineConfig([ 'vitest/valid-expect-in-promise': 1, 'vitest/valid-expect': [1, { alwaysAwait: true }], 'vitest/valid-title': 1, + 'vitest/warn-todo': 1, // https://github.com/testing-library/eslint-plugin-jest-dom#supported-rules 'jest-dom/prefer-checked': 1, @@ -690,6 +703,7 @@ export default defineConfig([ 'testing-library/no-node-access': 0, 'testing-library/no-promise-in-fire-event': 0, 'testing-library/no-render-in-lifecycle': 0, + 'testing-library/no-test-id-queries': 0, 'testing-library/no-unnecessary-act': 1, 'testing-library/no-wait-for-multiple-assertions': 1, 'testing-library/no-wait-for-side-effects': 1, diff --git a/package.json b/package.json index ee1c1abeee..a19ce1a36e 100644 --- a/package.json +++ b/package.json @@ -54,40 +54,40 @@ "devDependencies": { "@babel/preset-typescript": "^7.27.1", "@biomejs/biome": "2.0.6", - "@eslint/markdown": "^6.3.0", - "@faker-js/faker": "^9.6.0", + "@eslint/markdown": "^6.6.0", + "@faker-js/faker": "^9.9.0", "@ianvs/prettier-plugin-sort-imports": "^4.4.2", "@linaria/core": "^6.3.0", - "@tanstack/react-router": "^1.121.2", - "@tanstack/router-plugin": "^1.121.4", - "@types/node": "^24.0.0", + "@tanstack/react-router": "^1.121.21", + "@tanstack/router-plugin": "^1.124.0", + "@types/node": "^24.0.10", "@types/react": "^19.1.3", "@types/react-dom": "^19.1.3", - "@typescript-eslint/eslint-plugin": "^8.33.1", - "@typescript-eslint/parser": "^8.33.1", + "@typescript-eslint/eslint-plugin": "^8.35.1", + "@typescript-eslint/parser": "^8.35.1", "@vitejs/plugin-react-oxc": "^0.2.3", "@vitest/browser": "^3.2.4", "@vitest/coverage-v8": "^3.2.4", - "@vitest/eslint-plugin": "^1.2.7", + "@vitest/eslint-plugin": "^1.3.4", "@wyw-in-js/rollup": "^0.7.0", "@wyw-in-js/vite": "^0.7.0", - "eslint": "^9.28.0", + "eslint": "^9.30.1", "eslint-plugin-jest-dom": "^5.5.0", "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-compiler": "^19.1.0-rc.2", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-hooks-extra": "^1.51.3", - "eslint-plugin-sonarjs": "^3.0.2", + "eslint-plugin-sonarjs": "^3.0.4", "eslint-plugin-testing-library": "^7.5.0", "jspdf": "^3.0.1", "jspdf-autotable": "^5.0.2", - "playwright": "^1.53.0", + "playwright": "^1.53.2", "postcss": "^8.5.2", "prettier": "3.6.2", "react": "^19.1.0", "react-dom": "^19.1.0", "rolldown": "^1.0.0-beta.9", - "rolldown-plugin-dts": "^0.13.3", + "rolldown-plugin-dts": "^0.13.13", "typescript": "~5.8.2", "vite": "npm:rolldown-vite@^7.0.1", "vitest": "^3.2.4", diff --git a/test/browser/events.test.tsx b/test/browser/events.test.tsx index b7853344d7..72dcf8e48f 100644 --- a/test/browser/events.test.tsx +++ b/test/browser/events.test.tsx @@ -133,7 +133,7 @@ describe('Events', () => { row: rows[0], rowIdx: 0 }); - expect(onSelectedCellChange).toHaveBeenCalledTimes(1); + expect(onSelectedCellChange).toHaveBeenCalledOnce(); // Selected by double click await userEvent.dblClick(getCellsAtRowIndex(0)[0]); From 3c3b617b9aa4b16a503a6863492838cdb464dc5f Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Mon, 21 Jul 2025 10:11:41 -0500 Subject: [PATCH 008/230] Update packages (#3823) * Update packages * Use exact version * update router --- biome.json | 31 +++++++++++++++++++++++++++++-- package.json | 28 ++++++++++++++-------------- 2 files changed, 43 insertions(+), 16 deletions(-) diff --git a/biome.json b/biome.json index 4011dcfe47..a5a129ee34 100644 --- a/biome.json +++ b/biome.json @@ -91,6 +91,7 @@ "noUselessConstructor": "warn", "noUselessContinue": "warn", "noUselessEmptyExport": "warn", + "noUselessEscapeInRegex": "warn", "noUselessFragments": "warn", "noUselessLabel": "warn", "noUselessLoneBlockStatements": "warn", @@ -149,11 +150,21 @@ "noUnreachableSuper": "warn", "noUnsafeFinally": "warn", "noUnsafeOptionalChaining": "warn", - "noUnusedFunctionParameters": "off", + "noUnusedFunctionParameters": { + "level": "warn", + "options": { + "ignoreRestSiblings": true + } + }, "noUnusedImports": "warn", "noUnusedLabels": "warn", "noUnusedPrivateClassMembers": "warn", - "noUnusedVariables": "warn", + "noUnusedVariables": { + "level": "warn", + "options": { + "ignoreRestSiblings": true + } + }, "noVoidElementsWithChildren": "warn", "noVoidTypeReturn": "warn", "useExhaustiveDependencies": "off", @@ -189,6 +200,21 @@ "noNonNullAssertion": "off", "noParameterAssign": "off", "noParameterProperties": "warn", + "noRestrictedImports": { + "level": "warn", + "options": { + "paths": { + "react": { + "importNames": ["default"], + "message": "Use named imports instead." + }, + "react-dom": { + "importNames": ["default"], + "message": "Use named imports instead." + } + } + } + }, "noRestrictedGlobals": "warn", "noShoutyConstants": "warn", "noUnusedTemplateLiteral": "warn", @@ -270,6 +296,7 @@ "noMisleadingInstantiator": "warn", "noMisplacedAssertion": "off", "noMisrefactoredShorthandAssign": "warn", + "noOctalEscape": "warn", "noPrototypeBuiltins": "warn", "noReactSpecificProps": "off", "noRedeclare": "warn", diff --git a/package.json b/package.json index a19ce1a36e..1a8c3e09a0 100644 --- a/package.json +++ b/package.json @@ -53,41 +53,41 @@ }, "devDependencies": { "@babel/preset-typescript": "^7.27.1", - "@biomejs/biome": "2.0.6", - "@eslint/markdown": "^6.6.0", + "@biomejs/biome": "2.1.2", + "@eslint/markdown": "^7.0.0", "@faker-js/faker": "^9.9.0", - "@ianvs/prettier-plugin-sort-imports": "^4.4.2", + "@ianvs/prettier-plugin-sort-imports": "^4.5.1", "@linaria/core": "^6.3.0", - "@tanstack/react-router": "^1.121.21", - "@tanstack/router-plugin": "^1.124.0", - "@types/node": "^24.0.10", + "@tanstack/react-router": "^1.128.0", + "@tanstack/router-plugin": "^1.128.0", + "@types/node": "^24.0.14", "@types/react": "^19.1.3", "@types/react-dom": "^19.1.3", - "@typescript-eslint/eslint-plugin": "^8.35.1", - "@typescript-eslint/parser": "^8.35.1", + "@typescript-eslint/eslint-plugin": "^8.37.0", + "@typescript-eslint/parser": "^8.37.0", "@vitejs/plugin-react-oxc": "^0.2.3", "@vitest/browser": "^3.2.4", "@vitest/coverage-v8": "^3.2.4", "@vitest/eslint-plugin": "^1.3.4", "@wyw-in-js/rollup": "^0.7.0", "@wyw-in-js/vite": "^0.7.0", - "eslint": "^9.30.1", + "eslint": "^9.31.0", "eslint-plugin-jest-dom": "^5.5.0", "eslint-plugin-react": "^7.37.4", "eslint-plugin-react-compiler": "^19.1.0-rc.2", "eslint-plugin-react-hooks": "^5.2.0", - "eslint-plugin-react-hooks-extra": "^1.51.3", + "eslint-plugin-react-hooks-extra": "^1.52.3", "eslint-plugin-sonarjs": "^3.0.4", - "eslint-plugin-testing-library": "^7.5.0", + "eslint-plugin-testing-library": "^7.6.0", "jspdf": "^3.0.1", "jspdf-autotable": "^5.0.2", - "playwright": "^1.53.2", + "playwright": "^1.54.1", "postcss": "^8.5.2", "prettier": "3.6.2", "react": "^19.1.0", "react-dom": "^19.1.0", - "rolldown": "^1.0.0-beta.9", - "rolldown-plugin-dts": "^0.13.13", + "rolldown": "^1.0.0-beta.28", + "rolldown-plugin-dts": "^0.13.14", "typescript": "~5.8.2", "vite": "npm:rolldown-vite@^7.0.1", "vitest": "^3.2.4", From 8842595803c39c05942c7cd5bb514fcab9e0ae14 Mon Sep 17 00:00:00 2001 From: Aman Mahajan Date: Tue, 22 Jul 2025 09:20:53 -0500 Subject: [PATCH 009/230] Add `color-scheme` selection component (#3825) * Add an open to select color-scheme * Add label * Rename * Simplify * Update src/style/core.ts Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> * Add space --------- Co-authored-by: Nicolas Stepien <567105+nstepien@users.noreply.github.com> --- src/style/core.ts | 65 +++++++++++++++-------------------------------- website/Nav.tsx | 19 +++++++++++--- website/root.css | 11 +++++++- 3 files changed, 46 insertions(+), 49 deletions(-) diff --git a/src/style/core.ts b/src/style/core.ts index 25dc3c863c..ec3a0abc6b 100644 --- a/src/style/core.ts +++ b/src/style/core.ts @@ -3,34 +3,6 @@ import { css } from '@linaria/core'; import { cell } from './cell'; import { bottomSummaryRowClassname, row, topSummaryRowClassname } from './row'; -const lightTheme = ` - --rdg-color: #000; - --rdg-border-color: #ddd; - --rdg-summary-border-color: #aaa; - --rdg-background-color: hsl(0deg 0% 100%); - --rdg-header-background-color: hsl(0deg 0% 97.5%); - --rdg-header-draggable-background-color: hsl(0deg 0% 90.5%); - --rdg-row-hover-background-color: hsl(0deg 0% 96%); - --rdg-row-selected-background-color: hsl(207deg 76% 92%); - --rdg-row-selected-hover-background-color: hsl(207deg 76% 88%); - - --rdg-checkbox-focus-color: hsl(207deg 100% 69%); -`; - -const darkTheme = ` - --rdg-color: #ddd; - --rdg-border-color: #444; - --rdg-summary-border-color: #555; - --rdg-background-color: hsl(0deg 0% 13%); - --rdg-header-background-color: hsl(0deg 0% 10.5%); - --rdg-header-draggable-background-color: hsl(0deg 0% 17.5%); - --rdg-row-hover-background-color: hsl(0deg 0% 9%); - --rdg-row-selected-background-color: hsl(207deg 76% 42%); - --rdg-row-selected-hover-background-color: hsl(207deg 76% 38%); - - --rdg-checkbox-focus-color: hsl(207deg 100% 89%); -`; - const root = css` @layer rdg.Defaults { *, @@ -41,13 +13,32 @@ const root = css` } @layer rdg.Root { - ${lightTheme} --rdg-selection-width: 2px; --rdg-selection-color: hsl(207, 75%, 66%); --rdg-font-size: 14px; --rdg-cell-frozen-box-shadow: 2px 0 5px -2px rgba(136, 136, 136, 0.3); --rdg-border-width: 1px; --rdg-summary-border-width: calc(var(--rdg-border-width) * 2); + --rdg-color: light-dark(#000, #ddd); + --rdg-border-color: light-dark(#ddd, #444); + --rdg-summary-border-color: light-dark(#aaa, #555); + --rdg-background-color: light-dark(hsl(0deg 0% 100%), hsl(0deg 0% 13%)); + --rdg-header-background-color: light-dark(hsl(0deg 0% 97.5%), hsl(0deg 0% 10.5%)); + --rdg-header-draggable-background-color: light-dark(hsl(0deg 0% 90.5%), hsl(0deg 0% 17.5%)); + --rdg-row-hover-background-color: light-dark(hsl(0deg 0% 96%), hsl(0deg 0% 9%)); + --rdg-row-selected-background-color: light-dark(hsl(207deg 76% 92%), hsl(207deg 76% 42%)); + --rdg-row-selected-hover-background-color: light-dark(hsl(207deg 76% 88%), hsl(207deg 76% 38%)); + --rdg-checkbox-focus-color: hsl(207deg 100% 69%); + + &.rdg-dark { + --rdg-color-scheme: dark; + } + + &.rdg-light { + --rdg-color-scheme: light; + } + + color-scheme: var(--rdg-color-scheme, light dark); &:dir(rtl) { --rdg-cell-frozen-box-shadow: -2px 0 5px -2px rgba(136, 136, 136, 0.3); @@ -55,7 +46,6 @@ const root = css` display: grid; - color-scheme: var(--rdg-color-scheme, light dark); accent-color: light-dark(hsl(207deg 100% 29%), hsl(207deg 100% 79%)); /* https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */ @@ -78,21 +68,6 @@ const root = css` grid-row: 1/-1; } - &.rdg-dark { - --rdg-color-scheme: dark; - ${darkTheme} - } - - &.rdg-light { - --rdg-color-scheme: light; - } - - @media (prefers-color-scheme: dark) { - &:not(.rdg-light) { - ${darkTheme} - } - } - > :nth-last-child(1 of .${topSummaryRowClassname}) { > .${cell} { border-block-end: var(--rdg-summary-border-width) solid var(--rdg-summary-border-color); diff --git a/website/Nav.tsx b/website/Nav.tsx index cb4684f5d7..839ceab716 100644 --- a/website/Nav.tsx +++ b/website/Nav.tsx @@ -1,4 +1,4 @@ -import { useId } from 'react'; +import { useId, useState } from 'react'; import { Link } from '@tanstack/react-router'; import { css } from '@linaria/core'; @@ -46,10 +46,12 @@ const navClassname = css` } `; -const rtlCheckboxClassname = css` +const labelClassname = css` padding-inline-start: 8px; `; +export type Theme = 'light' | 'dark' | 'system'; + interface Props { direction: Direction; onDirectionChange: (direction: Direction) => void; @@ -58,10 +60,21 @@ interface Props { export default function Nav({ direction, onDirectionChange }: Props) { const demosNavId = useId(); const linksNavId = useId(); + const [theme, setTheme] = useState('system'); return (

react-data-grid

+ + +

Direction

-