[Autocomplete] Type multiple values with readonly arrays. (mui#38253)

xcode-it · Sep 11, 2023 · fcb6535 · fcb6535
1 parent c84d78d
commit fcb6535
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 11 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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