From 5242d7e39f347d53f121586d7109e112439198d7 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Fri, 3 Mar 2023 20:11:35 +0000
Subject: [PATCH 01/13] feat: make error part of the ownerState when overriding
 styles within a custom theme for MuiSelect

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../src/NativeSelect/NativeSelectInput.d.ts   |  1 +
 .../src/NativeSelect/NativeSelectInput.js     | 13 ++++-
 .../src/NativeSelect/nativeSelectClasses.ts   |  3 +
 packages/mui-material/src/Select/Select.js    |  9 ++-
 .../mui-material/src/Select/Select.test.js    | 56 +++++++++++++++++++
 .../mui-material/src/Select/SelectInput.d.ts  |  1 +
 .../mui-material/src/Select/SelectInput.js    | 13 ++++-
 .../mui-material/src/Select/selectClasses.ts  |  3 +
 8 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts b/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts
index 4dd9d0fc05d670..bca7299cdce3cd 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.d.ts
@@ -7,6 +7,7 @@ export interface NativeSelectInputProps extends React.SelectHTMLAttributes<HTMLS
   IconComponent: React.ElementType;
   inputRef?: React.Ref<HTMLSelectElement>;
   variant?: 'standard' | 'outlined' | 'filled';
+  error?: boolean;
   sx?: SxProps<Theme>;
 }
 
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index 95bdcdbae34b77..14da491fc2aa5c 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -8,10 +8,10 @@ import nativeSelectClasses, { getNativeSelectUtilityClasses } from './nativeSele
 import styled, { rootShouldForwardProp } from '../styles/styled';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, variant, disabled, multiple, open } = ownerState;
+  const { classes, variant, disabled, multiple, open, error } = ownerState;
 
   const slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
   };
 
@@ -80,6 +80,7 @@ const NativeSelectSelect = styled('select', {
     return [
       styles.select,
       styles[ownerState.variant],
+      styles[ownerState.error],
       { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
     ];
   },
@@ -124,12 +125,13 @@ const NativeSelectIcon = styled('svg', {
  * @ignore - internal component.
  */
 const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
-  const { className, disabled, IconComponent, inputRef, variant = 'standard', ...other } = props;
+  const { className, disabled, error, IconComponent, inputRef, variant = 'standard', ...other } = props;
 
   const ownerState = {
     ...props,
     disabled,
     variant,
+    error,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -168,6 +170,11 @@ NativeSelectInput.propTypes = {
    * If `true`, the select is disabled.
    */
   disabled: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   * The prop defaults to the value (`false`).
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */
diff --git a/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts b/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
index 7dae35c59ad08b..4a509303c8b5e3 100644
--- a/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
+++ b/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
@@ -28,6 +28,8 @@ export interface NativeSelectClasses {
   iconStandard: string;
   /** Styles applied to the underlying native input component. */
   nativeInput: string;
+  /** State class applied to the select component `error` class. */
+  error: string;
 }
 
 export type NativeSelectClassKey = keyof NativeSelectClasses;
@@ -50,6 +52,7 @@ const nativeSelectClasses: NativeSelectClasses = generateUtilityClasses('MuiNati
   'iconOutlined',
   'iconStandard',
   'nativeInput',
+  'error'
 ]);
 
 export default nativeSelectClasses;
diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index 75cd04eac98857..cf566d5060ba57 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/packages/mui-material/src/Select/Select.js
@@ -41,6 +41,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
     className,
     defaultOpen = false,
     displayEmpty = false,
+    error,
     IconComponent = ArrowDropDownIcon,
     id,
     input,
@@ -65,7 +66,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['variant'],
+    states: ['variant', 'error'],
   });
 
   const variant = fcs.variant || variantProp;
@@ -91,6 +92,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
         inputComponent,
         inputProps: {
           children,
+          error: fcs.error,
           IconComponent,
           variant,
           type: undefined, // We render a select. We can ignore the type provided by the `Input`.
@@ -172,6 +174,11 @@ Select.propTypes /* remove-proptypes */ = {
    * @default false
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    * @default ArrowDropDownIcon
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 1f9dd561466348..104ff61508810e 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1439,6 +1439,62 @@ describe('<Select />', () => {
     expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
   });
 
+  it('it should override with error style when `select` has `error` state', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const iconStyle = { color: 'red' };
+    const selectStyle = { color: 'pink' };
+    const nativeInputStyle = { border: '1px solid orange' };
+    const rootStyle = { color: 'darkorange' };
+
+    const theme = createTheme({
+      components: {
+        MuiSelect: {
+          styleOverrides: {
+            root: (props) => {
+              return {
+                ...(props.ownerState.error && rootStyle)
+              }
+            },
+            icon: (props) => {
+              return {
+                ...(props.ownerState.error && iconStyle)
+              }
+            },
+            nativeInput: (props) => {
+              return {
+                ...(props.ownerState.error && nativeInputStyle)
+              }
+            },
+            select: (props) => {
+              return {
+                ...(props.ownerState.error && selectStyle)
+              }
+            }
+          },
+        },
+      },
+    });
+
+    const { container, getByTestId } = render(
+      <ThemeProvider theme={theme}>
+        <Select error value="first" data-testid="select">
+          <MenuItem value="first" />
+          <MenuItem value="second" />
+        </Select>
+      </ThemeProvider>,
+    );
+
+    expect(getByTestId('select')).toHaveComputedStyle(rootStyle);
+    expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
+    expect(container.getElementsByClassName(classes.icon)[0]).to.toHaveComputedStyle(iconStyle);
+    expect(container.getElementsByClassName(classes.nativeInput)[0]).to.toHaveComputedStyle(
+      nativeInputStyle,
+    );
+  });
+
   ['standard', 'outlined', 'filled'].forEach((variant) => {
     it(`variant overrides should work for "${variant}" variant`, function test() {
       const theme = createTheme({
diff --git a/packages/mui-material/src/Select/SelectInput.d.ts b/packages/mui-material/src/Select/SelectInput.d.ts
index 43e29c9212e238..ab2bfb4e70fe02 100644
--- a/packages/mui-material/src/Select/SelectInput.d.ts
+++ b/packages/mui-material/src/Select/SelectInput.d.ts
@@ -17,6 +17,7 @@ export interface SelectInputProps<T = unknown> {
   autoWidth: boolean;
   defaultOpen?: boolean;
   disabled?: boolean;
+  error?: boolean;
   IconComponent?: React.ElementType;
   inputRef?: (
     ref: HTMLSelectElement | { node: HTMLInputElement; value: SelectInputProps<T>['value'] },
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index 2bb926fd16f3e0..b3f3461fec6eaf 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -27,6 +27,7 @@ const SelectSelect = styled('div', {
       // Win specificity over the input base
       { [`&.${selectClasses.select}`]: styles.select },
       { [`&.${selectClasses.select}`]: styles[ownerState.variant] },
+      { [`&.${selectClasses.error}`]: styles[ownerState.error] },
       { [`&.${selectClasses.multiple}`]: styles.multiple },
     ];
   },
@@ -83,10 +84,10 @@ function isEmpty(display) {
 }
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, variant, disabled, multiple, open } = ownerState;
+  const { classes, variant, disabled, multiple, open, error } = ownerState;
 
   const slots = {
-    select: ['select', variant, disabled && 'disabled', multiple && 'multiple'],
+    select: ['select', variant, disabled && 'disabled', multiple && 'multiple', error && 'error'],
     icon: ['icon', `icon${capitalize(variant)}`, open && 'iconOpen', disabled && 'disabled'],
     nativeInput: ['nativeInput'],
   };
@@ -109,6 +110,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     defaultValue,
     disabled,
     displayEmpty,
+    error = false,
     IconComponent,
     inputRef: inputRefProp,
     labelId,
@@ -475,6 +477,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
     variant,
     value,
     open,
+    error,
   };
 
   const classes = useUtilityClasses(ownerState);
@@ -510,6 +513,7 @@ const SelectInput = React.forwardRef(function SelectInput(props, ref) {
         )}
       </SelectSelect>
       <SelectNativeInput
+        aria-invalid={error}
         value={Array.isArray(value) ? value.join(',') : value}
         name={name}
         ref={inputRef}
@@ -606,6 +610,11 @@ SelectInput.propTypes = {
    * If `true`, the selected item is displayed even if its value is empty.
    */
   displayEmpty: PropTypes.bool,
+  /**
+   * If `true`, the `select input` will indicate an error.
+   * The prop defaults to the value (`false`).
+   */
+  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    */
diff --git a/packages/mui-material/src/Select/selectClasses.ts b/packages/mui-material/src/Select/selectClasses.ts
index 718cd4e34a5474..556196282b771e 100644
--- a/packages/mui-material/src/Select/selectClasses.ts
+++ b/packages/mui-material/src/Select/selectClasses.ts
@@ -26,6 +26,8 @@ export interface SelectClasses {
   iconStandard: string;
   /** Styles applied to the underlying native input component. */
   nativeInput: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
 }
 
 export type SelectClassKey = keyof SelectClasses;
@@ -48,6 +50,7 @@ const selectClasses: SelectClasses = generateUtilityClasses('MuiSelect', [
   'iconOutlined',
   'iconStandard',
   'nativeInput',
+  'error',
 ]);
 
 export default selectClasses;

From 8b49b8c46e40391ef3eab6f3d02a30b07dec1c2f Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 8 Mar 2023 09:42:26 +0000
Subject: [PATCH 02/13] test: fix for failing CI checks

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../NativeSelect/NativeSelectInput.test.js    | 39 +++++++++++++
 .../mui-material/src/Select/Select.test.js    | 56 -------------------
 2 files changed, 39 insertions(+), 56 deletions(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
index fe3d3b2e3497c6..a620ab4073081c 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -111,4 +111,43 @@ describe('<NativeSelectInput />', () => {
       ).to.toHaveComputedStyle(combinedStyle);
     });
   });
+
+  it('it should override with error style when `select` has `error` state', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const iconStyle = { color: 'rgb(255, 0, 0)' };
+    const selectStyle = { color: 'rgb(255, 192, 203)' };
+
+    const theme = createTheme({
+      components: {
+        MuiNativeSelect: {
+          styleOverrides: {
+            icon: (props) => ({
+              ...(props.ownerState.error && iconStyle),
+            }),
+            select: (props) => ({
+              ...(props.ownerState.error && selectStyle),
+            }),
+          },
+        },
+      },
+    });
+
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <NativeSelectInput error IconComponent="div">
+          <option value={'first'}>First</option>
+          <option value={'second'}>Second</option>
+        </NativeSelectInput>
+      </ThemeProvider>,
+    );
+    expect(container.getElementsByClassName(nativeSelectClasses.select)[0]).to.toHaveComputedStyle(
+      selectStyle,
+    );
+    expect(container.getElementsByClassName(nativeSelectClasses.icon)[0]).to.toHaveComputedStyle(
+      iconStyle,
+    );
+  });
 });
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 104ff61508810e..1f9dd561466348 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1439,62 +1439,6 @@ describe('<Select />', () => {
     expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
   });
 
-  it('it should override with error style when `select` has `error` state', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
-
-    const iconStyle = { color: 'red' };
-    const selectStyle = { color: 'pink' };
-    const nativeInputStyle = { border: '1px solid orange' };
-    const rootStyle = { color: 'darkorange' };
-
-    const theme = createTheme({
-      components: {
-        MuiSelect: {
-          styleOverrides: {
-            root: (props) => {
-              return {
-                ...(props.ownerState.error && rootStyle)
-              }
-            },
-            icon: (props) => {
-              return {
-                ...(props.ownerState.error && iconStyle)
-              }
-            },
-            nativeInput: (props) => {
-              return {
-                ...(props.ownerState.error && nativeInputStyle)
-              }
-            },
-            select: (props) => {
-              return {
-                ...(props.ownerState.error && selectStyle)
-              }
-            }
-          },
-        },
-      },
-    });
-
-    const { container, getByTestId } = render(
-      <ThemeProvider theme={theme}>
-        <Select error value="first" data-testid="select">
-          <MenuItem value="first" />
-          <MenuItem value="second" />
-        </Select>
-      </ThemeProvider>,
-    );
-
-    expect(getByTestId('select')).toHaveComputedStyle(rootStyle);
-    expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
-    expect(container.getElementsByClassName(classes.icon)[0]).to.toHaveComputedStyle(iconStyle);
-    expect(container.getElementsByClassName(classes.nativeInput)[0]).to.toHaveComputedStyle(
-      nativeInputStyle,
-    );
-  });
-
   ['standard', 'outlined', 'filled'].forEach((variant) => {
     it(`variant overrides should work for "${variant}" variant`, function test() {
       const theme = createTheme({

From 1e31e8e6ff1c24aee41c62e7754670e6d30164cd Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 8 Mar 2023 10:24:10 +0000
Subject: [PATCH 03/13] style: fix code format

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../mui-material/src/NativeSelect/NativeSelectInput.js | 10 +++++++++-
 .../src/NativeSelect/nativeSelectClasses.ts            |  2 +-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index 14da491fc2aa5c..5e340d8613bed9 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -125,7 +125,15 @@ const NativeSelectIcon = styled('svg', {
  * @ignore - internal component.
  */
 const NativeSelectInput = React.forwardRef(function NativeSelectInput(props, ref) {
-  const { className, disabled, error, IconComponent, inputRef, variant = 'standard', ...other } = props;
+  const {
+    className,
+    disabled,
+    error,
+    IconComponent,
+    inputRef,
+    variant = 'standard',
+    ...other
+  } = props;
 
   const ownerState = {
     ...props,
diff --git a/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts b/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
index 4a509303c8b5e3..4d387b0cb9826e 100644
--- a/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
+++ b/packages/mui-material/src/NativeSelect/nativeSelectClasses.ts
@@ -52,7 +52,7 @@ const nativeSelectClasses: NativeSelectClasses = generateUtilityClasses('MuiNati
   'iconOutlined',
   'iconStandard',
   'nativeInput',
-  'error'
+  'error',
 ]);
 
 export default nativeSelectClasses;

From 9c1ec28d95bfc0389e3ce5dcd452c284e067f8cf Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 8 Mar 2023 10:42:55 +0000
Subject: [PATCH 04/13] chore: update proptypes definition

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 packages/mui-material/src/Select/Select.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index cf566d5060ba57..cb20ec3a85252e 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/packages/mui-material/src/Select/Select.js
@@ -175,7 +175,7 @@ Select.propTypes /* remove-proptypes */ = {
    */
   displayEmpty: PropTypes.bool,
   /**
-   * If `true`, the `select input` will indicate an error.
+   * If `true`, the `input` will indicate an error.
    * The prop defaults to the value (`false`) inherited from the parent FormControl component.
    */
   error: PropTypes.bool,

From 9a544ce67d068faf54be73d06813095f38862f62 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 8 Mar 2023 11:36:41 +0000
Subject: [PATCH 05/13] chore: update docs

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/pages/material-ui/api/native-select.json               | 5 +++--
 docs/pages/material-ui/api/select.json                      | 6 ++++--
 docs/translations/api-docs/native-select/native-select.json | 4 ++++
 docs/translations/api-docs/select/select.json               | 6 ++++++
 4 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/pages/material-ui/api/native-select.json b/docs/pages/material-ui/api/native-select.json
index a30b4e18bd48c0..6ad759edb4b8f2 100644
--- a/docs/pages/material-ui/api/native-select.json
+++ b/docs/pages/material-ui/api/native-select.json
@@ -35,9 +35,10 @@
       "iconFilled",
       "iconOutlined",
       "iconStandard",
-      "nativeInput"
+      "nativeInput",
+      "error"
     ],
-    "globalClasses": { "disabled": "Mui-disabled" },
+    "globalClasses": { "disabled": "Mui-disabled", "error": "Mui-error" },
     "name": "MuiNativeSelect"
   },
   "spread": true,
diff --git a/docs/pages/material-ui/api/select.json b/docs/pages/material-ui/api/select.json
index 90c314a55f5ec2..9ded8b9deea7a5 100644
--- a/docs/pages/material-ui/api/select.json
+++ b/docs/pages/material-ui/api/select.json
@@ -6,6 +6,7 @@
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "any" } },
     "displayEmpty": { "type": { "name": "bool" }, "default": "false" },
+    "error": { "type": { "name": "bool" } },
     "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" },
     "id": { "type": { "name": "string" } },
     "input": { "type": { "name": "element" } },
@@ -50,9 +51,10 @@
       "iconFilled",
       "iconOutlined",
       "iconStandard",
-      "nativeInput"
+      "nativeInput",
+      "error"
     ],
-    "globalClasses": { "disabled": "Mui-disabled" },
+    "globalClasses": { "disabled": "Mui-disabled", "error": "Mui-error" },
     "name": "MuiSelect"
   },
   "spread": true,
diff --git a/docs/translations/api-docs/native-select/native-select.json b/docs/translations/api-docs/native-select/native-select.json
index 52a6b0e4a5e45c..7e7314bfa92aa0 100644
--- a/docs/translations/api-docs/native-select/native-select.json
+++ b/docs/translations/api-docs/native-select/native-select.json
@@ -65,6 +65,10 @@
     "nativeInput": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the underlying native input component"
+    },
+    "error": {
+      "description": "State class applied to {{nodeName}}.",
+      "nodeName": "the select component `error` class"
     }
   }
 }
diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json
index 9375b66b2b851a..42e19b1c3054e5 100644
--- a/docs/translations/api-docs/select/select.json
+++ b/docs/translations/api-docs/select/select.json
@@ -7,6 +7,7 @@
     "defaultOpen": "If <code>true</code>, the component is initially open. Use when the component open state is not controlled (i.e. the <code>open</code> prop is not defined). You can only use it when the <code>native</code> prop is <code>false</code> (default).",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "displayEmpty": "If <code>true</code>, a value is displayed even if no items are selected.<br>In order to display a meaningful value, a function can be passed to the <code>renderValue</code> prop which returns the value to be displayed when no items are selected.<br>⚠️ When using this prop, make sure the label doesn&#39;t overlap with the empty displayed value. The label should either be hidden or forced to a shrunk state.",
+    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "IconComponent": "The icon that displays the arrow.",
     "id": "The <code>id</code> of the wrapper element or the <code>select</code> element when <code>native</code>.",
     "input": "An <code>Input</code> element; does not have to be a material-ui specific <code>Input</code>.",
@@ -79,6 +80,11 @@
     "nativeInput": {
       "description": "Styles applied to {{nodeName}}.",
       "nodeName": "the underlying native input component"
+    },
+    "error": {
+      "description": "State class applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>error={true}</code>"
     }
   }
 }

From 088cefc420482d3b24d907a3fa2e0ccdf128e012 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 23 Mar 2023 10:03:45 +0000
Subject: [PATCH 06/13] fix: select error border override

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 packages/mui-material/src/Select/Select.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index cb20ec3a85252e..88a32b5e8afab8 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/packages/mui-material/src/Select/Select.js
@@ -117,6 +117,7 @@ const Select = React.forwardRef(function Select(inProps, ref) {
         },
         ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
         ref: inputComponentRef,
+        error,
         className: clsx(InputComponent.props.className, className),
         // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
         ...(!input && { variant }),

From d3cb3ff79c5fee092b6822639c3376b248af0d0a Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 30 Mar 2023 07:41:05 +0000
Subject: [PATCH 07/13] feat: implement feedback

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../src/NativeSelect/NativeSelectInput.js     |  3 +-
 .../NativeSelect/NativeSelectInput.test.js    | 39 -----------
 packages/mui-material/src/Select/Select.js    | 19 ++----
 .../mui-material/src/Select/Select.test.js    | 65 +++++++++++++++++++
 .../mui-material/src/Select/SelectInput.js    |  3 +-
 5 files changed, 73 insertions(+), 56 deletions(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index 5e340d8613bed9..2c0c704f374bd5 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -80,7 +80,7 @@ const NativeSelectSelect = styled('select', {
     return [
       styles.select,
       styles[ownerState.variant],
-      styles[ownerState.error],
+      styles.error,
       { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
     ];
   },
@@ -180,7 +180,6 @@ NativeSelectInput.propTypes = {
   disabled: PropTypes.bool,
   /**
    * If `true`, the `select input` will indicate an error.
-   * The prop defaults to the value (`false`).
    */
   error: PropTypes.bool,
   /**
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
index a620ab4073081c..fe3d3b2e3497c6 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -111,43 +111,4 @@ describe('<NativeSelectInput />', () => {
       ).to.toHaveComputedStyle(combinedStyle);
     });
   });
-
-  it('it should override with error style when `select` has `error` state', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
-
-    const iconStyle = { color: 'rgb(255, 0, 0)' };
-    const selectStyle = { color: 'rgb(255, 192, 203)' };
-
-    const theme = createTheme({
-      components: {
-        MuiNativeSelect: {
-          styleOverrides: {
-            icon: (props) => ({
-              ...(props.ownerState.error && iconStyle),
-            }),
-            select: (props) => ({
-              ...(props.ownerState.error && selectStyle),
-            }),
-          },
-        },
-      },
-    });
-
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <NativeSelectInput error IconComponent="div">
-          <option value={'first'}>First</option>
-          <option value={'second'}>Second</option>
-        </NativeSelectInput>
-      </ThemeProvider>,
-    );
-    expect(container.getElementsByClassName(nativeSelectClasses.select)[0]).to.toHaveComputedStyle(
-      selectStyle,
-    );
-    expect(container.getElementsByClassName(nativeSelectClasses.icon)[0]).to.toHaveComputedStyle(
-      iconStyle,
-    );
-  });
 });
diff --git a/packages/mui-material/src/Select/Select.js b/packages/mui-material/src/Select/Select.js
index 88a32b5e8afab8..deff5dda5dd855 100644
--- a/packages/mui-material/src/Select/Select.js
+++ b/packages/mui-material/src/Select/Select.js
@@ -41,7 +41,6 @@ const Select = React.forwardRef(function Select(inProps, ref) {
     className,
     defaultOpen = false,
     displayEmpty = false,
-    error,
     IconComponent = ArrowDropDownIcon,
     id,
     input,
@@ -71,17 +70,17 @@ const Select = React.forwardRef(function Select(inProps, ref) {
 
   const variant = fcs.variant || variantProp;
 
+  const ownerState = { ...props, variant, classes: classesProp };
+  const classes = useUtilityClasses(ownerState);
+
   const InputComponent =
     input ||
     {
-      standard: <StyledInput />,
-      outlined: <StyledOutlinedInput label={label} />,
-      filled: <StyledFilledInput />,
+      standard: <StyledInput ownerState={ownerState} />,
+      outlined: <StyledOutlinedInput label={label} ownerState={ownerState} />,
+      filled: <StyledFilledInput ownerState={ownerState} />,
     }[variant];
 
-  const ownerState = { ...props, variant, classes: classesProp };
-  const classes = useUtilityClasses(ownerState);
-
   const inputComponentRef = useForkRef(ref, InputComponent.ref);
 
   return (
@@ -117,7 +116,6 @@ const Select = React.forwardRef(function Select(inProps, ref) {
         },
         ...(multiple && native && variant === 'outlined' ? { notched: true } : {}),
         ref: inputComponentRef,
-        error,
         className: clsx(InputComponent.props.className, className),
         // If a custom input is provided via 'input' prop, do not allow 'variant' to be propagated to it's root element. See https://github.com/mui/material-ui/issues/33894.
         ...(!input && { variant }),
@@ -175,11 +173,6 @@ Select.propTypes /* remove-proptypes */ = {
    * @default false
    */
   displayEmpty: PropTypes.bool,
-  /**
-   * If `true`, the `input` will indicate an error.
-   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
-   */
-  error: PropTypes.bool,
   /**
    * The icon that displays the arrow.
    * @default ArrowDropDownIcon
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 1f9dd561466348..f682bdd93958b1 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -18,6 +18,7 @@ import InputLabel from '@mui/material/InputLabel';
 import Select from '@mui/material/Select';
 import Divider from '@mui/material/Divider';
 import classes from './selectClasses';
+import { nativeSelectClasses } from '../NativeSelect';
 
 describe('<Select />', () => {
   const { clock, render } = createRenderer({ clock: 'fake' });
@@ -1439,6 +1440,70 @@ describe('<Select />', () => {
     expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
   });
 
+  it('it should override with error style when `native select` has `error` state', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const iconStyle = { color: 'rgb(255, 0, 0)' };
+
+    const theme = createTheme({
+      components: {
+        MuiNativeSelect: {
+          styleOverrides: {
+            icon: (props) => ({
+              ...(props.ownerState.error && iconStyle),
+            }),
+          },
+        },
+      },
+    });
+
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Select value="first" error IconComponent="div" native>
+          <option value="first">first</option>
+        </Select>
+      </ThemeProvider>,
+    );
+
+    expect(container.getElementsByClassName(nativeSelectClasses.icon)[0]).to.toHaveComputedStyle(
+      iconStyle,
+    );
+  });
+
+  it('it should override with error style when `select` has `error` state', function test() {
+    if (/jsdom/.test(window.navigator.userAgent)) {
+      this.skip();
+    }
+
+    const iconStyle = { color: 'rgb(255, 0, 0)' };
+    const selectStyle = { color: 'rgb(255, 192, 203)' };
+
+    const theme = createTheme({
+      components: {
+        MuiSelect: {
+          styleOverrides: {
+            icon: (props) => ({
+              ...(props.ownerState.error && iconStyle),
+            }),
+            select: (props) => ({
+              ...(props.ownerState.error && selectStyle),
+            }),
+          },
+        },
+      },
+    });
+
+    const { container } = render(
+      <ThemeProvider theme={theme}>
+        <Select value="" error IconComponent="div" />
+      </ThemeProvider>,
+    );
+    expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
+    expect(container.getElementsByClassName(classes.icon)[0]).to.toHaveComputedStyle(iconStyle);
+  });
+
   ['standard', 'outlined', 'filled'].forEach((variant) => {
     it(`variant overrides should work for "${variant}" variant`, function test() {
       const theme = createTheme({
diff --git a/packages/mui-material/src/Select/SelectInput.js b/packages/mui-material/src/Select/SelectInput.js
index b3f3461fec6eaf..f7d90667cc2ac0 100644
--- a/packages/mui-material/src/Select/SelectInput.js
+++ b/packages/mui-material/src/Select/SelectInput.js
@@ -27,7 +27,7 @@ const SelectSelect = styled('div', {
       // Win specificity over the input base
       { [`&.${selectClasses.select}`]: styles.select },
       { [`&.${selectClasses.select}`]: styles[ownerState.variant] },
-      { [`&.${selectClasses.error}`]: styles[ownerState.error] },
+      { [`&.${selectClasses.error}`]: styles.error },
       { [`&.${selectClasses.multiple}`]: styles.multiple },
     ];
   },
@@ -612,7 +612,6 @@ SelectInput.propTypes = {
   displayEmpty: PropTypes.bool,
   /**
    * If `true`, the `select input` will indicate an error.
-   * The prop defaults to the value (`false`).
    */
   error: PropTypes.bool,
   /**

From 80e15a865ee33465233fc85ab2d51a9607c08529 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Thu, 30 Mar 2023 13:11:03 +0000
Subject: [PATCH 08/13] fix: resolve ci error

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/pages/material-ui/api/select.json        | 1 -
 docs/translations/api-docs/select/select.json | 1 -
 2 files changed, 2 deletions(-)

diff --git a/docs/pages/material-ui/api/select.json b/docs/pages/material-ui/api/select.json
index 48d72d0f2db400..75511f6656161f 100644
--- a/docs/pages/material-ui/api/select.json
+++ b/docs/pages/material-ui/api/select.json
@@ -6,7 +6,6 @@
     "defaultOpen": { "type": { "name": "bool" }, "default": "false" },
     "defaultValue": { "type": { "name": "any" } },
     "displayEmpty": { "type": { "name": "bool" }, "default": "false" },
-    "error": { "type": { "name": "bool" } },
     "IconComponent": { "type": { "name": "elementType" }, "default": "ArrowDropDownIcon" },
     "id": { "type": { "name": "string" } },
     "input": { "type": { "name": "element" } },
diff --git a/docs/translations/api-docs/select/select.json b/docs/translations/api-docs/select/select.json
index 42e19b1c3054e5..d821115dcd5e19 100644
--- a/docs/translations/api-docs/select/select.json
+++ b/docs/translations/api-docs/select/select.json
@@ -7,7 +7,6 @@
     "defaultOpen": "If <code>true</code>, the component is initially open. Use when the component open state is not controlled (i.e. the <code>open</code> prop is not defined). You can only use it when the <code>native</code> prop is <code>false</code> (default).",
     "defaultValue": "The default value. Use when the component is not controlled.",
     "displayEmpty": "If <code>true</code>, a value is displayed even if no items are selected.<br>In order to display a meaningful value, a function can be passed to the <code>renderValue</code> prop which returns the value to be displayed when no items are selected.<br>⚠️ When using this prop, make sure the label doesn&#39;t overlap with the empty displayed value. The label should either be hidden or forced to a shrunk state.",
-    "error": "If <code>true</code>, the <code>input</code> will indicate an error. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.",
     "IconComponent": "The icon that displays the arrow.",
     "id": "The <code>id</code> of the wrapper element or the <code>select</code> element when <code>native</code>.",
     "input": "An <code>Input</code> element; does not have to be a material-ui specific <code>Input</code>.",

From 14cfbd90cf523e755cb6c7bc1bf2a73b46ef5398 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Sat, 1 Apr 2023 11:30:13 +0000
Subject: [PATCH 09/13] implement feedback

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../src/NativeSelect/NativeSelectInput.js     |   2 +-
 .../NativeSelect/NativeSelectInput.test.js    |  41 +++++++
 .../mui-material/src/Select/Select.test.js    | 102 +++++++++---------
 3 files changed, 94 insertions(+), 51 deletions(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
index 2c0c704f374bd5..b9ff1c48cbc182 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.js
@@ -80,7 +80,7 @@ const NativeSelectSelect = styled('select', {
     return [
       styles.select,
       styles[ownerState.variant],
-      styles.error,
+      ownerState.error && styles.error,
       { [`&.${nativeSelectClasses.multiple}`]: styles.multiple },
     ];
   },
diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
index fe3d3b2e3497c6..955e054fde9e0b 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -111,4 +111,45 @@ describe('<NativeSelectInput />', () => {
       ).to.toHaveComputedStyle(combinedStyle);
     });
   });
+
+  describe('theme styleOverrides:', () => {
+    it('should override with error style when `select` has `error` state', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
+
+      const iconStyle = { color: 'rgb(255, 0, 0)' };
+      const selectStyle = { color: 'rgb(255, 192, 203)' };
+
+      const theme = createTheme({
+        components: {
+          MuiNativeSelect: {
+            styleOverrides: {
+              icon: (props) => ({
+                ...(props.ownerState.error && iconStyle),
+              }),
+              select: (props) => ({
+                ...(props.ownerState.error && selectStyle),
+              }),
+            },
+          },
+        },
+      });
+
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <NativeSelectInput error IconComponent="div">
+            <option value={'first'}>First</option>
+            <option value={'second'}>Second</option>
+          </NativeSelectInput>
+        </ThemeProvider>,
+      );
+      expect(container.querySelector(`.${nativeSelectClasses.select}`)).to.toHaveComputedStyle(
+        selectStyle,
+      );
+      expect(container.querySelector(`.${nativeSelectClasses.icon}`)).to.toHaveComputedStyle(
+        iconStyle,
+      );
+    });
+  });
 });
diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index f682bdd93958b1..314e39f29870b0 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1440,68 +1440,70 @@ describe('<Select />', () => {
     expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
   });
 
-  it('it should override with error style when `native select` has `error` state', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
+  describe('theme styleOverrides:', () => {
+    it('should override with error style when `native select` has `error` state', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
 
-    const iconStyle = { color: 'rgb(255, 0, 0)' };
+      const iconStyle = { color: 'rgb(255, 0, 0)' };
 
-    const theme = createTheme({
-      components: {
-        MuiNativeSelect: {
-          styleOverrides: {
-            icon: (props) => ({
-              ...(props.ownerState.error && iconStyle),
-            }),
+      const theme = createTheme({
+        components: {
+          MuiNativeSelect: {
+            styleOverrides: {
+              icon: (props) => ({
+                ...(props.ownerState.error && iconStyle),
+              }),
+            },
           },
         },
-      },
-    });
+      });
 
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <Select value="first" error IconComponent="div" native>
-          <option value="first">first</option>
-        </Select>
-      </ThemeProvider>,
-    );
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Select value="first" error IconComponent="div" native>
+            <option value="first">first</option>
+          </Select>
+        </ThemeProvider>,
+      );
 
-    expect(container.getElementsByClassName(nativeSelectClasses.icon)[0]).to.toHaveComputedStyle(
-      iconStyle,
-    );
-  });
+      expect(container.querySelector(`.${nativeSelectClasses.icon}`)).to.toHaveComputedStyle(
+        iconStyle,
+      );
+    });
 
-  it('it should override with error style when `select` has `error` state', function test() {
-    if (/jsdom/.test(window.navigator.userAgent)) {
-      this.skip();
-    }
+    it('should override with error style when `select` has `error` state', function test() {
+      if (/jsdom/.test(window.navigator.userAgent)) {
+        this.skip();
+      }
 
-    const iconStyle = { color: 'rgb(255, 0, 0)' };
-    const selectStyle = { color: 'rgb(255, 192, 203)' };
+      const iconStyle = { color: 'rgb(255, 0, 0)' };
+      const selectStyle = { color: 'rgb(255, 192, 203)' };
 
-    const theme = createTheme({
-      components: {
-        MuiSelect: {
-          styleOverrides: {
-            icon: (props) => ({
-              ...(props.ownerState.error && iconStyle),
-            }),
-            select: (props) => ({
-              ...(props.ownerState.error && selectStyle),
-            }),
+      const theme = createTheme({
+        components: {
+          MuiSelect: {
+            styleOverrides: {
+              icon: (props) => ({
+                ...(props.ownerState.error && iconStyle),
+              }),
+              select: (props) => ({
+                ...(props.ownerState.error && selectStyle),
+              }),
+            },
           },
         },
-      },
-    });
+      });
 
-    const { container } = render(
-      <ThemeProvider theme={theme}>
-        <Select value="" error IconComponent="div" />
-      </ThemeProvider>,
-    );
-    expect(container.getElementsByClassName(classes.select)[0]).to.toHaveComputedStyle(selectStyle);
-    expect(container.getElementsByClassName(classes.icon)[0]).to.toHaveComputedStyle(iconStyle);
+      const { container } = render(
+        <ThemeProvider theme={theme}>
+          <Select value="" error IconComponent="div" />
+        </ThemeProvider>,
+      );
+      expect(container.querySelector(`.${classes.select}`)).to.toHaveComputedStyle(selectStyle);
+      expect(container.querySelector(`.${classes.icon}`)).to.toHaveComputedStyle(iconStyle);
+    });
   });
 
   ['standard', 'outlined', 'filled'].forEach((variant) => {

From cc8175fdf340259005357e1d3ea7c213f0904fe9 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 3 Apr 2023 12:29:52 +0530
Subject: [PATCH 10/13] Update
 packages/mui-material/src/NativeSelect/NativeSelectInput.test.js

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 .../mui-material/src/NativeSelect/NativeSelectInput.test.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
index 955e054fde9e0b..96bfe6f2bf2936 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -144,7 +144,7 @@ describe('<NativeSelectInput />', () => {
           </NativeSelectInput>
         </ThemeProvider>,
       );
-      expect(container.querySelector(`.${nativeSelectClasses.select}`)).to.toHaveComputedStyle(
+      expect(container.querySelector(`.${nativeSelectClasses.select}`)).toHaveComputedStyle(
         selectStyle,
       );
       expect(container.querySelector(`.${nativeSelectClasses.icon}`)).to.toHaveComputedStyle(

From 549698c951e709ae94c290cb2da78a3738045c04 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 3 Apr 2023 12:30:03 +0530
Subject: [PATCH 11/13] Update
 packages/mui-material/src/NativeSelect/NativeSelectInput.test.js

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 .../mui-material/src/NativeSelect/NativeSelectInput.test.js     | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
index 96bfe6f2bf2936..28e4a4867f5a0c 100644
--- a/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
+++ b/packages/mui-material/src/NativeSelect/NativeSelectInput.test.js
@@ -147,7 +147,7 @@ describe('<NativeSelectInput />', () => {
       expect(container.querySelector(`.${nativeSelectClasses.select}`)).toHaveComputedStyle(
         selectStyle,
       );
-      expect(container.querySelector(`.${nativeSelectClasses.icon}`)).to.toHaveComputedStyle(
+      expect(container.querySelector(`.${nativeSelectClasses.icon}`)).toHaveComputedStyle(
         iconStyle,
       );
     });

From 06b0b6e8074098077c15f616c033274157ee20f7 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 3 Apr 2023 12:30:11 +0530
Subject: [PATCH 12/13] Update packages/mui-material/src/Select/Select.test.js

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material/src/Select/Select.test.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index 314e39f29870b0..aa807fc1f91c79 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1468,7 +1468,7 @@ describe('<Select />', () => {
         </ThemeProvider>,
       );
 
-      expect(container.querySelector(`.${nativeSelectClasses.icon}`)).to.toHaveComputedStyle(
+      expect(container.querySelector(`.${nativeSelectClasses.icon}`)).toHaveComputedStyle(
         iconStyle,
       );
     });

From 7fb931818566160da8a2a479024d0e65d6b054b8 Mon Sep 17 00:00:00 2001
From: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
Date: Mon, 3 Apr 2023 12:30:19 +0530
Subject: [PATCH 13/13] Update packages/mui-material/src/Select/Select.test.js

Signed-off-by: Zeeshan Tamboli <zeeshan.tamboli@gmail.com>
---
 packages/mui-material/src/Select/Select.test.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Select/Select.test.js b/packages/mui-material/src/Select/Select.test.js
index aa807fc1f91c79..5f27e00467ffde 100644
--- a/packages/mui-material/src/Select/Select.test.js
+++ b/packages/mui-material/src/Select/Select.test.js
@@ -1501,8 +1501,8 @@ describe('<Select />', () => {
           <Select value="" error IconComponent="div" />
         </ThemeProvider>,
       );
-      expect(container.querySelector(`.${classes.select}`)).to.toHaveComputedStyle(selectStyle);
-      expect(container.querySelector(`.${classes.icon}`)).to.toHaveComputedStyle(iconStyle);
+      expect(container.querySelector(`.${classes.select}`)).toHaveComputedStyle(selectStyle);
+      expect(container.querySelector(`.${classes.icon}`)).toHaveComputedStyle(iconStyle);
     });
   });