Merge pull request #278 from oasisprotocol/renovate/material-ui-monorepo

Update material-ui monorepo

.changelog/278.internal.md

@@ -0,0 +1 @@
+Update material-ui monorepo

package.json

@@ -54,9 +54,9 @@
     "@fontsource-variable/figtree": "^5.0.4",
     "@fontsource-variable/roboto-mono": "^5.0.4",
     "@metamask/jazzicon": "2.0.0",
-    "@mui/base": "5.0.0-alpha.119",
-    "@mui/icons-material": "5.11.11",
-    "@mui/material": "5.11.11",
+    "@mui/base": "5.0.0-beta.4",
+    "@mui/icons-material": "5.11.16",
+    "@mui/material": "5.13.5",
     "@oasisprotocol/client": "0.1.1-alpha.2",
     "@oasisprotocol/client-rt": "0.2.1-alpha.2",
     "@tanstack/react-query": "4.29.14",

src/app/components/CopyToClipboard/index.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import Tooltip from '@mui/material/Tooltip'
 import ContentCopyIcon from '@mui/icons-material/ContentCopy'
 import { COLORS } from '../../../styles/theme/colors'
-import ButtonUnstyled from '@mui/base/ButtonUnstyled'
+import ButtonBase from '@mui/material/ButtonBase'
 import { styled } from '@mui/material/styles'
 
 const clipboardTooltipDuration = 2000
@@ -12,7 +12,7 @@ type CopyToClipboardProps = {
   value: string
 }
 
-const StyledButton = styled(ButtonUnstyled)(({ theme }) => ({
+const StyledButton = styled(ButtonBase)(({ theme }) => ({
   display: 'inline-flex',
   alignItems: 'center',
   border: 0,

src/app/components/Select/index.tsx

@@ -1,10 +1,6 @@
-import SelectUnstyled, {
-  SelectUnstyledProps,
-  selectUnstyledClasses,
-  SelectUnstyledRootSlotProps,
-} from '@mui/base/SelectUnstyled'
-import OptionUnstyled, { optionUnstyledClasses } from '@mui/base/OptionUnstyled'
-import PopperUnstyled from '@mui/base/PopperUnstyled'
+import SelectUnstyled, { SelectProps, selectClasses, SelectRootSlotProps } from '@mui/base/Select'
+import Option, { optionClasses } from '@mui/base/Option'
+import Popper from '@mui/base/Popper'
 import { styled } from '@mui/material/styles'
 import Box from '@mui/material/Box'
 import {
@@ -34,7 +30,7 @@ const StyledButton = styled(Button)(({ theme }) => ({
   color: COLORS.white,
   textTransform: 'none',
   justifyContent: 'space-between',
-  [`&.${selectUnstyledClasses.focusVisible}`]: {
+  [`&.${selectClasses.focusVisible}`]: {
     backgroundColor: COLORS.brandExtraDark,
   },
 }))
@@ -51,7 +47,7 @@ const StyledListbox = styled('ul')(({ theme }) => ({
   filter: 'drop-shadow(0px 4px 4px rgba(0, 0, 0, 0.25))',
 }))
 
-const StyledOption = styled(OptionUnstyled)(({ theme }) => ({
+const StyledOption = styled(Option)(({ theme }) => ({
   display: 'flex',
   alignItems: 'center',
   boxSizing: 'border-box',
@@ -60,30 +56,30 @@ const StyledOption = styled(OptionUnstyled)(({ theme }) => ({
   padding: `0 ${theme.spacing(4)}`,
   cursor: 'default',
   color: COLORS.white,
-  [`&:hover:not(.${optionUnstyledClasses.disabled})`]: {
+  [`&:hover:not(.${optionClasses.disabled})`]: {
     cursor: 'pointer',
   },
-  [`&:hover:not(.${optionUnstyledClasses.disabled}),
-  &.${optionUnstyledClasses.highlighted}`]: {
+  [`&:hover:not(.${optionClasses.disabled}),
+  &.${optionClasses.highlighted}`]: {
     backgroundColor: COLORS.brandExtraDark,
   },
-  [`&.${optionUnstyledClasses.disabled}`]: {
+  [`&.${optionClasses.disabled}`]: {
     backgroundColor: COLORS.lavenderGray,
   },
-  [`&&.${optionUnstyledClasses.selected}`]: {
+  [`&&.${optionClasses.selected}`]: {
     opacity: 0.5,
     backgroundColor: 'transparent',
   },
   transition: 'background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms',
 }))
 
-const StyledPopper = styled(PopperUnstyled)`
+const StyledPopper = styled(Popper)`
   z-index: 1;
 `
 
 const TertiaryButton = forwardRef(
   (
-    { children, ownerState, ...restProps }: SelectUnstyledRootSlotProps<object>,
+    { children, ownerState, ...restProps }: SelectRootSlotProps<object, false>,
     ref: ForwardedRef<HTMLButtonElement>,
   ) => {
     const { t } = useTranslation()
@@ -98,10 +94,10 @@ const TertiaryButton = forwardRef(
 )
 
 const CustomSelect = forwardRef(function CustomSelect<TValue extends string | number>(
-  props: SelectUnstyledProps<TValue>,
+  props: SelectProps<TValue, false>,
   ref: ForwardedRef<HTMLButtonElement>,
 ) {
-  const slots: SelectUnstyledProps<TValue>['slots'] = {
+  const slots: SelectProps<TValue, false>['slots'] = {
     root: TertiaryButton,
     listbox: StyledListbox,
     popper: StyledPopper,
@@ -110,15 +106,15 @@ const CustomSelect = forwardRef(function CustomSelect<TValue extends string | nu
 
   return <SelectUnstyled {...props} ref={ref} slots={slots} />
 }) as <TValue extends string | number>(
-  props: SelectUnstyledProps<TValue> & RefAttributes<HTMLButtonElement>,
+  props: SelectProps<TValue, false> & RefAttributes<HTMLButtonElement>,
 ) => JSX.Element
 
 export interface SelectOptionBase {
   label: string | number
   value: string | number
 }
 
-interface SelectProps<T extends SelectOptionBase> {
+interface SelectCmpProps<T extends SelectOptionBase> {
   label?: string
   options: T[]
   defaultValue?: T['value']
@@ -130,7 +126,7 @@ const SelectCmp = <T extends SelectOptionBase>({
   options,
   defaultValue,
   handleChange,
-}: SelectProps<T>): ReactElement => {
+}: SelectCmpProps<T>): ReactElement => {
   const selectId = useId()
 
   const onChange = useCallback(

src/app/components/TrimLinkLabel/__tests__/__snapshots__/index.test.tsx.snap

@@ -3,6 +3,11 @@
 exports[`TrimLinkLabel snapshot 1`] = `
 .emotion-0-MuiTypography-root-MuiLink-root {
   margin: 0;
+  font-family: inherit;
+  font-weight: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  letter-spacing: inherit;
   color: #0092f6;
   -webkit-text-decoration: underline;
   text-decoration: underline;