Update dependency mui to v9.x

This commit is contained in:
schroda
2026-04-25 17:14:08 +02:00
parent 8155bd6906
commit f95b0c8bcc
30 changed files with 191 additions and 272 deletions

View File

@@ -35,19 +35,15 @@ export const SelectionFAB: React.FC<SelectionFABProps> = ({ children, title }) =
{(popupState) => (
<>
<FabContainer {...bindTrigger(popupState)}>
<Fab variant="extended" color="primary" id="selectionMenuButton">
<Fab variant="extended" color="primary">
{title}
<MoreHoriz sx={{ ml: 1 }} />
</Fab>
</FabContainer>
<Menu
{...bindMenu(popupState)}
id="selectionMenu"
anchorOrigin={{ horizontal: 'right', vertical: 'top' }}
transformOrigin={{ horizontal: 'right', vertical: 'bottom' }}
MenuListProps={{
'aria-labelledby': 'selectionMenuButton',
}}
>
{(onClose, setHideMenu) => children(onClose, setHideMenu)}
</Menu>

View File

@@ -59,7 +59,9 @@ export function GridLayouts({
anchorEl={anchorEl}
open={open}
onClose={handleClose}
MenuListProps={{ 'aria-labelledby': 'basic-button' }}
slotProps={{
list: { 'aria-labelledby': 'basic-button' }
}}
>
<MenuItem onClick={handleClose}>
<FormControlLabel

View File

@@ -22,11 +22,12 @@ export const SearchTextField = ({
{...textFieldProps}
slotProps={{
input: {
...textFieldProps.InputProps,
...textFieldProps.slotProps?.input,
sx: {
color: 'inherit',
},
endAdornment: textFieldProps.InputProps?.endAdornment ?? (
// @ts-expect-error - "endAdornment" does not exist mimimi - fuck off
endAdornment: textFieldProps.slotProps?.input?.endAdornment ?? (
<InputAdornment position="end">
<IconButton {...cancelButtonProps} onClick={() => onCancel()}>
<CancelIcon />

View File

@@ -13,7 +13,7 @@ export const Select = <Value,>({
maxSelectionHeightPx = 250,
...props
}: React.ComponentProps<typeof MuiSelect<Value>> & { maxSelectionHeightPx?: number }) => (
<MuiSelect<Value> MenuProps={{ PaperProps: { style: { maxHeight: maxSelectionHeightPx } } }} {...props}>
<MuiSelect<Value> MenuProps={{ slotProps: { paper: { sx: { maxHeight: maxSelectionHeightPx } } } }} {...props}>
{children}
</MuiSelect>
);

View File

@@ -22,12 +22,14 @@ export const OptionsPanel: React.FC<IProps> = ({ open, onClose, children, minHei
anchor="bottom"
open={open}
onClose={onClose}
PaperProps={{
style: {
maxWidth: 600,
marginLeft: 'auto',
marginRight: 'auto',
minHeight,
slotProps={{
paper: {
sx: {
maxWidth: 600,
marginLeft: 'auto',
marginRight: 'auto',
minHeight,
},
},
}}
>

View File

@@ -82,7 +82,9 @@ export const DateSetting = ({
<ListItemText
primary={settingName}
secondary={value ? dayjs(Number(value)).format('L') : '-'}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
slotProps={{
secondary: { sx: { display: 'flex', flexDirection: 'column' } },
}}
/>
</ListItemButton>
<Dialog open={isDialogOpen} onClose={closeDialog}>

View File

@@ -152,8 +152,10 @@ export const MutableListSetting = ({
<ListItemText
primary={settingName}
secondary={values?.length ? values?.join(', ') : description}
secondaryTypographyProps={{
style: { display: 'flex', flexDirection: 'column', wordBreak: 'break-word' },
slotProps={{
secondary: {
sx: { display: 'flex', flexDirection: 'column', wordBreak: 'break-word' },
},
}}
/>
</ListItemButton>

View File

@@ -122,7 +122,9 @@ export const NumberSetting = ({
primary={settingTitle}
secondary={settingValue}
sx={sx}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
slotProps={{
secondary: { sx: { display: 'flex', flexDirection: 'column' } },
}}
/>
</ListItemButton>
<Dialog open={isDialogOpen} onClose={cancel}>

View File

@@ -82,7 +82,9 @@ export const SelectSetting = <SettingValue extends string | number>({
<ListItemText
primary={settingName}
secondary={valueDisplayText ? t(valueDisplayText as MessageDescriptor) : t`Loading…`}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
slotProps={{
secondary: { sx: { display: 'flex', flexDirection: 'column' } },
}}
/>
</ListItemButton>
<Dialog open={isDialogOpen} onClose={() => closeDialog()} fullWidth>

View File

@@ -79,7 +79,9 @@ export const TimeSetting = ({
<ListItemText
primary={settingName}
secondary={dayjs(value, 'HH:mm').format('LT')}
secondaryTypographyProps={{ style: { display: 'flex', flexDirection: 'column' } }}
slotProps={{
secondary: { sx: { display: 'flex', flexDirection: 'column' } },
}}
/>
</ListItemButton>
<Dialog open={isDialogOpen} onClose={closeDialog}>

View File

@@ -29,12 +29,13 @@ export const TextSetting = (props: TextSettingProps) => {
<ListItemText
primary={settingName}
secondary={settingDescription ?? (isPassword ? value.replaceAll(/./g, '*') : value)}
secondaryTypographyProps={{
sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
slotProps={{
secondary: {
sx: { display: 'flex', flexDirection: 'column', wordWrap: 'break-word' },
}
}}
/>
</ListItemButton>
<TextSettingDialog {...props} isDialogOpen={isDialogOpen} setIsDialogOpen={setIsDialogOpen} />
</>
);