'use client';
import * as React from 'react';
import { clsx } from '../../../clsx/dist/clsx.mjs';
import SelectInput from './SelectInput.mjs';
import formControlState from '../FormControl/formControlState.mjs';
import useFormControl from '../FormControl/useFormControl.mjs';
import ArrowDropDownIcon from '../internal/svg-icons/ArrowDropDown.mjs';
import NativeSelectInput from '../NativeSelect/NativeSelectInput.mjs';
import rootShouldForwardProp from '../styles/rootShouldForwardProp.mjs';
import { getSelectUtilityClasses } from './selectClasses.mjs';
import { jsx } from 'react/jsx-runtime';
import { useDefaultProps } from '../DefaultPropsProvider/DefaultPropsProvider.mjs';
import useForkRef from '../../utils/esm/useForkRef/useForkRef.mjs';
import getReactElementRef from '../../utils/esm/getReactElementRef/getReactElementRef.mjs';
import deepmerge from '../../utils/esm/deepmerge/deepmerge.mjs';
import composeClasses from '../../utils/esm/composeClasses/composeClasses.mjs';
import styled from '../styles/styled.mjs';
import FilledInput from '../FilledInput/FilledInput.mjs';
import OutlinedInput from '../OutlinedInput/OutlinedInput.mjs';
import Input from '../Input/Input.mjs';

const useUtilityClasses$d = ownerState => {
  const {
    classes
  } = ownerState;
  const slots = {
    root: ['root']
  };
  const composedClasses = composeClasses(slots, getSelectUtilityClasses, classes);
  return {
    ...classes,
    ...composedClasses
  };
};
const styledRootConfig = {
  name: 'MuiSelect',
  overridesResolver: (props, styles) => styles.root,
  shouldForwardProp: prop => rootShouldForwardProp(prop) && prop !== 'variant',
  slot: 'Root'
};
const StyledInput = styled(Input, styledRootConfig)('');
const StyledOutlinedInput = styled(OutlinedInput, styledRootConfig)('');
const StyledFilledInput = styled(FilledInput, styledRootConfig)('');
const Select$1 = /*#__PURE__*/React.forwardRef(function Select(inProps, ref) {
  const props = useDefaultProps({
    name: 'MuiSelect',
    props: inProps
  });
  const {
    autoWidth = false,
    children,
    classes: classesProp = {},
    className,
    defaultOpen = false,
    displayEmpty = false,
    IconComponent = ArrowDropDownIcon,
    id,
    input,
    inputProps,
    label,
    labelId,
    MenuProps,
    multiple = false,
    native = false,
    onClose,
    onOpen,
    open,
    renderValue,
    SelectDisplayProps,
    variant: variantProp = 'outlined',
    ...other
  } = props;
  const inputComponent = native ? NativeSelectInput : SelectInput;
  const muiFormControl = useFormControl();
  const fcs = formControlState({
    props,
    muiFormControl,
    states: ['variant', 'error']
  });
  const variant = fcs.variant || variantProp;
  const ownerState = {
    ...props,
    variant,
    classes: classesProp
  };
  const classes = useUtilityClasses$d(ownerState);
  const {
    root,
    ...restOfClasses
  } = classes;
  const InputComponent = input || {
    standard: /*#__PURE__*/jsx(StyledInput, {
      ownerState: ownerState
    }),
    outlined: /*#__PURE__*/jsx(StyledOutlinedInput, {
      label: label,
      ownerState: ownerState
    }),
    filled: /*#__PURE__*/jsx(StyledFilledInput, {
      ownerState: ownerState
    })
  }[variant];
  const inputComponentRef = useForkRef(ref, getReactElementRef(InputComponent));
  return /*#__PURE__*/jsx(React.Fragment, {
    children: /*#__PURE__*/React.cloneElement(InputComponent, {
      // Most of the logic is implemented in `SelectInput`.
      // The `Select` component is a simple API wrapper to expose something better to play with.
      inputComponent,
      inputProps: {
        children,
        error: fcs.error,
        IconComponent,
        variant,
        type: undefined,
        // We render a select. We can ignore the type provided by the `Input`.
        multiple,
        ...(native ? {
          id
        } : {
          autoWidth,
          defaultOpen,
          displayEmpty,
          labelId,
          MenuProps,
          onClose,
          onOpen,
          open,
          renderValue,
          SelectDisplayProps: {
            id,
            ...SelectDisplayProps
          }
        }),
        ...inputProps,
        classes: inputProps ? deepmerge(restOfClasses, inputProps.classes) : restOfClasses,
        ...(input ? input.props.inputProps : {})
      },
      ...((multiple && native || displayEmpty) && variant === 'outlined' ? {
        notched: true
      } : {}),
      ref: inputComponentRef,
      className: clsx(InputComponent.props.className, className, classes.root),
      // 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
      }),
      ...other
    })
  });
});
Select$1.muiName = 'Select';

export { Select$1 as default };
//# sourceMappingURL=Select.mjs.map
