diff --git a/packages/odyssey-react-mui/package.json b/packages/odyssey-react-mui/package.json index 3c9c90b48..8ab7aaa2b 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", @@ -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/Box.tsx b/packages/odyssey-react-mui/src/Box.tsx index 2402b29f3..a68555205 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) => ( { 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 dba8dadda..81344c177 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 759abd125..6b9f0fa24 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/packages/odyssey-storybook/package.json b/packages/odyssey-storybook/package.json index 41fc21109..fdec48977 100644 --- a/packages/odyssey-storybook/package.json +++ b/packages/odyssey-storybook/package.json @@ -20,7 +20,7 @@ "@emotion/react": "^11.14.0", "@emotion/styled": "^11.14.0", "@faker-js/faker": "^8.4.1", - "@mui/material": "^5.16.14", + "@mui/material": "^6.4.0", "@okta/odyssey-design-tokens": "workspace:*", "@okta/odyssey-react-mui": "workspace:*", "@okta/odyssey-typescript": "workspace:*", diff --git a/yarn.lock b/yarn.lock index 2548c4737..9947e306e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1144,7 +1144,7 @@ __metadata: languageName: node linkType: hard -"@babel/runtime@npm:^7.25.0": +"@babel/runtime@npm:^7.25.0, @babel/runtime@npm:^7.26.0": version: 7.26.0 resolution: "@babel/runtime@npm:7.26.0" dependencies: @@ -3401,10 +3401,10 @@ __metadata: languageName: node linkType: hard -"@mui/core-downloads-tracker@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/core-downloads-tracker@npm:5.16.14" - checksum: 10/a25658362a69a89f35cdc12ded01b998b7f02df43648029f2523813fc7f259cc85f62bd1877059359d462e7c163e82308bd4cc74fa2d35651d302c5d8bbbc7f4 +"@mui/core-downloads-tracker@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/core-downloads-tracker@npm:6.4.0" + checksum: 10/3e8f31c3b461f85448152b99e156f487b146725560d2f60f0b60becf2c37f4fc1ab913ca7496dd038514bddb214a51cb6f6147fa66b4f9d0d7d5a1e7ce0cce97 languageName: node linkType: hard @@ -3453,18 +3453,18 @@ __metadata: languageName: node linkType: hard -"@mui/material@npm:^5.16.14": - version: 5.16.14 - resolution: "@mui/material@npm:5.16.14" +"@mui/material@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/material@npm:6.4.0" dependencies: - "@babel/runtime": "npm:^7.23.9" - "@mui/core-downloads-tracker": "npm:^5.16.14" - "@mui/system": "npm:^5.16.14" - "@mui/types": "npm:^7.2.15" - "@mui/utils": "npm:^5.16.14" + "@babel/runtime": "npm:^7.26.0" + "@mui/core-downloads-tracker": "npm:^6.4.0" + "@mui/system": "npm:^6.4.0" + "@mui/types": "npm:^7.2.21" + "@mui/utils": "npm:^6.4.0" "@popperjs/core": "npm:^2.11.8" - "@types/react-transition-group": "npm:^4.4.10" - clsx: "npm:^2.1.0" + "@types/react-transition-group": "npm:^4.4.12" + clsx: "npm:^2.1.1" csstype: "npm:^3.1.3" prop-types: "npm:^15.8.1" react-is: "npm:^19.0.0" @@ -3472,6 +3472,7 @@ __metadata: peerDependencies: "@emotion/react": ^11.5.0 "@emotion/styled": ^11.3.0 + "@mui/material-pigment-css": ^6.4.0 "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 react: ^17.0.0 || ^18.0.0 || ^19.0.0 react-dom: ^17.0.0 || ^18.0.0 || ^19.0.0 @@ -3480,9 +3481,11 @@ __metadata: optional: true "@emotion/styled": optional: true + "@mui/material-pigment-css": + optional: true "@types/react": optional: true - checksum: 10/4fe36ebe4d5f65e420895d114db81c0b8a5061e39bc18cdbebf6204953dae34cdc04af9827b65eb136e5a6853f4500a736ed3d52cce4ea37057a749eca5c3fad + checksum: 10/6b4180c660389adee9c7237348a7d36342aa5021e23d0ce0dd9024a2aa863bbf380ec36e9dce2c5defdc67856652f4033e620fab4129f47405c51eda96bd98d9 languageName: node linkType: hard @@ -3520,6 +3523,23 @@ __metadata: languageName: node linkType: hard +"@mui/private-theming@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/private-theming@npm:6.4.0" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/utils": "npm:^6.4.0" + prop-types: "npm:^15.8.1" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/bb54f1666d4f6428fcb069a670dbc087c7edd23b3a56351d69e7a91c7dbf9e37de6f94e56c04156897d6a62303e7e3ba6863991cae372944659b58842cc81fa8 + languageName: node + linkType: hard + "@mui/styled-engine@npm:^5.15.14": version: 5.15.14 resolution: "@mui/styled-engine@npm:5.15.14" @@ -3562,6 +3582,29 @@ __metadata: languageName: node linkType: hard +"@mui/styled-engine@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/styled-engine@npm:6.4.0" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@emotion/cache": "npm:^11.13.5" + "@emotion/serialize": "npm:^1.3.3" + "@emotion/sheet": "npm:^1.4.0" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.4.1 + "@emotion/styled": ^11.3.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + checksum: 10/dca3f784a53e8b4838f6d468eb6b503eaa55b001bd09de4e99237a4b227f1401d932b7fb306bad9d68fe77549ebe5faf368a1ae6be6f20ff6499101fc0dfb600 + languageName: node + linkType: hard + "@mui/system@npm:^5.15.14": version: 5.15.15 resolution: "@mui/system@npm:5.15.15" @@ -3618,6 +3661,34 @@ __metadata: languageName: node linkType: hard +"@mui/system@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/system@npm:6.4.0" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/private-theming": "npm:^6.4.0" + "@mui/styled-engine": "npm:^6.4.0" + "@mui/types": "npm:^7.2.21" + "@mui/utils": "npm:^6.4.0" + clsx: "npm:^2.1.1" + csstype: "npm:^3.1.3" + prop-types: "npm:^15.8.1" + peerDependencies: + "@emotion/react": ^11.5.0 + "@emotion/styled": ^11.3.0 + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@emotion/react": + optional: true + "@emotion/styled": + optional: true + "@types/react": + optional: true + checksum: 10/c2a5550898c598b9d8b564f189acaa6858286ff82c103c5ea832b6a769863fd315de1a5841a9a0e6428f078929522e58b418cf16fea12e389bcfcb7fc3f1b912 + languageName: node + linkType: hard + "@mui/types@npm:^7.2.14": version: 7.2.14 resolution: "@mui/types@npm:7.2.14" @@ -3630,7 +3701,7 @@ __metadata: languageName: node linkType: hard -"@mui/types@npm:^7.2.15": +"@mui/types@npm:^7.2.15, @mui/types@npm:^7.2.21": version: 7.2.21 resolution: "@mui/types@npm:7.2.21" peerDependencies: @@ -3698,6 +3769,26 @@ __metadata: languageName: node linkType: hard +"@mui/utils@npm:^6.4.0": + version: 6.4.0 + resolution: "@mui/utils@npm:6.4.0" + dependencies: + "@babel/runtime": "npm:^7.26.0" + "@mui/types": "npm:^7.2.21" + "@types/prop-types": "npm:^15.7.14" + clsx: "npm:^2.1.1" + prop-types: "npm:^15.8.1" + react-is: "npm:^19.0.0" + peerDependencies: + "@types/react": ^17.0.0 || ^18.0.0 || ^19.0.0 + react: ^17.0.0 || ^18.0.0 || ^19.0.0 + peerDependenciesMeta: + "@types/react": + optional: true + checksum: 10/fb1e3d0a6e44fe9cd3aae68456084966f4d0f73f7be4cfe4e4998a9cf11f199aced8aedae7192f7da1c7c7814551aa13202e58c8c6531deae43b866a980744ec + languageName: node + linkType: hard + "@mui/x-date-pickers@npm:^7.2.0": version: 7.2.0 resolution: "@mui/x-date-pickers@npm:7.2.0" @@ -4389,7 +4480,7 @@ __metadata: "@happy-dom/jest-environment": "npm:^15.7.4" "@mui/icons-material": "npm:^5.16.14" "@mui/lab": "npm:^5.0.0-alpha.175" - "@mui/material": "npm:^5.16.14" + "@mui/material": "npm:^6.4.0" "@mui/system": "npm:^5.16.14" "@mui/utils": "npm:^5.16.14" "@mui/x-date-pickers": "npm:^7.2.0" @@ -4419,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" @@ -4451,7 +4542,7 @@ __metadata: "@emotion/react": "npm:^11.14.0" "@emotion/styled": "npm:^11.14.0" "@faker-js/faker": "npm:^8.4.1" - "@mui/material": "npm:^5.16.14" + "@mui/material": "npm:^6.4.0" "@okta/odyssey-design-tokens": "workspace:*" "@okta/odyssey-react-mui": "workspace:*" "@okta/odyssey-typescript": "workspace:*" @@ -5751,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 @@ -6293,6 +6384,13 @@ __metadata: languageName: node linkType: hard +"@types/prop-types@npm:^15.7.14": + version: 15.7.14 + resolution: "@types/prop-types@npm:15.7.14" + checksum: 10/d0c5407b9ccc3dd5fae0ccf9b1007e7622ba5e6f1c18399b4f24dff33619d469da4b9fa918a374f19dc0d9fe6a013362aab0b844b606cfc10676efba3f5f736d + languageName: node + linkType: hard + "@types/react-dom@npm:^18.2.19": version: 18.2.19 resolution: "@types/react-dom@npm:18.2.19" @@ -6320,6 +6418,15 @@ __metadata: languageName: node linkType: hard +"@types/react-transition-group@npm:^4.4.12": + version: 4.4.12 + resolution: "@types/react-transition-group@npm:4.4.12" + peerDependencies: + "@types/react": "*" + checksum: 10/ea14bc84f529a3887f9954b753843820ac8a3c49fcdfec7840657ecc6a8800aad98afdbe4b973eb96c7252286bde38476fcf64b1c09527354a9a9366e516d9a2 + languageName: node + linkType: hard + "@types/react-virtualized-auto-sizer@npm:^1.0.4": version: 1.0.4 resolution: "@types/react-virtualized-auto-sizer@npm:1.0.4" @@ -12374,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 @@ -15188,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 @@ -18555,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