Skip to content

Commit 0dc6553

Browse files
fzaninottofzaninotto
authored
Merge pull request #11248 from smeng9/mui-v9-next
Add support MUI v9
2 parents 2baa897 + baeb9d0 commit 0dc6553

40 files changed

Lines changed: 260 additions & 126 deletions

‎packages/ra-core/src/form/FilterLiveForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import { useListContext } from '../controller/list/useListContext';
2424
* at other places to create your own filter UI.
2525
*
2626
* @example
27-
* import MailIcon from '@mui/icons-material/MailOutline';
27+
* import MailIcon from '@mui/icons-material/MailOutlined';
2828
* import TitleIcon from '@mui/icons-material/Title';
2929
* import { Card, CardContent } from '@mui/material';
3030
* import * as React from 'react';

‎packages/ra-input-rich-text/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -34,8 +34,8 @@
3434
"clsx": "^2.1.1"
3535
},
3636
"peerDependencies": {
37-
"@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0",
38-
"@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0",
37+
"@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
38+
"@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
3939
"ra-core": "^5.0.0",
4040
"ra-ui-materialui": "^5.0.0",
4141
"react": "^18.0.0 || ^19.0.0",

‎packages/ra-no-code/package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,8 +35,8 @@
3535
"zshy": "^0.5.0"
3636
},
3737
"peerDependencies": {
38-
"@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0",
39-
"@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0",
38+
"@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
39+
"@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
4040
"react": "^18.0.0 || ^19.0.0",
4141
"react-dom": "^18.0.0 || ^19.0.0"
4242
},

‎packages/ra-ui-materialui/package.json‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -54,10 +54,10 @@
5454
"zshy": "^0.5.0"
5555
},
5656
"peerDependencies": {
57-
"@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0",
58-
"@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0",
59-
"@mui/system": "^5.15.20 || ^6.0.0 || ^7.0.0",
60-
"@mui/utils": "^5.15.20 || ^6.0.0 || ^7.0.0",
57+
"@mui/icons-material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
58+
"@mui/material": "^5.16.12 || ^6.0.0 || ^7.0.0 || ^9.0.0",
59+
"@mui/system": "^5.15.20 || ^6.0.0 || ^7.0.0 || ^9.0.0",
60+
"@mui/utils": "^5.15.20 || ^6.0.0 || ^7.0.0 || ^9.0.0",
6161
"@tanstack/react-query": "^5.83.0",
6262
"csstype": "^3.1.3",
6363
"ra-core": "^5.0.0",

‎packages/ra-ui-materialui/src/input/ArrayInput/AddItemButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import AddIcon from '@mui/icons-material/AddCircleOutline';
2+
import AddIcon from '@mui/icons-material/AddCircleOutlined';
33
import clsx from 'clsx';
44
import { useSimpleFormIterator } from 'ra-core';
55
import { IconButtonWithTooltip, ButtonProps } from '../../button';

‎packages/ra-ui-materialui/src/input/ArrayInput/RemoveItemButton.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import * as React from 'react';
2-
import CloseIcon from '@mui/icons-material/RemoveCircleOutline';
2+
import CloseIcon from '@mui/icons-material/RemoveCircleOutlined';
33
import clsx from 'clsx';
44
import { useSimpleFormIterator, useSimpleFormIteratorItem } from 'ra-core';
55

‎packages/ra-ui-materialui/src/input/AutocompleteInput.tsx‎

Lines changed: 30 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
TextField,
2121
type TextFieldProps,
2222
createFilterOptions,
23+
major as muiMajor,
2324
useForkRef,
2425
} from '@mui/material';
2526
import {
@@ -632,6 +633,32 @@ If you provided a React element for the optionText prop, you must also provide t
632633
return offline;
633634
}
634635

636+
const renderChips = (value, getProps: (args: { index: number }) => any) =>
637+
value.map((option, index) => {
638+
// We have to extract the key because react 19 does not allow to spread the key prop
639+
const { key, ...chipProps } = getProps({ index });
640+
// @ts-expect-error slotProps do not yet exist in MUI v5
641+
const mergedSlotProps = props.slotProps?.chip
642+
? // @ts-expect-error slotProps do not yet exist in MUI v5
643+
props.slotProps.chip
644+
: props.ChipProps;
645+
return (
646+
<Chip
647+
label={
648+
isValidElement(optionText)
649+
? inputText
650+
? inputText(option)
651+
: ''
652+
: getChoiceText(option)
653+
}
654+
size="small"
655+
key={key}
656+
{...chipProps}
657+
{...mergedSlotProps}
658+
/>
659+
);
660+
});
661+
635662
const finalLoadingText =
636663
typeof loadingText === 'string'
637664
? translate(loadingText, {
@@ -720,32 +747,9 @@ If you provided a React element for the optionText prop, you must also provide t
720747
);
721748
}}
722749
multiple={multiple}
723-
renderTags={(value, getTagProps) =>
724-
value.map((option, index) => {
725-
// We have to extract the key because react 19 does not allow to spread the key prop
726-
const { key, ...tagProps } = getTagProps({ index });
727-
// @ts-expect-error slotProps do not yet exist in MUI v5
728-
const mergedSlotProps = props.slotProps?.chip
729-
? // @ts-expect-error slotProps do not yet exist in MUI v5
730-
props.slotProps.chip
731-
: props.ChipProps;
732-
return (
733-
<Chip
734-
label={
735-
isValidElement(optionText)
736-
? inputText
737-
? inputText(option)
738-
: ''
739-
: getChoiceText(option)
740-
}
741-
size="small"
742-
key={key}
743-
{...tagProps}
744-
{...mergedSlotProps}
745-
/>
746-
);
747-
})
748-
}
750+
{...(muiMajor >= 7
751+
? { renderValue: renderChips }
752+
: { renderTags: renderChips })}
749753
noOptionsText={
750754
typeof noOptionsText === 'string'
751755
? translate(noOptionsText, { _: noOptionsText })

‎packages/ra-ui-materialui/src/input/DateInput.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { CommonInputProps } from './CommonInputProps';
1212
import { sanitizeInputRestProps } from './sanitizeInputRestProps';
1313
import { InputHelperText } from './InputHelperText';
14-
import { useForkRef } from '@mui/material';
14+
import { useForkRef, major as muiMajor } from '@mui/material';
1515

1616
/**
1717
* Form input to edit a Date string value in the "YYYY-MM-DD" format (e.g. '2021-06-23').
@@ -188,6 +188,16 @@ export const DateInput = (props: DateInputProps) => {
188188
const { ref, name } = field;
189189
const inputRef = useForkRef(ref, localInputRef);
190190

191+
const mergedSlotProps = {
192+
// @ts-expect-error slotProps do not yet exist in MUI v5
193+
...rest.slotProps,
194+
inputLabel: {
195+
...defaultInputLabelProps,
196+
// @ts-expect-error slotProps do not yet exist in MUI v5
197+
...rest.slotProps?.inputLabel,
198+
},
199+
};
200+
191201
return (
192202
<StyledTextField
193203
id={id}
@@ -226,6 +236,7 @@ export const DateInput = (props: DateInputProps) => {
226236
}
227237
InputLabelProps={defaultInputLabelProps}
228238
{...sanitizeInputRestProps(rest)}
239+
{...(muiMajor >= 6 ? { slotProps: mergedSlotProps } : {})}
229240
/>
230241
);
231242
};

‎packages/ra-ui-materialui/src/input/DateTimeInput.tsx‎

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ import {
1111
import { CommonInputProps } from './CommonInputProps';
1212
import { sanitizeInputRestProps } from './sanitizeInputRestProps';
1313
import { InputHelperText } from './InputHelperText';
14-
import { useForkRef } from '@mui/material';
14+
import { useForkRef, major as muiMajor } from '@mui/material';
1515

1616
/**
1717
* Input component for entering a date and a time with timezone, using the browser locale
@@ -147,6 +147,16 @@ export const DateTimeInput = (props: DateTimeInputProps) => {
147147
const { ref, name } = field;
148148
const inputRef = useForkRef(ref, localInputRef);
149149

150+
const mergedSlotProps = {
151+
// @ts-expect-error slotProps do not yet exist in MUI v5
152+
...rest.slotProps,
153+
inputLabel: {
154+
...defaultInputLabelProps,
155+
// @ts-expect-error slotProps do not yet exist in MUI v5
156+
...rest.slotProps?.inputLabel,
157+
},
158+
};
159+
150160
return (
151161
<StyledTextField
152162
id={id}
@@ -185,6 +195,7 @@ export const DateTimeInput = (props: DateTimeInputProps) => {
185195
}
186196
InputLabelProps={defaultInputLabelProps}
187197
{...sanitizeInputRestProps(rest)}
198+
{...(muiMajor >= 6 ? { slotProps: mergedSlotProps } : {})}
188199
/>
189200
);
190201
};

‎packages/ra-ui-materialui/src/input/FileInput.stories.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import { FileInput } from './FileInput';
99
import { FileField } from '../field';
1010
import { required } from 'ra-core';
1111
import { FormInspector } from './common';
12-
import DeleteIcon from '@mui/icons-material/DeleteOutline';
12+
import DeleteIcon from '@mui/icons-material/DeleteOutlined';
1313

1414
export default { title: 'ra-ui-materialui/input/FileInput' };
1515

0 commit comments

Comments
 (0)