From 3dae3dbb0062ebee2b9565a645a7137231b6b615 Mon Sep 17 00:00:00 2001
From: Albert Yu <albert@albertyu.co>
Date: Wed, 18 Oct 2023 13:50:26 +0800
Subject: [PATCH] [InputLabel][material-ui] InputLabel supports
 ownerState.focused for styleOverrides (#39470)

---
 .../mui-material/src/InputLabel/InputLabel.js |  4 ++-
 .../src/InputLabel/InputLabel.test.js         | 31 +++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/packages/mui-material/src/InputLabel/InputLabel.js b/packages/mui-material/src/InputLabel/InputLabel.js
index f95f2d15fc812b..f28ce9b43c832e 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.js
@@ -46,6 +46,7 @@ const InputLabelRoot = styled(FormLabel, {
       ownerState.size === 'small' && styles.sizeSmall,
       ownerState.shrink && styles.shrink,
       !ownerState.disableAnimation && styles.animated,
+      ownerState.focused && styles.focused,
       styles[ownerState.variant],
     ];
   },
@@ -141,7 +142,7 @@ const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
   const fcs = formControlState({
     props,
     muiFormControl,
-    states: ['size', 'variant', 'required'],
+    states: ['size', 'variant', 'required', 'focused'],
   });
 
   const ownerState = {
@@ -152,6 +153,7 @@ const InputLabel = React.forwardRef(function InputLabel(inProps, ref) {
     size: fcs.size,
     variant: fcs.variant,
     required: fcs.required,
+    focused: fcs.focused,
   };
 
   const classes = useUtilityClasses(ownerState);
diff --git a/packages/mui-material/src/InputLabel/InputLabel.test.js b/packages/mui-material/src/InputLabel/InputLabel.test.js
index 1a1b2a7e038f7c..76a4d338e2e352 100644
--- a/packages/mui-material/src/InputLabel/InputLabel.test.js
+++ b/packages/mui-material/src/InputLabel/InputLabel.test.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import { expect } from 'chai';
 import { describeConformance, act, createRenderer } from '@mui-internal/test-utils';
 import { ClassNames } from '@emotion/react';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
 import FormControl from '@mui/material/FormControl';
 import Input from '@mui/material/Input';
 import FormLabel from '@mui/material/FormLabel';
@@ -118,6 +119,36 @@ describe('<InputLabel />', () => {
         setProps({ shrink: true });
         expect(getByTestId('root')).to.have.class(classes.shrink);
       });
+
+      it('provides ownerState.focused in styleOverrides', () => {
+        const theme = createTheme({
+          components: {
+            MuiInputLabel: {
+              styleOverrides: {
+                root: (props) => {
+                  return {
+                    ...(props.ownerState.focused === true && {
+                      fontWeight: '700',
+                    }),
+                  };
+                },
+              },
+            },
+          },
+        });
+
+        const { getByText } = render(
+          <ThemeProvider theme={theme}>
+            <FormControl focused>
+              <InputLabel>Bold Test Label</InputLabel>
+            </FormControl>
+          </ThemeProvider>,
+        );
+
+        const label = getByText('Bold Test Label');
+
+        expect(getComputedStyle(label).fontWeight).to.equal('700');
+      });
     });
   });