import { a as __rest, _ as __assign } from '../tslib.es6-20a2a300.js';
import { jsxs, jsx } from 'react/jsx-runtime';
import { forwardRef, useState } from 'react';
import Icon from './Icon.js';
import IconButton from './IconButton.js';
import InputLabel from './InputLabel.js';
import FormHelperText from './FormHelperText.js';
import Select from './Select.js';
import { m as makeStyles } from '../makeStyles-c9a99c7a.js';
import { a as createStyles } from '../createStyles-16423e9e.js';
import { F as FormControl } from '../FormControl-1f6cf8f3.js';
import '../icons/ArrowRight.js';
import '../icons/ArrowRightCircle.js';
import '../icons/Check.js';
import '../icons/CheckCircle.js';
import '../icons/ChevronRight.js';
import '../icons/CrossCircle.js';
import '../icons/DollarSign.js';
import '../icons/InfoCircle.js';
import '../icons/Link.js';
import '../icons/TriangleUp.js';
import '../icons/TriangleDown.js';
import '../icons/TriangleLeft.js';
import '../icons/Copy.js';
import '../icons/SortUp.js';
import '../icons/Cross.js';
import '../icons/Search.js';
import '../icons/Range.js';
import '../theme/colors.js';
import '../defaultTheme-49a26576.js';
import '../IconButton-7563dc0d.js';
import '../clsx.m-6243b874.js';
import '../withStyles-99aeb25b.js';
import '../hoist-non-react-statics.cjs-b718ab87.js';
import '../capitalize-5d3e9aac.js';
import '../ButtonBase-11d3cdb5.js';
import 'react-dom';
import '../useForkRef-4ff8cc89.js';
import '../useEventCallback-8817ed1c.js';
import '../deprecatedPropType-0232df1e.js';
import '../useIsFocusVisible-c048447c.js';
import '../TransitionGroupContext-2ba64e99.js';
import '../refType-5cc24a92.js';
import '../elementTypeAcceptingRef-7677eeee.js';
import './Typography.js';
import '../_commonjsHelpers-57e89916.js';
import '../theme/fontSize.js';
import '../theme/fontWeight.js';
import '../theme/fontFamily.js';
import '../theme/lineHeight.js';
import '../Typography-649a8eff.js';
import '../formControlState-da4d15f8.js';
import '../useFormControl-dc7cf5d6.js';
import '../FormControlContext-64eed5c2.js';
import '../Box-581dc061.js';
import '../styled-339d0187.js';
import '../ownerDocument-e276d08d.js';
import '../useTheme-27496d89.js';
import '../Input-d5c36a50.js';
import '../Modal-5d521807.js';
import '../Portal-ea11d671.js';
import '../HTMLElementType-a5d51d34.js';
import '../elementAcceptingRef-29f38505.js';
import '../Paper-cfd8f963.js';
import '../utils-2b600105.js';
import '../useControlled-ca779f8e.js';
import '../createSvgIcon-6fb7d1b7.js';

var useStyles = makeStyles(function (theme) {
    return createStyles({
        root: {
            "& .MuiInputBase-root": {
                padding: "0 !important"
            },
            "& label + .MuiInput-formControl": {
                marginTop: theme.spacing(3.5)
            },
            "& .MuiSelect-icon": {
                display: "none"
            },
            "& .MuiSelect-select": {
                paddingRight: theme.spacing(6)
            },
            "& .MuiIconButton-root": {
                top: 0,
                right: 8,
                position: "absolute",
                pointerEvents: "none",
                height: "100%"
                // paddingRight: 24
            }
        }
    });
});
var SelectField = forwardRef(function (_a, ref) {
    var id = _a.id, label = _a.label, helperText = _a.helperText, error = _a.error, selectProps = _a.selectProps, children = _a.children, props = __rest(_a, ["id", "label", "helperText", "error", "selectProps", "children"]);
    var classes = useStyles();
    var _b = useState(false), isOpen = _b[0], setIsOpen = _b[1];
    var formControlProps = {
        ref: ref,
        fullWidth: props.fullWidth,
        required: props.required
    };
    return (jsxs(FormControl, __assign({ error: !!error, classes: classes }, formControlProps, { children: [label && jsx(InputLabel, __assign({ htmlFor: id }, { children: label }), void 0), jsx(Select, __assign({ id: id, "aria-describedby": id + "-select", endAdornment: jsx(IconButton, { iconProps: {
                        iconKey: "triangleUp",
                        color: isOpen ? "primary" : "secondary",
                        rotate: isOpen ? 0 : -180,
                        size: "xxs"
                    } }, void 0), onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); } }, selectProps, { children: children }), void 0), helperText && error && (jsx(FormHelperText, { id: id + "-text", text: helperText, startAdornment: jsx(Icon, { iconKey: "infoCircle", color: "inversePrimary", size: "xs" }, void 0) }, void 0))] }), void 0));
});

export { SelectField as default };
