import React, { forwardRef } from 'react';
import { makeStyles, withStyles, Typography, FormControl, NativeSelect, InputBase } from '@material-ui/core';
import PropTypes from 'prop-types';
const FluentInput = withStyles((theme) => ({
    root: {
        'label + &': {
            marginTop: theme.spacing(1)
        }
    },
    input: {
        borderRadius: 2,
        position: 'relative',
        border: '1px solid rgba(0, 0, 0, 0.23)',
        fontSize: 14,
        padding: '4px 8px',
        height: 20,
        transition: theme.transitions.create(['border-color', 'box-shadow']),
        '&:focus': {
            borderRadius: 2
        }
    }
}))(InputBase);
const useStyles = makeStyles((theme) => ({
    margin: {
        marginTop: theme.spacing(1),
        marginBottom: theme.spacing(1)
    }
}));
const FluentSimpleSelectComponent = ({ label, children, id, value, handleChange, defaultValue }, ref) => {
    const classes = useStyles();
    return (React.createElement("div", null, React.createElement(FormControl, { className: classes.margin }, React.createElement(Typography, { className: classes.label, style: {
            color: 'rgba(0, 0, 0, 0.54)',
            fontWeight: 400,
            letterSpacing: 0
        } }, label), React.createElement(NativeSelect, { id: id, inputRef: ref, value: value, onChange: handleChange, defaultValue: defaultValue, input: React.createElement(FluentInput, null), noShrink: "true" }, children))));
};
FluentSimpleSelectComponent.propTypes = {
    /**
     * Label that appears above the selector
     */
    label: PropTypes.string,
    /**
     * Contents of the selected options (<option></option>)
     */
    children: PropTypes.node,
    /**
     * Function to handle option change
     */
    handleChange: PropTypes.func,
    /**
     * Value: the value of the selected item
     */
    value: PropTypes.string
};
export const FluentSimpleSelect = forwardRef(FluentSimpleSelectComponent);
//# sourceMappingURL=FluentSimpleSelect.js.map