From 77465bb44562a32f251b7c729c28bea1a9d9f01c Mon Sep 17 00:00:00 2001 From: Jordan Koschei Date: Wed, 15 Jan 2025 13:18:58 -0500 Subject: [PATCH 1/2] chore: upgrade MUI and default Box to div --- packages/odyssey-react-mui/package.json | 2 +- packages/odyssey-react-mui/src/Box.tsx | 2 +- packages/odyssey-storybook/package.json | 2 +- yarn.lock | 145 ++++++++++++++++++++---- 4 files changed, 129 insertions(+), 22 deletions(-) diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json index 3c9c90b481..0c2daec439 100644 --- a/packages/odyssey-react-mui/package.json +++ b/packages/odyssey-react-mui/package.json @@ -90,7 +90,7 @@ "@emotion/styled": "^11.14.0", "@mui/icons-material": "^5.16.14", "@mui/lab": "^5.0.0-alpha.175", - "@mui/material": "^5.16.14", + "@mui/material": "^6.4.0", "@mui/system": "^5.16.14", "@mui/utils": "^5.16.14", "@mui/x-date-pickers": "^7.2.0", diff --git a/packages/odyssey-react-mui/src/Box.tsx b/packages/odyssey-react-mui/src/Box.tsx index 2402b29f36..a685552055 100644 --- a/packages/odyssey-react-mui/src/Box.tsx +++ b/packages/odyssey-react-mui/src/Box.tsx @@ -24,7 +24,7 @@ export type BoxProps = { } & Pick; const Box = forwardRef( - ({ children, component, id, role, sx, testId, translate }, ref) => ( + ({ children, component = "div", id, role, sx, testId, translate }, ref) => ( Date: Wed, 15 Jan 2025 15:58:52 -0500 Subject: [PATCH 2/2] chore: upgrade material-react-table --- packages/odyssey-react-mui/package.json | 2 +- .../src/labs/DataView/DataView.test.tsx | 8 +- .../src/labs/PaginatedTable.tsx | 4 +- .../src/labs/StaticTable.tsx | 4 +- yarn.lock | 98 +++++++++---------- 5 files changed, 58 insertions(+), 58 deletions(-) diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json index 0c2daec439..8ab7aaa2b7 100644 --- a/packages/odyssey-react-mui/package.json +++ b/packages/odyssey-react-mui/package.json @@ -102,7 +102,7 @@ "dom-accessibility-api": "^0.7.0", "i18next": "^23.15.1", "luxon": "^3.4.4", - "material-react-table": "^2.11.3", + "material-react-table": "^3.1.0", "react-error-boundary": "^4.1.1", "react-i18next": "^15.1.1", "react-window": "^1.8.10", diff --git a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx index ef77b1c5ab..2e01f91796 100644 --- a/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx +++ b/packages/odyssey-react-mui/src/labs/DataView/DataView.test.tsx @@ -960,10 +960,10 @@ describe("DataView", () => { const rows = await screen.findAllByRole("row"); const tHead = rows[0].parentElement; - // Ensure that the resize handle is displayed when - // hasColumnResizing is true - const hrElement = tHead!.querySelector("hr"); - expect(tHead).toContainElement(hrElement); + // Get all separators and pick the first one + const separators = within(tHead!).getAllByRole("separator"); + expect(separators.length).toBeGreaterThan(0); + expect(tHead).toContainElement(separators[0]); }); describe("Pagination", () => { diff --git a/packages/odyssey-react-mui/src/labs/PaginatedTable.tsx b/packages/odyssey-react-mui/src/labs/PaginatedTable.tsx index dba8dadda0..81344c1774 100644 --- a/packages/odyssey-react-mui/src/labs/PaginatedTable.tsx +++ b/packages/odyssey-react-mui/src/labs/PaginatedTable.tsx @@ -17,7 +17,7 @@ import { type MRT_ColumnFiltersState, type MRT_RowSelectionState, type MRT_TableInstance, - type MRT_Virtualizer, + type MRT_RowVirtualizer, useMaterialReactTable, MaterialReactTable, } from "material-react-table"; @@ -73,7 +73,7 @@ const PaginatedTable = ({ const { t } = useTranslation(); const rowVirtualizerInstanceRef = - useRef>(null); + useRef>(null); const [columnFilters, setColumnFilters] = useState( [], diff --git a/packages/odyssey-react-mui/src/labs/StaticTable.tsx b/packages/odyssey-react-mui/src/labs/StaticTable.tsx index 759abd1253..6b9f0fa246 100644 --- a/packages/odyssey-react-mui/src/labs/StaticTable.tsx +++ b/packages/odyssey-react-mui/src/labs/StaticTable.tsx @@ -14,7 +14,7 @@ import { useMaterialReactTable, type MRT_ColumnFiltersState, type MRT_TableInstance, - type MRT_Virtualizer, + type MRT_RowVirtualizer, MaterialReactTable, } from "material-react-table"; import { @@ -57,7 +57,7 @@ const StaticTable = ({ const { t } = useTranslation(); const rowVirtualizerInstanceRef = - useRef>(null); + useRef>(null); const [columnFilters, setColumnFilters] = useState( [], diff --git a/yarn.lock b/yarn.lock index 624b036cc1..9947e306e4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4510,7 +4510,7 @@ __metadata: i18next: "npm:^23.15.1" jest-axe: "npm:^5.0.1" luxon: "npm:^3.4.4" - material-react-table: "npm:^2.11.3" + material-react-table: "npm:^3.1.0" properties: "npm:1.2.1" react: "npm:^18.3.1" react-dom: "npm:^18.3.1" @@ -5842,50 +5842,50 @@ __metadata: languageName: node linkType: hard -"@tanstack/match-sorter-utils@npm:8.11.8": - version: 8.11.8 - resolution: "@tanstack/match-sorter-utils@npm:8.11.8" +"@tanstack/match-sorter-utils@npm:8.19.4": + version: 8.19.4 + resolution: "@tanstack/match-sorter-utils@npm:8.19.4" dependencies: - remove-accents: "npm:0.4.2" - checksum: 10/a74863bca3302a06cb3869bcea99c8091d1ccd023b8be7dded9e5e9d2695f7fe9c4ae65562b8e2ebdaf33554057d41bba2bf04a709b6af9940fefcee8ffc5c41 + remove-accents: "npm:0.5.0" + checksum: 10/1289bd422da8577e5b1b4f1673505b521745d2edaf249eee2d8854633896dcb8f4bf91909b8e0641d3df2818856ff530db6957ce907fba65c073b7305dee365d languageName: node linkType: hard -"@tanstack/react-table@npm:8.12.0": - version: 8.12.0 - resolution: "@tanstack/react-table@npm:8.12.0" +"@tanstack/react-table@npm:8.20.6": + version: 8.20.6 + resolution: "@tanstack/react-table@npm:8.20.6" dependencies: - "@tanstack/table-core": "npm:8.12.0" + "@tanstack/table-core": "npm:8.20.5" peerDependencies: - react: ">=16" - react-dom: ">=16" - checksum: 10/4fe03b995e485c0b2734e0c8df5c17daedbbdf2692a7bf5b19bb217cc23e14fe88ada810a6ebc47bf1a1978bc23171cfe00ce179944f0b669df4d3fe74b92ae0 + react: ">=16.8" + react-dom: ">=16.8" + checksum: 10/7ff2daf480bf2135ed072152cd8bc3f8ac342ca333831fd1b28603a8a8da0a858609d2fca18804f83ab62bbcf28041d5b98a0f2b7b283ec7229f99a57047a49f languageName: node linkType: hard -"@tanstack/react-virtual@npm:3.0.4": - version: 3.0.4 - resolution: "@tanstack/react-virtual@npm:3.0.4" +"@tanstack/react-virtual@npm:3.11.2": + version: 3.11.2 + resolution: "@tanstack/react-virtual@npm:3.11.2" dependencies: - "@tanstack/virtual-core": "npm:3.0.0" + "@tanstack/virtual-core": "npm:3.11.2" peerDependencies: - react: ^16.8.0 || ^17.0.0 || ^18.0.0 - react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 - checksum: 10/d99a18c78cbe2ab0618f9fd75b626bb9db36794dab62a4273922fd887996b01a36bc324a69047e4449c7b9aa0f11f2a19d02d70a94fb6255eaf924a619548322 + react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 + checksum: 10/a1136da0ec4c2ecbd4f996d8b84f228f0b8d851b15806e01049a160ad1d9b2eef0e0a491035fe017c6f84a0e125334f69ea23b32c180df23614ea4a8eeb7490c languageName: node linkType: hard -"@tanstack/table-core@npm:8.12.0": - version: 8.12.0 - resolution: "@tanstack/table-core@npm:8.12.0" - checksum: 10/a1b127e4b010f75e74509e1e121fef62c88e60a2a52c6425d8ce81694c8403b1de706f029cb2a8cea19c87b8904b9e6f981840580a9bb10f14f1fb5905fc1cde +"@tanstack/table-core@npm:8.20.5": + version: 8.20.5 + resolution: "@tanstack/table-core@npm:8.20.5" + checksum: 10/5408237920d5796951e925278edbbe76f71006627a4e3da248a810970256f75d973538fe7ae75a32155d4a25a95abc4fffaea337b5120f7940d7e664dc9da87f languageName: node linkType: hard -"@tanstack/virtual-core@npm:3.0.0": - version: 3.0.0 - resolution: "@tanstack/virtual-core@npm:3.0.0" - checksum: 10/667941444b70773a8fc37b907718fcdbcf90b15660f427b06d6c140b72eea636d8609a8ba5ee3d2cb363066a8085fbf5b804fd08d5cfefd432cf1a14fa7c2355 +"@tanstack/virtual-core@npm:3.11.2": + version: 3.11.2 + resolution: "@tanstack/virtual-core@npm:3.11.2" + checksum: 10/8433044a5c801052ba2e4cdda098cdc8e32adfd3a76ba31af7064bbdda60062fe221a3558096987baa66cd94f528855e887c282cb0f9eb99d3751457c2a62872 languageName: node linkType: hard @@ -12481,10 +12481,10 @@ __metadata: languageName: node linkType: hard -"highlight-words@npm:1.2.2": - version: 1.2.2 - resolution: "highlight-words@npm:1.2.2" - checksum: 10/a5431c550a6d523ecb54eba952075790ddbf0cab9db6ba9e2c6928407ff2a5b27f07169ef2634eb56aaae42b396291acc62381956d152392350c94432dd8d247 +"highlight-words@npm:2.0.0": + version: 2.0.0 + resolution: "highlight-words@npm:2.0.0" + checksum: 10/219e596853e06195c82d114b6f0a6f879cd0e941a2d23718f8549c09bb05c309ddfba3903796b5c5e06b3c99f452607dda1d9bc9d6057376152e0a90fee9238f languageName: node linkType: hard @@ -15295,23 +15295,23 @@ __metadata: languageName: node linkType: hard -"material-react-table@npm:^2.11.3": - version: 2.11.3 - resolution: "material-react-table@npm:2.11.3" +"material-react-table@npm:^3.1.0": + version: 3.1.0 + resolution: "material-react-table@npm:3.1.0" dependencies: - "@tanstack/match-sorter-utils": "npm:8.11.8" - "@tanstack/react-table": "npm:8.12.0" - "@tanstack/react-virtual": "npm:3.0.4" - highlight-words: "npm:1.2.2" + "@tanstack/match-sorter-utils": "npm:8.19.4" + "@tanstack/react-table": "npm:8.20.6" + "@tanstack/react-virtual": "npm:3.11.2" + highlight-words: "npm:2.0.0" peerDependencies: - "@emotion/react": ">=11.11" - "@emotion/styled": ">=11.11" - "@mui/icons-material": ">=5.11" - "@mui/material": ">=5.13" - "@mui/x-date-pickers": ">=6.15.0" + "@emotion/react": ">=11.13" + "@emotion/styled": ">=11.13" + "@mui/icons-material": ">=6" + "@mui/material": ">=6" + "@mui/x-date-pickers": ">=7.15" react: ">=18.0" react-dom: ">=18.0" - checksum: 10/51f8278e5b432a205266f4e03225449a014ad46ff4c91b74d05efd7d3db43a3b5a4a890a831cf1313a43e41d63264c0c36ad0409951609eac2b1efe4c389706f + checksum: 10/726877b86833f762411e794d5b366e45b4683e227f6c57c2115755782ba309f6a39f1db7780176e79046278a6cdecd67489557fcbb69f81cbcf2ca3609a4b0ec languageName: node linkType: hard @@ -18662,10 +18662,10 @@ __metadata: languageName: node linkType: hard -"remove-accents@npm:0.4.2": - version: 0.4.2 - resolution: "remove-accents@npm:0.4.2" - checksum: 10/25d5c84f1355be60b42f8ad8a1ba29c2413dead138a9e2a88633e4fc94a1b953afe306dd27479125aef231d267482c54d292e558b04ec100fb9adf063ccbf75a +"remove-accents@npm:0.5.0": + version: 0.5.0 + resolution: "remove-accents@npm:0.5.0" + checksum: 10/4aa1a9d0c18468515a33c6760b0f8e28dfbceddcb846fac90b2189445445b27b11cc1df9fbceb97b4449438bc13250d77b27d4ab325b2d69933acc156d6c5b50 languageName: node linkType: hard