[AutoComplete] Readonly Array value

docs/data/material/components/autocomplete/GitHubLabel.tsx

@@ -132,8 +132,11 @@ const Button = styled(ButtonBase)(({ theme }) => ({
 
 export default function GitHubLabel() {
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
-  const [value, setValue] = React.useState<LabelType[]>([labels[1], labels[11]]);
-  const [pendingValue, setPendingValue] = React.useState<LabelType[]>([]);
+  const [value, setValue] = React.useState<readonly LabelType[]>([
+    labels[1],
+    labels[11],
+  ]);
+  const [pendingValue, setPendingValue] = React.useState<readonly LabelType[]>([]);
   const theme = useTheme();
 
   const handleClick = (event: React.MouseEvent<HTMLElement>) => {

packages/mui-material/src/Autocomplete/Autocomplete.d.ts

@@ -80,7 +80,7 @@ export type AutocompleteRenderValueGetItemProps<Multiple extends boolean | undef
       };
 
 export type AutocompleteRenderValue<Value, Multiple, FreeSolo> = Multiple extends true
-  ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>
+  ? ReadonlyArray<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>
   : NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>;
 
 export interface AutocompleteRenderOptionState {

packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx

@@ -46,7 +46,7 @@ function MyAutocomplete<
 <MyAutocomplete
   options={['1', '2', '3']}
   onChange={(event, value) => {
-    expectType<string[], typeof value>(value);
+    expectType<readonly string[], typeof value>(value);
   }}
   renderInput={() => null}
   multiple

packages/mui-material/src/useAutocomplete/useAutocomplete.d.ts

@@ -33,7 +33,7 @@ export type AutocompleteValueOrFreeSoloValueMapping<Value, FreeSolo> = FreeSolo
   : Value;
 
 export type AutocompleteValue<Value, Multiple, DisableClearable, FreeSolo> = Multiple extends true
-  ? Array<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>
+  ? ReadonlyArray<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>
   : DisableClearable extends true
     ? NonNullable<Value | AutocompleteFreeSoloValueMapping<FreeSolo>>
     : Value | null | AutocompleteFreeSoloValueMapping<FreeSolo>;

packages/mui-material/src/useAutocomplete/useAutocomplete.spec.ts

@@ -77,7 +77,7 @@ function Component() {
     options: ['1', '2', '3'],
     multiple: true,
     onChange(event, value) {
-      expectType<string[], typeof value>(value);
+      expectType<readonly string[], typeof value>(value);
       value;
     },
   });
@@ -87,7 +87,7 @@ function Component() {
     options: ['1', '2', '3', 4, true],
     multiple: true,
     onChange(event, value) {
-      expectType<Array<string | number | boolean>, typeof value>(value);
+      expectType<ReadonlyArray<string | number | boolean>, typeof value>(value);
     },
   });
 
@@ -96,7 +96,7 @@ function Component() {
     options: persons,
     multiple: true,
     onChange(event, value) {
-      expectType<Person[], typeof value>(value);
+      expectType<readonly Person[], typeof value>(value);
       value;
     },
   });
@@ -105,7 +105,7 @@ function Component() {
   useAutocomplete({
     options: persons,
     multiple: true,
-    onChange(event, value: Person[]) {},
+    onChange(event, value: readonly Person[]) {},
   });
 
   // options accepts const and value has correct type
@@ -163,7 +163,7 @@ function Component() {
     options: persons,
     multiple: true,
     onChange(event, value) {
-      expectType<Array<string | Person>, typeof value>(value);
+      expectType<ReadonlyArray<string | Person>, typeof value>(value);
     },
     freeSolo: true,
   });

packages/mui-material/test/typescript/moduleAugmentation/autocompleteCustomSlotProps.spec.tsx

@@ -7,14 +7,18 @@ import TextField from '@mui/material/TextField';
 
 declare module '@mui/material/Autocomplete' {
   interface AutocompletePaperSlotPropsOverrides {
-    value: Option[];
+    value: readonly Option[];
   }
   interface AutocompletePopperSlotPropsOverrides {
-    value: Option[];
+    value: readonly Option[];
   }
 }
 
-function CustomPaper({ children, value, ...paperProps }: PaperProps & { value: Option[] }) {
+function CustomPaper({
+  children,
+  value,
+  ...paperProps
+}: PaperProps & { value: readonly Option[] }) {
   return (
     <Paper {...paperProps} onMouseDown={(event) => event.preventDefault()}>
       {children}
@@ -23,7 +27,11 @@ function CustomPaper({ children, value, ...paperProps }: PaperProps & { value: O
   );
 }
 
-function CustomPopper({ children, value, ...popperProps }: PopperProps & { value: Option[] }) {
+function CustomPopper({
+  children,
+  value,
+  ...popperProps
+}: PopperProps & { value: readonly Option[] }) {
   return (
     <Popper {...popperProps}>
       {children as React.ReactNode}
@@ -38,7 +46,7 @@ interface Option {
 }
 
 function App() {
-  const [value, setValue] = React.useState<Option[]>([]);
+  const [value, setValue] = React.useState<readonly Option[]>([]);
 
   return (
     <React.Fragment>