upgrade material UI

[andra-sava]

⭐ The following dependencies have been updated:

  @mui/material upgraded from ^5.16.7 to ^6.1.6
  @mui/icons-material upgraded from ^5.16.7 to ^6.1.6
  @mui/lab upgraded from ^5.0.0-alpha.173 to 6.0.0-beta.14
  @mui/system upgraded from ^5.16.7 to ^6.1.6

  react-router-dom upgraded from ^6.27.0 to ^6.28.0
  i18next upgraded from ^23.16.4 to ^23.16.5

  attr-accept upgraded from ^2.2.4 to ^2.2.5 

⭐ The following dependencies have been removed:

  @nx/js: ^20.0.8
  dedent: ^1.5.3
  sort-package-json: ^2.10.1

⭐ Breaking changes:

• The components have been updated to use the latest Material UI version 6 implying the following modifications:

  • For a better understanding, please follow: https://mui.com/material-ui/migration/upgrade-to-v6/ and https://mui.com/material-ui/migration/migrating-from-deprecated-apis/
  • Moved to Grid2. https://mui.com/material-ui/migration/migration-grid-v2/ The old Grid is now deprecated.
  • The item prop in Grid has been removed
  • Size: xs, sm, md, lg, xl and Offset: xsOffset, smOffset, mdOffset, lgOffset, xlOffset have beed renamed to size and offset Example: size={{ xs: 3, md: 2 }}
  • In order to make the changes, the following codemod can be used:
    npx @mui/codemod@latest v6.0.0/grid-v2-props <path/to/folder>
  • The color prop in the Typography component is not a system prop anymore. You can use the sx prop instead.
    
    You still can access some theme colors directly using the color prop. Check the list here: https://mui.com/material-ui/api/typography/#typography-prop-color Example:
    <Typography color="textSecondary">Secondary text</Typography>
  • Used await and act for testing fireEvent.click()

• Upgrading to react-router-dom to 6.28.0 introduced some v7 pre-release warnings which have been suppressed using the fowllowing flags: future={{ v7_relativeSplatPath: true, v7_startTransition: true }} Check: https://reactrouter.com/en/6.28.0/upgrading/future#future-flags