init project

packages/mui-material/src/OutlinedInput/NotchedOutline.d.ts

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { InternalStandardProps as StandardProps } from '../internal';
+
+export interface NotchedOutlineProps
+  extends StandardProps<React.FieldsetHTMLAttributes<HTMLFieldSetElement>> {
+  disabled?: boolean;
+  error?: boolean;
+  focused?: boolean;
+  label?: React.ReactNode;
+  notched: boolean;
+}
+
+export type NotchedOutlineClassKey = keyof NonNullable<NotchedOutlineProps['classes']>;
+
+declare const NotchedOutline: React.JSXElementConstructor<NotchedOutlineProps>;
+
+export default NotchedOutline;

packages/mui-material/src/OutlinedInput/NotchedOutline.js

@@ -0,0 +1,138 @@
+'use client';
+import PropTypes from 'prop-types';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+
+const NotchedOutlineRoot = styled('fieldset', {
+  name: 'MuiNotchedOutlined',
+  shouldForwardProp: rootShouldForwardProp,
+})({
+  textAlign: 'left',
+  position: 'absolute',
+  bottom: 0,
+  right: 0,
+  top: -5,
+  left: 0,
+  margin: 0,
+  padding: '0 8px',
+  pointerEvents: 'none',
+  borderRadius: 'inherit',
+  borderStyle: 'solid',
+  borderWidth: 1,
+  overflow: 'hidden',
+  minWidth: '0%',
+});
+
+const NotchedOutlineLegend = styled('legend', {
+  name: 'MuiNotchedOutlined',
+  shouldForwardProp: rootShouldForwardProp,
+})(
+  memoTheme(({ theme }) => ({
+    float: 'unset', // Fix conflict with bootstrap
+    width: 'auto', // Fix conflict with bootstrap
+    overflow: 'hidden', // Fix Horizontal scroll when label too long
+    variants: [
+      {
+        props: ({ ownerState }) => !ownerState.withLabel,
+        style: {
+          padding: 0,
+          lineHeight: '11px', // sync with `height` in `legend` styles
+          transition: theme.transitions.create('width', {
+            duration: 150,
+            easing: theme.transitions.easing.easeOut,
+          }),
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.withLabel,
+        style: {
+          display: 'block', // Fix conflict with normalize.css and sanitize.css
+          padding: 0,
+          height: 11, // sync with `lineHeight` in `legend` styles
+          fontSize: '0.75em',
+          visibility: 'hidden',
+          maxWidth: 0.01,
+          transition: theme.transitions.create('max-width', {
+            duration: 50,
+            easing: theme.transitions.easing.easeOut,
+          }),
+          whiteSpace: 'nowrap',
+          '& > span': {
+            paddingLeft: 5,
+            paddingRight: 5,
+            display: 'inline-block',
+            opacity: 0,
+            visibility: 'visible',
+          },
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.withLabel && ownerState.notched,
+        style: {
+          maxWidth: '100%',
+          transition: theme.transitions.create('max-width', {
+            duration: 100,
+            easing: theme.transitions.easing.easeOut,
+            delay: 50,
+          }),
+        },
+      },
+    ],
+  })),
+);
+
+/**
+ * @ignore - internal component.
+ */
+export default function NotchedOutline(props) {
+  const { children, classes, className, label, notched, ...other } = props;
+  const withLabel = label != null && label !== '';
+  const ownerState = {
+    ...props,
+    notched,
+    withLabel,
+  };
+  return (
+    <NotchedOutlineRoot aria-hidden className={className} ownerState={ownerState} {...other}>
+      <NotchedOutlineLegend ownerState={ownerState}>
+        {/* Use the nominal use case of the legend, avoid rendering artefacts. */}
+        {withLabel ? (
+          <span>{label}</span>
+        ) : (
+          // notranslate needed while Google Translate will not fix zero-width space issue
+          <span className="notranslate" aria-hidden>
+            &#8203;
+          </span>
+        )}
+      </NotchedOutlineLegend>
+    </NotchedOutlineRoot>
+  );
+}
+
+NotchedOutline.propTypes /* remove-proptypes */ = {
+  /**
+   * The content of the component.
+   */
+  children: PropTypes.node,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * @ignore
+   */
+  className: PropTypes.string,
+  /**
+   * The label.
+   */
+  label: PropTypes.node,
+  /**
+   * If `true`, the outline is notched to accommodate the label.
+   */
+  notched: PropTypes.bool.isRequired,
+  /**
+   * @ignore
+   */
+  style: PropTypes.object,
+};

packages/mui-material/src/OutlinedInput/NotchedOutline.test.js

@@ -0,0 +1,67 @@
+import { expect } from 'chai';
+import { createRenderer, isJsdom } from '@mui/internal-test-utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import NotchedOutline from './NotchedOutline';
+
+describe('<NotchedOutline />', () => {
+  const { render } = createRenderer();
+
+  const defaultProps = {
+    notched: true,
+    label: 'My label',
+  };
+
+  it('should pass props', () => {
+    const { container } = render(
+      <NotchedOutline
+        {...defaultProps}
+        className="notched-outline"
+        style={{
+          width: 17,
+        }}
+      />,
+    );
+
+    expect(container.querySelector('fieldset')).to.have.class('notched-outline');
+    expect(container.querySelector('fieldset').style.width).to.equal('17px');
+  });
+
+  it('should set alignment rtl', () => {
+    const { container: container1 } = render(
+      <ThemeProvider
+        theme={createTheme({
+          direction: 'ltr',
+        })}
+      >
+        <NotchedOutline {...defaultProps} />
+      </ThemeProvider>,
+    );
+    expect(container1.querySelector('fieldset')).toHaveComputedStyle({
+      paddingLeft: '8px',
+    });
+
+    const { container: container2 } = render(
+      <ThemeProvider
+        theme={createTheme({
+          direction: 'rtl',
+        })}
+      >
+        <NotchedOutline {...defaultProps} />
+      </ThemeProvider>,
+    );
+    expect(container2.querySelector('fieldset')).toHaveComputedStyle({
+      paddingRight: '8px',
+    });
+  });
+
+  it.skipIf(isJsdom())(
+    'should not set padding (notch) for empty, null or undefined label props',
+    function test() {
+      const spanStyle = { paddingLeft: '0px', paddingRight: '0px' };
+      ['', undefined, null].forEach((prop) => {
+        const { container: container1 } = render(<NotchedOutline {...defaultProps} label={prop} />);
+        expect(container1.querySelector('span')).toHaveComputedStyle(spanStyle);
+      });
+    },
+  );
+});

packages/mui-material/src/OutlinedInput/OutlinedInput.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { SxProps } from '@mui/system';
+import { CreateSlotsAndSlotProps, SlotProps } from '../utils/types';
+import { Theme } from '../styles';
+import { InternalStandardProps as StandardProps } from '../internal';
+import { InputBaseProps } from '../InputBase';
+import { OutlinedInputClasses } from './outlinedInputClasses';
+
+interface OutlinedInputSlots {
+  /**
+   * The component that renders the notchedOutline slot.
+   * @default NotchedOutline
+   */
+  notchedOutline: React.ElementType;
+}
+
+type OutlinedInputSlotsAndSlotProps = CreateSlotsAndSlotProps<
+  OutlinedInputSlots,
+  {
+    notchedOutline: SlotProps<'fieldset', {}, OutlinedInputOwnerState>;
+  }
+> & {
+  slots?: InputBaseProps['slots'];
+  slotProps?: InputBaseProps['slotProps'];
+};
+
+export interface OutlinedInputProps
+  extends Omit<StandardProps<InputBaseProps>, 'slots' | 'slotProps'>,
+    OutlinedInputSlotsAndSlotProps {
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes?: Partial<OutlinedInputClasses>;
+  /**
+   * The label of the `input`. It is only used for layout. The actual labelling
+   * is handled by `InputLabel`.
+   */
+  label?: React.ReactNode;
+  /**
+   * If `true`, the outline is notched to accommodate the label.
+   */
+  notched?: boolean;
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx?: SxProps<Theme>;
+}
+
+export interface OutlinedInputOwnerState extends Omit<OutlinedInputProps, 'slots' | 'slotProps'> {}
+
+/**
+ *
+ * Demos:
+ *
+ * - [Number Field](https://mui.com/material-ui/react-number-field/)
+ * - [Text Field](https://mui.com/material-ui/react-text-field/)
+ *
+ * API:
+ *
+ * - [OutlinedInput API](https://mui.com/material-ui/api/outlined-input/)
+ * - inherits [InputBase API](https://mui.com/material-ui/api/input-base/)
+ */
+declare const OutlinedInput: ((props: OutlinedInputProps) => React.JSX.Element) & {
+  muiName: string;
+};
+
+export default OutlinedInput;

packages/mui-material/src/OutlinedInput/OutlinedInput.js

@@ -0,0 +1,463 @@
+'use client';
+import * as React from 'react';
+import PropTypes from 'prop-types';
+import refType from '@mui/utils/refType';
+import composeClasses from '@mui/utils/composeClasses';
+import NotchedOutline from './NotchedOutline';
+import useFormControl from '../FormControl/useFormControl';
+import formControlState from '../FormControl/formControlState';
+import rootShouldForwardProp from '../styles/rootShouldForwardProp';
+import { styled } from '../zero-styled';
+import memoTheme from '../utils/memoTheme';
+import createSimplePaletteValueFilter from '../utils/createSimplePaletteValueFilter';
+import { useDefaultProps } from '../DefaultPropsProvider';
+import outlinedInputClasses, { getOutlinedInputUtilityClass } from './outlinedInputClasses';
+import InputBase, {
+  rootOverridesResolver as inputBaseRootOverridesResolver,
+  inputOverridesResolver as inputBaseInputOverridesResolver,
+  InputBaseRoot,
+  InputBaseInput,
+} from '../InputBase/InputBase';
+import useSlot from '../utils/useSlot';
+
+const useUtilityClasses = (ownerState) => {
+  const { classes } = ownerState;
+
+  const slots = {
+    root: ['root'],
+    notchedOutline: ['notchedOutline'],
+    input: ['input'],
+  };
+
+  const composedClasses = composeClasses(slots, getOutlinedInputUtilityClass, classes);
+
+  return {
+    ...classes, // forward classes to the InputBase
+    ...composedClasses,
+  };
+};
+
+const OutlinedInputRoot = styled(InputBaseRoot, {
+  shouldForwardProp: (prop) => rootShouldForwardProp(prop) || prop === 'classes',
+  name: 'MuiOutlinedInput',
+  slot: 'Root',
+  overridesResolver: inputBaseRootOverridesResolver,
+})(
+  memoTheme(({ theme }) => {
+    const borderColor =
+      theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+    return {
+      position: 'relative',
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+      [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+        borderColor: (theme.vars || theme).palette.text.primary,
+      },
+      // Reset on touch devices, it doesn't add specificity
+      '@media (hover: none)': {
+        [`&:hover .${outlinedInputClasses.notchedOutline}`]: {
+          borderColor: theme.vars
+            ? theme.alpha(theme.vars.palette.common.onBackground, 0.23)
+            : borderColor,
+        },
+      },
+      [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+        borderWidth: 2,
+      },
+      variants: [
+        ...Object.entries(theme.palette)
+          .filter(createSimplePaletteValueFilter())
+          .map(([color]) => ({
+            props: { color },
+            style: {
+              [`&.${outlinedInputClasses.focused} .${outlinedInputClasses.notchedOutline}`]: {
+                borderColor: (theme.vars || theme).palette[color].main,
+              },
+            },
+          })),
+        {
+          props: {}, // to override the above style
+          style: {
+            [`&.${outlinedInputClasses.error} .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: (theme.vars || theme).palette.error.main,
+            },
+            [`&.${outlinedInputClasses.disabled} .${outlinedInputClasses.notchedOutline}`]: {
+              borderColor: (theme.vars || theme).palette.action.disabled,
+            },
+          },
+        },
+        {
+          props: ({ ownerState }) => ownerState.startAdornment,
+          style: {
+            paddingLeft: 14,
+          },
+        },
+        {
+          props: ({ ownerState }) => ownerState.endAdornment,
+          style: {
+            paddingRight: 14,
+          },
+        },
+        {
+          props: ({ ownerState }) => ownerState.multiline,
+          style: {
+            padding: '16.5px 14px',
+          },
+        },
+        {
+          props: ({ ownerState, size }) => ownerState.multiline && size === 'small',
+          style: {
+            padding: '8.5px 14px',
+          },
+        },
+      ],
+    };
+  }),
+);
+
+const NotchedOutlineRoot = styled(NotchedOutline, {
+  name: 'MuiOutlinedInput',
+  slot: 'NotchedOutline',
+})(
+  memoTheme(({ theme }) => {
+    const borderColor =
+      theme.palette.mode === 'light' ? 'rgba(0, 0, 0, 0.23)' : 'rgba(255, 255, 255, 0.23)';
+    return {
+      borderColor: theme.vars
+        ? theme.alpha(theme.vars.palette.common.onBackground, 0.23)
+        : borderColor,
+    };
+  }),
+);
+
+const OutlinedInputInput = styled(InputBaseInput, {
+  name: 'MuiOutlinedInput',
+  slot: 'Input',
+  overridesResolver: inputBaseInputOverridesResolver,
+})(
+  memoTheme(({ theme }) => ({
+    padding: '16.5px 14px',
+    ...(!theme.vars && {
+      '&:-webkit-autofill': {
+        WebkitBoxShadow: theme.palette.mode === 'light' ? null : '0 0 0 100px #266798 inset',
+        WebkitTextFillColor: theme.palette.mode === 'light' ? null : '#fff',
+        caretColor: theme.palette.mode === 'light' ? null : '#fff',
+        borderRadius: 'inherit',
+      },
+    }),
+    ...(theme.vars && {
+      '&:-webkit-autofill': {
+        borderRadius: 'inherit',
+      },
+      [theme.getColorSchemeSelector('dark')]: {
+        '&:-webkit-autofill': {
+          WebkitBoxShadow: '0 0 0 100px #266798 inset',
+          WebkitTextFillColor: '#fff',
+          caretColor: '#fff',
+        },
+      },
+    }),
+    variants: [
+      {
+        props: {
+          size: 'small',
+        },
+        style: {
+          padding: '8.5px 14px',
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.multiline,
+        style: {
+          padding: 0,
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.startAdornment,
+        style: {
+          paddingLeft: 0,
+        },
+      },
+      {
+        props: ({ ownerState }) => ownerState.endAdornment,
+        style: {
+          paddingRight: 0,
+        },
+      },
+    ],
+  })),
+);
+
+const OutlinedInput = React.forwardRef(function OutlinedInput(inProps, ref) {
+  const props = useDefaultProps({ props: inProps, name: 'MuiOutlinedInput' });
+  const {
+    components = {},
+    fullWidth = false,
+    inputComponent = 'input',
+    label,
+    multiline = false,
+    notched,
+    slots = {},
+    slotProps = {},
+    type = 'text',
+    ...other
+  } = props;
+
+  const classes = useUtilityClasses(props);
+
+  const muiFormControl = useFormControl();
+  const fcs = formControlState({
+    props,
+    muiFormControl,
+    states: ['color', 'disabled', 'error', 'focused', 'hiddenLabel', 'size', 'required'],
+  });
+
+  const ownerState = {
+    ...props,
+    color: fcs.color || 'primary',
+    disabled: fcs.disabled,
+    error: fcs.error,
+    focused: fcs.focused,
+    formControl: muiFormControl,
+    fullWidth,
+    hiddenLabel: fcs.hiddenLabel,
+    multiline,
+    size: fcs.size,
+    type,
+  };
+
+  const RootSlot = slots.root ?? components.Root ?? OutlinedInputRoot;
+  const InputSlot = slots.input ?? components.Input ?? OutlinedInputInput;
+
+  const [NotchedSlot, notchedProps] = useSlot('notchedOutline', {
+    elementType: NotchedOutlineRoot,
+    className: classes.notchedOutline,
+    shouldForwardComponentProp: true,
+    ownerState,
+    externalForwardedProps: {
+      slots,
+      slotProps,
+    },
+    additionalProps: {
+      label:
+        label != null && label !== '' && fcs.required ? (
+          <React.Fragment>
+            {label}
+            &thinsp;{'*'}
+          </React.Fragment>
+        ) : (
+          label
+        ),
+    },
+  });
+
+  return (
+    <InputBase
+      slots={{ root: RootSlot, input: InputSlot }}
+      slotProps={slotProps}
+      renderSuffix={(state) => (
+        <NotchedSlot
+          {...notchedProps}
+          notched={
+            typeof notched !== 'undefined'
+              ? notched
+              : Boolean(state.startAdornment || state.filled || state.focused)
+          }
+        />
+      )}
+      fullWidth={fullWidth}
+      inputComponent={inputComponent}
+      multiline={multiline}
+      ref={ref}
+      type={type}
+      {...other}
+      classes={{
+        ...classes,
+        notchedOutline: null,
+      }}
+    />
+  );
+});
+
+OutlinedInput.propTypes /* remove-proptypes */ = {
+  // ┌────────────────────────────── Warning ──────────────────────────────┐
+  // │ These PropTypes are generated from the TypeScript type definitions. │
+  // │    To update them, edit the d.ts file and run `pnpm proptypes`.     │
+  // └─────────────────────────────────────────────────────────────────────┘
+  /**
+   * This prop helps users to fill forms faster, especially on mobile devices.
+   * The name can be confusing, as it's more like an autofill.
+   * You can learn more about it [following the specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill).
+   */
+  autoComplete: PropTypes.string,
+  /**
+   * If `true`, the `input` element is focused during the first mount.
+   */
+  autoFocus: PropTypes.bool,
+  /**
+   * Override or extend the styles applied to the component.
+   */
+  classes: PropTypes.object,
+  /**
+   * The color of the component.
+   * It supports both default and custom theme colors, which can be added as shown in the
+   * [palette customization guide](https://mui.com/material-ui/customization/palette/#custom-colors).
+   * The prop defaults to the value (`'primary'`) inherited from the parent FormControl component.
+   */
+  color: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
+    PropTypes.oneOf(['primary', 'secondary']),
+    PropTypes.string,
+  ]),
+  /**
+   * The components used for each slot inside.
+   *
+   * @deprecated use the `slots` prop instead. This prop will be removed in a future major release. See [Migrating from deprecated APIs](https://mui.com/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   *
+   * @default {}
+   */
+  components: PropTypes.shape({
+    Input: PropTypes.elementType,
+    Root: PropTypes.elementType,
+  }),
+  /**
+   * The default value. Use when the component is not controlled.
+   */
+  defaultValue: PropTypes.any,
+  /**
+   * If `true`, the component is disabled.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  disabled: PropTypes.bool,
+  /**
+   * End `InputAdornment` for this component.
+   */
+  endAdornment: PropTypes.node,
+  /**
+   * If `true`, the `input` will indicate an error.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  error: PropTypes.bool,
+  /**
+   * If `true`, the `input` will take up the full width of its container.
+   * @default false
+   */
+  fullWidth: PropTypes.bool,
+  /**
+   * The id of the `input` element.
+   */
+  id: PropTypes.string,
+  /**
+   * The component used for the `input` element.
+   * Either a string to use a HTML element or a component.
+   * @default 'input'
+   */
+  inputComponent: PropTypes.elementType,
+  /**
+   * [Attributes](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#attributes) applied to the `input` element.
+   * @default {}
+   */
+  inputProps: PropTypes.object,
+  /**
+   * Pass a ref to the `input` element.
+   */
+  inputRef: refType,
+  /**
+   * The label of the `input`. It is only used for layout. The actual labelling
+   * is handled by `InputLabel`.
+   */
+  label: PropTypes.node,
+  /**
+   * If `dense`, will adjust vertical spacing. This is normally obtained via context from
+   * FormControl.
+   * The prop defaults to the value (`'none'`) inherited from the parent FormControl component.
+   */
+  margin: PropTypes.oneOf(['dense', 'none']),
+  /**
+   * Maximum number of rows to display when multiline option is set to true.
+   */
+  maxRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * Minimum number of rows to display when multiline option is set to true.
+   */
+  minRows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * If `true`, a [TextareaAutosize](https://mui.com/material-ui/react-textarea-autosize/) element is rendered.
+   * @default false
+   */
+  multiline: PropTypes.bool,
+  /**
+   * Name attribute of the `input` element.
+   */
+  name: PropTypes.string,
+  /**
+   * If `true`, the outline is notched to accommodate the label.
+   */
+  notched: PropTypes.bool,
+  /**
+   * Callback fired when the value is changed.
+   *
+   * @param {React.ChangeEvent<HTMLTextAreaElement | HTMLInputElement>} event The event source of the callback.
+   * You can pull out the new value by accessing `event.target.value` (string).
+   */
+  onChange: PropTypes.func,
+  /**
+   * The short hint displayed in the `input` before the user enters a value.
+   */
+  placeholder: PropTypes.string,
+  /**
+   * It prevents the user from changing the value of the field
+   * (not from interacting with the field).
+   */
+  readOnly: PropTypes.bool,
+  /**
+   * If `true`, the `input` element is required.
+   * The prop defaults to the value (`false`) inherited from the parent FormControl component.
+   */
+  required: PropTypes.bool,
+  /**
+   * Number of rows to display when multiline option is set to true.
+   */
+  rows: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
+  /**
+   * The props used for each slot inside.
+   * @default {}
+   */
+  slotProps: PropTypes.shape({
+    input: PropTypes.object,
+    notchedOutline: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    root: PropTypes.object,
+  }),
+  /**
+   * The components used for each slot inside.
+   * @default {}
+   */
+  slots: PropTypes.shape({
+    input: PropTypes.elementType,
+    notchedOutline: PropTypes.elementType,
+    root: PropTypes.elementType,
+  }),
+  /**
+   * Start `InputAdornment` for this component.
+   */
+  startAdornment: PropTypes.node,
+  /**
+   * The system prop that allows defining system overrides as well as additional CSS styles.
+   */
+  sx: PropTypes.oneOfType([
+    PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])),
+    PropTypes.func,
+    PropTypes.object,
+  ]),
+  /**
+   * Type of the `input` element. It should be [a valid HTML5 input type](https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input#input_types).
+   * @default 'text'
+   */
+  type: PropTypes.string,
+  /**
+   * The value of the `input` element, required for a controlled component.
+   */
+  value: PropTypes.any,
+};
+
+OutlinedInput.muiName = 'Input';
+
+export default OutlinedInput;

packages/mui-material/src/OutlinedInput/OutlinedInput.spec.tsx

@@ -0,0 +1,18 @@
+import OutlinedInput from '@mui/material/OutlinedInput';
+
+function NoNotched() {
+  return null;
+}
+
+<OutlinedInput
+  slots={{
+    notchedOutline: NoNotched,
+  }}
+/>;
+<OutlinedInput
+  slotProps={{
+    notchedOutline: {
+      className: 'hidden',
+    },
+  }}
+/>;

packages/mui-material/src/OutlinedInput/OutlinedInput.test.js

@@ -0,0 +1,106 @@
+import * as React from 'react';
+import { expect } from 'chai';
+import { createRenderer } from '@mui/internal-test-utils';
+import { ThemeProvider, createTheme } from '@mui/material/styles';
+import OutlinedInput, { outlinedInputClasses as classes } from '@mui/material/OutlinedInput';
+import InputBase from '@mui/material/InputBase';
+import describeConformance from '../../test/describeConformance';
+
+describe('<OutlinedInput />', () => {
+  const { render } = createRenderer();
+
+  const CustomNotchedOutline = React.forwardRef(({ notched, ownerState, ...props }, ref) => (
+    <i ref={ref} data-testid="custom" {...props} />
+  ));
+
+  describeConformance(<OutlinedInput label="Label" />, () => ({
+    classes,
+    inheritComponent: InputBase,
+    render,
+    refInstanceof: window.HTMLDivElement,
+    muiName: 'MuiOutlinedInput',
+    testDeepOverrides: { slotName: 'input', slotClassName: classes.input },
+    testVariantProps: { variant: 'contained', fullWidth: true },
+    testStateOverrides: { prop: 'size', value: 'small', styleKey: 'sizeSmall' },
+    testLegacyComponentsProp: ['root', 'input'],
+    slots: {
+      // can't test with DOM element as InputBase places an ownerState prop on it unconditionally.
+      root: { expectedClassName: classes.root, testWithElement: null },
+      input: { expectedClassName: classes.input, testWithElement: null },
+      notchedOutline: {
+        expectedClassName: classes.notchedOutline,
+        testWithElement: CustomNotchedOutline,
+      },
+    },
+    skip: [
+      'componentProp',
+      'componentsProp',
+      'slotPropsCallback', // not supported yet
+      'slotPropsCallbackWithPropsAsOwnerState', // not supported yet
+    ],
+  }));
+
+  it('should render a NotchedOutline', () => {
+    const { container } = render(
+      <OutlinedInput classes={{ notchedOutline: 'notched-outlined' }} />,
+    );
+
+    expect(container.querySelector('.notched-outlined')).not.to.equal(null);
+  });
+
+  it('should set correct label prop on outline', () => {
+    const { container } = render(
+      <OutlinedInput
+        classes={{ notchedOutline: 'notched-outlined' }}
+        label={<div data-testid="label">label</div>}
+        required
+      />,
+    );
+    const notchOutlined = container.querySelector('.notched-outlined legend');
+    expect(notchOutlined).to.have.text('label\u2009*');
+  });
+
+  it('should forward classes to InputBase', () => {
+    render(<OutlinedInput error classes={{ error: 'error' }} />);
+    expect(document.querySelector('.error')).not.to.equal(null);
+  });
+
+  it('should respects the componentsProps if passed', () => {
+    render(<OutlinedInput componentsProps={{ root: { 'data-test': 'test' } }} />);
+    expect(document.querySelector('[data-test=test]')).not.to.equal(null);
+  });
+
+  it('should respect the classes coming from InputBase', () => {
+    render(
+      <OutlinedInput
+        data-test="test"
+        multiline
+        sx={{ [`&.${classes.multiline}`]: { mt: '10px' } }}
+      />,
+    );
+    expect(document.querySelector('[data-test=test]')).toHaveComputedStyle({ marginTop: '10px' });
+  });
+
+  it('should have ownerState in the theme style overrides', () => {
+    expect(() =>
+      render(
+        <ThemeProvider
+          theme={createTheme({
+            components: {
+              MuiOutlinedInput: {
+                styleOverrides: {
+                  root: ({ ownerState }) => ({
+                    // test that ownerState is not undefined
+                    ...(ownerState.disabled && {}),
+                  }),
+                },
+              },
+            },
+          })}
+        >
+          <OutlinedInput />
+        </ThemeProvider>,
+      ),
+    ).not.to.throw();
+  });
+});

packages/mui-material/src/OutlinedInput/index.d.ts

@@ -0,0 +1,5 @@
+export { default } from './OutlinedInput';
+export * from './OutlinedInput';
+
+export { default as outlinedInputClasses } from './outlinedInputClasses';
+export * from './outlinedInputClasses';

packages/mui-material/src/OutlinedInput/index.js

@@ -0,0 +1,4 @@
+export { default } from './OutlinedInput';
+
+export { default as outlinedInputClasses } from './outlinedInputClasses';
+export * from './outlinedInputClasses';

packages/mui-material/src/OutlinedInput/outlinedInputClasses.ts

@@ -0,0 +1,59 @@
+import generateUtilityClasses from '@mui/utils/generateUtilityClasses';
+import generateUtilityClass from '@mui/utils/generateUtilityClass';
+import { inputBaseClasses } from '../InputBase';
+
+export interface OutlinedInputClasses {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if the color is secondary. */
+  colorSecondary: string;
+  /** Styles applied to the root element if the component is focused. */
+  focused: string;
+  /** Styles applied to the root element if `disabled={true}`. */
+  disabled: string;
+  /** Styles applied to the root element if `startAdornment` is provided. */
+  adornedStart: string;
+  /** Styles applied to the root element if `endAdornment` is provided. */
+  adornedEnd: string;
+  /** State class applied to the root element if `error={true}`. */
+  error: string;
+  /** Styles applied to the input element if `size="small"`. */
+  sizeSmall: string;
+  /** Styles applied to the root element if `multiline={true}`. */
+  multiline: string;
+  /** Styles applied to the NotchedOutline element. */
+  notchedOutline: string;
+  /** Styles applied to the input element. */
+  input: string;
+  /** Styles applied to the input element if `size="small"`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#input-base-classes-MuiInputBase-input) and [.MuiInputBase-sizeSmall](/material-ui/api/input-base/#input-base-classes-MuiInputBase-sizeSmall) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  inputSizeSmall: string;
+  /** Styles applied to the input element if `multiline={true}`.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#input-base-classes-MuiInputBase-input) and [.MuiInputBase-multiline](/material-ui/api/input-base/#input-base-classes-MuiInputBase-multiline) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  inputMultiline: string;
+  /** Styles applied to the input element if `startAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#input-base-classes-MuiInputBase-input) and [.MuiInputBase-adornedStart](/material-ui/api/input-base/#input-base-classes-MuiInputBase-adornedStart) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  inputAdornedStart: string;
+  /** Styles applied to the input element if `endAdornment` is provided.
+   * @deprecated Combine the [.MuiInputBase-input](/material-ui/api/input-base/#input-base-classes-MuiInputBase-input) and [.MuiInputBase-adornedEnd](/material-ui/api/input-base/#input-base-classes-MuiInputBase-adornedEnd) classes instead. See [Migrating from deprecated APIs](/material-ui/migration/migrating-from-deprecated-apis/) for more details.
+   */
+  inputAdornedEnd: string;
+  /** Styles applied to the input element if `type="search"`. */
+  inputTypeSearch: string;
+}
+
+export type OutlinedInputClassKey = keyof OutlinedInputClasses;
+
+export function getOutlinedInputUtilityClass(slot: string): string {
+  return generateUtilityClass('MuiOutlinedInput', slot);
+}
+
+const outlinedInputClasses: OutlinedInputClasses = {
+  ...inputBaseClasses,
+  ...generateUtilityClasses('MuiOutlinedInput', ['root', 'notchedOutline', 'input']),
+};
+
+export default outlinedInputClasses;