From fcb6535e72e53ab70e816922854b6f0db90788db Mon Sep 17 00:00:00 2001
From: Pascal Corpet <pcorpet@users.noreply.github.com>
Date: Mon, 4 Sep 2023 09:42:44 +0200
Subject: [PATCH] [Autocomplete] Type multiple values with readonly arrays.
 (#38253)

---
 .../components/autocomplete/GitHubLabel.tsx   |  7 +++++--
 .../components/autocomplete/GitHubLabel.tsx   |  7 +++++--
 .../src/useAutocomplete/useAutocomplete.d.ts  |  2 +-
 .../useAutocomplete/useAutocomplete.spec.ts   | 20 ++++++++++++++-----
 .../src/Autocomplete/Autocomplete.spec.tsx    |  2 +-
 5 files changed, 27 insertions(+), 11 deletions(-)

diff --git a/docs/data/joy/components/autocomplete/GitHubLabel.tsx b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
index 94e9591c81d235..7768c6d826c353 100644
--- a/docs/data/joy/components/autocomplete/GitHubLabel.tsx
+++ b/docs/data/joy/components/autocomplete/GitHubLabel.tsx
@@ -32,8 +32,11 @@ const Listbox = React.forwardRef<HTMLUListElement, any>((props, ref) => (
 
 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 handleClick = (event: React.MouseEvent<HTMLElement>) => {
     setPendingValue(value);
diff --git a/docs/data/material/components/autocomplete/GitHubLabel.tsx b/docs/data/material/components/autocomplete/GitHubLabel.tsx
index 0fda0625646300..af44599fdd9a7c 100644
--- a/docs/data/material/components/autocomplete/GitHubLabel.tsx
+++ b/docs/data/material/components/autocomplete/GitHubLabel.tsx
@@ -113,8 +113,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>) => {
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
index a045d5e84ba799..8c9190c923bbd8 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.d.ts
@@ -28,7 +28,7 @@ export function createFilterOptions<Value>(
 export type AutocompleteFreeSoloValueMapping<FreeSolo> = FreeSolo extends true ? string : never;
 
 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>;
diff --git a/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts b/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
index 268648a8de8fe0..e356fee64feb4a 100644
--- a/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
+++ b/packages/mui-base/src/useAutocomplete/useAutocomplete.spec.ts
@@ -73,7 +73,7 @@ function Component() {
     options: ['1', '2', '3'],
     multiple: true,
     onChange(event, value) {
-      expectType<string[], typeof value>(value);
+      expectType<readonly string[], typeof value>(value);
       value;
     },
   });
@@ -83,7 +83,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);
     },
   });
 
@@ -92,7 +92,7 @@ function Component() {
     options: persons,
     multiple: true,
     onChange(event, value) {
-      expectType<Person[], typeof value>(value);
+      expectType<readonly Person[], typeof value>(value);
       value;
     },
   });
@@ -101,7 +101,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
@@ -112,6 +112,16 @@ function Component() {
     },
   });
 
+  // values accepts const and value has correct type
+  useAutocomplete({
+    options: ['1', '2', '3'] as const,
+    multiple: true,
+    value: ['1', '3'] as const,
+    onChange(event, value) {
+      expectType<ReadonlyArray<'1' | '2' | '3'>, typeof value>(value);
+    },
+  });
+
   // Disable clearable
 
   useAutocomplete({
@@ -159,7 +169,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,
   });
diff --git a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
index 7dfd90ef228b2a..f56a5db765b04e 100644
--- a/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
+++ b/packages/mui-material/src/Autocomplete/Autocomplete.spec.tsx
@@ -45,7 +45,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