From a367c25dcaaddf5e72cceb5a9d8ef571607486c2 Mon Sep 17 00:00:00 2001
From: Paul Kristoffersson
 <57681017+PaulKristoffersson@users.noreply.github.com>
Date: Tue, 20 Feb 2024 06:03:21 +0100
Subject: [PATCH] [material-ui][TablePagination] Fix type error in Select props
 (#39137)

---
 .../selects/MultipleSelectNative.tsx          |  2 +-
 packages/mui-material/src/Select/Select.d.ts  | 57 ++++++++++++++++---
 .../TablePagination/TablePagination.spec.tsx  |  6 ++
 3 files changed, 57 insertions(+), 8 deletions(-)

diff --git a/docs/data/material/components/selects/MultipleSelectNative.tsx b/docs/data/material/components/selects/MultipleSelectNative.tsx
index 3f18c7d3fa71a3..6960536ac9cbe6 100644
--- a/docs/data/material/components/selects/MultipleSelectNative.tsx
+++ b/docs/data/material/components/selects/MultipleSelectNative.tsx
@@ -35,7 +35,7 @@ export default function MultipleSelectNative() {
         <InputLabel shrink htmlFor="select-multiple-native">
           Native
         </InputLabel>
-        <Select
+        <Select<string[]>
           multiple
           native
           value={personName}
diff --git a/packages/mui-material/src/Select/Select.d.ts b/packages/mui-material/src/Select/Select.d.ts
index 836bb7666d0dcf..e62fed42ba5f97 100644
--- a/packages/mui-material/src/Select/Select.d.ts
+++ b/packages/mui-material/src/Select/Select.d.ts
@@ -6,12 +6,12 @@ import { MenuProps } from '../Menu';
 import { SelectChangeEvent, SelectInputProps } from './SelectInput';
 import { SelectClasses } from './selectClasses';
 import { OutlinedInputProps } from '../OutlinedInput';
+import { FilledInputProps } from '../FilledInput';
 
 export { SelectChangeEvent };
 
-export interface SelectProps<Value = unknown>
-  extends StandardProps<InputProps, 'value' | 'onChange'>,
-    Omit<OutlinedInputProps, 'value' | 'onChange'> {
+export interface BaseSelectProps<Value = unknown>
+  extends StandardProps<InputProps, 'value' | 'onChange'> {
   /**
    * If `true`, the width of the popover will automatically be set according to the items inside the
    * menu, otherwise it will be at least the width of the select input.
@@ -148,9 +148,45 @@ export interface SelectProps<Value = unknown>
    * The variant to use.
    * @default 'outlined'
    */
-  variant?: 'standard' | 'outlined' | 'filled';
+  variant?: 'filled' | 'standard' | 'outlined';
 }
 
+export interface FilledSelectProps extends Omit<FilledInputProps, 'value' | 'onChange'> {
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: 'filled';
+}
+
+export interface StandardSelectProps extends Omit<InputProps, 'value' | 'onChange'> {
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: 'standard';
+}
+
+export interface OutlinedSelectProps extends Omit<OutlinedInputProps, 'value' | 'onChange'> {
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  variant: 'outlined';
+}
+
+export type SelectVariants = 'outlined' | 'standard' | 'filled';
+
+export type SelectProps<
+  Value = unknown,
+  Variant extends SelectVariants = SelectVariants,
+> = BaseSelectProps<Value> &
+  (Variant extends 'filled'
+    ? FilledSelectProps
+    : Variant extends 'standard'
+    ? StandardSelectProps
+    : OutlinedSelectProps);
+
 /**
  *
  * Demos:
@@ -162,8 +198,15 @@ export interface SelectProps<Value = unknown>
  * - [Select API](https://mui.com/material-ui/api/select/)
  * - inherits [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
  */
-declare const Select: (<Value>(props: SelectProps<Value>) => JSX.Element) & {
+
+export default function Select<Value = unknown, Variant extends SelectVariants = 'outlined'>(
+  props: {
+    /**
+     * The variant to use.
+     * @default 'outlined'
+     */
+    variant?: Variant;
+  } & Omit<SelectProps<Value, Variant>, 'variant'>,
+): JSX.Element & {
   muiName: string;
 };
-
-export default Select;
diff --git a/packages/mui-material/src/TablePagination/TablePagination.spec.tsx b/packages/mui-material/src/TablePagination/TablePagination.spec.tsx
index 63414349713428..ddeee0cf3f1216 100644
--- a/packages/mui-material/src/TablePagination/TablePagination.spec.tsx
+++ b/packages/mui-material/src/TablePagination/TablePagination.spec.tsx
@@ -84,5 +84,11 @@ function classesTest() {
         fill: 'currentColor',
       },
     },
+    select: {
+      size: 'small',
+      variant: 'filled',
+      hiddenLabel: true,
+      disableUnderline: true,
+    },
   }}
 />;